office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
157 lines • 5.62 kB
JavaScript
import { HighContrastSelector, ScreenWidthMaxMedium, ScreenWidthMaxSmall, ScreenWidthMinMedium, getFocusStyle, getScreenSelector } from '../../Styling';
var SingleLineTextStyle = {
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden'
};
var MinimumScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);
var MediumScreenSelector = getScreenSelector(ScreenWidthMinMedium, ScreenWidthMaxMedium);
export var getStyles = function (props) {
var className = props.className, theme = props.theme;
var overflowButtonFontSize = 16;
var itemMaxWidth = 160;
var itemMaxWidthSmall = 116;
var chevronSmallFontSize = 8;
return {
root: [
'ms-Breadcrumb',
{
margin: '23px 0 1px'
},
className
],
list: [
'ms-Breadcrumb-list',
{
whiteSpace: 'nowrap',
padding: 0,
margin: 0,
display: 'flex',
alignItems: 'stretch'
}
],
listItem: [
'ms-Breadcrumb-listItem',
{
listStyleType: 'none',
margin: '0',
padding: '0',
display: 'flex',
position: 'relative',
alignItems: 'center'
}
],
chevron: [
'ms-Breadcrumb-chevron',
{
color: theme.palette.neutralSecondary,
fontSize: theme.fonts.small.fontSize,
selectors: (_a = {},
_a[HighContrastSelector] = {
color: 'WindowText',
MsHighContrastAdjust: 'none'
},
_a[MediumScreenSelector] = {
fontSize: chevronSmallFontSize
},
_a[MinimumScreenSelector] = {
fontSize: chevronSmallFontSize
},
_a)
}
],
overflow: [
'ms-Breadcrumb-overflow',
{
position: 'relative',
display: 'flex',
alignItems: 'center'
}
],
overflowButton: [
'ms-Breadcrumb-overflowButton',
getFocusStyle(theme),
SingleLineTextStyle,
{
fontSize: overflowButtonFontSize,
height: '100%',
cursor: 'pointer',
selectors: (_b = {
':hover': {
backgroundColor: theme.palette.neutralLighter
},
':active': {
backgroundColor: theme.palette.neutralTertiaryAlt,
color: theme.semanticColors.bodyText
},
':hover:active': {
// This seems unnecessary.
backgroundColor: theme.palette.neutralQuaternary
}
},
_b[MinimumScreenSelector] = {
padding: '4px 6px'
},
_b[MediumScreenSelector] = {
fontSize: theme.fonts.mediumPlus.fontSize
},
_b)
}
],
itemLink: [
'ms-Breadcrumb-itemLink',
getFocusStyle(theme),
SingleLineTextStyle,
theme.fonts.xLarge,
{
textDecoration: 'none',
color: theme.semanticColors.bodyText,
padding: '0 8px',
maxWidth: itemMaxWidth,
selectors: (_c = {
':hover': {
backgroundColor: theme.semanticColors.menuItemBackgroundHovered,
color: 'initial',
cursor: 'pointer',
selectors: (_d = {},
_d[HighContrastSelector] = {
color: 'Highlight'
},
_d)
},
':focus': {
color: theme.palette.neutralDark
},
':active': {
backgroundColor: theme.palette.neutralTertiaryAlt,
color: theme.palette.neutralPrimary
}
},
_c[MediumScreenSelector] = theme.fonts.large,
_c[MinimumScreenSelector] = [
theme.fonts.medium,
{
maxWidth: itemMaxWidthSmall
}
],
_c)
}
],
item: [
'ms-Breadcrumb-item',
theme.fonts.xLarge,
{
color: theme.semanticColors.bodyText,
padding: '0 8px',
maxWidth: itemMaxWidth,
selectors: {
':hover': {
cursor: 'default'
}
}
}
]
};
var _a, _b, _c, _d;
};
//# sourceMappingURL=Breadcrumb.styles.js.map