@fluentui/react-northstar
Version:
A themable React component library.
125 lines (124 loc) • 4.67 kB
JavaScript
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { getIconFillOrOutlineStyles } from '../../getIconFillOrOutlineStyles';
import { toggleIndicatorUrl } from './toggleIndicatorUrl';
var getIndicatorStyles = function getIndicatorStyles(color, outline, size) {
return {
content: '""',
width: size,
height: size,
backgroundImage: toggleIndicatorUrl(color, outline),
backgroundRepeat: 'no-repeat'
};
};
export var splitButtonToggleStyles = {
root: function root(_ref) {
var p = _ref.props,
v = _ref.variables,
theme = _ref.theme;
var siteVariables = theme.siteVariables;
var borderWidth = siteVariables.borderWidth;
var borderFocusStyles = getBorderFocusStyles({
variables: {
borderRadius: v.focusBorderRadius,
borderWidth: v.focusBorderWidth,
focusInnerBorderColor: v.focusInnerBorderColor,
focusOuterBorderColor: v.focusOuterBorderColor,
zIndexes: {
foreground: v.focusBorderZIndex
}
},
borderPadding: borderWidth
});
var toggleButtonColorHover = function toggleButtonColorHover() {
return p.primary ? v.toggleButtonPrimaryHoverColor : v.toggleButtonColorHover;
};
return Object.assign({
height: v.toggleButtonHeight,
minWidth: v.toggleButtonHeight,
color: v.toggleButtonColor,
backgroundColor: v.toggleButtonBackgroundColor,
borderRadius: v.toggleButtonBorderRadius,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
verticalAlign: 'middle',
cursor: 'pointer',
outline: 0,
padding: 0,
borderWidth: borderWidth,
borderStyle: 'solid',
borderColor: v.toggleButtonBorderColor,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeftColor: 'transparent',
boxShadow: p.primary ? v.toggleButtonPrimaryBoxShadow : v.toggleButtonBoxShadow
}, (p.flat || p.size === 'small' || p.disabled) && {
boxShadow: 'none'
}, getIconFillOrOutlineStyles({
outline: true
}), {
':before': Object.assign({}, getIndicatorStyles(p.disabled ? v.toggleButtonColorDisabled : p.primary ? v.toggleButtonPrimaryColor : v.toggleButtonColor, true, v.toggleButtonIndicatorSize)),
':hover': Object.assign({}, getIconFillOrOutlineStyles({
outline: true
}), {
color: toggleButtonColorHover(),
backgroundColor: v.toggleButtonBackgroundColorHover,
borderTopColor: v.toggleButtonBorderColorHover,
borderRightColor: v.toggleButtonBorderColorHover,
borderBottomColor: v.toggleButtonBorderColorHover,
// ':before' styles apply to the content (chevron) part of Toggle button
':before': Object.assign({}, getIndicatorStyles(toggleButtonColorHover(), true, v.toggleButtonIndicatorSize))
}),
':active': {
color: v.toggleButtonColorActive,
backgroundColor: v.toggleButtonBackgroundColorActive,
borderColor: v.toggleButtonBorderColorActive,
boxShadow: 'none'
},
':focus': borderFocusStyles[':focus'],
':focus-visible': {
backgroundColor: v.toggleButtonBackgroundColorFocus,
borderColor: v.toggleButtonBorderColorFocus,
color: v.toggleButtonColorFocus,
borderWidth: borderWidth,
':hover': {
borderColor: v.toggleButtonBorderColorHover
}
}
}, p.primary && {
color: v.toggleButtonPrimaryColor,
backgroundColor: v.toggleButtonPrimaryBackgroundColor,
borderWidth: "0 0 0 " + siteVariables.borderWidth,
borderColor: v.toggleButtonPrimaryBorderColor,
':active': {
backgroundColor: v.toggleButtonPrimaryBackgroundColorActive,
boxShadow: 'none'
},
':focus': borderFocusStyles[':focus'],
':focus-visible': {
backgroundColor: v.toggleButtonPrimaryBackgroundColorFocus
},
':hover': {
color: v.toggleButtonPrimaryHoverColor,
backgroundColor: v.toggleButtonPrimaryHoverBackgroundColor
}
}, p.disabled && {
cursor: 'default',
color: v.toggleButtonColorDisabled,
boxShadow: 'none',
pointerEvents: 'none',
':hover': {
color: v.toggleButtonColorDisabled
},
backgroundColor: v.toggleButtonBackgroundColorDisabled,
borderWidth: "0 0 0 " + siteVariables.borderWidth,
borderColor: v.borderColorDisabled
}, p.size === 'small' && {
height: v.smallDimension,
width: v.smallDimension,
minWidth: v.smallMinWidth
});
}
};
//# sourceMappingURL=splitButtonToggleStyles.js.map