UNPKG

@fluentui/react-northstar

Version:
80 lines (79 loc) 3.07 kB
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