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

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var MS_CHECKBOX_LABEL_SIZE = '20px';
var MS_CHECKBOX_TRANSITION_DURATION = '200ms';
var MS_CHECKBOX_TRANSITION_TIMING = 'cubic-bezier(.4, 0, .23, 1)';
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
    var semanticColors = theme.semanticColors, palette = theme.palette;
    var checkmarkFontColor = semanticColors.inputForegroundChecked;
    var checkmarkFontColorCheckedDisabled = semanticColors.disabledBackground;
    var checkboxBorderColor = semanticColors.inputBorder;
    var checkboxBorderColorDisabled = semanticColors.disabledText;
    var checkboxBorderHoveredColor = semanticColors.inputBorderHovered;
    var checkboxBackgroundChecked = semanticColors.inputBackgroundChecked;
    var checkboxBackgroundCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
    var checkboxBackgroundDisabled = semanticColors.disabledText;
    var checkboxTextColor = semanticColors.bodyText;
    var checkboxTextColorDisabled = semanticColors.disabledText;
    var styles = {
        root: [
            Styling_1.getFocusStyle(theme),
            {
                padding: '0',
                border: 'none',
                background: 'none',
                margin: '0',
                outline: 'none',
                display: 'block',
                cursor: 'pointer',
            }
        ],
        label: {
            display: 'inline-flex',
            margin: '0 -4px',
            alignItems: 'center',
            cursor: 'pointer',
            position: 'relative',
            userSelect: 'none',
            textAlign: 'left'
        },
        labelReversed: {
            flexDirection: 'row-reverse',
            justifyContent: 'flex-end'
        },
        labelDisabled: {
            cursor: 'default'
        },
        checkbox: {
            display: 'flex',
            flexShrink: '0',
            alignItems: 'center',
            justifyContent: 'center',
            height: MS_CHECKBOX_LABEL_SIZE,
            width: MS_CHECKBOX_LABEL_SIZE,
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: checkboxBorderColor,
            margin: '0 4px',
            boxSizing: 'border-box',
            transitionProperty: 'background, border, border-color',
            transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,
            transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING,
            /* incase the icon is bigger than the box */
            overflow: 'hidden',
        },
        checkboxHovered: {
            borderColor: checkboxBorderHoveredColor,
        },
        checkboxChecked: {
            background: checkboxBackgroundChecked,
        },
        checkboxCheckedHovered: {
            background: checkboxBackgroundCheckedHovered,
        },
        checkboxDisabled: {
            background: checkboxBackgroundDisabled,
            borderColor: checkboxBorderColorDisabled
        },
        checkboxCheckedDisabled: {
            background: checkboxBackgroundDisabled,
            borderColor: checkboxBorderColorDisabled
        },
        checkmark: {
            opacity: '0',
            color: checkmarkFontColor
        },
        checkmarkChecked: {
            opacity: '1'
        },
        checkmarkDisabled: {},
        checkmarkCheckedDisabled: {
            opacity: '1',
            color: checkmarkFontColorCheckedDisabled,
        },
        text: {
            color: checkboxTextColor,
            margin: '0 4px',
            fontSize: Styling_1.FontSizes.medium
        },
        textHovered: {
            color: palette.black,
        },
        textDisabled: {
            color: checkboxTextColorDisabled,
        }
    };
    return Styling_1.mergeStyleSets(styles, customStyles);
});
//# sourceMappingURL=Checkbox.styles.js.map