UNPKG

@fluentui/react-northstar

Version:
85 lines (83 loc) 3.39 kB
"use strict"; 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