@fluentui/react-northstar
Version:
A themable React component library.
73 lines (71 loc) • 3.14 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.toolbarMenuItemStyles = void 0;
var _colors = require("../../colors");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _activeIndicatorUrl = require("./activeIndicatorUrl");
var _ToolbarMenuItemSubmenuIndicator = require("../../../../components/Toolbar/ToolbarMenuItemSubmenuIndicator");
var _ToolbarMenuItemActiveIndicator = require("../../../../components/Toolbar/ToolbarMenuItemActiveIndicator");
var toolbarMenuItemStyles = {
root: function root(_ref) {
var _hover, _ref2;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var colors = (0, _colors.getColorScheme)(v.colorScheme);
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables,
borderRadius: 0
});
return Object.assign({
position: 'relative',
color: v.menuItemForeground || colors.foreground1,
borderWidth: v.menuBorderWidth,
backgroundColor: 'transparent',
borderColor: 'transparent',
display: 'flex',
alignItems: 'center',
textAlign: 'left',
width: '100%',
maxWidth: '100%',
padding: v.menuItemPadding,
cursor: 'pointer',
minHeight: v.itemHeight,
lineHeight: v.lineHeightBase,
userSelect: 'none',
':focus': {
outline: 0
},
':hover': (_hover = {
color: v.menuItemForegroundHover || colors.menuItemForegroundHover,
backgroundColor: v.menuItemBackgroundHover || colors.menuItemBackgroundHover
}, _hover["& ." + _ToolbarMenuItemSubmenuIndicator.toolbarMenuItemSubmenuIndicatorClassName] = {
color: v.menuItemForegroundHover || colors.menuItemForegroundHover
}, _hover["& ." + _ToolbarMenuItemActiveIndicator.toolbarMenuItemActiveIndicatorClassName] = {
backgroundImage: (0, _activeIndicatorUrl.activeIndicatorUrl)(v.menuItemForegroundHover || colors.menuItemForegroundHover)
}, _hover),
':focus-visible': borderFocusStyles[':focus-visible']
}, (p.disabled || p.disabledFocusable) && (_ref2 = {
cursor: 'default',
color: v.menuItemForegroundDisabled || colors.foregroundDisabled1,
backgroundColor: v.menuItemBackgroundDisabled
}, _ref2["& ." + _ToolbarMenuItemSubmenuIndicator.toolbarMenuItemSubmenuIndicatorClassName] = {
color: v.menuItemForegroundDisabled || colors.foregroundDisabled1
}, _ref2["& ." + _ToolbarMenuItemActiveIndicator.toolbarMenuItemActiveIndicatorClassName] = {
backgroundImage: (0, _activeIndicatorUrl.activeIndicatorUrl)(v.menuItemForegroundDisabled || colors.foregroundDisabled1)
}, _ref2[':hover'] = {
// empty to overwrite all existing hover styles
}, _ref2), p.disabled && {
// pointer events intentionally not disabled for focusable disabled toolbar items
// so that hover events work
pointerEvents: 'none'
});
},
wrapper: function wrapper() {
return {
display: 'block'
};
}
};
exports.toolbarMenuItemStyles = toolbarMenuItemStyles;
//# sourceMappingURL=toolbarMenuItemStyles.js.map