office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
81 lines (79 loc) • 2.83 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'
};
/**
* 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, focusInset, focusColor) {
if (focusInset === void 0) { focusInset = '0'; }
if (focusColor === void 0) { focusColor = theme.palette.neutralSecondary; }
return {
root: [
Styling_1.getFocusStyle(theme, focusInset, focusColor),
theme.fonts.medium,
{
// this transparent border converts to the correct colors in HC mode
boxSizing: 'border-box',
border: '1px solid transparent',
userSelect: 'none',
display: 'inline-block',
textDecoration: 'none',
textAlign: 'center',
cursor: 'pointer',
verticalAlign: 'top',
padding: '0 16px'
}
],
rootDisabled: {
backgroundColor: theme.palette.neutralLighter,
color: theme.palette.neutralTertiary,
cursor: 'default',
pointerEvents: 'none',
':hover': noOutline,
':focus': noOutline
},
flexContainer: {
display: 'flex',
height: '100%',
flexWrap: 'nowrap',
justifyContent: 'center',
alignItems: 'center'
},
icon: iconStyle,
menuIcon: [
iconStyle,
{
fontSize: Styling_1.FontSizes.small
}
],
label: {
margin: '0 4px',
lineHeight: '100%'
},
screenReaderText: {
position: 'absolute',
width: '1px',
height: '1px',
margin: '-1px',
padding: 0,
overflow: 'hidden',
clip: 'rect(0,0,0,0)',
border: 0
}
};
});
});
//# sourceMappingURL=BaseButton.styles.js.map