office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
84 lines • 2.94 kB
JavaScript
define(["require", "exports", "../../Utilities", "../../Styling"], function (require, exports, Utilities_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var noOutline = {
outline: 0
};
var iconStyle = {
fontSize: Styling_1.FontSizes.icon,
margin: '0 4px',
height: '16px',
lineHeight: '16px',
textAlign: 'center',
verticalAlign: 'middle',
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 = Utilities_1.memoizeFunction(function (theme) {
var semanticColors = theme.semanticColors;
var border = semanticColors.buttonBorder;
var disabledBackground = semanticColors.disabledBackground;
var disabledText = semanticColors.disabledText;
return {
root: [
Styling_1.getFocusStyle(theme, -1),
theme.fonts.medium,
{
boxSizing: 'border-box',
border: '1px solid ' + border,
userSelect: 'none',
display: 'inline-block',
textDecoration: 'none',
textAlign: 'center',
cursor: 'pointer',
verticalAlign: 'top',
padding: '0 16px',
borderRadius: 0
}
],
rootDisabled: {
backgroundColor: disabledBackground,
color: disabledText,
cursor: 'default',
pointerEvents: 'none',
selectors: {
':hover': noOutline,
':focus': noOutline
}
},
iconDisabled: {
color: disabledText
},
menuIconDisabled: {
color: disabledText
},
flexContainer: {
display: 'flex',
height: '100%',
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center'
},
textContainer: {
flexGrow: 1
},
icon: iconStyle,
menuIcon: [
iconStyle,
{
fontSize: Styling_1.FontSizes.small
}
],
label: {
margin: '0 4px',
lineHeight: '100%'
},
screenReaderText: Styling_1.hiddenContentStyle
};
});
});
//# sourceMappingURL=BaseButton.styles.js.map