office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
113 lines • 3.9 kB
JavaScript
import { HighContrastSelector, } from '../../Styling';
export var getStyles = function (props) {
var _a = props.checkBoxHeight, checkBoxHeight = _a === void 0 ? '18px' : _a, checked = props.checked, className = props.className, theme = props.theme;
var palette = theme.palette, semanticColors = theme.semanticColors;
var sharedCircleCheck = {
fontSize: checkBoxHeight,
position: 'absolute',
left: 0,
top: 0,
width: checkBoxHeight,
height: checkBoxHeight,
textAlign: 'center',
verticalAlign: 'middle'
};
return ({
root: [
'ms-Check',
{
// lineHeight currently needs to be a string to output without 'px'
lineHeight: '1',
width: checkBoxHeight,
height: checkBoxHeight,
verticalAlign: 'top',
position: 'relative',
userSelect: 'none',
selectors: {
':before': {
content: '""',
position: 'absolute',
top: '1px',
right: '1px',
bottom: '1px',
left: '1px',
borderRadius: '50%',
opacity: 1,
background: semanticColors.bodyBackground,
},
/**
* TODO: Come back to this once .checkHost has been
* converted to mergeStyles
*/
'.checkHost:hover &, .checkHost:focus &, &:hover, &:focus': {
opacity: 1
}
}
},
checked && [
'is-checked',
{
selectors: {
':before': {
background: palette.themePrimary,
opacity: 1,
selectors: (_b = {},
_b[HighContrastSelector] = {
background: 'Window'
},
_b)
}
}
},
],
className
],
circle: [
'ms-Check-circle',
sharedCircleCheck,
{
color: palette.neutralTertiaryAlt,
selectors: (_c = {},
_c[HighContrastSelector] = {
color: 'WindowText'
},
_c)
},
checked && {
color: palette.white
}
],
check: [
'ms-Check-check',
sharedCircleCheck,
{
opacity: 0,
color: palette.neutralTertiaryAlt,
fontSize: '16px',
left: '.5px',
selectors: (_d = {
':hover': {
opacity: 1
}
},
_d[HighContrastSelector] = {
MsHighContrastAdjust: 'none'
},
_d)
},
checked && {
opacity: 1,
color: palette.white,
fontWeight: 900,
selectors: (_e = {},
_e[HighContrastSelector] = {
border: 'none',
color: 'WindowText'
},
_e)
}
]
});
var _b, _c, _d, _e;
};
//# sourceMappingURL=Check.styles.js.map