Stefan Hacker
198 lines
8.0 KiB
JavaScript
198 lines
8.0 KiB
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.getMenuItemStyles = exports.CONTEXTUAL_MENU_ITEM_HEIGHT = void 0;
|
|
exports.CONTEXTUAL_MENU_ITEM_HEIGHT = 36;
|
|
var MediumScreenSelector = (0, Styling_1.getScreenSelector)(0, Styling_1.ScreenWidthMaxMedium);
|
|
exports.getMenuItemStyles = (0, 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: [
|
|
(0, 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', // inner elements have a margin of 4px (4 + 4 = 8px as on right side)
|
|
textAlign: 'left',
|
|
},
|
|
],
|
|
rootDisabled: {
|
|
color: semanticColors.disabledBodyText,
|
|
cursor: 'default',
|
|
pointerEvents: 'none',
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = {
|
|
// ensure disabled text looks different than enabled
|
|
color: 'GrayText',
|
|
opacity: 1,
|
|
},
|
|
_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({}, (0, Styling_1.getHighContrastNoAdjustStyle)()),
|
|
_b),
|
|
},
|
|
linkContent: {
|
|
whiteSpace: 'nowrap',
|
|
height: 'inherit',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
maxWidth: '100%',
|
|
},
|
|
anchorLink: {
|
|
padding: '0px 8px 0 4px', // inner elements have a margin of 4px (4 + 4 = 8px as on right side)
|
|
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',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
},
|
|
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, // 12px
|
|
selectors: (_e = {
|
|
':hover': {
|
|
color: palette.neutralPrimary,
|
|
},
|
|
':active': {
|
|
color: palette.neutralPrimary,
|
|
}
|
|
},
|
|
_e[MediumScreenSelector] = {
|
|
fontSize: Styling_1.IconFontSizes.medium, // 16px
|
|
},
|
|
_e),
|
|
},
|
|
splitButtonFlexContainer: [
|
|
(0, Styling_1.getFocusStyle)(theme),
|
|
{
|
|
display: 'flex',
|
|
height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
|
|
flexWrap: 'nowrap',
|
|
justifyContent: 'center',
|
|
alignItems: 'flex-start',
|
|
},
|
|
],
|
|
};
|
|
return (0, Styling_1.concatStyleSets)(menuItemStyles);
|
|
});
|
|
});
|
|
//# sourceMappingURL=ContextualMenu.cnstyles.js.map
|