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

package/lib/progress/progress.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,50 +164,50 @@
   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;
 }
-.bk-progress {
+:where(.bk-progress) {
   display: inline-block;
 }
-.bk-progress .progress-outer {
+:where(.bk-progress) .progress-outer {
   display: flex;
   width: 100%;
   align-items: center;
 }
-.bk-progress .progress-bar {
+:where(.bk-progress) .progress-bar {
   position: relative;
   width: 100%;
   height: 4px;
@@ -216,20 +216,20 @@
   background: #f0f1f5;
   border-radius: 50px;
 }
-.bk-progress .progress-bar.bk-progress-small {
+:where(.bk-progress) .progress-bar.bk-progress-small {
   height: 4px;
 }
-.bk-progress .progress-bar.bk-progress-normal,
-.bk-progress .progress-bar.bk-progress-default {
+:where(.bk-progress) .progress-bar.bk-progress-normal,
+:where(.bk-progress) .progress-bar.bk-progress-default {
   height: 8px;
 }
-.bk-progress .progress-bar.bk-progress-large {
+:where(.bk-progress) .progress-bar.bk-progress-large {
   height: 12px;
 }
-.bk-progress .progress-bar.bk-progress-huge {
+:where(.bk-progress) .progress-bar.bk-progress-huge {
   height: 16px;
 }
-.bk-progress .progress-inner {
+:where(.bk-progress) .progress-inner {
   position: absolute;
   top: 0;
   left: 0;
@@ -238,29 +238,29 @@
   border-radius: 50px;
   transition: width 0.5s ease;
 }
-.bk-progress .progress-inner.bk-primary {
+:where(.bk-progress) .progress-inner.bk-primary {
   background: #3a84ff;
 }
-.bk-progress .progress-inner.bk-success {
+:where(.bk-progress) .progress-inner.bk-success {
   background: #2dcb56;
 }
-.bk-progress .progress-inner.bk-warning {
+:where(.bk-progress) .progress-inner.bk-warning {
   background: #ff9c01;
 }
-.bk-progress .progress-inner.bk-danger {
+:where(.bk-progress) .progress-inner.bk-danger {
   background: #ea3636;
 }
-.bk-progress .inner-text {
+:where(.bk-progress) .inner-text {
   width: 100%;
   height: 100%;
   color: #fff;
   text-align: center;
 }
-.bk-progress .progress-text {
+:where(.bk-progress) .progress-text {
   width: 7%;
   text-align: center;
 }
-.bk-progress .progress-circle-text {
+:where(.bk-progress) .progress-circle-text {
   position: absolute;
   top: 50%;
   left: 0;
@@ -269,10 +269,10 @@
   text-align: center;
   transform: translateY(-50%);
 }
-.bk-progress-line {
+:where(.bk-progress-line) {
   width: 100%;
 }
-.bk-progress-circle,
+:where(.bk-progress-circle),
 .bk-progress-dashboard {
   position: relative;
 }

package/lib/radio/radio.css

@@ -1,8 +1,8 @@
-.bk-radio-group {
+:where(.bk-radio-group) {
   display: inline-flex;
   letter-spacing: normal;
 }
-.bk-radio {
+:where(.bk-radio) {
   display: inline-flex;
   align-items: center;
   font-weight: normal;
@@ -13,37 +13,37 @@
   outline: none;
   user-select: none;
 }
-.bk-radio ~ .bk-radio {
+:where(.bk-radio) ~ .bk-radio {
   margin-left: 24px;
 }
-.bk-radio.bk-radio-small .bk-radio-label {
+:where(.bk-radio).bk-radio-small .bk-radio-label {
   font-size: 12px;
 }
-.bk-radio.is-checked .bk-radio-input {
+:where(.bk-radio).is-checked .bk-radio-input {
   padding: 3px;
   color: #3a84ff;
   background-color: #3a84ff;
   border-color: #3a84ff;
 }
-.bk-radio.is-disabled {
+:where(.bk-radio).is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-radio.is-disabled.is-checked .bk-radio-input {
+:where(.bk-radio).is-disabled.is-checked .bk-radio-input {
   background-color: #a3c5fd;
   border-color: #a3c5fd;
 }
-.bk-radio.is-disabled .bk-radio-input {
+:where(.bk-radio).is-disabled .bk-radio-input {
   cursor: not-allowed;
   border-color: #dcdee5;
 }
-.bk-radio.is-disabled .bk-radio-label {
+:where(.bk-radio).is-disabled .bk-radio-label {
   cursor: not-allowed;
 }
-.bk-radio.is-focused .bk-radio-input {
+:where(.bk-radio).is-focused .bk-radio-input {
   border-color: #3a84ff;
 }
-.bk-radio-input {
+:where(.bk-radio-input) {
   position: relative;
   display: inline-block;
   width: 16px;
@@ -60,10 +60,10 @@
   background-clip: content-box;
   appearance: none;
 }
-.bk-radio-input:hover {
+:where(.bk-radio-input):hover {
   border-color: #979ba5;
 }
-.bk-radio-label {
+:where(.bk-radio-label) {
   margin-left: 6px;
   font-size: 14px;
   font-style: normal;
@@ -71,7 +71,7 @@
   vertical-align: middle;
   cursor: pointer;
 }
-.bk-radio-button {
+:where(.bk-radio-button) {
   position: relative;
   z-index: 1;
   display: inline-flex;
@@ -84,19 +84,19 @@
   opacity: 1;
   user-select: none;
 }
-.bk-radio-button.bk-radio-button-small .bk-radio-button-label {
+:where(.bk-radio-button).bk-radio-button-small .bk-radio-button-label {
   height: 26px;
   padding: 0 12px;
   font-size: 12px;
   line-height: 26px;
 }
-.bk-radio-button.bk-radio-button-large .bk-radio-button-label {
+:where(.bk-radio-button).bk-radio-button-large .bk-radio-button-label {
   height: 40px;
   padding: 0 16px;
   font-size: 16px;
   line-height: 40px;
 }
-.bk-radio-button .bk-radio-button-input {
+:where(.bk-radio-button) .bk-radio-button-input {
   position: absolute;
   z-index: -1;
   width: 100%;
@@ -106,7 +106,7 @@
   outline: none;
   opacity: 0;
 }
-.bk-radio-button .bk-radio-button-label {
+:where(.bk-radio-button) .bk-radio-button-label {
   width: 100%;
   padding: 0 14px;
   font-size: 12px;
@@ -119,29 +119,29 @@
   cursor: pointer;
   transition: all 0.3s;
 }
-.bk-radio-button.is-checked {
+:where(.bk-radio-button).is-checked {
   z-index: 2;
 }
-.bk-radio-button.is-checked .bk-radio-button-label {
+:where(.bk-radio-button).is-checked .bk-radio-button-label {
   color: #3a84ff;
 }
-.bk-radio-button.is-disabled {
+:where(.bk-radio-button).is-disabled {
   z-index: 0;
   color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-radio-button.is-disabled .bk-radio-button-label {
+:where(.bk-radio-button).is-disabled .bk-radio-button-label {
   cursor: not-allowed;
 }
-.bk-radio-capsule {
+:where(.bk-radio-capsule) {
   padding: 4px;
   background: #f0f1f5;
   border-radius: 2px;
 }
-.bk-radio-capsule .bk-radio-button {
+:where(.bk-radio-capsule) .bk-radio-button {
   border-radius: 2px;
 }
-.bk-radio-capsule .bk-radio-button:before {
+:where(.bk-radio-capsule) .bk-radio-button:before {
   position: absolute;
   top: 50%;
   right: -1px;
@@ -152,72 +152,72 @@
   background: #dcdee5;
   content: '';
 }
-.bk-radio-capsule .bk-radio-button:last-of-type::before {
+:where(.bk-radio-capsule) .bk-radio-button:last-of-type::before {
   display: none;
 }
-.bk-radio-capsule .bk-radio-button-label {
+:where(.bk-radio-capsule) .bk-radio-button-label {
   position: relative;
   height: 24px;
   padding: 0 12px;
   line-height: 24px;
 }
-.bk-radio-capsule .is-checked {
+:where(.bk-radio-capsule) .is-checked {
   background: #fff;
 }
-.bk-radio-capsule .is-checked:before {
+:where(.bk-radio-capsule) .is-checked:before {
   display: none;
 }
-.bk-radio-tab .bk-radio-button,
-.bk-radio-card .bk-radio-button {
+:where(.bk-radio-tab) .bk-radio-button,
+:where(.bk-radio-card) .bk-radio-button {
   overflow: hidden;
 }
-.bk-radio-tab .bk-radio-button:nth-child(n+2),
-.bk-radio-card .bk-radio-button:nth-child(n+2) {
+:where(.bk-radio-tab) .bk-radio-button:nth-child(n + 2),
+:where(.bk-radio-card) .bk-radio-button:nth-child(n + 2) {
   margin-left: -1px;
 }
-.bk-radio-tab .bk-radio-button:first-child .bk-radio-button-label,
-.bk-radio-card .bk-radio-button:first-child .bk-radio-button-label {
+:where(.bk-radio-tab) .bk-radio-button:first-child .bk-radio-button-label,
+:where(.bk-radio-card) .bk-radio-button:first-child .bk-radio-button-label {
   border-bottom-left-radius: 2px;
   border-top-left-radius: 2px;
 }
-.bk-radio-tab .bk-radio-button:last-child .bk-radio-button-label,
-.bk-radio-card .bk-radio-button:last-child .bk-radio-button-label {
+:where(.bk-radio-tab) .bk-radio-button:last-child .bk-radio-button-label,
+:where(.bk-radio-card) .bk-radio-button:last-child .bk-radio-button-label {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.bk-radio-tab .bk-radio-button.is-checked,
-.bk-radio-card .bk-radio-button.is-checked {
+:where(.bk-radio-tab) .bk-radio-button.is-checked,
+:where(.bk-radio-card) .bk-radio-button.is-checked {
   z-index: 2;
 }
-.bk-radio-tab .bk-radio-button.is-checked .bk-radio-button-label,
-.bk-radio-card .bk-radio-button.is-checked .bk-radio-button-label {
+:where(.bk-radio-tab) .bk-radio-button.is-checked .bk-radio-button-label,
+:where(.bk-radio-card) .bk-radio-button.is-checked .bk-radio-button-label {
   background: #e1ecff;
   border-color: #3a84ff;
 }
-.bk-radio-tab .bk-radio-button.is-disabled .bk-radio-button-label,
-.bk-radio-card .bk-radio-button.is-disabled .bk-radio-button-label {
+:where(.bk-radio-tab) .bk-radio-button.is-disabled .bk-radio-button-label,
+:where(.bk-radio-card) .bk-radio-button.is-disabled .bk-radio-button-label {
   background: #fafbfd;
   border-color: #dcdee5;
 }
-.bk-radio-tab .bk-radio-button.is-focused .bk-radio-button-label,
-.bk-radio-card .bk-radio-button.is-focused .bk-radio-button-label {
+:where(.bk-radio-tab) .bk-radio-button.is-focused .bk-radio-button-label,
+:where(.bk-radio-card) .bk-radio-button.is-focused .bk-radio-button-label {
   border-color: #3a84ff;
 }
-.bk-radio-tab .bk-radio-button-label,
-.bk-radio-card .bk-radio-button-label {
+:where(.bk-radio-tab) .bk-radio-button-label,
+:where(.bk-radio-card) .bk-radio-button-label {
   height: 32px;
   border: 1px solid #c4c6cc;
   transition: all 0.3s;
 }
-.bk-radio-tab .bk-radio-button-label:hover,
-.bk-radio-card .bk-radio-button-label:hover {
+:where(.bk-radio-tab) .bk-radio-button-label:hover,
+:where(.bk-radio-card) .bk-radio-button-label:hover {
   border-color: #979ba5;
 }
-.bk-radio-card {
+:where(.bk-radio-card) {
   display: flex;
   width: 100%;
 }
-.bk-radio-card .bk-radio-button {
+:where(.bk-radio-card) .bk-radio-button {
   flex: 1;
   display: block;
 }

package/lib/radio/radio.less

@@ -1,12 +1,11 @@
 @import '../styles/themes/themes.less';
 
-.@{bk-prefix}-radio-group {
+:where(.@{bk-prefix}-radio-group) {
   display: inline-flex;
   letter-spacing: normal;
 }
 
-
-.@{bk-prefix}-radio {
+:where(.@{bk-prefix}-radio) {
   display: inline-flex;
   align-items: center;
   font-weight: normal;
@@ -63,7 +62,7 @@
   }
 }
 
-.@{bk-prefix}-radio-input {
+:where(.@{bk-prefix}-radio-input) {
   position: relative;
   display: inline-block;
   width: @line-height-base;
@@ -76,7 +75,7 @@
   border-radius: 50%;
   outline: none;
   visibility: visible;
-  transition: all .3s;
+  transition: all 0.3s;
   background-clip: content-box;
   appearance: none;
 
@@ -85,7 +84,7 @@
   }
 }
 
-.@{bk-prefix}-radio-label {
+:where(.@{bk-prefix}-radio-label) {
   margin-left: 6px;
   font-size: @font-size-medium;
   font-style: normal;
@@ -95,7 +94,7 @@
 }
 
 // 按钮样式
-.@{bk-prefix}-radio-button {
+:where(.@{bk-prefix}-radio-button) {
   position: relative;
   z-index: 1;
   display: inline-flex;
@@ -137,7 +136,6 @@
     }
   });
 
-
   .@{bk-prefix}-radio-button-input {
     position: absolute;
     z-index: -1;
@@ -160,8 +158,7 @@
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
-    transition: all .3s;
-
+    transition: all 0.3s;
   }
 
   &.is-checked {
@@ -183,7 +180,7 @@
   }
 }
 
-.@{bk-prefix}-radio-capsule {
+:where(.@{bk-prefix}-radio-capsule) {
   padding: 4px;
   background: #f0f1f5;
   border-radius: 2px;
@@ -213,7 +210,6 @@
     height: 24px;
     padding: 0 12px;
     line-height: 24px;
-
   }
 
   .is-checked {
@@ -225,13 +221,12 @@
   }
 }
 
-.@{bk-prefix}-radio-tab,
-.@{bk-prefix}-radio-card {
-
+:where(.@{bk-prefix}-radio-tab),
+:where(.@{bk-prefix}-radio-card) {
   .@{bk-prefix}-radio-button {
     overflow: hidden;
 
-    &:nth-child(n+2) {
+    &:nth-child(n + 2) {
       margin-left: -1px;
     }
 
@@ -270,22 +265,20 @@
         border-color: @radio-active-color;
       }
     }
-
   }
 
   .@{bk-prefix}-radio-button-label {
     height: @component-size-base;
     border: @border-width-base @border-style-base @light-gray;
-    transition: all .3s;
+    transition: all 0.3s;
 
     &:hover {
       border-color: @radio-hover-border-color;
     }
   }
-
 }
 
-.@{bk-prefix}-radio-card {
+:where(.@{bk-prefix}-radio-card) {
   display: flex;
   width: 100%;