@fluentui/react-northstar
Version:
A themable React component library.
68 lines (67 loc) • 2.81 kB
JavaScript
import { getColorScheme } from '../../colors';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { activeIndicatorUrl } from './activeIndicatorUrl';
import { toolbarMenuItemSubmenuIndicatorClassName } from '../../../../components/Toolbar/ToolbarMenuItemSubmenuIndicator';
import { toolbarMenuItemActiveIndicatorClassName } from '../../../../components/Toolbar/ToolbarMenuItemActiveIndicator';
export var toolbarMenuItemStyles = {
root: function root(_ref) {
var _hover, _ref2;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var colors = getColorScheme(v.colorScheme);
var borderFocusStyles = 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["& ." + toolbarMenuItemSubmenuIndicatorClassName] = {
color: v.menuItemForegroundHover || colors.menuItemForegroundHover
}, _hover["& ." + toolbarMenuItemActiveIndicatorClassName] = {
backgroundImage: 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["& ." + toolbarMenuItemSubmenuIndicatorClassName] = {
color: v.menuItemForegroundDisabled || colors.foregroundDisabled1
}, _ref2["& ." + toolbarMenuItemActiveIndicatorClassName] = {
backgroundImage: 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'
};
}
};
//# sourceMappingURL=toolbarMenuItemStyles.js.map