office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
203 lines • 7.49 kB
JavaScript
import { memoizeFunction } from '../../Utilities';
import { mergeStyleSets, getFocusStyle, HighContrastSelector } from '../../Styling';
export var getClassNames = memoizeFunction(function (theme, styles, className, disabled, checked) {
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.smallInputBorder;
var pillBorderHoveredColor = semanticColors.inputBorderHovered;
var pillBorderDisabledColor = semanticColors.disabledText;
var textDisabledColor = semanticColors.disabledBodyText;
styles = styles || {};
return mergeStyleSets({
root: [
'ms-Toggle',
checked && 'is-checked',
!disabled && 'is-enabled',
disabled && 'is-disabled',
className,
{
marginBottom: '8px'
},
styles.root
],
label: [
'ms-Toggle-label',
styles.label,
disabled && {
color: textDisabledColor,
selectors: (_a = {},
_a[HighContrastSelector] = {
color: 'GrayText'
},
_a)
}
],
container: [
'ms-Toggle-innerContainer',
{
display: 'inline-flex',
position: 'relative',
},
styles.container
],
pill: [
'ms-Toggle-background',
getFocusStyle(theme, -3),
{
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',
},
styles.pill,
!disabled && [
!checked && {
selectors: {
':hover': [
{
borderColor: pillBorderHoveredColor
},
styles.pillHovered
],
':hover .ms-Toggle-thumb': styles.thumbHovered
}
},
checked && [
{
background: pillCheckedBackground,
borderColor: 'transparent'
},
styles.pillChecked,
{
selectors: (_b = {
':hover': [
{
backgroundColor: pillCheckedHoveredBackground,
borderColor: 'transparent'
},
styles.pillCheckedHovered
],
':hover .ms-Toggle-thumb': [
styles.thumbCheckedHovered
]
},
_b[HighContrastSelector] = {
backgroundColor: 'WindowText'
},
_b)
}
]
],
disabled && [
{
cursor: 'default'
},
!checked && [
{
borderColor: pillBorderDisabledColor
},
styles.pillDisabled
],
checked && [
{
backgroundColor: pillCheckedDisabledBackground,
borderColor: 'transparent'
},
styles.pillCheckedDisabled
],
]
],
thumb: [
'ms-Toggle-thumb',
{
width: '.5em',
height: '.5em',
borderRadius: '.5em',
position: 'absolute',
top: '.18em',
transition: 'all 0.1s ease',
backgroundColor: thumbBackground,
/* Border is added to handle high contrast mode for Firefox */
borderColor: 'transparent',
borderWidth: '.28em',
borderStyle: 'solid',
boxSizing: 'border-box',
left: '.2em'
},
styles.thumb,
!disabled && checked && [
{
backgroundColor: thumbCheckedBackground,
left: '1.4em',
selectors: (_c = {},
_c[HighContrastSelector] = {
backgroundColor: 'Window',
borderColor: 'Window'
},
_c)
},
styles.thumbChecked,
],
disabled && [
!checked && [
{
backgroundColor: thumbDisabledBackground,
left: '.2em',
},
styles.thumbDisabled
],
checked && [
{
backgroundColor: thumbCheckedDisabledBackground,
left: '1.4em'
},
styles.thumbCheckedDisabled
]
]
],
text: [
'ms-Toggle-stateText',
{
selectors: {
// Workaround: make rules more sepecific than Label rules.
'&&': {
padding: '0',
margin: '0 10px',
userSelect: 'none',
}
}
},
disabled && {
selectors: {
'&&': {
color: textDisabledColor,
selectors: (_d = {},
_d[HighContrastSelector] = {
color: 'GrayText'
},
_d)
}
}
},
styles.text
]
});
var _a, _b, _c, _d;
});
//# sourceMappingURL=Toggle.classNames.js.map