@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
52 lines • 1.78 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var generateStyle = function generateStyle(componentTheme) {
var msMaxWidth = 'max-width: 48rem';
var mq = "@media only screen and (".concat(msMaxWidth, ")");
var mp = '@media print';
return {
mainContainer: {
display: 'flex',
flexDirection: 'column',
margin: "0 ".concat(componentTheme.mainContainerMargin, " ").concat(componentTheme.mainContainerMargin, " 0"),
padding: componentTheme.mainContainerPadding,
backgroundColor: componentTheme.mainContainerBackground
},
categoryBody: _defineProperty({
width: '100%',
display: 'flex',
flexWrap: 'wrap',
backgroundColor: componentTheme.bodyBackground,
padding: "".concat(componentTheme.bodyPadding, " 0"),
marginTop: componentTheme.bodyMargin,
borderRadius: componentTheme.bodyBorderRadius
}, mp, {
border: "".concat(componentTheme.categoryBodyBorderWidth, " solid ").concat(componentTheme.categoryBodyBorderColor)
}),
answersContainer: {
display: 'flex',
flexWrap: 'wrap'
},
feedbackWrapper: _defineProperty({
marginTop: componentTheme.feedbackWrapperMargin,
padding: "0 ".concat(componentTheme.feedbackWrapperPadding)
}, mq, {
flexBasis: '100%'
}),
unanswered: _defineProperty({
marginRight: componentTheme.unansweredMargin
}, mq, {
flexBasis: '100%'
}),
userResponse: {
backgroundColor: componentTheme.userResponseBackground,
paddingRight: componentTheme.userResponsePadding,
minWidth: '5rem'
},
noChoicesText: {
width: '100%',
margin: componentTheme.noChoicesMargin,
textAlign: 'center'
}
};
};
export default generateStyle;