@fluentui/react
Version:
Reusable React components for building web experiences.
203 lines • 7.68 kB
JavaScript
import { __assign } from "tslib";
import { concatStyleSets, getFocusStyle, HighContrastSelector, getScreenSelector, ScreenWidthMaxMedium, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
export var CONTEXTUAL_MENU_ITEM_HEIGHT = 36;
var MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);
var getItemHighContrastStyles = memoizeFunction(function () {
var _a;
return {
selectors: (_a = {},
_a[HighContrastSelector] = __assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),
_a),
};
});
export var getMenuItemStyles = memoizeFunction(function (theme) {
var _a, _b, _c, _d, _e, _f, _g;
var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;
var ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;
var ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered;
var ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundPressed;
var ContextualMenuItemDividerColor = semanticColors.bodyDivider;
var menuItemStyles = {
item: [
fonts.medium,
{
color: semanticColors.bodyText,
position: 'relative',
boxSizing: 'border-box',
},
],
divider: {
display: 'block',
height: '1px',
backgroundColor: ContextualMenuItemDividerColor,
position: 'relative',
},
root: [
getFocusStyle(theme),
fonts.medium,
{
color: semanticColors.bodyText,
backgroundColor: 'transparent',
border: 'none',
width: '100%',
height: CONTEXTUAL_MENU_ITEM_HEIGHT,
lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,
display: 'block',
cursor: 'pointer',
padding: '0px 8px 0 4px',
textAlign: 'left',
},
],
rootDisabled: {
color: semanticColors.disabledBodyText,
cursor: 'default',
pointerEvents: 'none',
selectors: (_a = {},
_a[HighContrastSelector] = __assign({ color: 'GrayText', opacity: 1 }, getHighContrastNoAdjustStyle()),
_a),
},
rootHovered: __assign({ backgroundColor: ContextualMenuItemBackgroundHoverColor, color: ContextualMenuItemTextHoverColor, selectors: {
'.ms-ContextualMenu-icon': {
color: palette.themeDarkAlt,
},
'.ms-ContextualMenu-submenuIcon': {
color: palette.neutralPrimary,
},
} }, getItemHighContrastStyles()),
rootFocused: __assign({ backgroundColor: palette.white }, getItemHighContrastStyles()),
rootChecked: __assign({ selectors: {
'.ms-ContextualMenu-checkmarkIcon': {
color: palette.neutralPrimary,
},
} }, getItemHighContrastStyles()),
rootPressed: __assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, selectors: {
'.ms-ContextualMenu-icon': {
color: palette.themeDark,
},
'.ms-ContextualMenu-submenuIcon': {
color: palette.neutralPrimary,
},
} }, getItemHighContrastStyles()),
rootExpanded: __assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, color: semanticColors.bodyTextChecked }, getItemHighContrastStyles()),
linkContent: {
whiteSpace: 'nowrap',
height: 'inherit',
display: 'flex',
alignItems: 'center',
maxWidth: '100%',
},
anchorLink: {
padding: '0px 8px 0 4px',
textRendering: 'auto',
color: 'inherit',
letterSpacing: 'normal',
wordSpacing: 'normal',
textTransform: 'none',
textIndent: '0px',
textShadow: 'none',
textDecoration: 'none',
boxSizing: 'border-box',
},
label: {
margin: '0 4px',
verticalAlign: 'middle',
display: 'inline-block',
flexGrow: '1',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
},
secondaryText: {
color: theme.palette.neutralSecondary,
paddingLeft: '20px',
textAlign: 'right',
},
icon: {
display: 'inline-block',
minHeight: '1px',
maxHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,
fontSize: IconFontSizes.medium,
width: IconFontSizes.medium,
margin: '0 4px',
verticalAlign: 'middle',
flexShrink: '0',
selectors: (_b = {},
_b[MediumScreenSelector] = {
fontSize: IconFontSizes.large,
width: IconFontSizes.large,
},
_b),
},
iconColor: {
color: semanticColors.menuIcon,
selectors: (_c = {},
_c[HighContrastSelector] = {
color: 'inherit',
},
_c['$root:hover &'] = {
selectors: (_d = {},
_d[HighContrastSelector] = {
color: 'HighlightText',
},
_d),
},
_c['$root:focus &'] = {
selectors: (_e = {},
_e[HighContrastSelector] = {
color: 'HighlightText',
},
_e),
},
_c),
},
iconDisabled: {
color: semanticColors.disabledBodyText,
},
checkmarkIcon: {
color: semanticColors.bodySubtext,
selectors: (_f = {},
_f[HighContrastSelector] = {
color: 'HighlightText',
},
_f),
},
subMenuIcon: {
height: CONTEXTUAL_MENU_ITEM_HEIGHT,
lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,
color: palette.neutralSecondary,
textAlign: 'center',
display: 'inline-block',
verticalAlign: 'middle',
flexShrink: '0',
fontSize: IconFontSizes.small,
selectors: (_g = {
':hover': {
color: palette.neutralPrimary,
},
':active': {
color: palette.neutralPrimary,
}
},
_g[MediumScreenSelector] = {
fontSize: IconFontSizes.medium,
},
_g[HighContrastSelector] = {
color: 'HighlightText',
},
_g),
},
splitButtonFlexContainer: [
getFocusStyle(theme),
{
display: 'flex',
height: CONTEXTUAL_MENU_ITEM_HEIGHT,
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'flex-start',
},
],
};
return concatStyleSets(menuItemStyles);
});
//# sourceMappingURL=ContextualMenu.cnstyles.js.map