vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
88 lines • 2.02 kB
JavaScript
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
}
};
};