@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
52 lines (50 loc) • 1.48 kB
JavaScript
const generateStyle = componentTheme => {
const msMaxWidth = 'max-width: 48rem'
const mq = `@media only screen and (${msMaxWidth})`
return {
categoriesWrapper: {
paddingBottom: componentTheme.categoriesWrapperPadding,
borderBottom: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`,
},
categoriesContainer: {
display: 'flex',
flexFlow: 'row wrap',
position: 'relative',
paddingBottom: componentTheme.categoriesContainerPadding,
},
categoryContainer: {
flexBasis: '50%',
[mq]: {
flexBasis: '100%',
},
},
categoryContainerWrapper: {
paddingRight: componentTheme.categoryContainerWrapperPadding,
},
categoryBody: {
border: `${componentTheme.borderWidth} solid ${componentTheme.borderColor}`,
},
categoryBodyDescriptionInput: {
padding: componentTheme.categoryDescriptionInputPadding,
backgroundColor: componentTheme.categoryDescriptionBackground,
},
categoryBodyAnswers: {
padding: componentTheme.categoryBodyAnswersPadding,
},
itemContainer: {
display: 'flex',
alignItems: 'flex-start',
paddingTop: componentTheme.itemContainerPadding,
},
itemContainerBody: {
flex: 1,
display: 'flex',
alignItems: 'center',
padding: componentTheme.itemContainerBodyPadding,
},
itemContainerActions: {
display: 'flex',
},
}
}
export default generateStyle