@fluentui/react
Version:
Reusable React components for building web experiences.
181 lines • 7.49 kB
JavaScript
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