@fluentui/react/lib-amd/components/DatePicker/DatePicker.styles.js

Reusable React components for building web experiences.

define(["require", "exports", "@fluentui/style-utilities"], function (require, exports, style_utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.styles = void 0;
    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;
    var styles = function (props) {
        var _a;
        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, fonts = theme.fonts;
        var classNames = (0, style_utilities_1.getGlobalClassNames)(GlobalClassNames, theme);
        var DatePickerIcon = {
            color: palette.neutralSecondary,
            fontSize: style_utilities_1.FontSizes.icon,
            lineHeight: '18px',
            pointerEvents: 'none',
            position: 'absolute',
            right: '4px',
            padding: '5px',
        };
        return {
            root: [classNames.root, theme.fonts.large, isDatePickerShown && 'is-open', style_utilities_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],
            icon: [
                DatePickerIcon,
                label ? classNames.withLabel : classNames.withoutLabel,
                { paddingTop: '7px' },
                !disabled && [
                    classNames.disabled,
                    {
                        pointerEvents: 'initial',
                        cursor: 'pointer',
                    },
                ],
                disabled && {
                    color: semanticColors.disabledText,
                    cursor: 'default',
                },
            ],
            statusMessage: [
                fonts.small,
                {
                    color: semanticColors.errorText,
                    marginTop: 5,
                },
            ],
            readOnlyTextField: [
                {
                    cursor: 'pointer',
                    height: TEXTFIELD_HEIGHT,
                    lineHeight: TEXTFIELD_HEIGHT - 2,
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                underlined && {
                    lineHeight: TEXTFIELD_HEIGHT + 2,
                },
            ],
            readOnlyPlaceholder: (_a = {
                    color: semanticColors.inputPlaceholderText
                },
                _a[style_utilities_1.HighContrastSelector] = {
                    color: 'GrayText',
                },
                _a),
        };
    };
    exports.styles = styles;
});
//# sourceMappingURL=DatePicker.styles.js.map