@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
102 lines (101 loc) • 3.14 kB
JavaScript
var generateStyle = function(componentTheme) {
return {
question: {
border: "".concat(componentTheme.questionBorderWidth, " solid ").concat(componentTheme.questionBorderColor),
borderRadius: componentTheme.questionBorderRadius,
width: '100%',
padding: '5px 20px 10px 20px',
boxSizing: 'border-box',
cursor: 'pointer'
},
header: {
display: 'flex',
flexDirection: 'column'
},
headerSection: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: '10px'
},
editButtons: {
display: 'flex',
justifyContent: 'flex-end',
flex: '2 2 auto'
},
title: {
color: componentTheme.titleColor,
fontSize: componentTheme.titleFontSize,
flex: '20 20 auto',
margin: 0,
marginLeft: '33px',
overflowWrap: 'anywhere'
},
dragAndDrop: {
flex: '1 1 auto'
},
itemBody: {
marginLeft: '15px',
overflowWrap: 'anywhere',
wordBreak: 'break-word'
},
questionPosition: {
flex: '1 1 0',
alignItems: 'center',
fontSize: '1.4rem',
color: componentTheme.questionPositionColor
},
points: {
display: 'flex',
flex: '2 2 auto',
justifyContent: 'flex-end',
alignItems: 'center',
paddingRight: '5px'
},
stem: {
flex: '20 20 auto',
alignItems: 'center',
margin: 0,
fontSize: '1.1rem',
overflowWrap: 'anywhere'
},
legend: {
border: 'none'
},
deleteButton: {
backgroundColor: 'transparent',
border: 'default',
borderWidth: 'default',
borderRadius: 'default',
margin: 0,
padding: 0
},
editButton: {
backgroundColor: 'transparent',
border: 'default',
borderWidth: 'default',
borderRadius: 'default',
marginRight: '10px',
padding: 0
},
itemDescription: {
fontSize: componentTheme.itemBodyFontSize,
fontWeight: componentTheme.itemBodyFontWeight,
overflowWrap: 'anywhere'
},
labelWrapper: {
display: 'flex',
justifyContent: 'space-between'
},
// Fix for responsive iframe embeds in answer options (QUIZ-17667)
// InstUI CheckboxGroup labels have min-width constraint that collapses aspect-ratio wrapper divs
// Broad selector intentional: targets all divs to ensure proper expansion of aspect-ratio wrappers
// Tested to work without causing unintended layout side effects
fs_mask: {
'& div': {
minWidth: '100%'
}
}
};
};
export default generateStyle;