@fluentui/react-northstar
Version:
A themable React component library.
85 lines (83 loc) • 3.39 kB
JavaScript
exports.__esModule = true;
exports.treeTitleStyles = void 0;
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _TreeTitle = require("../../../../components/Tree/TreeTitle");
var _utils = require("../../../../utils");
var _checkboxIndicatorUrl = require("../Checkbox/checkboxIndicatorUrl");
var _checkboxIndicatorIndeterminatedUrl = require("./checkboxIndicatorIndeterminatedUrl");
var treeTitleStyles = {
root: function root(_ref) {
var _ref2, _ref3, _ref4;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables
});
return Object.assign({
padding: v.padding,
cursor: 'pointer',
color: v.color,
position: 'relative',
marginLeft: (0, _utils.pxToRem)(1 + (p.level - 1) * 10),
paddingRight: v.paddingRight,
paddingLeft: v.paddingLeft,
userSelect: 'none'
}, p.selectable && {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
}, {
':focus': Object.assign({}, p.selectable && (_ref2 = {}, _ref2["> ." + _TreeTitle.treeTitleSlotClassNames.indicator] = {
display: 'inline-block'
}, _ref2), borderFocusStyles[':focus']),
':focus-visible': borderFocusStyles[':focus-visible'],
':hover': Object.assign({}, p.selectable && (_ref3 = {
background: v.hoverBackground
}, _ref3["> ." + _TreeTitle.treeTitleSlotClassNames.indicator] = {
display: 'inline-block'
}, _ref3))
}, p.showIndicator && (_ref4 = {}, _ref4["> ." + _TreeTitle.treeTitleSlotClassNames.indicator] = {
display: 'inline-block'
}, _ref4));
},
selectionIndicator: function selectionIndicator(_ref5) {
var p = _ref5.props,
v = _ref5.variables;
return Object.assign({
display: 'none',
float: 'right',
verticalAlign: 'middle',
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.selectionIndicatorMargin,
padding: v.padding,
userSelect: 'none',
backgroundImage: (0, _checkboxIndicatorUrl.checkboxIndicatorUrl)(v.indicatorColor, v.background),
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}, p.selected && {
borderColor: v.checkedBorderColor,
backgroundImage: (0, _checkboxIndicatorUrl.checkboxIndicatorUrl)(v.checkedIndicatorColor, v.checkedBackground)
}, p.indeterminate && {
borderColor: v.checkedBorderColor,
backgroundImage: (0, _checkboxIndicatorIndeterminatedUrl.checkboxIndicatorIndeterminatedUrl)(v.checkedIndicatorColor, v.checkedBackground)
}, p.disabled && {
background: v.disabledBackground,
borderColor: v.disabledBorderColor
}, p.disabled && p.selected && {
color: v.disabledCheckedIndicatorColor,
borderColor: v.disabledBackgroundChecked,
backgroundImage: (0, _checkboxIndicatorUrl.checkboxIndicatorUrl)(v.disabledCheckedIndicatorColor, v.disabledBackgroundChecked)
});
}
};
exports.treeTitleStyles = treeTitleStyles;
//# sourceMappingURL=treeTitleStyles.js.map
;