@fluentui/react-northstar
Version:
A themable React component library.
194 lines (192 loc) • 7.2 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.verticalPointingBottomMargin = exports.verticalPillsBottomMargin = exports.underlinedItem = exports.pointingBeak = exports.menuItemStyles = exports.horizontalPillsRightMargin = exports.getFocusedStyles = void 0;
var _utils = require("../../../../utils");
var _colors = require("../../colors");
var _getIconFillOrOutlineStyles = require("../../getIconFillOrOutlineStyles");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _MenuItemIcon = require("../../../../components/Menu/MenuItemIcon");
var verticalPillsBottomMargin = (0, _utils.pxToRem)(5);
exports.verticalPillsBottomMargin = verticalPillsBottomMargin;
var horizontalPillsRightMargin = (0, _utils.pxToRem)(8);
exports.horizontalPillsRightMargin = horizontalPillsRightMargin;
var verticalPointingBottomMargin = (0, _utils.pxToRem)(12);
exports.verticalPointingBottomMargin = verticalPointingBottomMargin;
var underlinedItem = function underlinedItem(color) {
return {
paddingBottom: 0,
borderBottom: "solid " + (0, _utils.pxToRem)(4) + " " + color,
transition: 'color .1s ease'
};
};
exports.underlinedItem = underlinedItem;
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: (0, _utils.pxToRem)(1) + " solid transparent",
padding: (0, _utils.pxToRem)(1)
}, primary && {
color: v.color
}));
};
exports.getFocusedStyles = getFocusedStyles;
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: (0, _utils.pxToRem)(10),
height: (0, _utils.pxToRem)(10),
border: 'none'
}, borders, {
zIndex: v.beakZIndex,
transition: 'background .1s ease'
})
};
};
exports.pointingBeak = pointingBeak;
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 = (0, _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: (0, _utils.pxToRem)(2) + " solid transparent"
}, {
padding: v.horizontalPadding
}, vertical && {
padding: v.verticalItemPadding
}, pointing && vertical && {
padding: (0, _utils.pxToRem)(8) + " " + (0, _utils.pxToRem)(18)
}, underlined && {
padding: (0, _utils.pxToRem)(4) + " 0"
}, iconOnly && {
margin: (0, _utils.pxToRem)(1),
padding: (0, _utils.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
}, (0, _getIconFillOrOutlineStyles.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({}, (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables
}), (0, _getIconFillOrOutlineStyles.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({}, (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables
}), {
':focus-visible': Object.assign({}, (0, _getBorderFocusStyles.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["&>." + _MenuItemIcon.menuItemIconClassName] = Object.assign({
color: v.subMenuIconColor
}, (0, _getIconFillOrOutlineStyles.getIconFillOrOutlineStyles)({
outline: false
})), _ref4), !disabled && Object.assign({}, iconOnly && (0, _getIconFillOrOutlineStyles.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
};
}
};
exports.menuItemStyles = menuItemStyles;
//# sourceMappingURL=menuItemStyles.js.map