office-ui-fabric-react/lib-commonjs/components/DatePicker/DatePicker.styles.js

Reusable React components for building experiences for Microsoft 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var GlobalClassNames = {
    root: 'ms-DatePicker',
    callout: 'ms-DatePicker-callout',
    withLabel: 'ms-DatePicker-event--with-label',
    withoutLabel: 'ms-DatePicker-event--without-label',
    disabled: 'msDatePickerDisabled ',
};
var TEXTFIELD_HEIGHT = 32;
exports.styles = function (props) {
    var _a, _b;
    var className = props.className, theme = props.theme, disabled = props.disabled, underlined = props.underlined, label = props.label, isDatePickerShown = props.isDatePickerShown;
    var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
    var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
    var DatePickerIcon = {
        color: palette.neutralSecondary,
        fontSize: fonts.mediumPlus.fontSize,
        lineHeight: '18px',
        pointerEvents: 'none',
        position: 'absolute',
        right: '4px',
        padding: '5px',
    };
    return {
        root: [classNames.root, theme.fonts.medium, isDatePickerShown && 'is-open', Styling_1.normalize, className],
        textField: [
            {
                position: 'relative',
                selectors: {
                    '& input[readonly]': {
                        cursor: 'pointer',
                    },
                    input: {
                        selectors: {
                            '::-ms-clear': {
                                display: 'none',
                            },
                        },
                    },
                },
            },
            disabled && {
                selectors: {
                    '& input[readonly]': {
                        cursor: 'default',
                    },
                },
            },
        ],
        callout: [classNames.callout, { boxShadow: effects.elevation8 }],
        icon: [
            DatePickerIcon,
            label ? classNames.withLabel : classNames.withoutLabel,
            { paddingTop: '7px' },
            !disabled && [
                classNames.disabled,
                {
                    pointerEvents: 'initial',
                    cursor: 'pointer',
                },
            ],
            disabled && {
                color: semanticColors.disabledText,
                cursor: 'default',
            },
        ],
        readOnlyTextField: [
            {
                cursor: 'pointer',
                height: TEXTFIELD_HEIGHT,
                lineHeight: TEXTFIELD_HEIGHT - 2,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                selectors: (_a = {},
                    _a['&:focus'] = Styling_1.getInputFocusStyle(semanticColors.inputFocusBorderAlt, effects.roundedCorner2),
                    _a),
            },
            underlined && {
                lineHeight: TEXTFIELD_HEIGHT + 2,
            },
        ],
        readOnlyPlaceholder: (_b = {
                color: semanticColors.inputPlaceholderText
            },
            _b[Styling_1.HighContrastSelector] = {
                color: 'GrayText',
            },
            _b),
    };
};
//# sourceMappingURL=DatePicker.styles.js.map