office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
185 lines • 6.68 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");
var ContextualMenuItemHeight = '32px';
var getItemHighContrastStyles = Utilities_1.memoizeFunction(function () {
return {
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
MsHighContrastAdjust: 'none'
},
_a),
};
var _a;
});
exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
var semanticColors = theme.semanticColors, fonts = theme.fonts;
var ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;
var ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundChecked;
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),
{
font: 'inherit',
color: 'inherit',
backgroundColor: 'transparent',
border: 'none',
width: '100%',
height: ContextualMenuItemHeight,
lineHeight: ContextualMenuItemHeight,
display: 'block',
cursor: 'pointer',
padding: '0px 6px',
textAlign: 'left',
},
],
rootDisabled: {
color: semanticColors.disabledBodyText,
cursor: 'default',
pointerEvents: 'none',
},
rootHovered: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundHoverColor }, getItemHighContrastStyles()),
rootFocused: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundHoverColor }, getItemHighContrastStyles()),
rootChecked: tslib_1.__assign({}, getItemHighContrastStyles()),
rootPressed: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor }, getItemHighContrastStyles()),
rootExpanded: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, color: semanticColors.bodyTextChecked }, getItemHighContrastStyles()),
linkContent: {
whiteSpace: 'nowrap',
height: 'inherit',
display: 'flex',
alignItems: 'center',
maxWidth: '100%'
},
anchorLink: {
padding: '0px 6px',
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'
},
icon: {
display: 'inline-block',
minHeight: '1px',
maxHeight: ContextualMenuItemHeight,
width: '14px',
margin: '0 4px',
verticalAlign: 'middle',
flexShrink: '0',
},
iconColor: {
color: semanticColors.menuIcon,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
color: 'HighlightText',
},
_a)
},
iconDisabled: {
color: semanticColors.disabledBodyText,
},
checkmarkIcon: {
color: semanticColors.bodySubtext,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
color: 'HighlightText',
},
_b)
},
subMenuIcon: {
height: ContextualMenuItemHeight,
lineHeight: ContextualMenuItemHeight,
textAlign: 'center',
display: 'inline-block',
verticalAlign: 'middle',
flexShrink: '0',
fontSize: Styling_1.FontSizes.mini
},
splitButtonFlexContainer: {
display: 'flex',
height: ContextualMenuItemHeight,
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center'
},
splitButtonSeparator: {}
};
return Styling_1.concatStyleSets(menuItemStyles);
var _a, _b;
});
exports.getStyles = Utilities_1.memoizeFunction(function (theme) {
var semanticColors = theme.semanticColors, fonts = theme.fonts;
var ContextualMenuBackground = semanticColors.bodyBackground;
var ContextualMenuHeaderColor = semanticColors.menuHeader;
var styles = {
root: {
backgroundColor: ContextualMenuBackground,
minWidth: '180px',
},
container: {},
list: {
listStyleType: 'none',
margin: '0',
padding: '0',
lineHeight: '0',
},
title: {
fontSize: '16px',
paddingRight: '14px',
paddingLeft: '14px',
paddingBottom: '5px',
paddingTop: '5px',
backgroundColor: theme.palette.neutralLight
},
header: [
fonts.small,
{
fontWeight: Styling_1.FontWeights.semibold,
color: ContextualMenuHeaderColor,
background: 'none',
border: 'none',
height: ContextualMenuItemHeight,
lineHeight: ContextualMenuItemHeight,
cursor: 'default',
padding: '0px 6px',
userSelect: 'none',
textAlign: 'left',
}
],
};
return Styling_1.concatStyleSets(styles);
});
//# sourceMappingURL=ContextualMenu.styles.js.map