@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
103 lines (101 loc) • 2.63 kB
JavaScript
const generateStyle = componentTheme => {
return {
question: {
border: `${componentTheme.questionBorderWidth} solid ${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