@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
54 lines (53 loc) • 1.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var generateStyle = function generateStyle(componentTheme) {
return {
placeholder: {
color: componentTheme.placeholderColor,
padding: componentTheme.placeholderPadding,
border: "".concat(componentTheme.placeholderBorder, " dashed ").concat(componentTheme.placeholderBorderColor),
borderRadius: componentTheme.placeholderBorderRadius,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'clip'
},
dragTarget: {
border: "".concat(componentTheme.dragTargetBorderWidth, " dashed ").concat(componentTheme.dragTargetBorderColor),
borderRadius: componentTheme.dragTargetBorderRadius,
display: 'inline-block',
verticalAlign: 'middle',
margin: componentTheme.dragTargetMargin,
overflow: 'visible',
position: 'relative',
padding: componentTheme.dragTargetPadding,
cursor: 'pointer',
/* Replace these focus indicator styles when instui's Focusable is implemented:
* https://instructure.atlassian.net/browse/INSTUI-933 */
'&:before': {
content: '""',
position: 'absolute',
top: '-0.25rem',
left: '-0.25rem',
right: '-0.25rem',
bottom: '-0.25rem',
border: "".concat(componentTheme.focusBorderWidth, " solid ").concat(componentTheme.focusBorderColor),
borderRadius: "calc(".concat(componentTheme.focusBorderRadius, " + 0.125rem)"),
transition: componentTheme.dragTargetTransition,
opacity: 0,
transform: 'scale(0.02)',
pointerEvents: 'none'
},
'&:focus': {
outline: 'none',
':before': {
opacity: 1,
transform: 'scale(1)'
}
}
}
};
};
var _default = exports["default"] = generateStyle;