office-ui-fabric-react/lib/components/Check/Check.styles.js

Reusable React components for building experiences for Office 365.

import { HighContrastSelector, getGlobalClassNames } from '../../Styling';
var GlobalClassNames = {
    root: 'ms-Check',
    circle: 'ms-Check-circle',
    check: 'ms-Check-check'
};
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 classNames = getGlobalClassNames(GlobalClassNames, theme);
    var sharedCircleCheck = {
        fontSize: checkBoxHeight,
        position: 'absolute',
        left: 0,
        top: 0,
        width: checkBoxHeight,
        height: checkBoxHeight,
        textAlign: 'center',
        verticalAlign: 'middle'
    };
    return {
        root: [
            classNames.root,
            {
                // 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: [
            classNames.circle,
            sharedCircleCheck,
            {
                color: palette.neutralTertiaryAlt,
                selectors: (_c = {},
                    _c[HighContrastSelector] = {
                        color: 'WindowText'
                    },
                    _c)
            },
            checked && {
                color: palette.white
            }
        ],
        check: [
            classNames.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)
            }
        ],
        checkHost: [{}]
    };
    var _b, _c, _d, _e;
};
//# sourceMappingURL=Check.styles.js.map