UNPKG

@kaspersky/components

Version:

Kaspersky Design System UI Kit

13 lines (12 loc) 6.38 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.treeCss = void 0; var _styledComponents = require("styled-components"); var _getFromProps = require("../../helpers/getFromProps.js"); var _theme = require("../../design-system/theme/index.js"); var _tokens = require("../../design-system/tokens/index.js"); const fromProps = (0, _getFromProps.getFromProps)(); const textSizes = (0, _tokens.getTextSizes)(_tokens.TextTypes.BTR3); const treeCss = exports.treeCss = (0, _styledComponents.css)(["&&{background:none;border-radius:8px;&.ant-tree-focused{background:", ";}.ant-tree-drop-indicator{background-color:", ";&:after{border-color:", ";}}.ant-tree-list .ant-tree-node-content-wrapper .ant-tree-title{font-family:", ";font-size:", ";line-height:", ";font-weight:", ";font-style:", ";letter-spacing:", ";}.ant-tree-list .ant-tree-node-content-wrapper:hover,.ant-tree-list .ant-tree-node-selected{background-color:transparent;}.ant-tree-node-content-wrapper{padding-left:3px;cursor:", ";flex:1;}.ant-tree-draggable-icon + .ant-tree-switcher-noop{display:none;}.ant-tree-checkbox + .ant-tree-node-content-wrapper{padding-left:", "px;cursor:pointer;}.anticon-file,.ant-tree-draggable-icon,.ant-tree-switcher-icon{opacity:1;color:", ";}.ant-tree-switcher{width:16px;background:none;}.ant-tree-switcher-loading-icon{display:none;}.ant-tree-treenode{position:relative;margin:1px 0;padding:", "px ", "px ", "px ", "px;width:100%;border-radius:8px;transition-duration:0.2s;border:2px solid transparent;background:none;&:not(.ant-tree-treenode-selected):not(.ant-tree-treenode-checkbox-checked){.ant-tree-title{color:", ";}&:hover{&,& .ant-checkbox-inner{background-color:", ";}}&:active{&,& .ant-checkbox-inner{background-color:", ";}}&.ant-tree-treenode-active{border-color:", ";background:none;.ant-tree-node-content-wrapper{background:transparent;}}&.ant-tree-treenode-disabled{background:none;.ant-tree-title{color:", ";}}}&.ant-tree-treenode-selected,&.ant-tree-treenode-checkbox-checked{background-color:", ";.ant-tree-title{color:", ";}&:hover{&{background-color:", ";}.ant-tree-title{color:", ";}}&:active{&{background-color:", ";}.ant-tree-title{color:", ";}}&.ant-tree-treenode-active{border-color:", ";background-color:", ";.ant-tree-title{color:", ";}.ant-tree-node-content-wrapper{background:transparent;}}&.ant-tree-treenode-disabled{background-color:", ";.ant-tree-title{color:", ";}}}.ant-tree-indent-unit{width:18px;&:before{top:-8px;right:10px;bottom:-2px;border-color:", ";}}&.dragging{background-color:", ";.ant-tree-title{color:", ";}&:after{display:none;}}&:not(.ant-tree-treenode-draggable) .ant-tree-draggable-icon{opacity:0.5;}&[draggable=\"true\"]{.ant-tree-indent-unit{&:before{top:-10px;right:", "px;}}}.ant-tree-switcher-icon{transform:rotate(0) translateY(-1px);transition:transform 0.25s ease-in-out;}&.ant-tree-treenode-switcher-close{.ant-tree-switcher{.ant-tree-switcher-icon{transform:rotate(-90deg) translate(1px,0);}}}.ant-tree-switcher-leaf-line{&:before{bottom:-2px;right:8px;top:-8px;border-color:", ";}&:after{display:none;}}&.ant-tree-treenode-leaf-last{.ant-tree-switcher-leaf-line{&:before{top:-8px !important;height:23px !important;}}}&.ant-tree-treenode-checkbox-indeterminate .kl-v6-checkbox-icon-normal,&:not(.ant-tree-treenode-checkbox-indeterminate) .kl-v6-checkbox-icon-indeterminate{display:none;}.ant-radio-group{transform:translateY(2px);}&:not(.ant-tree-treenode-checkbox-checked){.ant-radio-wrapper.ant-radio-wrapper-checked{display:none;}}&.ant-tree-treenode-checkbox-checked{.ant-radio-wrapper:not(.ant-radio-wrapper-checked){display:none;}}}.ant-tree-checkbox{margin:0 0 0 -20px;padding:0;transform:translate(19px,2px);opacity:0;z-index:2;}.ant-tree-iconEle:not(:empty) + .ant-tree-title{padding-left:", "px;}.ant-tree-node-content-wrapper .ant-tree-iconEle{width:14px;height:14px;.ant-checkbox{top:", "px;}}.ant-checkbox-wrapper{& + .kl-v6-checkbox-icon-indeterminate{margin-left:0;}}.ant-checkbox-checked::after{border:none;}}"], fromProps('focus.background'), fromProps('dropIndicator.background'), fromProps('dropIndicator.background'), textSizes.fontFamily, textSizes.fontSize, textSizes.lineHeight, textSizes.fontWeight, textSizes.fontStyle, textSizes.letterSpacing, props => props.disableNodeBg ? 'default' : 'pointer', _theme.SPACES[3], fromProps('normal.arrowColor'), _theme.SPACES[1], _theme.SPACES[5], _theme.SPACES[1], _theme.SPACES[1], fromProps('treeNode.unselected.normal.textColor'), props => !props.disableNodeBg && (props.selectable || props.checkable) ? fromProps('treeNode.unselected.hover.background') : fromProps('treeNode.unselected.normal.background'), props => !props.disableNodeBg && (props.selectable || props.checkable) ? fromProps('treeNode.unselected.active.background') : fromProps('treeNode.unselected.normal.background'), fromProps('treeNode.unselected.focus.borderColor'), fromProps('treeNode.unselected.disabled.textColor'), props => props.disableNodeBg ? fromProps('treeNode.unselected.normal.background') : fromProps('treeNode.selected.normal.background'), props => props.disableNodeBg ? fromProps('treeNode.unselected.normal.textColor') : fromProps('treeNode.selected.normal.textColor'), props => props.disableNodeBg ? fromProps('treeNode.unselected.normal.background') : fromProps('treeNode.selected.hover.background'), props => props.disableNodeBg ? fromProps('treeNode.unselected.normal.textColor') : fromProps('treeNode.selected.hover.textColor'), props => props.disableNodeBg ? fromProps('treeNode.unselected.normal.background') : fromProps('treeNode.selected.active.background'), props => props.disableNodeBg ? fromProps('treeNode.unselected.normal.textColor') : fromProps('treeNode.selected.active.textColor'), fromProps('treeNode.selected.focus.borderColor'), fromProps('treeNode.selected.normal.background'), fromProps('treeNode.selected.normal.textColor'), props => props.disableNodeBg ? fromProps('treeNode.unselected.disabled.background') : fromProps('treeNode.selected.disabled.background'), props => props.disableNodeBg ? fromProps('treeNode.unselected.disabled.textColor') : fromProps('treeNode.selected.disabled.textColor'), fromProps('normal.lineColor'), fromProps('treeNode.unselected.drag.background'), fromProps('treeNode.unselected.drag.textColor'), _theme.SPACES[3], fromProps('normal.lineColor'), _theme.SPACES[2], _theme.SPACES[1]);