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

package/lib/select/select.css

@@ -11,64 +11,64 @@
     background-color: transparent;
   }
 }
-.bk-transition .bk-fade-enter-active,
-.bk-transition .bk-fade-leave-active {
+:where(.bk-transition) .bk-fade-enter-active,
+:where(.bk-transition) .bk-fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.bk-transition .bk-fade-enter,
-.bk-transition .bk-fade-leave-to {
+:where(.bk-transition) .bk-fade-enter,
+:where(.bk-transition) .bk-fade-leave-to {
   opacity: 0;
 }
-.bk-select .mr5 {
+:where(.bk-select) .mr5 {
   margin-right: 5px;
 }
-.bk-select .ml5 {
+:where(.bk-select) .ml5 {
   margin-left: 5px;
 }
-.bk-select ul {
+:where(.bk-select) ul {
   padding: 0;
   margin: 0;
   font-weight: normal;
   list-style: none;
 }
-.bk-select.large .bk-select-content-wrapper {
+:where(.bk-select).large .bk-select-content-wrapper {
   font-size: 14px;
 }
-.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
+:where(.bk-select).is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
   border-color: #3a84ff;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.is-focus .bk-input--default {
+:where(.bk-select).is-focus .bk-input--default {
   border-color: #3a84ff;
   outline: 0;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.is-focus .bk-input--default.is-simplicity {
+:where(.bk-select).is-focus .bk-input--default.is-simplicity {
   border-color: transparent;
   border-bottom-color: #3a84ff;
   box-shadow: none;
 }
-.bk-select.is-focus .bk-input--default.is-simplicity .bk-input--text {
+:where(.bk-select).is-focus .bk-input--default.is-simplicity .bk-input--text {
   background-color: #f5f7fa;
 }
-.bk-select.popover-show .bk-select-trigger .angle-up {
+:where(.bk-select).popover-show .bk-select-trigger .angle-up {
   transform: rotate(0);
 }
-.bk-select.is-disabled .bk-input--text {
+:where(.bk-select).is-disabled .bk-input--text {
   cursor: not-allowed;
   background-color: #fafbfd;
 }
-.bk-select .bk-input.is-focused {
+:where(.bk-select) .bk-input.is-focused {
   border-color: #3a84ff;
   outline: 0;
   box-shadow: 0 0 3px 0 #a3c5fd;
 }
-.bk-select .bk-input.is-focused.is-simplicity {
+:where(.bk-select) .bk-input.is-focused.is-simplicity {
   border-color: transparent;
   border-bottom-color: #3a84ff;
   box-shadow: none;
 }
-.bk-select .bk-input--text {
+:where(.bk-select) .bk-input--text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -76,13 +76,13 @@
   cursor: pointer;
   background-color: white;
 }
-.bk-select .bk-select-trigger {
+:where(.bk-select) .bk-select-trigger {
   position: relative;
 }
-.bk-select .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon {
+:where(.bk-select) .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon {
   margin-right: 0;
 }
-.bk-select .bk-select-trigger .bk-select-tag {
+:where(.bk-select) .bk-select-trigger .bk-select-tag {
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
@@ -105,54 +105,54 @@
   width: auto;
   align-items: center;
 }
-.bk-select .bk-select-trigger .bk-select-tag::placeholder {
+:where(.bk-select) .bk-select-trigger .bk-select-tag::placeholder {
   color: #c4c6cc;
 }
-.bk-select .bk-select-trigger .bk-select-tag.has-prefix {
+:where(.bk-select) .bk-select-trigger .bk-select-tag.has-prefix {
   padding-left: 0;
 }
-.bk-select .bk-select-trigger .bk-select-tag-wrapper {
+:where(.bk-select) .bk-select-trigger .bk-select-tag-wrapper {
   display: flex;
+  padding: 4px 0;
+  overflow: hidden;
   align-items: center;
   flex-wrap: wrap;
-  overflow: hidden;
   gap: 4px;
-  padding: 4px 0;
 }
-.bk-select .bk-select-trigger .bk-select-tag.collapse-tag .bk-select-tag-wrapper {
+:where(.bk-select) .bk-select-trigger .bk-select-tag.collapse-tag .bk-select-tag-wrapper {
   height: 30px;
 }
-.bk-select .bk-select-trigger .bk-select-tag:not(.collapse-tag) {
+:where(.bk-select) .bk-select-trigger .bk-select-tag:not(.collapse-tag) {
   position: relative;
   z-index: 1;
   height: auto;
   min-height: 32px;
   flex-wrap: wrap;
 }
-.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
+:where(.bk-select) .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
   border-color: #979ba5;
 }
-.bk-select .bk-select-trigger .bk-select-tag.is-disabled {
+:where(.bk-select) .bk-select-trigger .bk-select-tag.is-disabled {
   cursor: not-allowed;
   background-color: #fafbfd;
   border-color: #dcdee5;
 }
-.bk-select .bk-select-trigger .bk-select-tag.is-disabled input {
+:where(.bk-select) .bk-select-trigger .bk-select-tag.is-disabled input {
   cursor: not-allowed;
 }
-.bk-select .bk-select-trigger .bk-select-tag.is-disabled .bk-tag {
+:where(.bk-select) .bk-select-trigger .bk-select-tag.is-disabled .bk-tag {
   cursor: not-allowed;
 }
-.bk-select .bk-select-trigger .bk-select-tag.is-disabled .bk-tag:hover {
+:where(.bk-select) .bk-select-trigger .bk-select-tag.is-disabled .bk-tag:hover {
   background-color: #f0f1f5;
 }
-.bk-select .bk-select-trigger .bk-select-tag.is-disabled .bk-tag .bk-tag-close {
+:where(.bk-select) .bk-select-trigger .bk-select-tag.is-disabled .bk-tag .bk-tag-close {
   cursor: not-allowed;
 }
-.bk-select .bk-select-trigger .bk-select-tag.is-disabled .is-disabled {
+:where(.bk-select) .bk-select-trigger .bk-select-tag.is-disabled .is-disabled {
   padding-left: 0;
 }
-.bk-select .bk-select-trigger .bk-select-tag-input {
+:where(.bk-select) .bk-select-trigger .bk-select-tag-input {
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
@@ -179,14 +179,14 @@
   border: none;
   flex-grow: 1;
 }
-.bk-select .bk-select-trigger .bk-select-tag-input::placeholder {
+:where(.bk-select) .bk-select-trigger .bk-select-tag-input::placeholder {
   color: #c4c6cc;
 }
-.bk-select .bk-select-trigger .bk-select-tag .bk-tag {
+:where(.bk-select) .bk-select-trigger .bk-select-tag .bk-tag {
   max-width: 190px;
   padding: 0 4px;
 }
-.bk-select .bk-select-trigger .angle-up {
+:where(.bk-select) .bk-select-trigger .angle-up {
   right: 4px;
   transform: rotate(180deg);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -202,7 +202,7 @@
   align-items: center;
   justify-content: center;
 }
-.bk-select .bk-select-trigger .clear-icon {
+:where(.bk-select) .bk-select-trigger .clear-icon {
   right: 4px;
   cursor: pointer;
   transition: all 0.1s;
@@ -218,10 +218,10 @@
   align-items: center;
   justify-content: center;
 }
-.bk-select .bk-select-trigger .clear-icon:hover {
+:where(.bk-select) .bk-select-trigger .clear-icon:hover {
   color: #979ba5;
 }
-.bk-select .bk-select-trigger .spinner {
+:where(.bk-select) .bk-select-trigger .spinner {
   right: 6px;
   position: absolute;
   top: 0;
@@ -230,7 +230,7 @@
   align-items: center;
   justify-content: center;
 }
-.bk-select--prefix-area {
+:where(.bk-select) .bk-select--prefix-area {
   display: flex;
   height: 100%;
   padding: 0 10px;
@@ -240,20 +240,20 @@
   border-right: 1px solid #c4c6cc;
   align-items: center;
 }
-.bk-popover.bk-pop2-content.bk-select-popover {
+:where(.bk-popover).bk-pop2-content.bk-select-popover {
   padding: 0;
   border: 1px solid #dcdee5;
   border-radius: 2px;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 56px;
   color: #63656e;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty .spinner {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty .spinner {
   display: flex;
   width: 14px;
   height: 14px;
@@ -263,23 +263,23 @@
   align-items: center;
   justify-content: center;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty span {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty span {
   margin-left: 4px;
   line-height: 18px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown {
   overflow: auto;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown::-webkit-scrollbar {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown::-webkit-scrollbar-thumb {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown::-webkit-scrollbar-thumb {
   background: #dde4eb;
   border-radius: 20px;
   box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-extension {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-extension {
   display: flex;
   height: 40px;
   background-color: #fafbfd;
@@ -287,33 +287,33 @@
   border-top: 1px solid #dcdee5;
   border-radius: 0 0 2px 2px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options {
   padding: 4px 0;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all {
   padding: 4px 0;
   border-bottom: 1px solid #dcdee5;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper {
   display: flex;
-  align-items: center;
   height: 32px;
   padding: 0 12px;
-  cursor: pointer;
   color: #63656e;
+  cursor: pointer;
+  align-items: center;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper:hover {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper:hover {
   background-color: #f5f7fa;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper.active {
-  background-color: #e1ecff;
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper.active {
   color: #3a84ff;
+  background-color: #e1ecff;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper .select-all-icon {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper .select-all-icon {
   margin-right: 4px;
   font-size: 16px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option {
   position: relative;
   display: flex;
   height: 32px;
@@ -328,87 +328,87 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-selected-icon {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-selected-icon {
   position: absolute;
   top: 5px;
   right: 10px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-checkbox {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-checkbox {
   margin-right: 6px;
   pointer-events: none;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-checkbox .bk-checkbox-original {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-checkbox .bk-checkbox-original {
   opacity: 0;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item .is-keyword {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item .is-keyword {
   display: inline-flex;
   color: #3a84ff;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-hover {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-hover {
   background-color: #f5f7fa;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option:hover {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option:hover {
   color: #63656e;
   background-color: #f5f7fa;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-selected:not(.is-checkbox) {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-selected:not(.is-checkbox) {
   color: #3a84ff;
   background-color: #e1ecff;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-disabled {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: transparent;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple {
   padding-right: 32px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple.is-selected {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple.is-selected {
   background-color: #fff;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple.is-hover {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple.is-hover {
   background-color: #f5f7fa;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple:hover {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple:hover {
   background-color: #f5f7fa;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options-loading {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options-loading {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options-loading span {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options-loading span {
   margin-left: 4px;
   line-height: 18px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group-label {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group-label {
   height: 32px;
   padding: 0 8px;
   line-height: 32px;
   color: #979ba5;
   text-align: left;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group-label.collapsible {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group-label.collapsible {
   cursor: pointer;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group.collapsible .bk-select-option {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group.collapsible .bk-select-option {
   padding-left: 40px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group.disabled .default-group-label {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group.disabled .default-group-label {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label {
   display: flex;
   user-select: none;
   align-items: center;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label-icon {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label-icon {
   display: flex;
   width: 12px;
   height: 12px;
@@ -417,23 +417,23 @@
   align-items: center;
   justify-content: center;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label-icon.collapse {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label-icon.collapse {
   transform: rotate(-90deg);
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .bk-select-option {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .bk-select-option {
   padding-left: 24px;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper {
   display: flex;
   margin: 4px 8px 0 8px;
   border-bottom: 1px solid #eaebf0;
   align-items: center;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .icon-search {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .icon-search {
   margin-left: 2px;
   color: #979ba5;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input {
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
@@ -456,6 +456,6 @@
   cursor: text;
   border: none;
 }
-.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input::placeholder {
+:where(.bk-popover).bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input::placeholder {
   color: #c4c6cc;
 }

package/lib/select/select.less

@@ -32,7 +32,7 @@
   border-radius: 2px;
   outline: none;
   box-sizing: border-box;
-  transition: all .1s;
+  transition: all 0.1s;
   resize: none;
   .ellipsis();
 
@@ -41,7 +41,7 @@
   }
 }
 
-.@{bk-prefix}-select {
+:where(.@{bk-prefix}-select) {
   .select-icon(@fontSize: 20px, @color: #979ba5) {
     display: flex;
     align-items: center;
@@ -76,11 +76,11 @@
   }
 
   .mr5 {
-    .mr(5px)
+    .mr(5px);
   }
 
   .ml5 {
-    .ml(5px)
+    .ml(5px);
   }
 
   ul {
@@ -170,11 +170,11 @@
 
       &-wrapper {
         display: flex;
+        padding: 4px 0;
+        overflow: hidden;
         align-items: center;
         flex-wrap: wrap;
-        overflow: hidden;
         gap: 4px;
-        padding: 4px 0;
       }
 
       &.collapse-tag .@{bk-prefix}-select-tag-wrapper {
@@ -240,7 +240,7 @@
     .angle-up {
       right: 4px;
       transform: rotate(180deg);
-      transition: transform .3s cubic-bezier(.4, 0, .2, 1);
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       .select-icon();
       .fix-icon();
     }
@@ -248,7 +248,7 @@
     .clear-icon {
       right: 4px;
       cursor: pointer;
-      transition: all .1s;
+      transition: all 0.1s;
       .select-icon(14px, #c4c6cc);
       .fix-icon();
 
@@ -263,7 +263,7 @@
     }
   }
 
-  &--prefix-area {
+  .@{bk-prefix}-select--prefix-area {
     display: flex;
     height: 100%;
     padding: 0 10px;
@@ -275,13 +275,13 @@
   }
 }
 
-.@{bk-prefix}-popover {
+:where(.@{bk-prefix}-popover) {
   &.@{bk-prefix}-pop2-content {
     &.@{bk-prefix}-select-popover {
       padding: 0;
       border: 1px solid @disable-color;
       border-radius: 2px;
-      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .10);
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
 
       .@{bk-prefix}-select-content-wrapper {
         .@{bk-prefix}-select-empty {
@@ -301,7 +301,7 @@
           }
 
           span {
-            .icon-text()
+            .icon-text();
           }
         }
 
@@ -312,11 +312,11 @@
             width: 4px;
             height: 4px;
           }
-      
+
           &::-webkit-scrollbar-thumb {
             background: #dde4eb;
             border-radius: 20px;
-            box-shadow: inset 0 0 6px hsla(0,0%,80%,.3);
+            box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
           }
         }
 
@@ -336,25 +336,29 @@
         .@{bk-prefix}-select-all {
           padding: 4px 0;
           border-bottom: 1px solid @border-color;
+
           .wrapper {
             display: flex;
-            align-items: center;
             height: 32px;
             padding: 0 12px;
-            cursor: pointer;
             color: @default-color;
+            cursor: pointer;
+            align-items: center;
+
             &:hover {
               background-color: @select-hover-color;
             }
+
             &.active {
-              background-color: @select-active-color;
               color: @primary-color;
+              background-color: @select-active-color;
             }
+
             .select-all-icon {
               margin-right: 4px;
               font-size: 16px;
             }
-          }  
+          }
         }
 
         .@{bk-prefix}-select-option {
@@ -374,7 +378,7 @@
           .@{bk-prefix}-select-selected-icon {
             position: absolute;
             top: 5px;
-            right: 10px
+            right: 10px;
           }
           .@{bk-prefix}-select-checkbox {
             margin-right: 6px;
@@ -386,6 +390,7 @@
 
           &-item {
             .ellipsis();
+
             .is-keyword {
               display: inline-flex;
               color: @primary-color;
@@ -416,7 +421,7 @@
             padding-right: 32px;
 
             &.is-selected {
-              background-color: #fff
+              background-color: #fff;
             }
 
             &.is-hover {
@@ -433,7 +438,7 @@
           .flex-center();
 
           span {
-            .icon-text()
+            .icon-text();
           }
         }
 
@@ -473,7 +478,7 @@
               width: 12px;
               height: 12px;
               margin-right: 8px;
-              transition: all .1s;
+              transition: all 0.1s;
               align-items: center;
               justify-content: center;