@fluentui/react-northstar
Version:
A themable React component library.
187 lines (185 loc) • 6.77 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.checkboxStyles = void 0;
var _Checkbox = require("../../../../components/Checkbox/Checkbox");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _checkboxIndicatorUrl = require("./checkboxIndicatorUrl");
var _checkboxIndeterminateIndicatorUrl = require("./checkboxIndeterminateIndicatorUrl");
var _utils = require("../../../../utils");
var commonToggleBeforeStyles = function commonToggleBeforeStyles(v) {
return {
content: "' '",
display: 'block',
borderRadius: '50%',
width: v.toggleIndicatorSize,
height: v.toggleIndicatorSize,
transition: 'margin .3s ease'
};
};
var checkboxStyles = {
root: function root(_ref) {
var _hover;
var p = _ref.props,
v = _ref.variables,
t = _ref.theme;
return Object.assign({
position: 'relative',
display: 'inline-grid',
gridTemplateColumns: "auto " + v.gap + " 1fr",
// IE11: Gap is done via virtual column as in autoprefixer
msGridColumns: "auto " + v.gap + " 1fr"
}, p.labelPosition === 'start' && {
gridTemplateColumns: "1fr " + v.gap + " auto",
msGridColumns: "1fr " + v.gap + " auto"
}, {
cursor: 'pointer',
outline: 0,
color: v.textColor,
padding: v.rootPadding,
verticalAlign: 'middle',
alignItems: 'start'
}, (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: t.siteVariables,
borderRadius: '3px'
}), {
':hover': (_hover = {
color: v.textColorHover
}, _hover["& ." + _Checkbox.checkboxSlotClassNames.indicator] = Object.assign({}, !p.toggle && Object.assign({}, p.checked && p.checked !== 'mixed' && {
borderColor: v.checkedBackgroundHover,
backgroundImage: (0, _checkboxIndicatorUrl.checkboxIndicatorUrl)(v.checkedIndicatorColor, v.checkedBackgroundHover)
}, !p.checked && {
borderColor: v.borderColorHover
}), p.toggle && !p.disabled && Object.assign({
borderColor: v.borderColorHover,
':before': Object.assign({}, commonToggleBeforeStyles(v), {
borderColor: v.borderColorHover,
borderStyle: v.borderStyle,
borderWidth: v.borderWidth,
margin: v.togglePadding,
background: 'transparent'
})
}, p.checked && {
borderColor: v.checkedBorderColor,
background: v.checkedBackgroundHover,
':before': Object.assign({}, commonToggleBeforeStyles(v), {
margin: v.toggleCheckedPadding,
background: v.checkedIndicatorColor
})
})), _hover)
}, p.checked && {
color: v.checkedTextColor
}, p.disabled && {
cursor: 'default',
pointerEvents: 'none',
color: v.disabledColor
});
},
checkbox: function checkbox(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({
msGridRowAlign: 'center',
gridColumn: 1,
msGridColumn: 1
}, p.labelPosition === 'start' && {
gridColumn: 3,
msGridColumn: 3
}, {
boxShadow: 'unset',
width: (0, _utils.pxToRem)(16),
height: (0, _utils.pxToRem)(16),
borderColor: v.borderColor,
borderStyle: v.borderStyle,
borderRadius: v.borderRadius,
borderWidth: v.borderWidth,
color: v.indicatorColor,
margin: v.margin,
padding: v.padding,
userSelect: 'none',
backgroundImage: (0, _checkboxIndicatorUrl.checkboxIndicatorUrl)(v.indicatorColor, v.background),
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}, p.checked && {
borderColor: v.checkedBorderColor,
backgroundColor: v.checkedBackground,
backgroundImage: (0, _checkboxIndicatorUrl.checkboxIndicatorUrl)(v.checkedIndicatorColor, v.checkedBackground)
}, p.checked === 'mixed' && {
backgroundImage: (0, _checkboxIndeterminateIndicatorUrl.checkboxIndicatorIndeterminateUrl)(v.checkedIndicatorColor, v.checkedBackground)
}, p.disabled && {
backgroundColor: v.disabledBackground,
borderColor: v.disabledBorderColor
}, p.disabled && p.checked && {
color: v.disabledCheckedIndicatorColor,
borderColor: v.disabledBackgroundChecked,
backgroundColor: v.disabledBackgroundChecked,
backgroundImage: (0, _checkboxIndicatorUrl.checkboxIndicatorUrl)(v.disabledCheckedIndicatorColor, v.disabledBackgroundChecked)
}, p.disabled && p.checked === 'mixed' && {
color: v.disabledCheckedIndicatorColor,
borderColor: v.disabledBackgroundChecked,
backgroundColor: v.disabledBackgroundChecked,
backgroundImage: (0, _checkboxIndeterminateIndicatorUrl.checkboxIndicatorIndeterminateUrl)(v.disabledCheckedIndicatorColor, v.disabledBackgroundChecked)
});
},
toggle: function toggle(_ref3) {
var p = _ref3.props,
v = _ref3.variables;
return Object.assign({
msGridRowAlign: 'center',
gridColumn: 1,
msGridColumn: 1
}, p.labelPosition === 'start' && {
gridColumn: 3,
msGridColumn: 3
}, {
boxShadow: 'unset',
boxSizing: 'border-box',
background: v.background,
borderColor: v.borderColor,
borderStyle: v.borderStyle,
borderRadius: v.toggleBorderRadius,
borderWidth: v.borderWidth,
margin: v.toggleMargin,
userSelect: 'none',
width: v.toggleWidth,
height: v.toggleHeight,
':before': Object.assign({}, commonToggleBeforeStyles(v), {
borderColor: p.disabled ? v.disabledToggleIndicatorColor : v.borderColor,
borderStyle: v.borderStyle,
borderWidth: v.borderWidth,
margin: v.togglePadding
})
}, p.checked && {
borderColor: v.checkedBorderColor,
background: v.checkedBackground,
':before': Object.assign({}, commonToggleBeforeStyles(v), {
margin: v.toggleCheckedPadding,
background: v.checkedIndicatorColor
})
}, p.disabled && Object.assign({
background: v.disabledBackground,
borderColor: v.disabledBorderColor
}, p.checked && {
background: v.disabledBackgroundChecked,
borderColor: 'transparent',
':before': Object.assign({}, commonToggleBeforeStyles(v), {
margin: v.toggleCheckedPadding,
background: v.disabledCheckedIndicatorColor
})
}));
},
label: function label(_ref4) {
var p = _ref4.props;
return Object.assign({
display: 'block',
// IE11: should be forced to be block, as inline-block is not supported
userSelect: 'none',
gridColumn: 3,
msGridColumn: 3
}, p.labelPosition === 'start' && {
gridColumn: 1,
msGridColumn: 1
});
}
};
exports.checkboxStyles = checkboxStyles;
//# sourceMappingURL=checkboxStyles.js.map