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

package/lib/menu/menu.less

@@ -9,18 +9,18 @@
   background: @submenu-bg-color;
 }
 
-.@{bk-prefix}-menu {
+:where(.@{bk-prefix}-menu) {
   display: flex;
   width: @menu-width;
   background-color: @menu-bg-color;
   flex-direction: column;
-  transition: width .3s ease-out;
+  transition: width 0.3s ease-out;
 
   &.is-collapse {
     .collapse();
   }
 
-  &-submenu {
+  .@{bk-prefix}-menu-submenu {
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -28,7 +28,7 @@
     text-overflow: clip;
     white-space: nowrap;
     align-items: center;
-    transition: width .3s ease-out;
+    transition: width 0.3s ease-out;
 
     &.is-opened {
       .open();
@@ -69,7 +69,7 @@
         height: 100%;
         align-items: center;
         flex: 1;
-        color: #acb9d1
+        color: #acb9d1;
       }
 
       &-collapse {
@@ -77,7 +77,7 @@
         margin-right: 16px;
         color: #acb9d1;
         transform: rotate(-90deg);
-        transition: transform .3s ease-out;
+        transition: transform 0.3s ease-out;
 
         &.is-collapse {
           transform: rotate(0deg);
@@ -98,7 +98,7 @@
     }
   }
 
-  &-item {
+  .@{bk-prefix}-menu-item {
     display: flex;
     width: 100%;
     height: 40px;
@@ -110,7 +110,7 @@
     text-overflow: clip;
     white-space: nowrap;
     align-items: center;
-    transition: width .3s ease-in-out;
+    transition: width 0.3s ease-in-out;
 
     &:hover {
       color: @menu-active-color;
@@ -148,7 +148,7 @@
     }
   }
 
-  &-group {
+  .@{bk-prefix}-menu-group {
     display: flex;
     flex-direction: column;
 
@@ -175,6 +175,6 @@
   }
 
   .collapse-transition {
-    transition: all .3s ease-in-out;
+    transition: all 0.3s ease-in-out;
   }
 }

package/lib/menu/menu.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,12 +140,12 @@
     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;
 }
 .clearfix-style::after {
@@ -156,7 +156,7 @@
   content: '';
   visibility: hidden;
 }
-.bk-popper {
+:where(.bk-popper) {
   display: none;
   padding: 7px 14px;
   font-size: 12px;
@@ -164,39 +164,39 @@
   background: #333;
   border-radius: 4px;
 }
-.bk-popper.light {
+:where(.bk-popper).light {
   color: #63656e;
   background: #fff;
   box-shadow: #dcdee5 0 0 6px 0;
 }
-.bk-popper .bk-popper-arrow,
-.bk-popper .bk-popper-arrow::before {
+:where(.bk-popper) .bk-popper-arrow,
+:where(.bk-popper) .bk-popper-arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
   background: inherit;
 }
-.bk-popper .bk-popper-arrow {
+:where(.bk-popper) .bk-popper-arrow {
   visibility: hidden;
 }
-.bk-popper .bk-popper-arrow::before {
+:where(.bk-popper) .bk-popper-arrow::before {
   content: '';
   visibility: visible;
   transform: rotate(45deg);
 }
-.bk-popper[data-show] {
+:where(.bk-popper)[data-show] {
   display: block;
 }
-.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+:where(.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow) {
   bottom: -4px;
 }
-.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+:where(.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow) {
   top: -4px;
 }
-.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+:where(.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow) {
   right: -4px;
 }
-.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+:where(.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow) {
   left: -4px;
 }
 .collapse {
@@ -205,17 +205,17 @@
 .open {
   background: #151d2c;
 }
-.bk-menu {
+:where(.bk-menu) {
   display: flex;
   width: 260px;
   background-color: #182132;
   flex-direction: column;
   transition: width 0.3s ease-out;
 }
-.bk-menu.is-collapse {
+:where(.bk-menu).is-collapse {
   width: 60px;
 }
-.bk-menu-submenu {
+:where(.bk-menu) .bk-menu-submenu {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -224,24 +224,24 @@
   align-items: center;
   transition: width 0.3s ease-out;
 }
-.bk-menu-submenu.is-opened {
+:where(.bk-menu) .bk-menu-submenu.is-opened {
   background: #151d2c;
 }
-.bk-menu-submenu:hover {
+:where(.bk-menu) .bk-menu-submenu:hover {
   color: white;
   cursor: pointer;
 }
-.bk-menu-submenu .submenu-header {
+:where(.bk-menu) .bk-menu-submenu .submenu-header {
   display: flex;
   width: 100%;
   height: 40px;
   align-items: center;
 }
-.bk-menu-submenu .submenu-header.is-collapse {
+:where(.bk-menu) .bk-menu-submenu .submenu-header.is-collapse {
   color: white;
   background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
 }
-.bk-menu-submenu .submenu-header-icon {
+:where(.bk-menu) .bk-menu-submenu .submenu-header-icon {
   display: flex;
   height: 100%;
   font-size: 18px;
@@ -249,7 +249,7 @@
   align-items: center;
   justify-content: center;
 }
-.bk-menu-submenu .submenu-header-icon .menu-icon {
+:where(.bk-menu) .bk-menu-submenu .submenu-header-icon .menu-icon {
   display: flex;
   width: 16px;
   height: 16px;
@@ -258,14 +258,14 @@
   justify-content: center;
   color: #b0bdd5;
 }
-.bk-menu-submenu .submenu-header-content {
+:where(.bk-menu) .bk-menu-submenu .submenu-header-content {
   display: flex;
   height: 100%;
   align-items: center;
   flex: 1;
   color: #acb9d1;
 }
-.bk-menu-submenu .submenu-header-collapse {
+:where(.bk-menu) .bk-menu-submenu .submenu-header-collapse {
   display: flex;
   width: 16px;
   height: 16px;
@@ -277,10 +277,10 @@
   transform: rotate(-90deg);
   transition: transform 0.3s ease-out;
 }
-.bk-menu-submenu .submenu-header-collapse.is-collapse {
+:where(.bk-menu) .bk-menu-submenu .submenu-header-collapse.is-collapse {
   transform: rotate(0deg);
 }
-.bk-menu-submenu .submenu-list {
+:where(.bk-menu) .bk-menu-submenu .submenu-list {
   display: flex;
   width: 100%;
   padding: 0;
@@ -290,7 +290,7 @@
   /* stylelint-disable-next-line declaration-no-important */
   transition-property: all !important;
 }
-.bk-menu-item {
+:where(.bk-menu) .bk-menu-item {
   display: flex;
   width: 100%;
   height: 40px;
@@ -304,15 +304,15 @@
   align-items: center;
   transition: width 0.3s ease-in-out;
 }
-.bk-menu-item:hover {
+:where(.bk-menu) .bk-menu-item:hover {
   color: white;
   cursor: pointer;
 }
-.bk-menu-item.is-active {
+:where(.bk-menu) .bk-menu-item.is-active {
   color: white;
   background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
 }
-.bk-menu-item .item-icon {
+:where(.bk-menu) .bk-menu-item .item-icon {
   display: flex;
   height: 100%;
   font-size: 18px;
@@ -320,7 +320,7 @@
   align-items: center;
   justify-content: center;
 }
-.bk-menu-item .item-icon .default-icon {
+:where(.bk-menu) .bk-menu-item .item-icon .default-icon {
   display: inline-block;
   width: 3px;
   height: 3px;
@@ -328,17 +328,17 @@
   background-color: white;
   border-radius: 50%;
 }
-.bk-menu-item .item-content {
+:where(.bk-menu) .bk-menu-item .item-content {
   display: flex;
   height: 100%;
   align-items: center;
   flex: 1;
 }
-.bk-menu-group {
+:where(.bk-menu) .bk-menu-group {
   display: flex;
   flex-direction: column;
 }
-.bk-menu-group .group-name {
+:where(.bk-menu) .bk-menu-group .group-name {
   display: flex;
   height: 40px;
   margin: 0 18px;
@@ -351,12 +351,12 @@
   flex-wrap: nowrap;
   align-items: center;
 }
-.bk-menu-group .group-wrap {
+:where(.bk-menu) .bk-menu-group .group-wrap {
   display: flex;
   flex-direction: column;
   padding: 0;
   margin: 0;
 }
-.bk-menu .collapse-transition {
+:where(.bk-menu) .collapse-transition {
   transition: all 0.3s ease-in-out;
 }

package/lib/menu/submenu.css

@@ -1,3 +1,3 @@
-.bk-menu {
+:where(.bk-menu) {
   display: block;
 }

package/lib/menu/submenu.less

@@ -1,5 +1,5 @@
 @import '../styles/themes/themes.less';
 
-.@{bk-prefix}-menu {
+:where(.@{bk-prefix}-menu) {
   display: block;
 }

package/lib/menu/submenu.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,6 +127,6 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-menu {
+:where(.bk-menu) {
   display: block;
 }

package/lib/message/message.css

@@ -1,4 +1,4 @@
-.bk-message {
+:where(.bk-message) {
   position: fixed;
   top: 20px;
   left: 50%;
@@ -14,78 +14,78 @@
   box-shadow: 0px 2px 4px 0px #e1e8f4;
   justify-content: space-between;
 }
-.bk-message .bk-message-close {
+:where(.bk-message) .bk-message-close {
   padding-left: 20px;
   margin-right: 0;
   font-size: 14px;
   color: #c4c6cc;
   cursor: pointer;
 }
-.bk-message .bk-message-close:hover {
+:where(.bk-message) .bk-message-close:hover {
   color: #979ba5;
 }
-.bk-message-icon {
+:where(.bk-message-icon) {
   display: inline-block;
   height: 18px;
   margin-right: 10px;
   font-size: 18px;
   color: #3a84ff;
 }
-.bk-message-primary {
+:where(.bk-message-primary) {
   background: #f0f8ff;
   border: 1px solid #e1ecff;
 }
-.bk-message-warning {
+:where(.bk-message-warning) {
   background: #fff4e2;
   border: 1px solid #ffe8c3;
   box-shadow: 0px 2px 4px 0px #ede6db;
 }
-.bk-message-warning .bk-message-icon {
+:where(.bk-message-warning) .bk-message-icon {
   color: #ff9c01;
 }
-.bk-message-success {
+:where(.bk-message-success) {
   background: #f2fff4;
   border: 1px solid #dcffe2;
   box-shadow: 0px 2px 4px 0px #cef0d7;
 }
-.bk-message-success .bk-message-icon {
+:where(.bk-message-success) .bk-message-icon {
   color: #2dcb56;
 }
-.bk-message-error {
+:where(.bk-message-error) {
   background: #ffeded;
   border: 1px solid #ffdddd;
   box-shadow: 0px 2px 4px 0px #f6dada;
 }
-.bk-message-error .bk-message-icon {
+:where(.bk-message-error) .bk-message-icon {
   color: #ea3636;
 }
-.bk-message-fade-enter-active,
-.bk-message-fade-leave-active {
+:where(.bk-message-fade-enter-active),
+:where(.bk-message-fade-leave-active) {
   transition: margin 0.2s linear;
 }
-.bk-message-fade-enter-from,
-.bk-message-fade-leave-to {
+:where(.bk-message-fade-enter-from),
+:where(.bk-message-fade-leave-to) {
   margin-top: -50px;
   opacity: 0;
 }
-.bk-message-content {
+:where(.bk-message-content) {
   display: flex;
   width: 100%;
   word-break: break-all;
 }
-.bk-message-content.multi {
+:where(.bk-message-content).multi {
   flex-direction: column;
   position: relative;
 }
-.bk-message-content.multi .overview {
+:where(.bk-message-content).multi .overview {
   display: flex;
   justify-content: space-between;
   align-items: self-start;
 }
-.bk-message-content.multi .overview .left-content {
+:where(.bk-message-content).multi .overview .left-content {
   display: flex;
 }
-.bk-message-content.multi .overview .left-content .describe {
+:where(.bk-message-content).multi .overview .left-content .describe {
   display: box;
   max-width: 560px;
   max-height: 60px;
@@ -94,64 +94,64 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
-.bk-message-content.multi .overview .tools {
+:where(.bk-message-content).multi .overview .tools {
   display: flex;
   align-items: center;
 }
-.bk-message-content.multi .overview .tools .tool {
+:where(.bk-message-content).multi .overview .tools .tool {
   display: flex;
   padding: 0 5px;
   font-size: 14px;
   cursor: pointer;
   align-items: center;
 }
-.bk-message-content.multi .overview .tools .tool .bk-message-close {
+:where(.bk-message-content).multi .overview .tools .tool .bk-message-close {
   padding-left: 0;
 }
-.bk-message-content.multi .overview .tools .tool .message-action-text {
+:where(.bk-message-content).multi .overview .tools .tool .message-action-text {
   padding-left: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-message-content.multi .overview .tools .tool:not(.fix) span {
+:where(.bk-message-content).multi .overview .tools .tool:not(.fix) span {
   color: #3a84ff;
 }
-.bk-message-content.multi .overview .tools .tool.fix.fixed span {
+:where(.bk-message-content).multi .overview .tools .tool.fix.fixed span {
   color: #3a84ff;
 }
-.bk-message-content.multi .overview .tools .tool.fix span {
+:where(.bk-message-content).multi .overview .tools .tool.fix span {
   color: #979ba5;
 }
-.bk-message-content.multi .overview .tools .tool.fix:hover span {
+:where(.bk-message-content).multi .overview .tools .tool.fix:hover span {
   color: #3a84ff;
 }
-.bk-message-content.multi .overview .tools .tool.close span {
+:where(.bk-message-content).multi .overview .tools .tool.close span {
   color: #c4c6cc;
 }
-.bk-message-content.multi .overview .tools .tool.close span:hover {
+:where(.bk-message-content).multi .overview .tools .tool.close span:hover {
   color: #979ba5;
 }
-.bk-message-content.multi .message-detail {
+:where(.bk-message-content).multi .message-detail {
   position: relative;
   margin-top: 10px;
 }
-.bk-message-content.multi .message-detail .message-tree {
+:where(.bk-message-content).multi .message-detail .message-tree {
+  display: flex;
   max-height: 480px;
   padding: 14px 32px;
   overflow: auto;
   background: #fff;
   border-radius: 2px;
-  display: flex;
   flex-direction: column;
 }
-.bk-message-content.multi .message-detail .message-tree .message-row {
+:where(.bk-message-content).multi .message-detail .message-tree .message-row {
   display: inline-flex;
   font-size: 14px;
   line-height: 34px;
   color: #313238;
 }
-.bk-message-content.multi .message-detail .message-tree .message-row label {
+:where(.bk-message-content).multi .message-detail .message-tree .message-row label {
   display: inline-block;
   width: 94px;
   min-width: 94px;
@@ -162,46 +162,46 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-message-content.multi .message-detail .message-tree .message-row label::after {
+:where(.bk-message-content).multi .message-detail .message-tree .message-row label::after {
   content: ':';
 }
-.bk-message-content.multi .message-detail .message-tree .message-row .copy-value {
+:where(.bk-message-content).multi .message-detail .message-tree .message-row .copy-value {
   padding-left: 4px;
 }
-.bk-message-content.multi .message-detail .message-tree .message-row .copy-value:hover {
-  background: rgba(186, 188, 192, 0.2);
+:where(.bk-message-content).multi .message-detail .message-tree .message-row .copy-value:hover {
   cursor: pointer;
+  background: rgba(186, 188, 192, 0.2);
   border-radius: 2px;
 }
-.bk-message-content.multi .message-detail .message-copy {
+:where(.bk-message-content).multi .message-detail .message-copy {
   position: absolute;
   top: 20px;
-  right: 40px;
-  font-size: 16px;
   top: 0px;
+  right: 40px;
   right: 0px;
-  font-size: 18px;
+  display: flex;
   width: 24px;
   height: 24px;
-  display: flex;
-  align-items: center;
-  border-radius: 0 2px 0 6px;
+  font-size: 16px;
+  font-size: 18px;
+  color: #9fa3ae;
   cursor: pointer;
+  background: #f5f7fa;
+  border-radius: 0 2px 0 6px;
+  align-items: center;
   justify-content: center;
-  background: #F5F7FA;
-  color: #9FA3AE;
 }
-.bk-message-content.multi .message-detail .message-copy:hover {
-  background: #F0F5FF;
+:where(.bk-message-content).multi .message-detail .message-copy:hover {
+  background: #f0f5ff;
 }
-.bk-message-content.multi .message-detail .message-copy:hover span {
+:where(.bk-message-content).multi .message-detail .message-copy:hover span {
   color: #3a84ff;
 }
-.bk-message-content.multi .message-detail .copy-status {
+:where(.bk-message-content).multi .message-detail .copy-status {
   display: none;
   padding-bottom: 4px;
 }
-.bk-message-content.multi .message-detail .copy-status .inner {
+:where(.bk-message-content).multi .message-detail .copy-status .inner {
   position: relative;
   display: flex;
   padding: 6px 8px;
@@ -213,10 +213,10 @@
   box-shadow: 0 2px 6px 0 #0000001a;
   align-items: center;
 }
-.bk-message-content.multi .message-detail .copy-status .inner span {
+:where(.bk-message-content).multi .message-detail .copy-status .inner span {
   margin-right: 4px;
 }
-.bk-message-content.multi .message-detail .copy-status .inner::after {
+:where(.bk-message-content).multi .message-detail .copy-status .inner::after {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -231,13 +231,13 @@
   box-shadow: 5px 3px 6px 0 #0000001a;
   box-sizing: border-box;
 }
-.bk-message-content.multi .message-detail .copy-status.success .inner span {
+:where(.bk-message-content).multi .message-detail .copy-status.success .inner span {
   color: #2dcb9d;
 }
-.bk-message-content.multi .message-detail .copy-status.error .inner span {
+:where(.bk-message-content).multi .message-detail .copy-status.error .inner span {
   color: #ea3636;
 }
-.bk-message-content.multi .message-detail .copy-status.is-show {
+:where(.bk-message-content).multi .message-detail .copy-status.is-show {
   position: absolute;
   top: 0;
   left: 0;
@@ -245,6 +245,6 @@
   white-space: nowrap;
   transform: translate(-50%, -100%);
 }
-.bk-message-content.multi .message-detail .copy-status.is-hidden {
+:where(.bk-message-content).multi .message-detail .copy-status.is-hidden {
   display: none;
 }