@import "mixins/mixins"; @import "common/var"; @import "common/transition"; @import "checkbox"; @include b(tree) { position: relative; cursor: default; background: $--color-white; color: $--tree-font-color; @include e(empty-block) { position: relative; min-height: 60px; text-align: center; width: 100%; height: 100%; } @include e(empty-text) { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: $--color-text-secondary; font-size: $--font-size-base; } @include e(drop-indicator) { position: absolute; left: 0; right: 0; height: 1px; background-color: $--color-primary; } } @include b(tree-node) { white-space: nowrap; outline: none; &:focus { /* focus */ > .el-tree-node__content { background-color: $--tree-node-hover-background-color; } } @include when(drop-inner) { > .el-tree-node__content .el-tree-node__label { background-color: $--color-primary; color: #fff; } } @include e(content) { display: flex; align-items: center; height: 26px; cursor: pointer; & > .el-tree-node__expand-icon { padding: 6px; } & > label.el-checkbox { margin-right: 8px; } &:hover { background-color: $--tree-node-hover-background-color; } .el-tree.is-dragging & { cursor: move; & * { pointer-events: none; } } .el-tree.is-dragging.is-drop-not-allow & { cursor: not-allowed; } } @include e(expand-icon) { cursor: pointer; color: $--tree-expand-icon-color; font-size: 12px; transform: rotate(0deg); transition: transform 0.3s ease-in-out; &.expanded { transform: rotate(90deg); } &.is-leaf { color: transparent; cursor: default; } } @include e(label) { font-size: $--font-size-base; } @include e(loading-icon) { margin-right: 8px; font-size: $--font-size-base; color: $--tree-expand-icon-color; } & > .el-tree-node__children { overflow: hidden; background-color: transparent; } &.is-expanded > .el-tree-node__children { display: block; } } .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: mix($--color-white, $--color-primary, 92%); }