@import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../checkbox/style/mixin'; @import './mixin'; @import './directory'; @tree-prefix-cls: ~'@{ant-prefix}-tree'; @tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode'; @tree-motion: ~'@{ant-prefix}-motion-collapse'; .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox'); .antTreeFn(@tree-prefix-cls) { .@{tree-prefix-cls} { .reset-component; background: @tree-bg; border-radius: @border-radius-base; transition: background-color 0.3s; &-focused:not(:hover):not(&-active-focused) { background: @primary-1; } // =================== Virtual List =================== &-list-holder-inner { align-items: flex-start; } &.@{tree-prefix-cls}-block-node { .@{tree-prefix-cls}-list-holder-inner { align-items: stretch; // >>> Title .@{tree-prefix-cls}-node-content-wrapper { flex: auto; } } } // ===================== TreeNode ===================== .@{tree-node-prefix-cls} { display: flex; align-items: flex-start; padding: 0 0 (@padding-xs / 2) 0; outline: none; // Disabled &-disabled { // >>> Title .@{tree-prefix-cls}-node-content-wrapper { color: @disabled-color; cursor: not-allowed; &:hover { background: transparent; } } } &-active .@{tree-prefix-cls}-node-content-wrapper { background: @tree-node-hover-bg; } } // >>> Indent &-indent { align-self: stretch; white-space: nowrap; user-select: none; &-unit { display: inline-block; width: @tree-title-height; } } // >>> Switcher & &-switcher { .antTreeSwitcherIcon(); flex: none; width: @tree-title-height; height: @tree-title-height; margin: 0; line-height: @tree-title-height; text-align: center; cursor: pointer; &-noop { cursor: default; } &_close { .@{tree-prefix-cls}-switcher-icon { svg { transform: rotate(-90deg); } } } } // >>> Checkbox & &-checkbox { top: initial; margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0; } // >>> Title & &-node-content-wrapper { min-height: @tree-title-height; margin: 0; padding: 0 4px; color: inherit; line-height: @tree-title-height; background: transparent; border-radius: @border-radius-base; cursor: pointer; transition: all 0.3s; &:hover { background-color: @tree-node-hover-bg; } &.@{tree-prefix-cls}-node-selected { background-color: @tree-node-selected-bg; } // Icon .@{tree-prefix-cls}-iconEle { display: inline-block; width: @tree-title-height; height: @tree-title-height; line-height: @tree-title-height; text-align: center; vertical-align: top; } } // ===================== Loading ====================== .@{tree-node-prefix-cls}-loading { // Icon .@{tree-prefix-cls}-iconEle { display: none; } } // ==================== Draggable ===================== &-node-content-wrapper[draggable='true'] { line-height: @tree-title-height - 4px; border-top: 2px transparent solid; border-bottom: 2px transparent solid; user-select: none; } .@{tree-node-prefix-cls}.drag-over { > [draggable] { color: white; background-color: @primary-color; opacity: 0.8; } } .@{tree-node-prefix-cls}.drag-over-gap-top { > [draggable] { border-top-color: @primary-color; } } .@{tree-node-prefix-cls}.drag-over-gap-bottom { > [draggable] { border-bottom-color: @primary-color; } } // ==================== Show Line ===================== &-show-line { // ================ Indent lines ================ .@{tree-prefix-cls}-indent { &-unit { position: relative; height: 100%; &::before { position: absolute; top: calc(100% - 4px); right: -@tree-title-height / 2; bottom: -@tree-title-height - 4px; border-right: 1px solid @border-color-base; content: ''; } &-end { &::before { display: none; } } } } /* Motion should hide line of measure */ .@{tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) { .@{tree-prefix-cls}-indent-unit { &::before { display: none; } } } // ============== Cover Background ============== .@{tree-prefix-cls}-switcher { z-index: 1; background: @component-background; } } } } .antTreeFn(@tree-prefix-cls);