office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
106 lines (104 loc) • 3.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
var semanticColors = theme.semanticColors;
var pillUncheckedBackground = semanticColors.bodyBackground;
var pillCheckedBackground = semanticColors.inputBackgroundChecked;
var pillCheckedHoveredBackground = semanticColors.inputBackgroundCheckedHovered;
var pillCheckedDisabledBackground = semanticColors.disabledText;
var thumbBackground = semanticColors.inputBorderHovered;
var thumbCheckedBackground = semanticColors.inputForegroundChecked;
var thumbDisabledBackground = semanticColors.disabledText;
var thumbCheckedDisabledBackground = semanticColors.disabledBackground;
var pillBorderColor = semanticColors.inputBorder;
var pillBorderHoveredColor = semanticColors.inputBorderHovered;
var pillBorderDisabledColor = semanticColors.disabledText;
var toggleFocusBorderColor = semanticColors.focusBorder;
var styles = {
root: {
marginBottom: '8px'
},
container: [
{
display: 'inline-flex',
position: 'relative',
}
],
pill: [
Styling_1.getFocusStyle(theme, '-1px'),
{
fontSize: '20px',
lineHeight: '1em',
boxSizing: 'border-box',
position: 'relative',
width: '2.2em',
height: '1em',
borderRadius: '1em',
transition: 'all 0.1s ease',
borderWidth: '1px',
borderStyle: 'solid',
background: pillUncheckedBackground,
borderColor: pillBorderColor,
cursor: 'pointer',
}
],
pillHovered: {
borderColor: pillBorderHoveredColor
},
pillChecked: {
background: pillCheckedBackground,
borderColor: 'transparent',
},
pillCheckedHovered: {
backgroundColor: pillCheckedHoveredBackground,
borderColor: 'transparent'
},
pillDisabled: {
borderColor: pillBorderDisabledColor
},
pillCheckedDisabled: {
backgroundColor: pillCheckedDisabledBackground,
borderColor: 'transparent'
},
thumb: {
width: '.5em',
height: '.5em',
borderRadius: '.5em',
position: 'absolute',
top: '.2em',
transition: 'all 0.1s ease',
backgroundColor: thumbBackground,
/* Border is added to handle high contrast mode for Firefox */
borderColor: 'transparent',
borderWidth: '.27em',
borderStyle: 'solid',
boxSizing: 'border-box',
left: '.2em'
},
thumbChecked: {
backgroundColor: thumbCheckedBackground,
left: '1.4em'
},
thumbDisabled: {
backgroundColor: thumbDisabledBackground,
left: '.2em',
},
thumbCheckedDisabled: {
backgroundColor: thumbCheckedDisabledBackground,
left: '1.4em'
},
text: {
// Workaround; until Label is converted and we can pass in custom styles, we need to make this
// more specific. Once Label is converted, we should be able to just pull in the customized styling.
'.ms-Toggle-stateText': {
padding: '0',
margin: '0 10px',
userSelect: 'none'
}
}
};
return Styling_1.mergeStyleSets(styles, customStyles);
});
//# sourceMappingURL=Toggle.styles.js.map