UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

88 lines 2.02 kB
import { pxToRem } from '../../utils/size-to-rem'; export const commonStyles = _ref => { let { size, bleed } = _ref; return () => ({ boxSizing: 'border-box', height: pxToRem(size), width: pxToRem(size), display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '50%', transitionProperty: 'background-color, transform', transitionDuration: '0.25s', transitionTimingFunction: 'ease-in-out', '[aria-disabled=true]': { opacity: '0.3' }, ':active:not([aria-disabled=true])': { transform: 'scale(0.8)', willChange: 'transform' }, // Extends touch area outside IconButton dimensions ':after': { content: '""', position: 'absolute', height: pxToRem(44), width: pxToRem(44) }, extend: [{ condition: bleed, style: { margin: pxToRem(-8) } }] }); }; export const iconButtonStyle = (variant, intent) => _ref2 => { let { theme: { color: { foreground, ornament } } } = _ref2; if (variant === 'outline') { if (intent === 'destructive') return { borderColor: ornament.alert, borderStyle: 'solid', borderWidth: 1, ':hover:not([aria-disabled=true])': { background: foreground.alert } }; return { borderColor: foreground.primary, borderStyle: 'solid', borderWidth: 1, ':hover:not([aria-disabled=true])': { background: foreground.primary } }; } if (variant === 'media') { if (intent === 'destructive') { return { background: ornament.alert, ':hover:not([aria-disabled=true])': { background: foreground.primary } }; } return { background: foreground.primary, ':hover:not([aria-disabled=true])': { background: ornament.divider } }; } return { ':hover:not([aria-disabled=true])': { background: ornament.divider } }; };