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

package/lib/divider/divider.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,16 +127,16 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-divider {
+:where(.bk-divider) {
   position: relative;
   background: var(--light-gray);
 }
-.bk-divider-horizontal {
+:where(.bk-divider) .bk-divider-horizontal {
   width: 100%;
   height: 1px;
   margin: 1em 0;
 }
-.bk-divider-info {
+:where(.bk-divider) .bk-divider-info {
   position: absolute;
   top: 50%;
   padding: 0 1.4em;
@@ -144,20 +144,20 @@
   background-color: var(--white-color);
   transform: translateY(-50%);
 }
-.bk-divider-info-center {
+:where(.bk-divider) .bk-divider-info-center {
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
 }
-.bk-divider-info .bk-divider-horizontal-left {
+:where(.bk-divider) .bk-divider-info .bk-divider-horizontal-left {
   left: 2em;
 }
-.bk-divider-info .bk-divider-horizontal-right {
+:where(.bk-divider) .bk-divider-info .bk-divider-horizontal-right {
   right: 2em;
 }
-.bk-divider-vertical .bk-divider-info {
+.bk-divider-vertical :where(.bk-divider) .bk-divider-info {
   padding: 20px 0;
 }
-.bk-divider-vertical {
+:where(.bk-divider) .bk-divider-vertical {
   display: inline-block;
   width: 1px;
   height: 100%;

package/lib/dropdown/dropdown.css

@@ -1,4 +1,4 @@
-.bk-popover.bk-pop2-content {
+:where(.bk-popover).bk-pop2-content {
   position: absolute;
   padding: 12px;
   font-size: 12px;
@@ -7,10 +7,10 @@
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover.bk-pop2-content.hidden {
+:where(.bk-popover).bk-pop2-content.hidden {
   display: none;
 }
-.bk-popover.bk-pop2-content .bk-pop2-arrow {
+:where(.bk-popover).bk-pop2-content .bk-pop2-arrow {
   position: absolute;
   z-index: -1;
   width: 8px;
@@ -18,32 +18,32 @@
   background: #333;
   transform: rotate(45deg);
 }
-.bk-popover.bk-pop2-content[data-theme^='light'] {
+:where(.bk-popover).bk-pop2-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover.bk-pop2-content[data-theme^='light'] .bk-pop2-arrow {
+:where(.bk-popover).bk-pop2-content[data-theme^='light'] .bk-pop2-arrow {
   background-color: #fff;
 }
-.bk-dropdown {
+:where(.bk-dropdown) {
   display: inline-block;
 }
-.bk-dropdown .bk-dropdown-reference {
+:where(.bk-dropdown) .bk-dropdown-reference {
   z-index: 1;
 }
-.bk-dropdown .bk-dropdown-content {
+:where(.bk-dropdown) .bk-dropdown-content {
   z-index: 2;
   display: none;
   box-shadow: 0 2px 6px rgba(51, 60, 72, 0.1);
 }
-.bk-dropdown .bk-dropdown-content[data-show] {
+:where(.bk-dropdown) .bk-dropdown-content[data-show] {
   display: block;
 }
-.bk-popover.bk-pop2-content.bk-dropdown-popover {
+:where(.bk-popover).bk-pop2-content.bk-dropdown-popover {
   padding: 0;
 }
-.bk-dropdown-popover .bk-dropdown-menu {
+:where(.bk-dropdown-popover) .bk-dropdown-menu {
   min-width: 100%;
   padding: 5px 0;
   margin: 0;
@@ -52,16 +52,16 @@
   border-radius: 2px;
   box-sizing: border-box;
 }
-.bk-dropdown-popover .bk-dropdown-menu::-webkit-scrollbar {
+:where(.bk-dropdown-popover) .bk-dropdown-menu::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
-.bk-dropdown-popover .bk-dropdown-menu::-webkit-scrollbar-thumb {
+:where(.bk-dropdown-popover) .bk-dropdown-menu::-webkit-scrollbar-thumb {
   background: #dde4eb;
   border-radius: 20px;
   box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
 }
-.bk-dropdown-popover .bk-dropdown-item {
+:where(.bk-dropdown-popover) .bk-dropdown-item {
   display: block;
   height: 32px;
   padding: 0 16px;
@@ -72,6 +72,6 @@
   list-style: none;
   cursor: pointer;
 }
-.bk-dropdown-popover .bk-dropdown-item:hover {
+:where(.bk-dropdown-popover) .bk-dropdown-item:hover {
   background-color: #f5f7fa;
 }

package/lib/dropdown/dropdown.less

@@ -1,7 +1,7 @@
 @import '../styles/themes/themes.less';
 @import '../popover/popover.less';
 
-.@{bk-prefix}-dropdown {
+:where(.@{bk-prefix}-dropdown) {
   display: inline-block;
 
   .@{bk-prefix}-dropdown-reference {
@@ -11,27 +11,27 @@
   .@{bk-prefix}-dropdown-content {
     z-index: 2;
     display: none;
-    box-shadow: 0 2px 6px rgba(51,60,72,.1);
+    box-shadow: 0 2px 6px rgba(51, 60, 72, 0.1);
 
     &[data-show] {
       display: block;
     }
   }
 }
-.@{bk-prefix}-popover {
+:where(.@{bk-prefix}-popover) {
   &.@{bk-prefix}-pop2-content {
     &.@{bk-prefix}-dropdown-popover {
       padding: 0;
     }
   }
 }
-.@{bk-prefix}-dropdown-popover {
+:where(.@{bk-prefix}-dropdown-popover) {
   .@{bk-prefix}-dropdown-menu {
     min-width: 100%;
     padding: 5px 0;
     margin: 0;
     background: #fff;
-    border: 1px solid  #dcdee5;
+    border: 1px solid #dcdee5;
     border-radius: 2px;
     box-sizing: border-box;
 
@@ -43,7 +43,7 @@
     &::-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);
     }
   }
 

package/lib/dropdown/dropdown.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,7 +127,7 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-popover.bk-pop2-content {
+:where(.bk-popover).bk-pop2-content {
   position: absolute;
   padding: 12px;
   font-size: 12px;
@@ -136,10 +136,10 @@
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover.bk-pop2-content.hidden {
+:where(.bk-popover).bk-pop2-content.hidden {
   display: none;
 }
-.bk-popover.bk-pop2-content .bk-pop2-arrow {
+:where(.bk-popover).bk-pop2-content .bk-pop2-arrow {
   position: absolute;
   z-index: -1;
   width: 8px;
@@ -147,32 +147,32 @@
   background: #333;
   transform: rotate(45deg);
 }
-.bk-popover.bk-pop2-content[data-theme^='light'] {
+:where(.bk-popover).bk-pop2-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover.bk-pop2-content[data-theme^='light'] .bk-pop2-arrow {
+:where(.bk-popover).bk-pop2-content[data-theme^='light'] .bk-pop2-arrow {
   background-color: #fff;
 }
-.bk-dropdown {
+:where(.bk-dropdown) {
   display: inline-block;
 }
-.bk-dropdown .bk-dropdown-reference {
+:where(.bk-dropdown) .bk-dropdown-reference {
   z-index: 1;
 }
-.bk-dropdown .bk-dropdown-content {
+:where(.bk-dropdown) .bk-dropdown-content {
   z-index: 2;
   display: none;
   box-shadow: 0 2px 6px rgba(51, 60, 72, 0.1);
 }
-.bk-dropdown .bk-dropdown-content[data-show] {
+:where(.bk-dropdown) .bk-dropdown-content[data-show] {
   display: block;
 }
-.bk-popover.bk-pop2-content.bk-dropdown-popover {
+:where(.bk-popover).bk-pop2-content.bk-dropdown-popover {
   padding: 0;
 }
-.bk-dropdown-popover .bk-dropdown-menu {
+:where(.bk-dropdown-popover) .bk-dropdown-menu {
   min-width: 100%;
   padding: 5px 0;
   margin: 0;
@@ -181,16 +181,16 @@
   border-radius: 2px;
   box-sizing: border-box;
 }
-.bk-dropdown-popover .bk-dropdown-menu::-webkit-scrollbar {
+:where(.bk-dropdown-popover) .bk-dropdown-menu::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
-.bk-dropdown-popover .bk-dropdown-menu::-webkit-scrollbar-thumb {
+:where(.bk-dropdown-popover) .bk-dropdown-menu::-webkit-scrollbar-thumb {
   background: #dde4eb;
   border-radius: 20px;
   box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
 }
-.bk-dropdown-popover .bk-dropdown-item {
+:where(.bk-dropdown-popover) .bk-dropdown-item {
   display: block;
   height: 32px;
   padding: 0 16px;
@@ -201,6 +201,6 @@
   list-style: none;
   cursor: pointer;
 }
-.bk-dropdown-popover .bk-dropdown-item:hover {
+:where(.bk-dropdown-popover) .bk-dropdown-item:hover {
   background-color: #f5f7fa;
 }

package/lib/exception/exception.css

@@ -1,4 +1,4 @@
-.bk-exception {
+:where(.bk-exception) {
   position: relative;
   display: flex;
   width: 100%;
@@ -6,53 +6,53 @@
   flex-direction: column;
   text-align: center;
 }
-.bk-exception-img {
+:where(.bk-exception-img) {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.bk-exception-img .exception-image {
+:where(.bk-exception-img) .exception-image {
   display: block;
   height: 100%;
   object-fit: contain;
 }
-.bk-exception-title {
+:where(.bk-exception-title) {
   color: #313238;
 }
-.bk-exception-description {
+:where(.bk-exception-description) {
   color: #63656e;
 }
-.bk-exception-page .bk-exception-img {
+:where(.bk-exception-page) .bk-exception-img {
   width: 480px;
   height: 240px;
 }
-.bk-exception-page .bk-exception-title {
+:where(.bk-exception-page) .bk-exception-title {
   margin-top: 18px;
   font-size: 24px;
   line-height: 32px;
 }
-.bk-exception-page .bk-exception-description {
+:where(.bk-exception-page) .bk-exception-description {
   margin-top: 16px;
   font-size: 14px;
   line-height: 22px;
 }
-.bk-exception-page .bk-exception-footer {
+:where(.bk-exception-page) .bk-exception-footer {
   margin-top: 24px;
 }
-.bk-exception-part .bk-exception-img {
+:where(.bk-exception-part) .bk-exception-img {
   width: 120px;
   height: 100px;
 }
-.bk-exception-part .bk-exception-title {
+:where(.bk-exception-part) .bk-exception-title {
   margin-top: 8px;
   font-size: 14px;
   line-height: 22px;
 }
-.bk-exception-part .bk-exception-description {
+:where(.bk-exception-part) .bk-exception-description {
   margin-top: 8px;
   font-size: 12px;
   line-height: 20px;
 }
-.bk-exception-part .bk-exception-footer {
+:where(.bk-exception-part) .bk-exception-footer {
   margin-top: 8px;
 }

package/lib/exception/exception.less

@@ -1,6 +1,6 @@
 @import '../styles/themes/themes.less';
 
-.@{bk-prefix}-exception {
+:where(.@{bk-prefix}-exception) {
   position: relative;
   display: flex;
   width: 100%;
@@ -9,7 +9,7 @@
   text-align: center;
 }
 
-.@{bk-prefix}-exception-img {
+:where(.@{bk-prefix}-exception-img) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -21,15 +21,15 @@
   }
 }
 
-.@{bk-prefix}-exception-title {
+:where(.@{bk-prefix}-exception-title) {
   color: #313238;
 }
 
-.@{bk-prefix}-exception-description {
+:where(.@{bk-prefix}-exception-description) {
   color: #63656e;
 }
 
-.@{bk-prefix}-exception-page {
+:where(.@{bk-prefix}-exception-page) {
   .@{bk-prefix}-exception-img {
     width: 480px;
     height: 240px;
@@ -52,7 +52,7 @@
   }
 }
 
-.@{bk-prefix}-exception-part {
+:where(.@{bk-prefix}-exception-part) {
   .@{bk-prefix}-exception-img {
     width: 120px;
     height: 100px;

package/lib/exception/exception.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,7 +127,7 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-exception {
+:where(.bk-exception) {
   position: relative;
   display: flex;
   width: 100%;
@@ -135,53 +135,53 @@
   flex-direction: column;
   text-align: center;
 }
-.bk-exception-img {
+:where(.bk-exception-img) {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.bk-exception-img .exception-image {
+:where(.bk-exception-img) .exception-image {
   display: block;
   height: 100%;
   object-fit: contain;
 }
-.bk-exception-title {
+:where(.bk-exception-title) {
   color: #313238;
 }
-.bk-exception-description {
+:where(.bk-exception-description) {
   color: #63656e;
 }
-.bk-exception-page .bk-exception-img {
+:where(.bk-exception-page) .bk-exception-img {
   width: 480px;
   height: 240px;
 }
-.bk-exception-page .bk-exception-title {
+:where(.bk-exception-page) .bk-exception-title {
   margin-top: 18px;
   font-size: 24px;
   line-height: 32px;
 }
-.bk-exception-page .bk-exception-description {
+:where(.bk-exception-page) .bk-exception-description {
   margin-top: 16px;
   font-size: 14px;
   line-height: 22px;
 }
-.bk-exception-page .bk-exception-footer {
+:where(.bk-exception-page) .bk-exception-footer {
   margin-top: 24px;
 }
-.bk-exception-part .bk-exception-img {
+:where(.bk-exception-part) .bk-exception-img {
   width: 120px;
   height: 100px;
 }
-.bk-exception-part .bk-exception-title {
+:where(.bk-exception-part) .bk-exception-title {
   margin-top: 8px;
   font-size: 14px;
   line-height: 22px;
 }
-.bk-exception-part .bk-exception-description {
+:where(.bk-exception-part) .bk-exception-description {
   margin-top: 8px;
   font-size: 12px;
   line-height: 20px;
 }
-.bk-exception-part .bk-exception-footer {
+:where(.bk-exception-part) .bk-exception-footer {
   margin-top: 8px;
 }

package/lib/fixed-navbar/fixed-navbar.css

@@ -1,4 +1,4 @@
-.bk-fixed-navbar {
+:where(.bk-fixed-navbar) {
   position: fixed;
   right: 10px;
   width: 52px;
@@ -9,34 +9,34 @@
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
 }
-.bk-fixed-navbar.middle {
+:where(.bk-fixed-navbar).middle {
   top: 50%;
   transform: translateY(-50%);
 }
-.bk-fixed-navbar.bottom {
+:where(.bk-fixed-navbar).bottom {
   bottom: 10%;
 }
-.bk-fixed-navbar.top {
+:where(.bk-fixed-navbar).top {
   top: 10%;
 }
-.bk-fixed-navbar .fixed-navbar-item {
+:where(.bk-fixed-navbar) .fixed-navbar-item {
   display: flex;
   color: #63656e;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
-.bk-fixed-navbar .fixed-navbar-item:hover {
+:where(.bk-fixed-navbar) .fixed-navbar-item:hover {
   color: #3a84ff;
   cursor: pointer;
 }
-.bk-fixed-navbar .fixed-navbar-item:not(:last-of-type) {
+:where(.bk-fixed-navbar) .fixed-navbar-item:not(:last-of-type) {
   margin-bottom: 25px;
 }
-.bk-fixed-navbar .fixed-navbar-item .icon {
+:where(.bk-fixed-navbar) .fixed-navbar-item .icon {
   margin-bottom: 5px;
   font-size: 17px;
 }
-.bk-fixed-navbar .fixed-navbar-item .text {
+:where(.bk-fixed-navbar) .fixed-navbar-item .text {
   font-size: 12px;
 }

package/lib/fixed-navbar/fixed-navbar.less

@@ -1,6 +1,6 @@
 @import '../styles/themes/themes.less';
 
-.@{bk-prefix}-fixed-navbar {
+:where(.@{bk-prefix}-fixed-navbar) {
   position: fixed;
   right: 10px;
   width: 52px;
@@ -49,5 +49,4 @@
       font-size: 12px;
     }
   }
-
 }

package/lib/fixed-navbar/fixed-navbar.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,7 +127,7 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-fixed-navbar {
+:where(.bk-fixed-navbar) {
   position: fixed;
   right: 10px;
   width: 52px;
@@ -138,34 +138,34 @@
   box-shadow: 0px 2px 4px 0px var(--fixed-navbar-boxshadow-color);
   box-sizing: border-box;
 }
-.bk-fixed-navbar.middle {
+:where(.bk-fixed-navbar).middle {
   top: 50%;
   transform: translateY(-50%);
 }
-.bk-fixed-navbar.bottom {
+:where(.bk-fixed-navbar).bottom {
   bottom: 10%;
 }
-.bk-fixed-navbar.top {
+:where(.bk-fixed-navbar).top {
   top: 10%;
 }
-.bk-fixed-navbar .fixed-navbar-item {
+:where(.bk-fixed-navbar) .fixed-navbar-item {
   display: flex;
   color: var(--default-color);
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
-.bk-fixed-navbar .fixed-navbar-item:hover {
+:where(.bk-fixed-navbar) .fixed-navbar-item:hover {
   color: var(--primary-color);
   cursor: pointer;
 }
-.bk-fixed-navbar .fixed-navbar-item:not(:last-of-type) {
+:where(.bk-fixed-navbar) .fixed-navbar-item:not(:last-of-type) {
   margin-bottom: 25px;
 }
-.bk-fixed-navbar .fixed-navbar-item .icon {
+:where(.bk-fixed-navbar) .fixed-navbar-item .icon {
   margin-bottom: 5px;
   font-size: 17px;
 }
-.bk-fixed-navbar .fixed-navbar-item .text {
+:where(.bk-fixed-navbar) .fixed-navbar-item .text {
   font-size: 12px;
 }