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

package/lib/select/select.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;
@@ -140,64 +140,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;
@@ -205,13 +205,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;
@@ -234,54 +234,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;
@@ -308,14 +308,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);
@@ -331,7 +331,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;
@@ -347,10 +347,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;
@@ -359,7 +359,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;
@@ -369,20 +369,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;
@@ -392,23 +392,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;
@@ -416,33 +416,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;
@@ -457,87 +457,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;
@@ -546,23 +546,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;
@@ -585,6 +585,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/sideslider/sideslider.css

@@ -1,4 +1,4 @@
-.bk-sideslider {
+:where(.bk-sideslider) {
   position: fixed;
   top: 0;
   right: 0;
@@ -9,7 +9,7 @@
 /* slide过渡动画 */
 .slide-enter-active,
 .slide-leave-active,
-.bk-modal-body {
+:where(.bk-modal-body) {
   transform: translateX(0);
   transition: transform 0.25s;
 }
@@ -37,24 +37,24 @@
     opacity: 1;
   }
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
   left: auto;
   transform: initial;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
-  overflow: auto;
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
   height: 100%;
+  overflow: auto;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
   width: 100%;
   height: 52px;
   background: #fff;
   border-bottom: 1px solid #dcdee5;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
   position: absolute;
   top: 0;
   width: 30px;
@@ -66,10 +66,10 @@
   cursor: pointer;
   background-color: #3a84ff;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
   left: 0;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
   top: 50%;
   left: 50%;
   display: inline-block;
@@ -80,10 +80,10 @@
   content: '';
   transform: translate(-50%, -50%) rotate(45deg);
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
   right: 0;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
   top: 50%;
   left: 50%;
   display: inline-block;
@@ -94,7 +94,7 @@
   content: '';
   transform: translate(50%, -50%) rotate(-45deg);
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
   display: flex;
   height: 52px;
   padding-left: 30px;
@@ -102,11 +102,11 @@
   color: #313238;
   align-items: center;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
   width: 100%;
   padding: 0 0 0 46px;
 }
-.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
+:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
   display: flex;
   width: 100%;
   height: 54px;

package/lib/sideslider/sideslider.less

@@ -1,6 +1,6 @@
 @import '../styles/themes/themes.less';
 
-.@{bk-prefix}-sideslider {
+:where(.@{bk-prefix}-sideslider) {
   position: fixed;
   top: 0;
   right: 0;
@@ -13,29 +13,29 @@
 /* slide过渡动画 */
 .slide-enter-active,
 .slide-leave-active,
-.@{bk-prefix}-modal-body {
+:where(.@{bk-prefix}-modal-body) {
   transform: translateX(0);
-  transition: transform .25s;
+  transition: transform 0.25s;
 }
 
 .slide-enter-active {
-  animation: slider-fade-in .25s;
+  animation: slider-fade-in 0.25s;
 }
 
 .slide-leave-active {
-  animation: slider-fade-in .25s reverse;
+  animation: slider-fade-in 0.25s reverse;
 }
 
 .slide-enter-from,
 .slide-leave-to {
   &.left {
     transform: translateX(-100%);
-    transition: transform .25s;
+    transition: transform 0.25s;
   }
 
   &.right {
     transform: translateX(100%);
-    transition: transform .25s;
+    transition: transform 0.25s;
   }
 }
 
@@ -49,7 +49,7 @@
   }
 }
 
-.@{bk-prefix}-modal-ctx {
+:where(.@{bk-prefix}-modal-ctx) {
   &.@{bk-prefix}-sideslider-wrapper {
     .@{bk-prefix}-modal-wrapper {
       position: absolute;
@@ -60,8 +60,8 @@
 
       &.scroll-able {
         .@{bk-prefix}-modal-content {
-          overflow: auto;
           height: 100%;
+          overflow: auto;
         }
       }
 
@@ -114,8 +114,6 @@
               transform: translate(50%, -50%) rotate(-45deg);
             }
           }
-
-
         }
 
         .@{bk-prefix}-sideslider-title {
@@ -143,7 +141,5 @@
         box-shadow: rgb(0 0 0 / 6%) 0 -2px 4px 0;
       }
     }
-
   }
 }
-