Stefan Hacker
110 lines
3.6 KiB
JavaScript
110 lines
3.6 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = void 0;
|
|
var Utilities_1 = require("../../Utilities");
|
|
var Styling_1 = require("../../Styling");
|
|
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-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
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
|