@fluentui/react-northstar
Version:
A themable React component library.
80 lines (79 loc) • 3.07 kB
JavaScript
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { treeTitleSlotClassNames } from '../../../../components/Tree/TreeTitle';
import { pxToRem } from '../../../../utils';
import { checkboxIndicatorUrl } from '../Checkbox/checkboxIndicatorUrl';
import { checkboxIndicatorIndeterminatedUrl } from './checkboxIndicatorIndeterminatedUrl';
export var treeTitleStyles = {
root: function root(_ref) {
var _ref2, _ref3, _ref4;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
var borderFocusStyles = getBorderFocusStyles({
variables: siteVariables
});
return Object.assign({
padding: v.padding,
cursor: 'pointer',
color: v.color,
position: 'relative',
marginLeft: 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["> ." + treeTitleSlotClassNames.indicator] = {
display: 'inline-block'
}, _ref2), borderFocusStyles[':focus']),
':focus-visible': borderFocusStyles[':focus-visible'],
':hover': Object.assign({}, p.selectable && (_ref3 = {
background: v.hoverBackground
}, _ref3["> ." + treeTitleSlotClassNames.indicator] = {
display: 'inline-block'
}, _ref3))
}, p.showIndicator && (_ref4 = {}, _ref4["> ." + 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: pxToRem(16),
height: 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: checkboxIndicatorUrl(v.indicatorColor, v.background),
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}, p.selected && {
borderColor: v.checkedBorderColor,
backgroundImage: checkboxIndicatorUrl(v.checkedIndicatorColor, v.checkedBackground)
}, p.indeterminate && {
borderColor: v.checkedBorderColor,
backgroundImage: checkboxIndicatorIndeterminatedUrl(v.checkedIndicatorColor, v.checkedBackground)
}, p.disabled && {
background: v.disabledBackground,
borderColor: v.disabledBorderColor
}, p.disabled && p.selected && {
color: v.disabledCheckedIndicatorColor,
borderColor: v.disabledBackgroundChecked,
backgroundImage: checkboxIndicatorUrl(v.disabledCheckedIndicatorColor, v.disabledBackgroundChecked)
});
}
};
//# sourceMappingURL=treeTitleStyles.js.map