office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
194 lines • 6.96 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);
export var getMenuItemStyles = memoizeFunction(function (theme) {
var _a, _b, _c, _d, _e;
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({
// ensure disabled text looks different than enabled
color: 'GrayText', opacity: 1 }, getHighContrastNoAdjustStyle()),
_a),
},
rootHovered: {
backgroundColor: ContextualMenuItemBackgroundHoverColor,
color: ContextualMenuItemTextHoverColor,
selectors: {
'.ms-ContextualMenu-icon': {
color: palette.themeDarkAlt,
},
'.ms-ContextualMenu-submenuIcon': {
color: palette.neutralPrimary,
},
},
},
rootFocused: {
backgroundColor: palette.white,
},
rootChecked: {
selectors: {
'.ms-ContextualMenu-checkmarkIcon': {
color: palette.neutralPrimary,
},
},
},
rootPressed: {
backgroundColor: ContextualMenuItemBackgroundSelectedColor,
selectors: {
'.ms-ContextualMenu-icon': {
color: palette.themeDark,
},
'.ms-ContextualMenu-submenuIcon': {
color: palette.neutralPrimary,
},
},
},
rootExpanded: {
backgroundColor: ContextualMenuItemBackgroundSelectedColor,
color: semanticColors.bodyTextChecked,
selectors: (_b = {
'.ms-ContextualMenu-submenuIcon': (_c = {},
_c[HighContrastSelector] = {
// icons inside of anchor tags are not properly inheriting color in high contrast
color: 'inherit',
},
_c)
},
_b[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),
_b),
},
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: (_d = {},
_d[MediumScreenSelector] = {
fontSize: IconFontSizes.large,
width: IconFontSizes.large,
},
_d),
},
iconColor: {
color: semanticColors.menuIcon,
},
iconDisabled: {
color: semanticColors.disabledBodyText,
},
checkmarkIcon: {
color: semanticColors.bodySubtext,
},
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: (_e = {
':hover': {
color: palette.neutralPrimary,
},
':active': {
color: palette.neutralPrimary,
}
},
_e[MediumScreenSelector] = {
fontSize: IconFontSizes.medium,
},
_e),
},
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