@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
69 lines (68 loc) • 2.89 kB
JavaScript
var generateStyle = function(componentTheme) {
return {
mainContainer: {
display: 'flex',
flexDirection: 'column',
margin: "0 ".concat(componentTheme.margin, " ").concat(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: "".concat(componentTheme.choiceBorderWidth, " solid ").concat(componentTheme.choiceBorderColor),
borderRadius: componentTheme.choiceBorderRadius,
marginTop: componentTheme.choiceMargin,
paddingRight: componentTheme.pillMargin,
paddingBottom: componentTheme.pillMargin,
'> div': {
/* stylelint-disable */ marginTop: "".concat(componentTheme.pillMargin, " !important"),
marginLeft: "".concat(componentTheme.pillMargin, " !important")
},
'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: "".concat(componentTheme.focusBorderWidth, " solid ").concat(componentTheme.focusBorderColor),
borderRadius: "calc(".concat(componentTheme.focusBorderRadius, " + 0.125rem)"),
transition: componentTheme.choicesBackgroundTransition,
opacity: 0,
transform: 'scale(0.02)',
pointerEvents: 'none'
}
},
emptyContainer: {
backgroundColor: componentTheme.emptyContainerBackground,
textAlign: 'center',
cursor: 'pointer',
border: "".concat(componentTheme.emptyContainerorderWidth, " dashed ").concat(componentTheme.emptyContainerBorderColor),
marginTop: componentTheme.choiceMargin,
height: '4.3rem',
lineHeight: '4.3rem'
}
};
};
export default generateStyle;