@fluentui/react
Version:
Reusable React components for building web experiences.
213 lines • 9.39 kB
JavaScript
import { __assign } from "tslib";
import { HighContrastSelector, concatStyleSets, getFocusStyle, getHighContrastNoAdjustStyle } from '../../../Styling';
import { memoizeFunction } from '../../../Utilities';
export var getStyles = memoizeFunction(function (theme, customStyles) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
var effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;
var buttonHighContrastFocus = {
left: -2,
top: -2,
bottom: -2,
right: -2,
border: 'none',
};
var splitButtonDividerBaseStyles = {
position: 'absolute',
width: 1,
right: 31,
top: 8,
bottom: 8,
};
var splitButtonStyles = {
splitButtonContainer: [
getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2, pointerEvents: 'none' }),
{
display: 'inline-flex',
'.ms-Button--default': {
borderTopRightRadius: '0',
borderBottomRightRadius: '0',
borderRight: 'none',
flexGrow: '1',
},
'.ms-Button--primary': (_a = {
borderTopRightRadius: '0',
borderBottomRightRadius: '0',
border: 'none',
flexGrow: '1',
':hover': {
border: 'none',
},
':active': {
border: 'none',
}
},
_a[HighContrastSelector] = __assign(__assign({ color: 'WindowText', backgroundColor: 'Window', border: '1px solid WindowText', borderRightWidth: '0' }, getHighContrastNoAdjustStyle()), { ':hover': {
backgroundColor: 'Highlight',
border: '1px solid Highlight',
borderRightWidth: '0',
color: 'HighlightText',
}, ':active': {
border: '1px solid Highlight',
} }),
_a),
'.ms-Button--default + .ms-Button': (_b = {},
_b[HighContrastSelector] = {
border: '1px solid WindowText',
borderLeftWidth: '0',
':hover': {
backgroundColor: 'HighlightText',
borderColor: 'Highlight',
color: 'Highlight',
'.ms-Button-menuIcon': __assign({ backgroundColor: 'HighlightText', color: 'Highlight' }, getHighContrastNoAdjustStyle()),
},
},
_b),
'.ms-Button--default + .ms-Button[aria-expanded="true"]': (_c = {},
_c[HighContrastSelector] = {
backgroundColor: 'HighlightText',
borderColor: 'Highlight',
color: 'Highlight',
'.ms-Button-menuIcon': __assign({ backgroundColor: 'HighlightText', color: 'Highlight' }, getHighContrastNoAdjustStyle()),
},
_c),
'.ms-Button--primary + .ms-Button': (_d = {
border: 'none'
},
_d[HighContrastSelector] = {
border: '1px solid WindowText',
borderLeftWidth: '0',
':hover': {
borderLeftWidth: '0',
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
'.ms-Button-menuIcon': __assign(__assign({}, getHighContrastNoAdjustStyle()), { color: 'HighlightText' }),
},
},
_d),
'.ms-Button--primary + .ms-Button[aria-expanded="true"]': (_e = {},
_e[HighContrastSelector] = __assign(__assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()), { '.ms-Button-menuIcon': {
color: 'HighlightText',
} }),
_e),
'.ms-Button.is-disabled': (_f = {},
_f[HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_f),
},
],
splitButtonContainerHovered: {
'.ms-Button--default.is-disabled': (_g = {
backgroundColor: semanticColors.buttonBackgroundDisabled,
color: semanticColors.buttonTextDisabled
},
_g[HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_g),
'.ms-Button--primary.is-disabled': (_h = {
backgroundColor: semanticColors.primaryButtonBackgroundDisabled,
color: semanticColors.primaryButtonTextDisabled
},
_h[HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_h),
},
splitButtonContainerChecked: {
'.ms-Button--primary': (_j = {},
_j[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),
_j),
},
splitButtonContainerCheckedHovered: {
'.ms-Button--primary': (_k = {},
_k[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),
_k),
},
splitButtonContainerFocused: {
outline: 'none!important',
},
splitButtonMenuButton: (_l = {
padding: 6,
height: 'auto',
boxSizing: 'border-box',
borderRadius: 0,
borderTopRightRadius: effects.roundedCorner2,
borderBottomRightRadius: effects.roundedCorner2,
border: "1px solid ".concat(palette.neutralSecondaryAlt),
borderLeft: 'none',
outline: 'transparent',
userSelect: 'none',
display: 'inline-block',
textDecoration: 'none',
textAlign: 'center',
cursor: 'pointer',
verticalAlign: 'top',
width: 32,
marginLeft: -1,
marginTop: 0,
marginRight: 0,
marginBottom: 0
},
_l[HighContrastSelector] = {
'.ms-Button-menuIcon': {
color: 'WindowText',
},
},
_l),
splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles), (_m = {}, _m[HighContrastSelector] = {
backgroundColor: 'WindowText',
}, _m)),
splitButtonDividerDisabled: __assign(__assign({}, splitButtonDividerBaseStyles), (_o = {}, _o[HighContrastSelector] = {
backgroundColor: 'GrayText',
}, _o)),
splitButtonMenuButtonDisabled: (_p = {
pointerEvents: 'none',
border: 'none',
':hover': {
cursor: 'default',
},
'.ms-Button--primary': (_q = {},
_q[HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_q),
'.ms-Button-menuIcon': (_r = {},
_r[HighContrastSelector] = {
color: 'GrayText',
},
_r)
},
_p[HighContrastSelector] = {
color: 'GrayText',
border: '1px solid GrayText',
backgroundColor: 'Window',
},
_p),
splitButtonFlexContainer: {
display: 'flex',
height: '100%',
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center',
},
splitButtonContainerDisabled: (_s = {
outline: 'none',
border: 'none'
},
_s[HighContrastSelector] = __assign({ color: 'GrayText', borderColor: 'GrayText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),
_s),
splitButtonMenuFocused: __assign({}, getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 })),
};
return concatStyleSets(splitButtonStyles, customStyles);
});
//# sourceMappingURL=SplitButton.styles.js.map