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

package/lib/transfer/transfer.css

@@ -1,18 +1,18 @@
-:where(.bk-transfer) {
+.bk-transfer {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 14px;
 }
-:where(.bk-transfer) .transfer {
+.bk-transfer .transfer {
   margin: 0 8px;
   font-size: 24px;
   color: #c4c6cc;
 }
-:where(.bk-transfer) .transfer-button-group {
+.bk-transfer .transfer-button-group {
   margin: 0 8px;
 }
-:where(.bk-transfer) .transfer-button-group .transfer-button {
+.bk-transfer .transfer-button-group .transfer-button {
   display: flex;
   width: 24px;
   height: 24px;
@@ -24,20 +24,20 @@
   align-items: center;
   justify-content: center;
 }
-:where(.bk-transfer) .transfer-button-group .transfer-button:first-child {
+.bk-transfer .transfer-button-group .transfer-button:first-child {
   margin-bottom: 8px;
 }
-:where(.bk-transfer) .transfer-button-group .transfer-button.disabled {
+.bk-transfer .transfer-button-group .transfer-button.disabled {
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: #fafbfd;
   border-color: #dcdee5;
 }
-:where(.bk-transfer) .transfer-button-group .transfer-button span {
+.bk-transfer .transfer-button-group .transfer-button span {
   font-size: 18px;
 }
-:where(.bk-transfer) .source-list,
-:where(.bk-transfer) .target-list {
+.bk-transfer .source-list,
+.bk-transfer .target-list {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -48,41 +48,41 @@
   border: 1px solid #dcdee5;
   border-radius: 2px;
 }
-: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 {
+.bk-transfer .source-list .slot-header,
+.bk-transfer .target-list .slot-header,
+.bk-transfer .source-list .header,
+.bk-transfer .target-list .header {
   height: 40px;
   padding: 0 16px;
   background-color: #fafbfd;
   border-bottom: 1px solid #dcdee5;
 }
-:where(.bk-transfer) .source-list .header,
-:where(.bk-transfer) .target-list .header {
+.bk-transfer .source-list .header,
+.bk-transfer .target-list .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: 700;
 }
-:where(.bk-transfer) .source-list .header .select-all,
-:where(.bk-transfer) .target-list .header .select-all {
+.bk-transfer .source-list .header .select-all,
+.bk-transfer .target-list .header .select-all {
   font-size: 12px;
   font-weight: normal;
   color: #3a84ff;
   cursor: pointer;
 }
-:where(.bk-transfer) .source-list .header .select-all.disabled,
-:where(.bk-transfer) .target-list .header .select-all.disabled {
+.bk-transfer .source-list .header .select-all.disabled,
+.bk-transfer .target-list .header .select-all.disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-:where(.bk-transfer) .source-list .header .select-total-count,
-:where(.bk-transfer) .target-list .header .select-total-count {
+.bk-transfer .source-list .header .select-total-count,
+.bk-transfer .target-list .header .select-total-count {
   font-weight: normal;
   color: #979ba5;
 }
-:where(.bk-transfer) .source-list .transfer-search-input,
-:where(.bk-transfer) .target-list .transfer-search-input {
+.bk-transfer .source-list .transfer-search-input,
+.bk-transfer .target-list .transfer-search-input {
   width: calc(100% - 32px);
   height: 30px;
   margin: 8px 16px 0;
@@ -91,22 +91,22 @@
   border-radius: 0;
   outline: none;
 }
-:where(.bk-transfer) .source-list .transfer-search-input.is-focused,
-:where(.bk-transfer) .target-list .transfer-search-input.is-focused {
+.bk-transfer .source-list .transfer-search-input.is-focused,
+.bk-transfer .target-list .transfer-search-input.is-focused {
   box-shadow: none;
 }
-:where(.bk-transfer) .source-list .transfer-search-input .icon-search,
-:where(.bk-transfer) .target-list .transfer-search-input .icon-search {
+.bk-transfer .source-list .transfer-search-input .icon-search,
+.bk-transfer .target-list .transfer-search-input .icon-search {
   font-size: 18px;
   line-height: 28px;
   color: #c4c6cc;
 }
-:where(.bk-transfer) .source-list .transfer-search-input input,
-:where(.bk-transfer) .target-list .transfer-search-input input {
+.bk-transfer .source-list .transfer-search-input input,
+.bk-transfer .target-list .transfer-search-input input {
   padding-left: 4px;
 }
-:where(.bk-transfer) .source-list .empty,
-:where(.bk-transfer) .target-list .empty {
+.bk-transfer .source-list .empty,
+.bk-transfer .target-list .empty {
   flex: 1;
   display: flex;
   align-items: center;
@@ -115,23 +115,23 @@
   color: #c4c6cc;
   cursor: default;
 }
-:where(.bk-transfer) .source-list .content,
-:where(.bk-transfer) .target-list .content {
+.bk-transfer .source-list .content,
+.bk-transfer .target-list .content {
   flex: 1;
   margin: 4px 0;
   overflow-y: auto;
 }
-:where(.bk-transfer) .source-list .content.is-flex,
-:where(.bk-transfer) .target-list .content.is-flex {
+.bk-transfer .source-list .content.is-flex,
+.bk-transfer .target-list .content.is-flex {
   display: flex;
   flex-direction: column;
 }
-: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 {
+.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 {
   display: flex;
   height: 32px;
   padding: 0 16px;
@@ -139,80 +139,80 @@
   cursor: pointer;
   align-items: center;
 }
-: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) {
+.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) {
   color: #3a84ff;
   background-color: #e1ecff;
 }
-: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 {
+.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 {
   visibility: visible;
 }
-: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 {
+.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 {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-: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 {
+.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 {
   visibility: hidden;
 }
-: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 {
+.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 {
   display: flex;
   font-size: 30px;
 }
-: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 {
+.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 {
   margin-right: 6px;
   font-size: 16px;
 }
-: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 {
+.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 {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-:where(.bk-transfer) .source-list .content .checkbox-item .item-content,
-:where(.bk-transfer) .target-list .content .checkbox-item .item-content {
+.bk-transfer .source-list .content .checkbox-item .item-content,
+.bk-transfer .target-list .content .checkbox-item .item-content {
   display: flex;
   align-items: center;
 }
-:where(.bk-transfer) .source-list .content::-webkit-scrollbar,
-:where(.bk-transfer) .target-list .content::-webkit-scrollbar {
+.bk-transfer .source-list .content::-webkit-scrollbar,
+.bk-transfer .target-list .content::-webkit-scrollbar {
   width: 4px;
 }
-:where(.bk-transfer) .source-list .content::-webkit-scrollbar-thumb,
-:where(.bk-transfer) .target-list .content::-webkit-scrollbar-thumb {
+.bk-transfer .source-list .content::-webkit-scrollbar-thumb,
+.bk-transfer .target-list .content::-webkit-scrollbar-thumb {
   height: 5px;
   background-color: #dcdee5;
   border-radius: 2px;

package/lib/transfer/transfer.less

@@ -2,7 +2,7 @@
 
 @transfer-item-hover-background-color: #e1ecff;
 
-:where(.@{bk-prefix}-transfer) {
+.@{bk-prefix}-transfer {
   display: flex;
   justify-content: center;
   align-items: center;

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;
 }
-:where(.bk-transfer) {
+.bk-transfer {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 14px;
 }
-:where(.bk-transfer) .transfer {
+.bk-transfer .transfer {
   margin: 0 8px;
   font-size: 24px;
   color: var(--light-gray);
 }
-:where(.bk-transfer) .transfer-button-group {
+.bk-transfer .transfer-button-group {
   margin: 0 8px;
 }
-:where(.bk-transfer) .transfer-button-group .transfer-button {
+.bk-transfer .transfer-button-group .transfer-button {
   display: flex;
   width: 24px;
   height: 24px;
@@ -153,20 +153,20 @@
   align-items: center;
   justify-content: center;
 }
-:where(.bk-transfer) .transfer-button-group .transfer-button:first-child {
+.bk-transfer .transfer-button-group .transfer-button:first-child {
   margin-bottom: 8px;
 }
-:where(.bk-transfer) .transfer-button-group .transfer-button.disabled {
+.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);
 }
-:where(.bk-transfer) .transfer-button-group .transfer-button span {
+.bk-transfer .transfer-button-group .transfer-button span {
   font-size: 18px;
 }
-:where(.bk-transfer) .source-list,
-:where(.bk-transfer) .target-list {
+.bk-transfer .source-list,
+.bk-transfer .target-list {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -177,41 +177,41 @@
   border: 1px solid var(--disable-color);
   border-radius: 2px;
 }
-: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 {
+.bk-transfer .source-list .slot-header,
+.bk-transfer .target-list .slot-header,
+.bk-transfer .source-list .header,
+.bk-transfer .target-list .header {
   height: 40px;
   padding: 0 16px;
   background-color: var(--whitesmoke-color);
   border-bottom: 1px solid var(--disable-color);
 }
-:where(.bk-transfer) .source-list .header,
-:where(.bk-transfer) .target-list .header {
+.bk-transfer .source-list .header,
+.bk-transfer .target-list .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: 700;
 }
-:where(.bk-transfer) .source-list .header .select-all,
-:where(.bk-transfer) .target-list .header .select-all {
+.bk-transfer .source-list .header .select-all,
+.bk-transfer .target-list .header .select-all {
   font-size: 12px;
   font-weight: normal;
   color: var(--primary-color);
   cursor: pointer;
 }
-:where(.bk-transfer) .source-list .header .select-all.disabled,
-:where(.bk-transfer) .target-list .header .select-all.disabled {
+.bk-transfer .source-list .header .select-all.disabled,
+.bk-transfer .target-list .header .select-all.disabled {
   color: var(--light-gray);
   cursor: not-allowed;
 }
-:where(.bk-transfer) .source-list .header .select-total-count,
-:where(.bk-transfer) .target-list .header .select-total-count {
+.bk-transfer .source-list .header .select-total-count,
+.bk-transfer .target-list .header .select-total-count {
   font-weight: normal;
   color: var(--gray-color);
 }
-:where(.bk-transfer) .source-list .transfer-search-input,
-:where(.bk-transfer) .target-list .transfer-search-input {
+.bk-transfer .source-list .transfer-search-input,
+.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;
 }
-:where(.bk-transfer) .source-list .transfer-search-input.is-focused,
-:where(.bk-transfer) .target-list .transfer-search-input.is-focused {
+.bk-transfer .source-list .transfer-search-input.is-focused,
+.bk-transfer .target-list .transfer-search-input.is-focused {
   box-shadow: none;
 }
-:where(.bk-transfer) .source-list .transfer-search-input .icon-search,
-:where(.bk-transfer) .target-list .transfer-search-input .icon-search {
+.bk-transfer .source-list .transfer-search-input .icon-search,
+.bk-transfer .target-list .transfer-search-input .icon-search {
   font-size: 18px;
   line-height: 28px;
   color: var(--light-gray);
 }
-:where(.bk-transfer) .source-list .transfer-search-input input,
-:where(.bk-transfer) .target-list .transfer-search-input input {
+.bk-transfer .source-list .transfer-search-input input,
+.bk-transfer .target-list .transfer-search-input input {
   padding-left: 4px;
 }
-:where(.bk-transfer) .source-list .empty,
-:where(.bk-transfer) .target-list .empty {
+.bk-transfer .source-list .empty,
+.bk-transfer .target-list .empty {
   flex: 1;
   display: flex;
   align-items: center;
@@ -244,23 +244,23 @@
   color: var(--light-gray);
   cursor: default;
 }
-:where(.bk-transfer) .source-list .content,
-:where(.bk-transfer) .target-list .content {
+.bk-transfer .source-list .content,
+.bk-transfer .target-list .content {
   flex: 1;
   margin: 4px 0;
   overflow-y: auto;
 }
-:where(.bk-transfer) .source-list .content.is-flex,
-:where(.bk-transfer) .target-list .content.is-flex {
+.bk-transfer .source-list .content.is-flex,
+.bk-transfer .target-list .content.is-flex {
   display: flex;
   flex-direction: column;
 }
-: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 {
+.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 {
   display: flex;
   height: 32px;
   padding: 0 16px;
@@ -268,80 +268,80 @@
   cursor: pointer;
   align-items: center;
 }
-: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) {
+.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) {
   color: var(--primary-color);
   background-color: #e1ecff;
 }
-: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 {
+.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 {
   visibility: visible;
 }
-: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 {
+.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 {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-: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 {
+.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 {
   visibility: hidden;
 }
-: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 {
+.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 {
   display: flex;
   font-size: 30px;
 }
-: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 {
+.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 {
   margin-right: 6px;
   font-size: 16px;
 }
-: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 {
+.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 {
   color: var(--light-gray);
   cursor: not-allowed;
 }
-:where(.bk-transfer) .source-list .content .checkbox-item .item-content,
-:where(.bk-transfer) .target-list .content .checkbox-item .item-content {
+.bk-transfer .source-list .content .checkbox-item .item-content,
+.bk-transfer .target-list .content .checkbox-item .item-content {
   display: flex;
   align-items: center;
 }
-:where(.bk-transfer) .source-list .content::-webkit-scrollbar,
-:where(.bk-transfer) .target-list .content::-webkit-scrollbar {
+.bk-transfer .source-list .content::-webkit-scrollbar,
+.bk-transfer .target-list .content::-webkit-scrollbar {
   width: 4px;
 }
-:where(.bk-transfer) .source-list .content::-webkit-scrollbar-thumb,
-:where(.bk-transfer) .target-list .content::-webkit-scrollbar-thumb {
+.bk-transfer .source-list .content::-webkit-scrollbar-thumb,
+.bk-transfer .target-list .content::-webkit-scrollbar-thumb {
   height: 5px;
   background-color: #dcdee5;
   border-radius: 2px;