@fluentui/react-northstar
Version:
A themable React component library.
161 lines (159 loc) • 6.11 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.menuItemWrapperStyles = void 0;
var _utils = require("../../../../utils");
var _MenuItem = require("../../../../components/Menu/MenuItem");
var _MenuItemIndicator = require("../../../../components/Menu/MenuItemIndicator");
var _colors = require("../../colors");
var _submenuIndicatorDirection = require("./submenuIndicatorDirection");
var _menuItemStyles = require("./menuItemStyles");
var menuItemWrapperStyles = {
root: function root(_ref) {
var _Object$assign;
var props = _ref.props,
v = _ref.variables;
var active = props.active,
disabled = props.disabled,
iconOnly = props.iconOnly,
isFromKeyboard = props.isFromKeyboard,
pills = props.pills,
pointing = props.pointing,
secondary = props.secondary,
underlined = props.underlined,
vertical = props.vertical,
primary = props.primary,
on = props.on;
var colors = (0, _colors.getColorScheme)(v.colorScheme, null, primary);
return Object.assign({
color: 'inherit',
lineHeight: 1,
position: 'relative',
verticalAlign: 'middle',
display: 'block'
}, secondary && {
background: 'salmon'
}, vertical && {
border: "solid " + v.verticalItemBorderWidth + " " + v.verticalItemBorderColor
}, pills && Object.assign({}, vertical ? {
margin: "0 0 " + _menuItemStyles.verticalPillsBottomMargin + " 0"
} : {
margin: "0 " + _menuItemStyles.horizontalPillsRightMargin + " 0 0"
}, {
borderRadius: (0, _utils.pxToRem)(5)
}), underlined && {
display: 'flex',
alignItems: 'center',
height: (0, _utils.pxToRem)(29),
lineHeight: v.lineHeightBase,
padding: "0 " + (0, _utils.pxToRem)(4),
margin: "0 " + (0, _utils.pxToRem)(4) + " 0 0",
':nth-child(n+2)': {
marginLeft: "" + (0, _utils.pxToRem)(4)
},
boxShadow: 'none'
}, !vertical && !pills && !underlined && !iconOnly && {
boxShadow: "-1px 0 0 0 " + (primary ? v.primaryBorderColor : v.borderColor || colors.border) + " inset"
}, primary && !vertical && !underlined && {
color: v.primaryWrapperColor
}, active && !vertical && Object.assign({
color: v.wrapperColorActive
}, !underlined && {
background: v.backgroundColorActive
}, primary && !vertical && !underlined && {
color: v.primaryWrapperColor
}, !underlined && on !== 'hover' && Object.assign({
background: v.backgroundColorActive || colors.backgroundActive
}, iconOnly && {
background: v.activeIconOnlyWrapperBackgroundColor
}, !iconOnly && primary && {
color: colors.foregroundActive
}), underlined && {
color: v.activeUnderlinedWrapperColor
}, pointing && !vertical && Object.assign({}, (0, _menuItemStyles.pointingBeak)({
props: props,
variables: v,
colors: colors
}))), isFromKeyboard && Object.assign({
color: v.wrapperColorFocus
}, !underlined && Object.assign({
background: v.wrapperBackgroundColorFocus
}, primary && {
background: v.primaryWrapperBackgroundColorFocus,
color: v.primaryWrapperColorFocus
}), !iconOnly && !underlined && (0, _menuItemStyles.getFocusedStyles)({
props: props,
variables: v,
colors: colors
}), iconOnly && {
background: v.iconOnlyWrapperBackgroundColorFocus,
color: v.iconOnlyColorActive
}), active && {
'[data-tabs="true"]': Object.assign({}, !underlined && Object.assign({
background: v.backgroundColorActive || colors.backgroundActive
}, iconOnly && {
background: v.activeIconOnlyWrapperBackgroundColor
}, !iconOnly && primary && {
color: colors.foregroundActive
}), pointing && vertical && {
'::before': Object.assign({
content: "''",
position: 'absolute',
width: (0, _utils.pxToRem)(3),
height: "calc(100% + " + (0, _utils.pxToRem)(4) + ")",
top: (0, _utils.pxToRem)(-2),
backgroundColor: v.pointingIndicatorBackgroundColor
}, isFromKeyboard && {
display: 'none'
}, pointing === 'end' ? {
right: (0, _utils.pxToRem)(-2)
} : {
left: (0, _utils.pxToRem)(-2)
})
})
}, {
// hover styles
':hover': Object.assign({
color: v.wrapperColorHover,
background: v.backgroundColorHover || colors.backgroundHover
}, active && {
background: v.activeWrapperBackgroundColorHover
}, vertical && {
color: v.wrapperColorHover,
background: v.backgroundColorHover || colors.backgroundHover,
borderRadius: (0, _utils.pxToRem)(4)
}, primary && {
color: v.primaryWrapperColorHover
}, underlined && {
color: v.underlinedWrapperColorHover,
background: v.underlinedWrapperBackgroundHover
}, iconOnly && {
background: v.iconOnlyBackgroundColorHover,
color: v.iconOnlyColorHover
}, (_Object$assign = {}, _Object$assign["&>." + _MenuItem.menuItemClassName + ">." + _MenuItemIndicator.menuItemIndicatorClassName] = Object.assign({
color: v.indicatorColorHover
}, primary && {
color: v.primaryIndicatorColorHover
}, (0, _submenuIndicatorDirection.submenuIndicatorDirection)(vertical)), _Object$assign))
}, iconOnly && {
borderRadius: v.iconOnlyBorderRadius,
display: 'flex'
}, {
':first-child': Object.assign({}, !pills && !iconOnly && !(pointing && vertical) && !underlined && Object.assign({}, vertical && {
'::before': {
display: 'none'
}
}, !vertical && {
borderBottomLeftRadius: (0, _utils.pxToRem)(3),
borderTopLeftRadius: (0, _utils.pxToRem)(3)
}))
}, disabled && {
color: v.colorDisabled || colors.foregroundDisabled,
cursor: 'default',
':hover': {
// empty - overwrite all existing hover styles
}
});
}
};
exports.menuItemWrapperStyles = menuItemWrapperStyles;
//# sourceMappingURL=menuItemWrapperStyles.js.map