@fluentui/react
Version:
Reusable React components for building web experiences.
108 lines • 4.03 kB
JavaScript
define(["require", "exports", "../../Utilities", "../../Styling"], function (require, exports, Utilities_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var noOutline = {
outline: 0,
};
var iconStyle = function (fontSize) {
return {
fontSize: fontSize,
margin: '0 4px',
height: '16px',
lineHeight: '16px',
textAlign: 'center',
flexShrink: 0,
};
};
/**
* Gets the base button styles. Note: because it is a base class to be used with the `mergeRules`
* helper, it should have values for all class names in the interface. This let `mergeRules` optimize
* mixing class names together.
*/
exports.getStyles = (0, Utilities_1.memoizeFunction)(function (theme) {
var _a, _b;
var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
var border = semanticColors.buttonBorder;
var disabledBackground = semanticColors.disabledBackground;
var disabledText = semanticColors.disabledText;
var buttonHighContrastFocus = {
left: -2,
top: -2,
bottom: -2,
right: -2,
outlineColor: 'ButtonText',
};
return {
root: [
(0, Styling_1.getFocusStyle)(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }),
theme.fonts.medium,
{
border: '1px solid ' + border,
borderRadius: effects.roundedCorner2,
boxSizing: 'border-box',
cursor: 'pointer',
display: 'inline-block',
padding: '0 16px',
textDecoration: 'none',
textAlign: 'center',
userSelect: 'none',
// IE11 workaround for preventing shift of child elements of a button when active.
':active > span': {
position: 'relative',
left: 0,
top: 0,
},
},
],
rootDisabled: [
(0, Styling_1.getFocusStyle)(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }),
{
backgroundColor: disabledBackground,
borderColor: disabledBackground,
color: disabledText,
cursor: 'default',
':hover': noOutline,
':focus': noOutline,
},
],
iconDisabled: (_a = {
color: disabledText
},
_a[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_a),
menuIconDisabled: (_b = {
color: disabledText
},
_b[Styling_1.HighContrastSelector] = {
color: 'GrayText',
},
_b),
flexContainer: {
display: 'flex',
height: '100%',
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center',
},
description: {
display: 'block',
},
textContainer: {
flexGrow: 1,
display: 'block',
},
icon: iconStyle(fonts.mediumPlus.fontSize),
menuIcon: iconStyle(fonts.small.fontSize),
label: {
margin: '0 4px',
lineHeight: '100%',
display: 'block',
},
screenReaderText: Styling_1.hiddenContentStyle,
};
});
});
//# sourceMappingURL=BaseButton.styles.js.map