starface-outlook-sync-addin/node_modules/@fluentui/react/lib-amd/components/Breadcrumb/Breadcrumb.styles.js

define(["require", "exports", "tslib", "../../Styling", "../../Utilities"], function (require, exports, tslib_1, Styling_1, Utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.getStyles = void 0;
    var GlobalClassNames = {
        root: 'ms-Breadcrumb',
        list: 'ms-Breadcrumb-list',
        listItem: 'ms-Breadcrumb-listItem',
        chevron: 'ms-Breadcrumb-chevron',
        overflow: 'ms-Breadcrumb-overflow',
        overflowButton: 'ms-Breadcrumb-overflowButton',
        itemLink: 'ms-Breadcrumb-itemLink',
        item: 'ms-Breadcrumb-item',
    };
    var SingleLineTextStyle = {
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
    };
    var overflowButtonFontSize = 16;
    var chevronSmallFontSize = 8;
    var itemLineHeight = 36;
    var itemFontSize = 18;
    var MinimumScreenSelector = (0, Styling_1.getScreenSelector)(0, Styling_1.ScreenWidthMaxSmall);
    var MediumScreenSelector = (0, Styling_1.getScreenSelector)(Styling_1.ScreenWidthMinMedium, Styling_1.ScreenWidthMaxMedium);
    var getStyles = function (props) {
        var _a, _b, _c, _d, _e;
        var className = props.className, theme = props.theme;
        var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
        var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
        // Tokens
        var itemBackgroundHoveredColor = semanticColors.menuItemBackgroundHovered;
        var itemBackgroundPressedColor = semanticColors.menuItemBackgroundPressed;
        var itemTextColor = palette.neutralSecondary;
        var itemTextFontWeight = Styling_1.FontWeights.regular;
        var itemTextHoveredOrPressedColor = palette.neutralPrimary;
        var itemLastChildTextColor = palette.neutralPrimary;
        var itemLastChildTextFontWeight = Styling_1.FontWeights.semibold;
        var chevronButtonColor = palette.neutralSecondary;
        var overflowButtonColor = palette.neutralSecondary;
        var lastChildItemStyles = {
            fontWeight: itemLastChildTextFontWeight,
            color: itemLastChildTextColor,
        };
        var itemStateSelectors = {
            ':hover': {
                color: itemTextHoveredOrPressedColor,
                backgroundColor: itemBackgroundHoveredColor,
                cursor: 'pointer',
                selectors: (_a = {},
                    _a[Styling_1.HighContrastSelector] = {
                        color: 'Highlight',
                        backgroundColor: 'transparent',
                    },
                    _a),
            },
            ':active': {
                backgroundColor: itemBackgroundPressedColor,
                color: itemTextHoveredOrPressedColor,
            },
            '&:active:hover': {
                color: itemTextHoveredOrPressedColor,
                backgroundColor: itemBackgroundPressedColor,
            },
            '&:active, &:hover, &:active:hover': {
                textDecoration: 'none',
            },
        };
        var commonItemStyles = {
            color: itemTextColor,
            padding: '0 8px',
            lineHeight: itemLineHeight,
            fontSize: itemFontSize,
            fontWeight: itemTextFontWeight,
        };
        var overflowButtonHighContrastFocus = {
            left: 1,
            right: 1,
            top: 1,
            bottom: 1,
        };
        return {
            root: [
                classNames.root,
                fonts.medium,
                {
                    margin: '11px 0 1px',
                },
                className,
            ],
            list: [
                classNames.list,
                {
                    whiteSpace: 'nowrap',
                    padding: 0,
                    margin: 0,
                    display: 'flex',
                    alignItems: 'stretch',
                },
            ],
            listItem: [
                classNames.listItem,
                {
                    listStyleType: 'none',
                    margin: '0',
                    padding: '0',
                    display: 'flex',
                    position: 'relative',
                    alignItems: 'center',
                    selectors: {
                        '&:last-child .ms-Breadcrumb-itemLink': tslib_1.__assign(tslib_1.__assign({}, lastChildItemStyles), (_b = {}, _b[Styling_1.HighContrastSelector] = {
                            MsHighContrastAdjust: 'auto',
                            forcedColorAdjust: 'auto',
                        }, _b)),
                        '&:last-child .ms-Breadcrumb-item': lastChildItemStyles,
                    },
                },
            ],
            chevron: [
                classNames.chevron,
                {
                    color: chevronButtonColor,
                    fontSize: fonts.small.fontSize,
                    selectors: (_c = {},
                        _c[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
                        _c[MediumScreenSelector] = {
                            fontSize: chevronSmallFontSize,
                        },
                        _c[MinimumScreenSelector] = {
                            fontSize: chevronSmallFontSize,
                        },
                        _c),
                },
            ],
            overflow: [
                classNames.overflow,
                {
                    position: 'relative',
                    display: 'flex',
                    alignItems: 'center',
                },
            ],
            overflowButton: [
                classNames.overflowButton,
                (0, Styling_1.getFocusStyle)(theme, { highContrastStyle: overflowButtonHighContrastFocus }),
                SingleLineTextStyle,
                {
                    fontSize: overflowButtonFontSize,
                    color: overflowButtonColor,
                    height: '100%',
                    cursor: 'pointer',
                    selectors: tslib_1.__assign(tslib_1.__assign({}, itemStateSelectors), (_d = {}, _d[MinimumScreenSelector] = {
                        padding: '4px 6px',
                    }, _d[MediumScreenSelector] = {
                        fontSize: fonts.mediumPlus.fontSize,
                    }, _d)),
                },
            ],
            itemLink: [
                classNames.itemLink,
                (0, Styling_1.getFocusStyle)(theme),
                SingleLineTextStyle,
                tslib_1.__assign(tslib_1.__assign({}, commonItemStyles), { selectors: tslib_1.__assign((_e = { ':focus': {
                                color: palette.neutralDark,
                            } }, _e[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus, :host(.").concat(Utilities_1.IsFocusVisibleClassName, ") &:focus")] = {
                        outline: "none",
                    }, _e), itemStateSelectors) }),
            ],
            item: [
                classNames.item,
                tslib_1.__assign(tslib_1.__assign({}, commonItemStyles), { selectors: {
                        ':hover': {
                            cursor: 'default',
                        },
                    } }),
            ],
        };
    };
    exports.getStyles = getStyles;
});
//# sourceMappingURL=Breadcrumb.styles.js.map