office-ui-fabric-react/lib/components/pickers/BasePicker.styles.js

Reusable React components for building experiences for Microsoft 365.

import { getGlobalClassNames, getInputFocusStyle, getPlaceholderStyles, hiddenContentStyle, HighContrastSelector, } from '../../Styling';
var GlobalClassNames = {
    root: 'ms-BasePicker',
    text: 'ms-BasePicker-text',
    itemsWrapper: 'ms-BasePicker-itemsWrapper',
    input: 'ms-BasePicker-input',
};
export function getStyles(props) {
    var _a, _b, _c;
    var className = props.className, theme = props.theme, isFocused = props.isFocused, inputClassName = props.inputClassName, disabled = props.disabled;
    if (!theme) {
        throw new Error('theme is undefined or null in base BasePicker getStyles function.');
    }
    var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
    var inputBorder = semanticColors.inputBorder, inputBorderHovered = semanticColors.inputBorderHovered, inputFocusBorderAlt = semanticColors.inputFocusBorderAlt;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    // placeholder style constants
    var placeholderStyles = [
        fonts.medium,
        {
            color: semanticColors.inputPlaceholderText,
            opacity: 1,
            selectors: (_a = {},
                _a[HighContrastSelector] = {
                    color: 'GrayText',
                },
                _a),
        },
    ];
    var disabledPlaceholderStyles = {
        color: semanticColors.disabledText,
        selectors: (_b = {},
            _b[HighContrastSelector] = {
                color: 'GrayText',
            },
            _b),
    };
    // The following lines are to create a semi-transparent color overlay for the disabled state with designer's approval.
    // @todo: investigate the performance cost of the calculation below and apply if negligible.
    //   Replacing with a static color for now.
    // const rgbColor: IRGB | undefined = cssColor(palette.neutralQuaternaryAlt);
    // const disabledOverlayColor = rgbColor ? `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.29)` : 'transparent';
    var disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';
    return {
        root: [classNames.root, className],
        text: [
            classNames.text,
            {
                display: 'flex',
                position: 'relative',
                flexWrap: 'wrap',
                alignItems: 'center',
                boxSizing: 'border-box',
                minWidth: 180,
                minHeight: 30,
                border: "1px solid " + inputBorder,
                borderRadius: effects.roundedCorner2,
            },
            !isFocused &&
                !disabled && {
                selectors: {
                    ':hover': {
                        borderColor: inputBorderHovered,
                    },
                },
            },
            isFocused && !disabled && getInputFocusStyle(inputFocusBorderAlt, effects.roundedCorner2),
            disabled && {
                borderColor: disabledOverlayColor,
                selectors: (_c = {
                        ':after': {
                            content: '""',
                            position: 'absolute',
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0,
                            background: disabledOverlayColor,
                        }
                    },
                    _c[HighContrastSelector] = {
                        borderColor: 'GrayText',
                        selectors: {
                            ':after': {
                                background: 'none',
                            },
                        },
                    },
                    _c),
            },
        ],
        itemsWrapper: [
            classNames.itemsWrapper,
            {
                display: 'flex',
                flexWrap: 'wrap',
                maxWidth: '100%',
            },
        ],
        input: [
            classNames.input,
            fonts.medium,
            {
                height: 30,
                border: 'none',
                flexGrow: 1,
                outline: 'none',
                padding: '0 6px 0',
                alignSelf: 'flex-end',
                borderRadius: effects.roundedCorner2,
                backgroundColor: 'transparent',
                color: semanticColors.inputText,
                selectors: {
                    '::-ms-clear': {
                        display: 'none',
                    },
                },
            },
            getPlaceholderStyles(placeholderStyles),
            disabled && getPlaceholderStyles(disabledPlaceholderStyles),
            inputClassName,
        ],
        screenReaderText: hiddenContentStyle,
    };
}
//# sourceMappingURL=BasePicker.styles.js.map