@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
48 lines (47 loc) • 2.01 kB
JavaScript
var generateStyle = function(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)'
}
}
}
};
};
export default generateStyle;