@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
74 lines (72 loc) • 2.45 kB
JavaScript
const generateStyle = componentTheme => {
return {
mainContainer: {
display: 'flex',
flexDirection: 'column',
margin: `0 ${componentTheme.margin} ${componentTheme.margin} 0`,
padding: componentTheme.padding,
backgroundColor: componentTheme.background,
},
choicesContainer: {
display: 'flex',
flexWrap: 'wrap',
},
/*
The following !important margin is used because reactDnD forces a margin:0 inline style
Margin is necessary instead of padding to not carry part of the background along when dragging
*/
choicesBackground: {
position: 'relative',
display: 'flex',
flexWrap: 'wrap',
width: '100%',
backgroundColor: componentTheme.choiceBackground,
border: `${componentTheme.choiceBorderWidth} solid ${componentTheme.choiceBorderColor}`,
borderRadius: componentTheme.choiceBorderRadius,
marginTop: componentTheme.choiceMargin,
paddingRight: componentTheme.pillMargin,
paddingBottom: componentTheme.pillMargin,
'> div': {
/* stylelint-disable */
marginTop: `${componentTheme.pillMargin} !important`,
marginLeft: `${componentTheme.pillMargin} !important`,
/* stylelint-enable */
},
'span[role=button]': {
display: 'flex',
},
'&:focus': {
outline: 'none',
'&:before': {
opacity: 1,
transform: 'scale(1)',
},
},
/* replace these stylings when instui's FocusableElement gets implemented */
'&:before': {
content: '""',
position: 'absolute',
top: '-0.4rem',
left: '-0.4rem',
right: '-0.4rem',
bottom: '-0.4rem',
border: `${componentTheme.focusBorderWidth} solid ${componentTheme.focusBorderColor}`,
borderRadius: `calc(${componentTheme.focusBorderRadius} + 0.125rem)`,
transition: componentTheme.choicesBackgroundTransition,
opacity: 0,
transform: 'scale(0.02)',
pointerEvents: 'none',
},
},
emptyContainer: {
backgroundColor: componentTheme.emptyContainerBackground,
textAlign: 'center',
cursor: 'pointer',
border: `${componentTheme.emptyContainerorderWidth} dashed ${componentTheme.emptyContainerBorderColor}`,
marginTop: componentTheme.choiceMargin,
height: '4.3rem',
lineHeight: '4.3rem',
},
}
}
export default generateStyle