@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
50 lines (48 loc) • 1.67 kB
JavaScript
const generateStyle = componentTheme => {
return {
placeholder: {
color: componentTheme.placeholderColor,
padding: componentTheme.placeholderPadding,
border: `${componentTheme.placeholderBorder} dashed ${componentTheme.placeholderBorderColor}`,
borderRadius: componentTheme.placeholderBorderRadius,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'clip',
},
dragTarget: {
border: `${componentTheme.dragTargetBorderWidth} dashed ${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: `${componentTheme.focusBorderWidth} solid ${componentTheme.focusBorderColor}`,
borderRadius: `calc(${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