@fluentui/react-northstar
Version:
A themable React component library.
75 lines (74 loc) • 2.32 kB
JavaScript
import { radioGroupItemSlotClassNames } from '../../../../components/RadioGroup/RadioGroupItem';
import { pxToRem } from '../../../../utils';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
var restHoverFocusTextColor = function restHoverFocusTextColor(textColor) {
return {
color: textColor,
':hover': {
color: textColor
},
':focus': {
color: textColor
}
};
};
export 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: "" + 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["& ." + 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)), getBorderFocusStyles({
variables: siteVariables
}));
},
indicator: function indicator(_ref2) {
var p = _ref2.props,
v = _ref2.variables;
return Object.assign({
margin: pxToRem(2) + " 0",
outline: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: pxToRem(16),
height: 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 " + pxToRem(12),
userSelect: 'none'
};
}
};
//# sourceMappingURL=radioGroupItemStyles.js.map