@fluentui/react-northstar
Version:
A themable React component library.
183 lines (182 loc) • 6.24 kB
JavaScript
import { pxToRem } from '../../../../utils';
import { getColorScheme } from '../../colors';
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { menuItemIconClassName } from '../../../../components/Menu/MenuItemIcon';
export var verticalPillsBottomMargin = pxToRem(5);
export var horizontalPillsRightMargin = pxToRem(8);
export var verticalPointingBottomMargin = pxToRem(12);
export var underlinedItem = function underlinedItem(color) {
return {
paddingBottom: 0,
borderBottom: "solid " + pxToRem(4) + " " + color,
transition: 'color .1s ease'
};
};
export var getFocusedStyles = function getFocusedStyles(_ref) {
var props = _ref.props,
v = _ref.variables,
colors = _ref.colors;
var primary = props.primary,
underlined = props.underlined,
active = props.active,
vertical = props.vertical;
if (active && !underlined && !vertical) return {};
return Object.assign({
color: v.colorActive || colors.foregroundActive,
background: v.backgroundColorFocus || colors.backgroundFocus
}, primary && {
color: colors.foregroundFocus,
background: colors.backgroundFocus
}, primary && !vertical && !underlined && {
color: v.primaryWrapperColorFocus
}, vertical && Object.assign({
background: 'inherit',
color: v.colorFocus || colors.foregroundFocus,
border: pxToRem(1) + " solid transparent",
padding: pxToRem(1)
}, primary && {
color: v.color
}));
};
export var pointingBeak = function pointingBeak(_ref2) {
var props = _ref2.props,
v = _ref2.variables,
colors = _ref2.colors;
var pointing = props.pointing,
primary = props.primary;
var top;
var borders;
var backgroundColor = v.backgroundColorActive || colors.backgroundActive;
var borderColor = v.borderColor || primary ? v.primaryBorderColor : colors.border;
if (pointing === 'start') {
borders = {
borderTop: "1px solid " + borderColor,
borderLeft: "1px solid " + borderColor
};
top = '-1px'; // 1px for the border
} else {
borders = {
borderBottom: "1px solid " + borderColor,
borderRight: "1px solid " + borderColor
};
top = '100%';
}
return {
'::after': Object.assign({
visibility: 'visible',
background: backgroundColor,
position: 'absolute',
content: '""',
top: top,
left: '50%',
transform: 'translateX(-50%) translateY(-50%) rotate(45deg)',
margin: '.5px 0 0',
width: pxToRem(10),
height: pxToRem(10),
border: 'none'
}, borders, {
zIndex: v.beakZIndex,
transition: 'background .1s ease'
})
};
};
export var menuItemStyles = {
root: function root(_ref3) {
var _ref4;
var p = _ref3.props,
v = _ref3.variables,
siteVariables = _ref3.theme.siteVariables;
var active = p.active,
iconOnly = p.iconOnly,
isFromKeyboard = p.isFromKeyboard,
pointing = p.pointing,
primary = p.primary,
underlined = p.underlined,
vertical = p.vertical,
disabled = p.disabled;
var colors = getColorScheme(v.colorScheme, null, primary);
return Object.assign({
color: 'inherit',
display: 'block',
cursor: 'pointer',
whiteSpace: 'nowrap',
overflow: 'hidden'
}, pointing && vertical && {
border: '1px solid transparent'
}, iconOnly && {
border: pxToRem(2) + " solid transparent"
}, {
padding: v.horizontalPadding
}, vertical && {
padding: v.verticalItemPadding
}, pointing && vertical && {
padding: pxToRem(8) + " " + pxToRem(18)
}, underlined && {
padding: pxToRem(4) + " 0"
}, iconOnly && {
margin: pxToRem(1),
padding: pxToRem(5),
// padding works this way to get the border to only be 30x30px on focus which is the current design
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
overflow: 'visible'
}, active && Object.assign({}, iconOnly && Object.assign({
color: v.iconOnlyColorActive
}, getIconFillOrOutlineStyles({
outline: false
})), underlined && Object.assign({
color: v.activeUnderlinedColor
}, underlinedItem(v.activeUnderlinedBorderBottomColor), primary && Object.assign({
color: v.activeUnderlinedPrimaryColor
}, underlinedItem(v.borderColorActive || colors.borderActive)), !primary && {
fontWeight: 700
})), isFromKeyboard && Object.assign({
color: 'inherit'
}, iconOnly && Object.assign({}, getBorderFocusStyles({
variables: siteVariables
}), getIconFillOrOutlineStyles({
outline: false
})), primary ? Object.assign({}, iconOnly && {
borderColor: v.borderColorActive || colors.borderActive
}) : Object.assign({}, underlined && {
fontWeight: 700
}, underlined && active && underlinedItem(v.colorActive)), (underlined || vertical) && Object.assign({}, getBorderFocusStyles({
variables: siteVariables
}), {
':focus-visible': Object.assign({}, getBorderFocusStyles({
variables: siteVariables
})[':focus-visible'], {
borderColor: v.borderColorActive
})
})), {
':focus': {
outline: 0
},
// hover styles
':hover': Object.assign({
color: v.colorHover
}, underlined && {
color: v.underlinedColorHover
}, !disabled && !primary && vertical && (_ref4 = {}, _ref4["&>." + menuItemIconClassName] = Object.assign({
color: v.subMenuIconColor
}, getIconFillOrOutlineStyles({
outline: false
})), _ref4), !disabled && Object.assign({}, iconOnly && getIconFillOrOutlineStyles({
outline: false
}), primary ? Object.assign({}, iconOnly && {
color: 'inherit'
}, !active && underlined && underlinedItem(v.underlinedBorderColor || colors.backgroundActive)) : !active && underlined && underlinedItem(v.backgroundColorActive || colors.backgroundActive)))
}, disabled && {
cursor: 'default'
});
},
menu: function menu(_ref5) {
var v = _ref5.variables;
return {
zIndex: v.menuZIndex
};
}
};
//# sourceMappingURL=menuItemStyles.js.map