office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
196 lines • 7.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
exports.CONTEXTUAL_MENU_ITEM_HEIGHT = 36;
var MediumScreenSelector = Styling_1.getScreenSelector(0, Styling_1.ScreenWidthMaxMedium);
exports.getMenuItemStyles = Utilities_1.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: [
Styling_1.getFocusStyle(theme),
fonts.medium,
{
color: semanticColors.bodyText,
backgroundColor: 'transparent',
border: 'none',
width: '100%',
height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
lineHeight: exports.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[Styling_1.HighContrastSelector] = tslib_1.__assign({
// ensure disabled text looks different than enabled
color: 'GrayText', opacity: 1 }, Styling_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[Styling_1.HighContrastSelector] = {
// icons inside of anchor tags are not properly inheriting color in high contrast
color: 'inherit',
},
_c)
},
_b[Styling_1.HighContrastSelector] = tslib_1.__assign({}, Styling_1.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: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
fontSize: Styling_1.IconFontSizes.medium,
width: Styling_1.IconFontSizes.medium,
margin: '0 4px',
verticalAlign: 'middle',
flexShrink: '0',
selectors: (_d = {},
_d[MediumScreenSelector] = {
fontSize: Styling_1.IconFontSizes.large,
width: Styling_1.IconFontSizes.large,
},
_d),
},
iconColor: {
color: semanticColors.menuIcon,
},
iconDisabled: {
color: semanticColors.disabledBodyText,
},
checkmarkIcon: {
color: semanticColors.bodySubtext,
},
subMenuIcon: {
height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
lineHeight: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
color: palette.neutralSecondary,
textAlign: 'center',
display: 'inline-block',
verticalAlign: 'middle',
flexShrink: '0',
fontSize: Styling_1.IconFontSizes.small,
selectors: (_e = {
':hover': {
color: palette.neutralPrimary,
},
':active': {
color: palette.neutralPrimary,
}
},
_e[MediumScreenSelector] = {
fontSize: Styling_1.IconFontSizes.medium,
},
_e),
},
splitButtonFlexContainer: [
Styling_1.getFocusStyle(theme),
{
display: 'flex',
height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'flex-start',
},
],
};
return Styling_1.concatStyleSets(menuItemStyles);
});
//# sourceMappingURL=ContextualMenu.cnstyles.js.map