Stefan Hacker
283 lines
13 KiB
JavaScript
283 lines
13 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var style_utilities_1 = require("@fluentui/style-utilities");
|
|
var utilities_1 = require("@fluentui/utilities");
|
|
var GlobalClassNames = {
|
|
root: 'ms-Checkbox',
|
|
label: 'ms-Checkbox-label',
|
|
checkbox: 'ms-Checkbox-checkbox',
|
|
checkmark: 'ms-Checkbox-checkmark',
|
|
text: 'ms-Checkbox-text',
|
|
};
|
|
var MS_CHECKBOX_LABEL_SIZE = '20px';
|
|
var MS_CHECKBOX_TRANSITION_DURATION = '200ms';
|
|
var MS_CHECKBOX_TRANSITION_TIMING = 'cubic-bezier(.4, 0, .23, 1)';
|
|
var getStyles = function (props) {
|
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
var className = props.className, theme = props.theme, reversed = props.reversed, checked = props.checked, disabled = props.disabled, isUsingCustomLabelRender = props.isUsingCustomLabelRender, indeterminate = props.indeterminate;
|
|
var semanticColors = theme.semanticColors, effects = theme.effects, palette = theme.palette, fonts = theme.fonts;
|
|
var classNames = (0, style_utilities_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
var checkmarkFontColor = semanticColors.inputForegroundChecked;
|
|
// TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBorder
|
|
var checkmarkFontColorHovered = palette.neutralSecondary;
|
|
// TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder
|
|
var checkboxBorderColor = palette.neutralPrimary;
|
|
var checkboxBorderIndeterminateColor = semanticColors.inputBackgroundChecked;
|
|
var checkboxBorderColorChecked = semanticColors.inputBackgroundChecked;
|
|
var checkboxBorderColorDisabled = semanticColors.disabledBodySubtext;
|
|
var checkboxBorderHoveredColor = semanticColors.inputBorderHovered;
|
|
var checkboxBorderIndeterminateHoveredColor = semanticColors.inputBackgroundCheckedHovered;
|
|
var checkboxBackgroundChecked = semanticColors.inputBackgroundChecked;
|
|
// TODO: after updating the semanticColors slots mapping the following 2 tokens need to be
|
|
// semanticColors.inputBackgroundCheckedHovered
|
|
var checkboxBackgroundCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
|
|
var checkboxBorderColorCheckedHovered = semanticColors.inputBackgroundCheckedHovered;
|
|
var checkboxHoveredTextColor = semanticColors.inputTextHovered;
|
|
var checkboxBackgroundDisabledChecked = semanticColors.disabledBodySubtext;
|
|
var checkboxTextColor = semanticColors.bodyText;
|
|
var checkboxTextColorDisabled = semanticColors.disabledText;
|
|
var indeterminateDotStyles = [
|
|
(_a = {
|
|
content: '""',
|
|
borderRadius: effects.roundedCorner2,
|
|
position: 'absolute',
|
|
width: 10,
|
|
height: 10,
|
|
top: 4,
|
|
left: 4,
|
|
boxSizing: 'border-box',
|
|
borderWidth: 5,
|
|
borderStyle: 'solid',
|
|
borderColor: disabled ? checkboxBorderColorDisabled : checkboxBorderIndeterminateColor,
|
|
transitionProperty: 'border-width, border, border-color',
|
|
transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,
|
|
transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING
|
|
},
|
|
_a[style_utilities_1.HighContrastSelector] = {
|
|
borderColor: 'WindowText',
|
|
},
|
|
_a),
|
|
];
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
},
|
|
reversed && 'reversed',
|
|
checked && 'is-checked',
|
|
!disabled && 'is-enabled',
|
|
disabled && 'is-disabled',
|
|
!disabled && [
|
|
!checked && (_b = {},
|
|
_b[":hover .".concat(classNames.checkbox)] = (_c = {
|
|
borderColor: checkboxBorderHoveredColor
|
|
},
|
|
_c[style_utilities_1.HighContrastSelector] = {
|
|
borderColor: 'Highlight',
|
|
},
|
|
_c),
|
|
_b[":focus .".concat(classNames.checkbox)] = { borderColor: checkboxBorderHoveredColor },
|
|
_b[":hover .".concat(classNames.checkmark)] = (_d = {
|
|
color: checkmarkFontColorHovered,
|
|
opacity: '1'
|
|
},
|
|
_d[style_utilities_1.HighContrastSelector] = {
|
|
color: 'Highlight',
|
|
},
|
|
_d),
|
|
_b),
|
|
checked &&
|
|
!indeterminate && (_e = {},
|
|
_e[":hover .".concat(classNames.checkbox)] = {
|
|
background: checkboxBackgroundCheckedHovered,
|
|
borderColor: checkboxBorderColorCheckedHovered,
|
|
},
|
|
_e[":focus .".concat(classNames.checkbox)] = {
|
|
background: checkboxBackgroundCheckedHovered,
|
|
borderColor: checkboxBorderColorCheckedHovered,
|
|
},
|
|
_e[style_utilities_1.HighContrastSelector] = (_f = {},
|
|
_f[":hover .".concat(classNames.checkbox)] = {
|
|
background: 'Highlight',
|
|
borderColor: 'Highlight',
|
|
},
|
|
_f[":focus .".concat(classNames.checkbox)] = {
|
|
background: 'Highlight',
|
|
},
|
|
_f[":focus:hover .".concat(classNames.checkbox)] = {
|
|
background: 'Highlight',
|
|
},
|
|
_f[":focus:hover .".concat(classNames.checkmark)] = {
|
|
color: 'Window',
|
|
},
|
|
_f[":hover .".concat(classNames.checkmark)] = {
|
|
color: 'Window',
|
|
},
|
|
_f),
|
|
_e),
|
|
indeterminate && (_g = {},
|
|
_g[":hover .".concat(classNames.checkbox, ", :hover .").concat(classNames.checkbox, ":after")] = (_h = {
|
|
borderColor: checkboxBorderIndeterminateHoveredColor
|
|
},
|
|
_h[style_utilities_1.HighContrastSelector] = {
|
|
borderColor: 'WindowText',
|
|
},
|
|
_h),
|
|
_g[":focus .".concat(classNames.checkbox)] = {
|
|
borderColor: checkboxBorderIndeterminateHoveredColor,
|
|
},
|
|
_g[":hover .".concat(classNames.checkmark)] = {
|
|
opacity: '0',
|
|
},
|
|
_g),
|
|
(_j = {},
|
|
_j[":hover .".concat(classNames.text, ", :focus .").concat(classNames.text)] = (_k = {
|
|
color: checkboxHoveredTextColor
|
|
},
|
|
_k[style_utilities_1.HighContrastSelector] = {
|
|
color: disabled ? 'GrayText' : 'WindowText',
|
|
},
|
|
_k),
|
|
_j),
|
|
],
|
|
className,
|
|
],
|
|
input: (_l = {
|
|
position: 'absolute',
|
|
background: 'none',
|
|
opacity: 0
|
|
},
|
|
// eslint-disable-next-line @fluentui/max-len
|
|
_l[".".concat(utilities_1.IsFocusVisibleClassName, " &:focus + label::before, :host(.").concat(utilities_1.IsFocusVisibleClassName, ") &:focus + label::before")] = (_m = {
|
|
outline: '1px solid ' + theme.palette.neutralSecondary,
|
|
outlineOffset: '2px'
|
|
},
|
|
_m[style_utilities_1.HighContrastSelector] = {
|
|
outline: '1px solid WindowText',
|
|
},
|
|
_m),
|
|
_l),
|
|
label: [
|
|
classNames.label,
|
|
theme.fonts.medium,
|
|
{
|
|
display: 'flex',
|
|
alignItems: isUsingCustomLabelRender ? 'center' : 'flex-start',
|
|
cursor: disabled ? 'default' : 'pointer',
|
|
position: 'relative',
|
|
userSelect: 'none',
|
|
},
|
|
reversed && {
|
|
flexDirection: 'row-reverse',
|
|
justifyContent: 'flex-end',
|
|
},
|
|
{
|
|
'&::before': {
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
content: '""',
|
|
pointerEvents: 'none',
|
|
},
|
|
},
|
|
],
|
|
checkbox: [
|
|
classNames.checkbox,
|
|
(_o = {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexShrink: 0,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
height: MS_CHECKBOX_LABEL_SIZE,
|
|
width: MS_CHECKBOX_LABEL_SIZE,
|
|
border: "1px solid ".concat(checkboxBorderColor),
|
|
borderRadius: effects.roundedCorner2,
|
|
boxSizing: 'border-box',
|
|
transitionProperty: 'background, border, border-color',
|
|
transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,
|
|
transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING,
|
|
/* in case the icon is bigger than the box */
|
|
overflow: 'hidden',
|
|
':after': indeterminate ? indeterminateDotStyles : null
|
|
},
|
|
_o[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'WindowText' }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
|
|
_o),
|
|
indeterminate && {
|
|
borderColor: checkboxBorderIndeterminateColor,
|
|
},
|
|
!reversed
|
|
? // This margin on the checkbox is for backwards compat. Notably it has the effect where a customRender
|
|
// is used, there will be only a 4px margin from checkbox to label. The label by default would have
|
|
// another 4px margin for a total of 8px margin between checkbox and label. We don't combine the two
|
|
// (and move it into the text) to not incur a breaking change for everyone using custom render atm.
|
|
{
|
|
marginRight: 4,
|
|
}
|
|
: {
|
|
marginLeft: 4,
|
|
},
|
|
!disabled &&
|
|
!indeterminate &&
|
|
checked && (_p = {
|
|
background: checkboxBackgroundChecked,
|
|
borderColor: checkboxBorderColorChecked
|
|
},
|
|
_p[style_utilities_1.HighContrastSelector] = {
|
|
background: 'Highlight',
|
|
borderColor: 'Highlight',
|
|
},
|
|
_p),
|
|
disabled && (_q = {
|
|
borderColor: checkboxBorderColorDisabled
|
|
},
|
|
_q[style_utilities_1.HighContrastSelector] = {
|
|
borderColor: 'GrayText',
|
|
},
|
|
_q),
|
|
checked &&
|
|
disabled && (_r = {
|
|
background: checkboxBackgroundDisabledChecked,
|
|
borderColor: checkboxBorderColorDisabled
|
|
},
|
|
_r[style_utilities_1.HighContrastSelector] = {
|
|
background: 'Window',
|
|
},
|
|
_r),
|
|
],
|
|
checkmark: [
|
|
classNames.checkmark,
|
|
(_s = {
|
|
opacity: checked && !indeterminate ? '1' : '0',
|
|
color: checkmarkFontColor
|
|
},
|
|
_s[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ color: disabled ? 'GrayText' : 'Window' }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
|
|
_s),
|
|
],
|
|
text: [
|
|
classNames.text,
|
|
(_t = {
|
|
color: disabled ? checkboxTextColorDisabled : checkboxTextColor,
|
|
fontSize: fonts.medium.fontSize,
|
|
lineHeight: '20px'
|
|
},
|
|
_t[style_utilities_1.HighContrastSelector] = tslib_1.__assign({ color: disabled ? 'GrayText' : 'WindowText' }, (0, style_utilities_1.getHighContrastNoAdjustStyle)()),
|
|
_t),
|
|
!reversed
|
|
? {
|
|
marginLeft: 4,
|
|
}
|
|
: {
|
|
marginRight: 4,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
//# sourceMappingURL=Checkbox.styles.js.map
|