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

package/lib/menu/menu.css

@@ -11,12 +11,12 @@
     background-color: transparent;
   }
 }
-:where(.bk-transition) .bk-fade-enter-active,
-:where(.bk-transition) .bk-fade-leave-active {
+.bk-transition .bk-fade-enter-active,
+.bk-transition .bk-fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-:where(.bk-transition) .bk-fade-enter,
-:where(.bk-transition) .bk-fade-leave-to {
+.bk-transition .bk-fade-enter,
+.bk-transition .bk-fade-leave-to {
   opacity: 0;
 }
 .clearfix-style::after {
@@ -27,7 +27,7 @@
   content: '';
   visibility: hidden;
 }
-:where(.bk-popper) {
+.bk-popper {
   display: none;
   padding: 7px 14px;
   font-size: 12px;
@@ -35,39 +35,39 @@
   background: #333;
   border-radius: 4px;
 }
-:where(.bk-popper).light {
+.bk-popper.light {
   color: #63656e;
   background: #fff;
   box-shadow: #dcdee5 0 0 6px 0;
 }
-:where(.bk-popper) .bk-popper-arrow,
-:where(.bk-popper) .bk-popper-arrow::before {
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
   background: inherit;
 }
-:where(.bk-popper) .bk-popper-arrow {
+.bk-popper .bk-popper-arrow {
   visibility: hidden;
 }
-:where(.bk-popper) .bk-popper-arrow::before {
+.bk-popper .bk-popper-arrow::before {
   content: '';
   visibility: visible;
   transform: rotate(45deg);
 }
-:where(.bk-popper)[data-show] {
+.bk-popper[data-show] {
   display: block;
 }
-:where(.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow) {
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
   bottom: -4px;
 }
-:where(.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow) {
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
   top: -4px;
 }
-:where(.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow) {
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
   right: -4px;
 }
-:where(.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow) {
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
   left: -4px;
 }
 .collapse {
@@ -76,17 +76,17 @@
 .open {
   background: #151d2c;
 }
-:where(.bk-menu) {
+.bk-menu {
   display: flex;
   width: 260px;
   background-color: #182132;
   flex-direction: column;
   transition: width 0.3s ease-out;
 }
-:where(.bk-menu).is-collapse {
+.bk-menu.is-collapse {
   width: 60px;
 }
-:where(.bk-menu) .bk-menu-submenu {
+.bk-menu-submenu {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -95,24 +95,24 @@
   align-items: center;
   transition: width 0.3s ease-out;
 }
-:where(.bk-menu) .bk-menu-submenu.is-opened {
+.bk-menu-submenu.is-opened {
   background: #151d2c;
 }
-:where(.bk-menu) .bk-menu-submenu:hover {
+.bk-menu-submenu:hover {
   color: white;
   cursor: pointer;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header {
+.bk-menu-submenu .submenu-header {
   display: flex;
   width: 100%;
   height: 40px;
   align-items: center;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header.is-collapse {
+.bk-menu-submenu .submenu-header.is-collapse {
   color: white;
   background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-icon {
+.bk-menu-submenu .submenu-header-icon {
   display: flex;
   height: 100%;
   font-size: 18px;
@@ -120,7 +120,7 @@
   align-items: center;
   justify-content: center;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-icon .menu-icon {
+.bk-menu-submenu .submenu-header-icon .menu-icon {
   display: flex;
   width: 16px;
   height: 16px;
@@ -129,14 +129,14 @@
   justify-content: center;
   color: #b0bdd5;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-content {
+.bk-menu-submenu .submenu-header-content {
   display: flex;
   height: 100%;
   align-items: center;
   flex: 1;
   color: #acb9d1;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-collapse {
+.bk-menu-submenu .submenu-header-collapse {
   display: flex;
   width: 16px;
   height: 16px;
@@ -148,10 +148,10 @@
   transform: rotate(-90deg);
   transition: transform 0.3s ease-out;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-collapse.is-collapse {
+.bk-menu-submenu .submenu-header-collapse.is-collapse {
   transform: rotate(0deg);
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-list {
+.bk-menu-submenu .submenu-list {
   display: flex;
   width: 100%;
   padding: 0;
@@ -161,7 +161,7 @@
   /* stylelint-disable-next-line declaration-no-important */
   transition-property: all !important;
 }
-:where(.bk-menu) .bk-menu-item {
+.bk-menu-item {
   display: flex;
   width: 100%;
   height: 40px;
@@ -175,15 +175,15 @@
   align-items: center;
   transition: width 0.3s ease-in-out;
 }
-:where(.bk-menu) .bk-menu-item:hover {
+.bk-menu-item:hover {
   color: white;
   cursor: pointer;
 }
-:where(.bk-menu) .bk-menu-item.is-active {
+.bk-menu-item.is-active {
   color: white;
   background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
 }
-:where(.bk-menu) .bk-menu-item .item-icon {
+.bk-menu-item .item-icon {
   display: flex;
   height: 100%;
   font-size: 18px;
@@ -191,7 +191,7 @@
   align-items: center;
   justify-content: center;
 }
-:where(.bk-menu) .bk-menu-item .item-icon .default-icon {
+.bk-menu-item .item-icon .default-icon {
   display: inline-block;
   width: 3px;
   height: 3px;
@@ -199,17 +199,17 @@
   background-color: white;
   border-radius: 50%;
 }
-:where(.bk-menu) .bk-menu-item .item-content {
+.bk-menu-item .item-content {
   display: flex;
   height: 100%;
   align-items: center;
   flex: 1;
 }
-:where(.bk-menu) .bk-menu-group {
+.bk-menu-group {
   display: flex;
   flex-direction: column;
 }
-:where(.bk-menu) .bk-menu-group .group-name {
+.bk-menu-group .group-name {
   display: flex;
   height: 40px;
   margin: 0 18px;
@@ -222,12 +222,12 @@
   flex-wrap: nowrap;
   align-items: center;
 }
-:where(.bk-menu) .bk-menu-group .group-wrap {
+.bk-menu-group .group-wrap {
   display: flex;
   flex-direction: column;
   padding: 0;
   margin: 0;
 }
-:where(.bk-menu) .collapse-transition {
+.bk-menu .collapse-transition {
   transition: all 0.3s ease-in-out;
 }

package/lib/menu/menu.less

@@ -9,18 +9,18 @@
   background: @submenu-bg-color;
 }
 
-:where(.@{bk-prefix}-menu) {
+.@{bk-prefix}-menu {
   display: flex;
   width: @menu-width;
   background-color: @menu-bg-color;
   flex-direction: column;
-  transition: width 0.3s ease-out;
+  transition: width .3s ease-out;
 
   &.is-collapse {
     .collapse();
   }
 
-  .@{bk-prefix}-menu-submenu {
+  &-submenu {
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -28,7 +28,7 @@
     text-overflow: clip;
     white-space: nowrap;
     align-items: center;
-    transition: width 0.3s ease-out;
+    transition: width .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 0.3s ease-out;
+        transition: transform .3s ease-out;
 
         &.is-collapse {
           transform: rotate(0deg);
@@ -98,7 +98,7 @@
     }
   }
 
-  .@{bk-prefix}-menu-item {
+  &-item {
     display: flex;
     width: 100%;
     height: 40px;
@@ -110,7 +110,7 @@
     text-overflow: clip;
     white-space: nowrap;
     align-items: center;
-    transition: width 0.3s ease-in-out;
+    transition: width .3s ease-in-out;
 
     &:hover {
       color: @menu-active-color;
@@ -148,7 +148,7 @@
     }
   }
 
-  .@{bk-prefix}-menu-group {
+  &-group {
     display: flex;
     flex-direction: column;
 
@@ -175,6 +175,6 @@
   }
 
   .collapse-transition {
-    transition: all 0.3s ease-in-out;
+    transition: all .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;
   }
 }
-:where(.bk-transition) .bk-fade-enter-active,
-:where(.bk-transition) .bk-fade-leave-active {
+.bk-transition .bk-fade-enter-active,
+.bk-transition .bk-fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-:where(.bk-transition) .bk-fade-enter,
-:where(.bk-transition) .bk-fade-leave-to {
+.bk-transition .bk-fade-enter,
+.bk-transition .bk-fade-leave-to {
   opacity: 0;
 }
 .clearfix-style::after {
@@ -156,7 +156,7 @@
   content: '';
   visibility: hidden;
 }
-:where(.bk-popper) {
+.bk-popper {
   display: none;
   padding: 7px 14px;
   font-size: 12px;
@@ -164,39 +164,39 @@
   background: #333;
   border-radius: 4px;
 }
-:where(.bk-popper).light {
+.bk-popper.light {
   color: #63656e;
   background: #fff;
   box-shadow: #dcdee5 0 0 6px 0;
 }
-:where(.bk-popper) .bk-popper-arrow,
-:where(.bk-popper) .bk-popper-arrow::before {
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
   background: inherit;
 }
-:where(.bk-popper) .bk-popper-arrow {
+.bk-popper .bk-popper-arrow {
   visibility: hidden;
 }
-:where(.bk-popper) .bk-popper-arrow::before {
+.bk-popper .bk-popper-arrow::before {
   content: '';
   visibility: visible;
   transform: rotate(45deg);
 }
-:where(.bk-popper)[data-show] {
+.bk-popper[data-show] {
   display: block;
 }
-:where(.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow) {
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
   bottom: -4px;
 }
-:where(.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow) {
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
   top: -4px;
 }
-:where(.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow) {
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
   right: -4px;
 }
-:where(.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow) {
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
   left: -4px;
 }
 .collapse {
@@ -205,17 +205,17 @@
 .open {
   background: #151d2c;
 }
-:where(.bk-menu) {
+.bk-menu {
   display: flex;
   width: 260px;
   background-color: #182132;
   flex-direction: column;
   transition: width 0.3s ease-out;
 }
-:where(.bk-menu).is-collapse {
+.bk-menu.is-collapse {
   width: 60px;
 }
-:where(.bk-menu) .bk-menu-submenu {
+.bk-menu-submenu {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -224,24 +224,24 @@
   align-items: center;
   transition: width 0.3s ease-out;
 }
-:where(.bk-menu) .bk-menu-submenu.is-opened {
+.bk-menu-submenu.is-opened {
   background: #151d2c;
 }
-:where(.bk-menu) .bk-menu-submenu:hover {
+.bk-menu-submenu:hover {
   color: white;
   cursor: pointer;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header {
+.bk-menu-submenu .submenu-header {
   display: flex;
   width: 100%;
   height: 40px;
   align-items: center;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header.is-collapse {
+.bk-menu-submenu .submenu-header.is-collapse {
   color: white;
   background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-icon {
+.bk-menu-submenu .submenu-header-icon {
   display: flex;
   height: 100%;
   font-size: 18px;
@@ -249,7 +249,7 @@
   align-items: center;
   justify-content: center;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-icon .menu-icon {
+.bk-menu-submenu .submenu-header-icon .menu-icon {
   display: flex;
   width: 16px;
   height: 16px;
@@ -258,14 +258,14 @@
   justify-content: center;
   color: #b0bdd5;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-content {
+.bk-menu-submenu .submenu-header-content {
   display: flex;
   height: 100%;
   align-items: center;
   flex: 1;
   color: #acb9d1;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-collapse {
+.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;
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-header-collapse.is-collapse {
+.bk-menu-submenu .submenu-header-collapse.is-collapse {
   transform: rotate(0deg);
 }
-:where(.bk-menu) .bk-menu-submenu .submenu-list {
+.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;
 }
-:where(.bk-menu) .bk-menu-item {
+.bk-menu-item {
   display: flex;
   width: 100%;
   height: 40px;
@@ -304,15 +304,15 @@
   align-items: center;
   transition: width 0.3s ease-in-out;
 }
-:where(.bk-menu) .bk-menu-item:hover {
+.bk-menu-item:hover {
   color: white;
   cursor: pointer;
 }
-:where(.bk-menu) .bk-menu-item.is-active {
+.bk-menu-item.is-active {
   color: white;
   background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
 }
-:where(.bk-menu) .bk-menu-item .item-icon {
+.bk-menu-item .item-icon {
   display: flex;
   height: 100%;
   font-size: 18px;
@@ -320,7 +320,7 @@
   align-items: center;
   justify-content: center;
 }
-:where(.bk-menu) .bk-menu-item .item-icon .default-icon {
+.bk-menu-item .item-icon .default-icon {
   display: inline-block;
   width: 3px;
   height: 3px;
@@ -328,17 +328,17 @@
   background-color: white;
   border-radius: 50%;
 }
-:where(.bk-menu) .bk-menu-item .item-content {
+.bk-menu-item .item-content {
   display: flex;
   height: 100%;
   align-items: center;
   flex: 1;
 }
-:where(.bk-menu) .bk-menu-group {
+.bk-menu-group {
   display: flex;
   flex-direction: column;
 }
-:where(.bk-menu) .bk-menu-group .group-name {
+.bk-menu-group .group-name {
   display: flex;
   height: 40px;
   margin: 0 18px;
@@ -351,12 +351,12 @@
   flex-wrap: nowrap;
   align-items: center;
 }
-:where(.bk-menu) .bk-menu-group .group-wrap {
+.bk-menu-group .group-wrap {
   display: flex;
   flex-direction: column;
   padding: 0;
   margin: 0;
 }
-:where(.bk-menu) .collapse-transition {
+.bk-menu .collapse-transition {
   transition: all 0.3s ease-in-out;
 }

package/lib/menu/submenu.css

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

package/lib/menu/submenu.less

@@ -1,5 +1,5 @@
 @import '../styles/themes/themes.less';
 
-:where(.@{bk-prefix}-menu) {
+.@{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;
 }
-:where(.bk-menu) {
+.bk-menu {
   display: block;
 }