@fluentui/react
Version:
Reusable React components for building web experiences.
213 lines • 10.7 kB
JavaScript
define(["require", "exports", "tslib", "../../../Styling", "../../../Utilities"], function (require, exports, tslib_1, Styling_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
exports.getStyles = (0, Utilities_1.memoizeFunction)(function (theme, customStyles) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
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: [
(0, Styling_1.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[Styling_1.HighContrastSelector] = tslib_1.__assign(tslib_1.__assign({ color: 'WindowText', backgroundColor: 'Window', border: '1px solid WindowText', borderRightWidth: '0' }, (0, Styling_1.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[Styling_1.HighContrastSelector] = {
border: '1px solid WindowText',
borderLeftWidth: '0',
':hover': {
backgroundColor: 'HighlightText',
borderColor: 'Highlight',
color: 'Highlight',
'.ms-Button-menuIcon': tslib_1.__assign({ backgroundColor: 'HighlightText', color: 'Highlight' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
},
},
_b),
'.ms-Button--default + .ms-Button[aria-expanded="true"]': (_c = {},
_c[Styling_1.HighContrastSelector] = {
backgroundColor: 'HighlightText',
borderColor: 'Highlight',
color: 'Highlight',
'.ms-Button-menuIcon': tslib_1.__assign({ backgroundColor: 'HighlightText', color: 'Highlight' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
},
_c),
'.ms-Button--primary + .ms-Button': (_d = {
border: 'none'
},
_d[Styling_1.HighContrastSelector] = {
border: '1px solid WindowText',
borderLeftWidth: '0',
':hover': {
borderLeftWidth: '0',
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
'.ms-Button-menuIcon': tslib_1.__assign(tslib_1.__assign({}, (0, Styling_1.getHighContrastNoAdjustStyle)()), { color: 'HighlightText' }),
},
},
_d),
'.ms-Button--primary + .ms-Button[aria-expanded="true"]': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()), { '.ms-Button-menuIcon': {
color: 'HighlightText',
} }),
'.ms-Button.is-disabled': (_e = {},
_e[Styling_1.HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_e),
},
],
splitButtonContainerHovered: {
'.ms-Button--default.is-disabled': (_f = {
backgroundColor: semanticColors.buttonBackgroundDisabled,
color: semanticColors.buttonTextDisabled
},
_f[Styling_1.HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_f),
'.ms-Button--primary.is-disabled': (_g = {
backgroundColor: semanticColors.primaryButtonBackgroundDisabled,
color: semanticColors.primaryButtonTextDisabled
},
_g[Styling_1.HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_g),
},
splitButtonContainerChecked: {
'.ms-Button--primary': (_h = {},
_h[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'Window', backgroundColor: 'WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_h),
},
splitButtonContainerCheckedHovered: {
'.ms-Button--primary': (_j = {},
_j[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'Window', backgroundColor: 'WindowText' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_j),
},
splitButtonContainerFocused: {
outline: 'none!important',
},
splitButtonMenuButton: (_k = {
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
},
_k[Styling_1.HighContrastSelector] = {
'.ms-Button-menuIcon': {
color: 'WindowText',
},
},
_k),
splitButtonDivider: tslib_1.__assign(tslib_1.__assign({}, splitButtonDividerBaseStyles), (_l = {}, _l[Styling_1.HighContrastSelector] = {
backgroundColor: 'WindowText',
}, _l)),
splitButtonDividerDisabled: tslib_1.__assign(tslib_1.__assign({}, splitButtonDividerBaseStyles), (_m = {}, _m[Styling_1.HighContrastSelector] = {
backgroundColor: 'GrayText',
}, _m)),
splitButtonMenuButtonDisabled: (_o = {
pointerEvents: 'none',
border: 'none',
':hover': {
cursor: 'default',
},
'.ms-Button--primary': (_p = {},
_p[Styling_1.HighContrastSelector] = {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window',
},
_p),
'.ms-Button-menuIcon': (_q = {},
_q[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_q)
},
_o[Styling_1.HighContrastSelector] = {
color: 'GrayText',
border: '1px solid GrayText',
backgroundColor: 'Window',
},
_o),
splitButtonFlexContainer: {
display: 'flex',
height: '100%',
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center',
},
splitButtonContainerDisabled: (_r = {
outline: 'none',
border: 'none'
},
_r[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText', borderColor: 'GrayText', backgroundColor: 'Window' }, (0, Styling_1.getHighContrastNoAdjustStyle)()),
_r),
splitButtonMenuFocused: tslib_1.__assign({}, (0, Styling_1.getFocusStyle)(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 })),
};
return (0, Styling_1.concatStyleSets)(splitButtonStyles, customStyles);
});
});
//# sourceMappingURL=SplitButton.styles.js.map