@fluentui/react-northstar
Version:
A themable React component library.
56 lines (55 loc) • 1.99 kB
JavaScript
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
import { getColorScheme } from '../../colors';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
export var toolbarItemStyles = {
root: function root(_ref) {
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var colors = getColorScheme(v.colorScheme);
var borderWidth = siteVariables.borderWidth;
var borderFocusStyles = getBorderFocusStyles({
variables: siteVariables
});
return Object.assign({
position: 'relative',
backgroundColor: v.background,
borderWidth: borderWidth,
borderStyle: 'solid',
borderColor: 'transparent',
borderRadius: v.borderRadius,
height: v.itemHeight,
minWidth: v.itemHeight,
padding: v.itemPadding,
color: v.foreground || colors.foreground1,
cursor: 'pointer',
userSelect: 'none',
':focus': borderFocusStyles[':focus']
}, p.active && Object.assign({
color: v.foregroundActive || colors.foregroundActive,
backgroundColor: v.backgroundActive
}, getIconFillOrOutlineStyles({
outline: false
})), {
':hover': Object.assign({
color: v.foregroundHover || colors.foregroundHover,
backgroundColor: v.backgroundHover || colors.backgroundHover
}, getIconFillOrOutlineStyles({
outline: false
})),
':focus-visible': borderFocusStyles[':focus-visible']
}, (p.disabled || p.disabledFocusable) && {
color: v.foregroundDisabled || colors.foregroundDisabled1,
backgroundColor: v.backgroundDisabled,
cursor: 'default',
':hover': {
// empty to overwrite all existing hover styles
}
}, p.disabled && {
// pointer events intentionally not disabled for focusable disabled toolbar items
// so that hover events work
pointerEvents: 'none'
});
}
};
//# sourceMappingURL=toolbarItemStyles.js.map