bkui-vue 1.0.3-beta.24 → 1.0.3-beta.26

package/lib/transfer/transfer.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
-  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
   --line-height-base: 16px;
   --line-height-medium: 16px;
   --line-height-large: 18px;
+  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
+  --table-body-font-color: #63656e;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,21 +127,21 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-transfer {
+:where(.bk-transfer) {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 14px;
 }
-.bk-transfer .transfer {
+:where(.bk-transfer) .transfer {
   margin: 0 8px;
   font-size: 24px;
   color: var(--light-gray);
 }
-.bk-transfer .transfer-button-group {
+:where(.bk-transfer) .transfer-button-group {
   margin: 0 8px;
 }
-.bk-transfer .transfer-button-group .transfer-button {
+:where(.bk-transfer) .transfer-button-group .transfer-button {
   display: flex;
   width: 24px;
   height: 24px;
@@ -153,20 +153,20 @@
   align-items: center;
   justify-content: center;
 }
-.bk-transfer .transfer-button-group .transfer-button:first-child {
+:where(.bk-transfer) .transfer-button-group .transfer-button:first-child {
   margin-bottom: 8px;
 }
-.bk-transfer .transfer-button-group .transfer-button.disabled {
+:where(.bk-transfer) .transfer-button-group .transfer-button.disabled {
   color: var(--light-gray);
   cursor: not-allowed;
   background-color: var(--whitesmoke-color);
   border-color: var(--disable-color);
 }
-.bk-transfer .transfer-button-group .transfer-button span {
+:where(.bk-transfer) .transfer-button-group .transfer-button span {
   font-size: 18px;
 }
-.bk-transfer .source-list,
-.bk-transfer .target-list {
+:where(.bk-transfer) .source-list,
+:where(.bk-transfer) .target-list {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -177,41 +177,41 @@
   border: 1px solid var(--disable-color);
   border-radius: 2px;
 }
-.bk-transfer .source-list .slot-header,
-.bk-transfer .target-list .slot-header,
-.bk-transfer .source-list .header,
-.bk-transfer .target-list .header {
+:where(.bk-transfer) .source-list .slot-header,
+:where(.bk-transfer) .target-list .slot-header,
+:where(.bk-transfer) .source-list .header,
+:where(.bk-transfer) .target-list .header {
   height: 40px;
   padding: 0 16px;
   background-color: var(--whitesmoke-color);
   border-bottom: 1px solid var(--disable-color);
 }
-.bk-transfer .source-list .header,
-.bk-transfer .target-list .header {
+:where(.bk-transfer) .source-list .header,
+:where(.bk-transfer) .target-list .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: 700;
 }
-.bk-transfer .source-list .header .select-all,
-.bk-transfer .target-list .header .select-all {
+:where(.bk-transfer) .source-list .header .select-all,
+:where(.bk-transfer) .target-list .header .select-all {
   font-size: 12px;
   font-weight: normal;
   color: var(--primary-color);
   cursor: pointer;
 }
-.bk-transfer .source-list .header .select-all.disabled,
-.bk-transfer .target-list .header .select-all.disabled {
+:where(.bk-transfer) .source-list .header .select-all.disabled,
+:where(.bk-transfer) .target-list .header .select-all.disabled {
   color: var(--light-gray);
   cursor: not-allowed;
 }
-.bk-transfer .source-list .header .select-total-count,
-.bk-transfer .target-list .header .select-total-count {
+:where(.bk-transfer) .source-list .header .select-total-count,
+:where(.bk-transfer) .target-list .header .select-total-count {
   font-weight: normal;
   color: var(--gray-color);
 }
-.bk-transfer .source-list .transfer-search-input,
-.bk-transfer .target-list .transfer-search-input {
+:where(.bk-transfer) .source-list .transfer-search-input,
+:where(.bk-transfer) .target-list .transfer-search-input {
   width: calc(100% - 32px);
   height: 30px;
   margin: 8px 16px 0;
@@ -220,22 +220,22 @@
   border-radius: 0;
   outline: none;
 }
-.bk-transfer .source-list .transfer-search-input.is-focused,
-.bk-transfer .target-list .transfer-search-input.is-focused {
+:where(.bk-transfer) .source-list .transfer-search-input.is-focused,
+:where(.bk-transfer) .target-list .transfer-search-input.is-focused {
   box-shadow: none;
 }
-.bk-transfer .source-list .transfer-search-input .icon-search,
-.bk-transfer .target-list .transfer-search-input .icon-search {
+:where(.bk-transfer) .source-list .transfer-search-input .icon-search,
+:where(.bk-transfer) .target-list .transfer-search-input .icon-search {
   font-size: 18px;
   line-height: 28px;
   color: var(--light-gray);
 }
-.bk-transfer .source-list .transfer-search-input input,
-.bk-transfer .target-list .transfer-search-input input {
+:where(.bk-transfer) .source-list .transfer-search-input input,
+:where(.bk-transfer) .target-list .transfer-search-input input {
   padding-left: 4px;
 }
-.bk-transfer .source-list .empty,
-.bk-transfer .target-list .empty {
+:where(.bk-transfer) .source-list .empty,
+:where(.bk-transfer) .target-list .empty {
   flex: 1;
   display: flex;
   align-items: center;
@@ -244,23 +244,23 @@
   color: var(--light-gray);
   cursor: default;
 }
-.bk-transfer .source-list .content,
-.bk-transfer .target-list .content {
+:where(.bk-transfer) .source-list .content,
+:where(.bk-transfer) .target-list .content {
   flex: 1;
   margin: 4px 0;
   overflow-y: auto;
 }
-.bk-transfer .source-list .content.is-flex,
-.bk-transfer .target-list .content.is-flex {
+:where(.bk-transfer) .source-list .content.is-flex,
+:where(.bk-transfer) .target-list .content.is-flex {
   display: flex;
   flex-direction: column;
 }
-.bk-transfer .source-list .content li.custom-item,
-.bk-transfer .target-list .content li.custom-item,
-.bk-transfer .source-list .content li .item-content,
-.bk-transfer .target-list .content li .item-content,
-.bk-transfer .source-list .content .checkbox-item,
-.bk-transfer .target-list .content .checkbox-item {
+:where(.bk-transfer) .source-list .content li.custom-item,
+:where(.bk-transfer) .target-list .content li.custom-item,
+:where(.bk-transfer) .source-list .content li .item-content,
+:where(.bk-transfer) .target-list .content li .item-content,
+:where(.bk-transfer) .source-list .content .checkbox-item,
+:where(.bk-transfer) .target-list .content .checkbox-item {
   display: flex;
   height: 32px;
   padding: 0 16px;
@@ -268,80 +268,80 @@
   cursor: pointer;
   align-items: center;
 }
-.bk-transfer .source-list .content li.custom-item:hover:not(.is-disabled),
-.bk-transfer .target-list .content li.custom-item:hover:not(.is-disabled),
-.bk-transfer .source-list .content li .item-content:hover:not(.is-disabled),
-.bk-transfer .target-list .content li .item-content:hover:not(.is-disabled),
-.bk-transfer .source-list .content .checkbox-item:hover:not(.is-disabled),
-.bk-transfer .target-list .content .checkbox-item:hover:not(.is-disabled) {
+:where(.bk-transfer) .source-list .content li.custom-item:hover:not(.is-disabled),
+:where(.bk-transfer) .target-list .content li.custom-item:hover:not(.is-disabled),
+:where(.bk-transfer) .source-list .content li .item-content:hover:not(.is-disabled),
+:where(.bk-transfer) .target-list .content li .item-content:hover:not(.is-disabled),
+:where(.bk-transfer) .source-list .content .checkbox-item:hover:not(.is-disabled),
+:where(.bk-transfer) .target-list .content .checkbox-item:hover:not(.is-disabled) {
   color: var(--primary-color);
   background-color: #e1ecff;
 }
-.bk-transfer .source-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
-.bk-transfer .target-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
-.bk-transfer .source-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
-.bk-transfer .target-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
-.bk-transfer .source-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper,
-.bk-transfer .target-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper {
+:where(.bk-transfer) .source-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
+:where(.bk-transfer) .target-list .content li.custom-item:hover:not(.is-disabled) .icon-wrapper,
+:where(.bk-transfer) .source-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
+:where(.bk-transfer) .target-list .content li .item-content:hover:not(.is-disabled) .icon-wrapper,
+:where(.bk-transfer) .source-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper,
+:where(.bk-transfer) .target-list .content .checkbox-item:hover:not(.is-disabled) .icon-wrapper {
   visibility: visible;
 }
-.bk-transfer .source-list .content li.custom-item .content-text,
-.bk-transfer .target-list .content li.custom-item .content-text,
-.bk-transfer .source-list .content li .item-content .content-text,
-.bk-transfer .target-list .content li .item-content .content-text,
-.bk-transfer .source-list .content .checkbox-item .content-text,
-.bk-transfer .target-list .content .checkbox-item .content-text {
+:where(.bk-transfer) .source-list .content li.custom-item .content-text,
+:where(.bk-transfer) .target-list .content li.custom-item .content-text,
+:where(.bk-transfer) .source-list .content li .item-content .content-text,
+:where(.bk-transfer) .target-list .content li .item-content .content-text,
+:where(.bk-transfer) .source-list .content .checkbox-item .content-text,
+:where(.bk-transfer) .target-list .content .checkbox-item .content-text {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-transfer .source-list .content li.custom-item .icon-wrapper,
-.bk-transfer .target-list .content li.custom-item .icon-wrapper,
-.bk-transfer .source-list .content li .item-content .icon-wrapper,
-.bk-transfer .target-list .content li .item-content .icon-wrapper,
-.bk-transfer .source-list .content .checkbox-item .icon-wrapper,
-.bk-transfer .target-list .content .checkbox-item .icon-wrapper {
+:where(.bk-transfer) .source-list .content li.custom-item .icon-wrapper,
+:where(.bk-transfer) .target-list .content li.custom-item .icon-wrapper,
+:where(.bk-transfer) .source-list .content li .item-content .icon-wrapper,
+:where(.bk-transfer) .target-list .content li .item-content .icon-wrapper,
+:where(.bk-transfer) .source-list .content .checkbox-item .icon-wrapper,
+:where(.bk-transfer) .target-list .content .checkbox-item .icon-wrapper {
   visibility: hidden;
 }
-.bk-transfer .source-list .content li.custom-item .icon-wrapper .bk-icon,
-.bk-transfer .target-list .content li.custom-item .icon-wrapper .bk-icon,
-.bk-transfer .source-list .content li .item-content .icon-wrapper .bk-icon,
-.bk-transfer .target-list .content li .item-content .icon-wrapper .bk-icon,
-.bk-transfer .source-list .content .checkbox-item .icon-wrapper .bk-icon,
-.bk-transfer .target-list .content .checkbox-item .icon-wrapper .bk-icon {
+:where(.bk-transfer) .source-list .content li.custom-item .icon-wrapper .bk-icon,
+:where(.bk-transfer) .target-list .content li.custom-item .icon-wrapper .bk-icon,
+:where(.bk-transfer) .source-list .content li .item-content .icon-wrapper .bk-icon,
+:where(.bk-transfer) .target-list .content li .item-content .icon-wrapper .bk-icon,
+:where(.bk-transfer) .source-list .content .checkbox-item .icon-wrapper .bk-icon,
+:where(.bk-transfer) .target-list .content .checkbox-item .icon-wrapper .bk-icon {
   display: flex;
   font-size: 30px;
 }
-.bk-transfer .source-list .content li.custom-item .icon-wrapper .icon-delete,
-.bk-transfer .target-list .content li.custom-item .icon-wrapper .icon-delete,
-.bk-transfer .source-list .content li .item-content .icon-wrapper .icon-delete,
-.bk-transfer .target-list .content li .item-content .icon-wrapper .icon-delete,
-.bk-transfer .source-list .content .checkbox-item .icon-wrapper .icon-delete,
-.bk-transfer .target-list .content .checkbox-item .icon-wrapper .icon-delete {
+:where(.bk-transfer) .source-list .content li.custom-item .icon-wrapper .icon-delete,
+:where(.bk-transfer) .target-list .content li.custom-item .icon-wrapper .icon-delete,
+:where(.bk-transfer) .source-list .content li .item-content .icon-wrapper .icon-delete,
+:where(.bk-transfer) .target-list .content li .item-content .icon-wrapper .icon-delete,
+:where(.bk-transfer) .source-list .content .checkbox-item .icon-wrapper .icon-delete,
+:where(.bk-transfer) .target-list .content .checkbox-item .icon-wrapper .icon-delete {
   margin-right: 6px;
   font-size: 16px;
 }
-.bk-transfer .source-list .content li.custom-item.is-disabled,
-.bk-transfer .target-list .content li.custom-item.is-disabled,
-.bk-transfer .source-list .content li .item-content.is-disabled,
-.bk-transfer .target-list .content li .item-content.is-disabled,
-.bk-transfer .source-list .content .checkbox-item.is-disabled,
-.bk-transfer .target-list .content .checkbox-item.is-disabled {
+:where(.bk-transfer) .source-list .content li.custom-item.is-disabled,
+:where(.bk-transfer) .target-list .content li.custom-item.is-disabled,
+:where(.bk-transfer) .source-list .content li .item-content.is-disabled,
+:where(.bk-transfer) .target-list .content li .item-content.is-disabled,
+:where(.bk-transfer) .source-list .content .checkbox-item.is-disabled,
+:where(.bk-transfer) .target-list .content .checkbox-item.is-disabled {
   color: var(--light-gray);
   cursor: not-allowed;
 }
-.bk-transfer .source-list .content .checkbox-item .item-content,
-.bk-transfer .target-list .content .checkbox-item .item-content {
+:where(.bk-transfer) .source-list .content .checkbox-item .item-content,
+:where(.bk-transfer) .target-list .content .checkbox-item .item-content {
   display: flex;
   align-items: center;
 }
-.bk-transfer .source-list .content::-webkit-scrollbar,
-.bk-transfer .target-list .content::-webkit-scrollbar {
+:where(.bk-transfer) .source-list .content::-webkit-scrollbar,
+:where(.bk-transfer) .target-list .content::-webkit-scrollbar {
   width: 4px;
 }
-.bk-transfer .source-list .content::-webkit-scrollbar-thumb,
-.bk-transfer .target-list .content::-webkit-scrollbar-thumb {
+:where(.bk-transfer) .source-list .content::-webkit-scrollbar-thumb,
+:where(.bk-transfer) .target-list .content::-webkit-scrollbar-thumb {
   height: 5px;
   background-color: #dcdee5;
   border-radius: 2px;

package/lib/tree/tree.css

@@ -1,25 +1,25 @@
-.bk-F-scroll-x {
+:where(.bk-F-scroll-x) {
   overflow-x: auto;
   scrollbar-color: #a0a0a0 transparent;
   scrollbar-width: thin;
 }
-.bk-F-scroll-x::-webkit-scrollbar {
+:where(.bk-F-scroll-x)::-webkit-scrollbar {
   height: 6px;
 }
-.bk-F-scroll-y {
+:where(.bk-F-scroll-y) {
   overflow-y: auto;
 }
-.bk-F-scroll-y::-webkit-scrollbar {
+:where(.bk-F-scroll-y)::-webkit-scrollbar {
   width: 4px;
 }
-.bk-F-scroll-y::-webkit-scrollbar-thumb {
+:where(.bk-F-scroll-y)::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.bk-virtual-render {
+:where(.bk-virtual-render) {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content,
-.bk-virtual-render.bk-virtual-content {
+:where(.bk-virtual-render) .bk-virtual-content,
+:where(.bk-virtual-render).bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -27,15 +27,15 @@
   width: 100%;
   height: 100%;
 }
-.bk-virtual-render .bk-virtual-section {
+:where(.bk-virtual-render) .bk-virtual-section {
   width: 1px;
   background: transparent;
 }
-.bk-checkbox-group {
+:where(.bk-checkbox-group) {
   display: inline-flex;
   letter-spacing: normal;
 }
-.bk-checkbox {
+:where(.bk-checkbox) {
   display: inline-flex;
   justify-self: center;
   align-items: center;
@@ -45,19 +45,19 @@
   cursor: pointer;
   user-select: none;
 }
-.bk-checkbox ~ .bk-checkbox {
+:where(.bk-checkbox) ~ .bk-checkbox {
   margin-left: 24px;
 }
-.bk-checkbox.is-checked .bk-checkbox-input {
+:where(.bk-checkbox).is-checked .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
-.bk-checkbox.is-checked .bk-checkbox-input.small::after {
+:where(.bk-checkbox).is-checked .bk-checkbox-input.small::after {
   width: 3px;
   height: 6px;
 }
-.bk-checkbox.is-checked .bk-checkbox-input::after {
+:where(.bk-checkbox).is-checked .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -70,16 +70,16 @@
   transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
   transform-origin: center;
 }
-.bk-checkbox.is-indeterminated .bk-checkbox-input {
+:where(.bk-checkbox).is-indeterminated .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
-.bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
+:where(.bk-checkbox).is-indeterminated .bk-checkbox-input.small::after {
   width: 6px;
   height: 2px;
 }
-.bk-checkbox.is-indeterminated .bk-checkbox-input::after {
+:where(.bk-checkbox).is-indeterminated .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -91,31 +91,31 @@
   content: '';
   transform: translate(-50%, -50%);
 }
-.bk-checkbox.is-disabled {
+:where(.bk-checkbox).is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-checkbox.is-disabled .bk-checkbox-input {
+:where(.bk-checkbox).is-disabled .bk-checkbox-input {
   background: #fafbfd;
   border-color: #dcdee5;
 }
-.bk-checkbox.is-disabled .bk-checkbox-input::after {
+:where(.bk-checkbox).is-disabled .bk-checkbox-input::after {
   background: #dcdee5;
 }
-.bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
+:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input {
   background: #a3c5fd;
   border-color: #a3c5fd;
 }
-.bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
+:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input::after {
   background: #a3c5fd;
 }
-.bk-checkbox.is-prechecking {
+:where(.bk-checkbox).is-prechecking {
   position: relative;
 }
-.bk-checkbox.is-prechecking .bk-checkbox-input {
+:where(.bk-checkbox).is-prechecking .bk-checkbox-input {
   visibility: hidden;
 }
-.bk-checkbox-input {
+:where(.bk-checkbox-input) {
   position: relative;
   display: inline-block;
   width: 16px;
@@ -124,11 +124,11 @@
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
-.bk-checkbox-input.small {
+:where(.bk-checkbox-input).small {
   width: 14px;
   height: 14px;
 }
-.bk-checkbox-original {
+:where(.bk-checkbox-original) {
   position: absolute;
   top: 0;
   left: 0;
@@ -136,27 +136,27 @@
   width: 0;
   height: 0;
 }
-.bk-checkbox-label {
+:where(.bk-checkbox-label) {
   display: inline-block;
   margin-left: 6px;
   vertical-align: middle;
 }
-.bk-checkbox-checking {
+:where(.bk-checkbox-checking) {
   position: absolute;
   font-size: 16px;
   color: #3a84ff;
   animation: loading 1s linear infinite;
 }
-.bk-tree {
+:where(.bk-tree) {
   font-size: 14px;
 }
-.bk-tree .bk-node-row {
+:where(.bk-tree) .bk-node-row {
   padding-left: calc(var(--offset-left));
 }
-.bk-tree .bk-node-row.is-selected {
+:where(.bk-tree) .bk-node-row.is-selected {
   background-color: #ebf2ff;
 }
-.bk-tree-node {
+:where(.bk-tree) .bk-tree-node {
   position: relative;
   display: flex;
   height: var(--lineHeight);
@@ -165,10 +165,10 @@
   cursor: pointer;
   align-items: center;
 }
-.bk-tree-node:not(.is-root) {
-  margin-left: calc(var(--depth)*var(--indent));
+:where(.bk-tree) .bk-tree-node:not(.is-root) {
+  margin-left: calc(var(--depth) * var(--indent));
 }
-.bk-tree-node:not(.is-root).level-line::before {
+:where(.bk-tree) .bk-tree-node:not(.is-root).level-line::before {
   position: absolute;
   top: calc(50% + 1px);
   left: calc(0px - var(--indent) + 6px);
@@ -179,10 +179,10 @@
   border-bottom: var(--level-line);
   content: '';
 }
-.bk-tree-node.is-open .bk-node-action {
+:where(.bk-tree) .bk-tree-node.is-open .bk-node-action {
   color: #63656e;
 }
-.bk-tree-node .node-virtual-line {
+:where(.bk-tree) .bk-tree-node .node-virtual-line {
   position: absolute;
   top: -12px;
   bottom: 50%;
@@ -191,44 +191,44 @@
   width: 0;
   border-left: var(--level-line);
 }
-.bk-tree-node .bk-node-prefix {
+:where(.bk-tree) .bk-tree-node .bk-node-prefix {
   display: flex;
   width: 14px;
   height: 14px;
   align-items: center;
   justify-content: center;
 }
-.bk-tree-node .bk-node-action {
+:where(.bk-tree) .bk-tree-node .bk-node-action {
   margin-right: 6px;
   color: #979ba5;
 }
-.bk-tree-node .bk-tree-icon {
+:where(.bk-tree) .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }
-.bk-tree-node .bk-node-content {
+:where(.bk-tree) .bk-tree-node .bk-node-content {
   display: flex;
   flex: 1;
   align-items: center;
   min-width: 0;
 }
-.bk-tree-node .bk-node-content .bk-checkbox {
+:where(.bk-tree) .bk-tree-node .bk-node-content .bk-checkbox {
   margin: 0;
 }
-.bk-tree-node .bk-node-content .bk-checkbox .bk-checkbox-input {
+:where(.bk-tree) .bk-tree-node .bk-node-content .bk-checkbox .bk-checkbox-input {
   margin: 0;
 }
-.bk-tree-node .bk-node-content .bk-node-text {
+:where(.bk-tree) .bk-tree-node .bk-node-content .bk-node-text {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-tree-drop-active {
+:where(.bk-tree) .bk-tree-drop-active {
   background: #f5f7fa;
 }
-.bk-tree-drop-disabled {
+:where(.bk-tree) .bk-tree-drop-disabled {
   background: #ffd5d5;
 }
-.bk-tree-drop-disabled .bk-tree-node {
+:where(.bk-tree) .bk-tree-drop-disabled .bk-tree-node {
   cursor: no-drop;
 }

package/lib/tree/tree.less

@@ -3,7 +3,7 @@
 @import '../virtual-render/virtual-render.less';
 @import '../checkbox/checkbox.less';
 
-.@{bk-prefix}-tree {
+:where(.@{bk-prefix}-tree) {
   font-size: 14px;
 
   .@{bk-prefix}-node-row {
@@ -14,7 +14,7 @@
     }
   }
 
-  &-node {
+  .@{bk-prefix}-tree-node {
     position: relative;
     display: flex;
     height: var(--lineHeight);
@@ -24,7 +24,7 @@
     align-items: center;
 
     &:not(.is-root) {
-      margin-left: calc(var(--depth)*var(--indent));
+      margin-left: calc(var(--depth) * var(--indent));
 
       &.level-line {
         &::before {
@@ -97,18 +97,17 @@
     }
   }
 
-  &-drop-active {
+  .@{bk-prefix}-tree-drop-active {
     background: #f5f7fa;
   }
 
-  &-drop-disabled {
+  .@{bk-prefix}-tree-drop-disabled {
     background: #ffd5d5;
     .@{bk-prefix}-tree-node {
       cursor: no-drop;
     }
   }
 
-  &-drag-disabled{
-
+  .@{bk-prefix}-tree-drag-disabled {
   }
 }