@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
78 lines (77 loc) • 2.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var generateStyle = function generateStyle(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")
/* 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: "".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'
}
};
};
var _default = exports["default"] = generateStyle;