office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
213 lines • 7.79 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 = '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),
fonts.medium,
{
color: 'inherit',
backgroundColor: 'transparent',
border: 'none',
width: '100%',
height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
lineHeight: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
display: 'block',
cursor: 'pointer',
padding: '0px 6px',
textAlign: 'left'
}
],
rootDisabled: {
color: semanticColors.disabledBodyText,
cursor: 'default',
pointerEvents: 'none',
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
color: 'GrayText',
opacity: 1
},
_a)
},
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'
},
secondaryText: {
color: theme.palette.neutralSecondary,
paddingLeft: '20px',
textAlign: 'right'
},
icon: {
display: 'inline-block',
minHeight: '1px',
maxHeight: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
width: '14px',
margin: '0 4px',
verticalAlign: 'middle',
flexShrink: '0'
},
iconColor: {
color: semanticColors.menuIcon,
selectors: (_b = {},
_b[Styling_1.HighContrastSelector] = {
color: 'inherit'
},
_b['$root:hover &'] = {
selectors: (_c = {},
_c[Styling_1.HighContrastSelector] = {
color: 'HighlightText'
},
_c)
},
_b['$root:focus &'] = {
selectors: (_d = {},
_d[Styling_1.HighContrastSelector] = {
color: 'HighlightText'
},
_d)
},
_b)
},
iconDisabled: {
color: semanticColors.disabledBodyText
},
checkmarkIcon: {
color: semanticColors.bodySubtext,
selectors: (_e = {},
_e[Styling_1.HighContrastSelector] = {
color: 'HighlightText'
},
_e)
},
subMenuIcon: {
height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
lineHeight: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
textAlign: 'center',
display: 'inline-block',
verticalAlign: 'middle',
flexShrink: '0',
fontSize: Styling_1.FontSizes.mini
},
splitButtonFlexContainer: [
Styling_1.getFocusStyle(theme),
{
display: 'flex',
height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center'
}
]
};
return Styling_1.concatStyleSets(menuItemStyles);
var _a, _b, _c, _d, _e;
});
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',
backgroundColor: 'transparent',
border: 'none',
height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
lineHeight: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
cursor: 'default',
padding: '0px 6px',
userSelect: 'none',
textAlign: 'left'
}
]
};
return Styling_1.concatStyleSets(styles);
});
//# sourceMappingURL=ContextualMenu.cnstyles.js.map