@fluentui/react-northstar
Version:
A themable React component library.
80 lines (78 loc) • 2.53 kB
JavaScript
;
exports.__esModule = true;
exports.radioGroupItemStyles = void 0;
var _RadioGroupItem = require("../../../../components/RadioGroup/RadioGroupItem");
var _utils = require("../../../../utils");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var restHoverFocusTextColor = function restHoverFocusTextColor(textColor) {
return {
color: textColor,
':hover': {
color: textColor
},
':focus': {
color: textColor
}
};
};
var radioGroupItemStyles = {
root: function root(_ref) {
var _hover;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
return Object.assign({
position: 'relative',
alignItems: 'center',
borderStyle: 'solid',
borderWidth: "" + (0, _utils.pxToRem)(1),
borderColor: 'transparent',
borderRadius: siteVariables.borderRadiusMedium,
color: v.textColorDefault,
cursor: 'pointer',
display: p.vertical ? 'flex' : 'inline-flex',
fontSize: v.textFontSize,
padding: v.padding,
margin: v.margin,
':hover': (_hover = {
color: v.textColorDefaultHoverFocus
}, _hover["& ." + _RadioGroupItem.radioGroupItemSlotClassNames.indicator] = Object.assign({
borderColor: v.textColorDefaultHoverFocus
}, !p.disabled && !p.checked && {
borderColor: v.indicatorBorderColorDefaultHover
}), _hover),
':focus': {
color: v.textColorDefaultHoverFocus
}
}, p.checked && Object.assign({}, restHoverFocusTextColor(v.textColorChecked)), p.disabled && Object.assign({}, restHoverFocusTextColor(v.colorDisabled)), (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables
}));
},
indicator: function indicator(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({
margin: (0, _utils.pxToRem)(2) + " 0",
outline: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: (0, _utils.pxToRem)(16),
height: (0, _utils.pxToRem)(16),
verticalAlign: 'midddle',
color: v.indicatorColorDefault
}, p.checked && {
color: v.indicatorBackgroundColorChecked
}, p.disabled && {
color: v.colorDisabled
});
},
label: function label() {
return {
margin: "0 0 0 " + (0, _utils.pxToRem)(12),
userSelect: 'none'
};
}
};
exports.radioGroupItemStyles = radioGroupItemStyles;
//# sourceMappingURL=radioGroupItemStyles.js.map