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

package/lib/switcher/switcher.less

@@ -1,7 +1,7 @@
 @import '../styles/themes/themes.less';
 @import '../styles/mixins/mixins.less';
 
-.@{bk-prefix}-switcher {
+:where(.@{bk-prefix}-switcher) {
   position: relative;
   position: relative;
   display: inline-block;
@@ -23,8 +23,8 @@
   border-radius: 50px;
   border-radius: 100px;
   box-sizing: border-box;
-  transition: all .4s ease;
-  transition: all .36s;
+  transition: all 0.4s ease;
+  transition: all 0.36s;
   user-select: none;
 
   &:after {
@@ -38,7 +38,7 @@
     background-color: #fff;
     border-radius: 18px;
     content: ' ';
-    transition: all .3s ease;
+    transition: all 0.3s ease;
   }
 
   .switcher-text {
@@ -49,7 +49,7 @@
     font-weight: 400;
     color: #fff;
     text-align: center;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
   }
 
   .animating-node {
@@ -62,14 +62,14 @@
     pointer-events: none;
     border-radius: inherit;
     content: '';
-    opacity: .2;
+    opacity: 0.2;
     box-shadow: 0 0 0 0 #1890ff;
-    animation: fadeEffect 2s cubic-bezier(.08,.82,.17,1),waveEffect .4s cubic-bezier(.08,.82,.17,1);
+    animation:
+      fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1),
+      waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
     animation-fill-mode: forwards;
-
   }
 
-
   .@{bk-prefix}-switcher-loading {
     position: absolute;
     top: 1px;
@@ -83,7 +83,7 @@
     background: transparent;
     border-radius: 16px;
     content: ' ';
-    transition: all .36s cubic-bezier(.78,.14,.15,.86);
+    transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
 
     svg {
       position: absolute;
@@ -92,14 +92,14 @@
       bottom: 0;
       left: 0;
       margin: auto;
-      animation: loading 1s linear infinite
+      animation: loading 1s linear infinite;
     }
   }
 
   &.is-loading {
     cursor: defalt;
 
-    input[type=checkbox] {
+    input[type='checkbox'] {
       cursor: default;
     }
   }
@@ -131,7 +131,7 @@
 
   &.is-disabled {
     cursor: not-allowed;
-    opacity: .3;
+    opacity: 0.3;
 
     .@{bk-prefix}-switcher-loading {
       cursor: not-allowed;
@@ -171,7 +171,6 @@
       margin-right: 28px;
       margin-left: 6px;
     }
-
   }
 
   &:not(.show-label).is-checked .@{bk-prefix}-switcher-loading {
@@ -194,8 +193,6 @@
       color: @switch-grey-color;
     }
 
-
-
     &.is-checked {
       border: 1px solid @success-color;
 
@@ -206,7 +203,6 @@
       .switcher-text {
         color: @success-color;
       }
-
     }
 
     .@{bk-prefix}-switcher-loading {
@@ -228,7 +224,6 @@
         color: @primary-color;
       }
     }
-
   }
 
   &.@{bk-prefix}-switcher-square {
@@ -260,7 +255,6 @@
         margin-left: -21px;
       }
     }
-
   }
 
   &.@{bk-prefix}-switcher-small {
@@ -277,7 +271,7 @@
       width: 12px;
       height: 12px;
       font-weight: 700;
-      transform: scale(.66667);
+      transform: scale(0.66667);
     }
   }
 
@@ -285,7 +279,6 @@
     .@{bk-prefix}-switcher-loading {
       margin-left: -13px;
     }
-
   }
 }
 
@@ -317,7 +310,6 @@
   }
 }
 
-
 @keyframes fadeEffect {
   100% {
     opacity: 0;

package/lib/switcher/switcher.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,42 +164,42 @@
   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-switcher {
+:where(.bk-switcher) {
   position: relative;
   display: inline-block;
   height: 20px;
@@ -223,7 +223,7 @@
   user-select: none;
   /* 显示文本时固定尺寸 */
 }
-.bk-switcher:after {
+:where(.bk-switcher):after {
   position: absolute;
   top: 1px;
   left: 1px;
@@ -236,7 +236,7 @@
   content: ' ';
   transition: all 0.3s ease;
 }
-.bk-switcher .switcher-text {
+:where(.bk-switcher) .switcher-text {
   display: block;
   margin-right: 6px;
   margin-left: 28px;
@@ -246,7 +246,7 @@
   text-align: center;
   transition: all 0.3s ease;
 }
-.bk-switcher .animating-node {
+:where(.bk-switcher) .animating-node {
   position: absolute;
   top: 0;
   right: 0;
@@ -261,7 +261,7 @@
   animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
   animation-fill-mode: forwards;
 }
-.bk-switcher .bk-switcher-loading {
+:where(.bk-switcher) .bk-switcher-loading {
   position: absolute;
   top: 1px;
   left: 1px;
@@ -276,7 +276,7 @@
   content: ' ';
   transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
 }
-.bk-switcher .bk-switcher-loading svg {
+:where(.bk-switcher) .bk-switcher-loading svg {
   position: absolute;
   top: 0;
   right: 0;
@@ -285,138 +285,138 @@
   margin: auto;
   animation: loading 1s linear infinite;
 }
-.bk-switcher.is-loading {
+:where(.bk-switcher).is-loading {
   cursor: defalt;
 }
-.bk-switcher.is-loading input[type=checkbox] {
+:where(.bk-switcher).is-loading input[type='checkbox'] {
   cursor: default;
 }
-.bk-switcher.show-label {
+:where(.bk-switcher).show-label {
   height: 28px;
   min-width: 60px;
   line-height: 28px;
 }
-.bk-switcher.show-label::after {
+:where(.bk-switcher).show-label::after {
   width: 24px;
   height: 24px;
 }
-.bk-switcher.show-label .bk-switcher-loading {
+:where(.bk-switcher).show-label .bk-switcher-loading {
   width: 24px;
   height: 24px;
   font-size: 20px;
 }
-.bk-switcher.show-label.is-checked .bk-switcher-loading {
+:where(.bk-switcher).show-label.is-checked .bk-switcher-loading {
   left: 100%;
   margin-left: -25px;
 }
-.bk-switcher.is-disabled {
+:where(.bk-switcher).is-disabled {
   cursor: not-allowed;
   opacity: 0.3;
 }
-.bk-switcher.is-disabled .bk-switcher-loading {
+:where(.bk-switcher).is-disabled .bk-switcher-loading {
   cursor: not-allowed;
 }
-.bk-switcher.is-disabled::after {
+:where(.bk-switcher).is-disabled::after {
   cursor: not-allowed;
 }
-.bk-switcher.is-checked {
+:where(.bk-switcher).is-checked {
   background: #2dcb56;
 }
-.bk-switcher.is-checked .bk-switcher-loading svg {
+:where(.bk-switcher).is-checked .bk-switcher-loading svg {
   color: #2dcb56;
 }
-.bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.bk-primary {
+:where(.bk-switcher).is-checked:not(.bk-switcher-outline):where(.bk-switcher).is-checked.bk-primary {
   background: #3a84ff;
 }
-.bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.bk-primary .bk-switcher-loading svg {
+:where(.bk-switcher).is-checked:not(.bk-switcher-outline):where(.bk-switcher).is-checked.bk-primary .bk-switcher-loading svg {
   color: #3a84ff;
 }
-.bk-switcher.is-checked:after {
+:where(.bk-switcher).is-checked:after {
   left: 100%;
   margin-left: -1px;
   transform: translateX(-100%);
 }
-.bk-switcher.is-checked .switcher-text {
+:where(.bk-switcher).is-checked .switcher-text {
   margin-right: 28px;
   margin-left: 6px;
 }
-.bk-switcher:not(.show-label).is-checked .bk-switcher-loading {
+:where(.bk-switcher):not(.show-label).is-checked .bk-switcher-loading {
   left: 100%;
   margin-left: -17px;
 }
-.bk-switcher.bk-switcher-outline {
+:where(.bk-switcher).bk-switcher-outline {
   background: #fff;
   border: 1px solid #c4c6cc;
 }
-.bk-switcher.bk-switcher-outline:after {
+:where(.bk-switcher).bk-switcher-outline:after {
   width: 24px;
   height: 24px;
   background-color: #c4c6cc;
   box-shadow: none;
 }
-.bk-switcher.bk-switcher-outline .switcher-text {
+:where(.bk-switcher).bk-switcher-outline .switcher-text {
   color: #c4c6cc;
 }
-.bk-switcher.bk-switcher-outline.is-checked {
+:where(.bk-switcher).bk-switcher-outline.is-checked {
   border: 1px solid #2dcb56;
 }
-.bk-switcher.bk-switcher-outline.is-checked:after {
+:where(.bk-switcher).bk-switcher-outline.is-checked:after {
   background-color: #2dcb56;
 }
-.bk-switcher.bk-switcher-outline.is-checked .switcher-text {
+:where(.bk-switcher).bk-switcher-outline.is-checked .switcher-text {
   color: #2dcb56;
 }
-.bk-switcher.bk-switcher-outline .bk-switcher-loading svg {
+:where(.bk-switcher).bk-switcher-outline .bk-switcher-loading svg {
   color: #fff;
 }
-.bk-switcher.bk-switcher-outline.bk-switcher.bk-primary.is-checked {
+:where(.bk-switcher).bk-switcher-outline:where(.bk-switcher).bk-primary.is-checked {
   border: 1px solid #3a84ff;
 }
-.bk-switcher.bk-switcher-outline.bk-switcher.bk-primary.is-checked:after {
+:where(.bk-switcher).bk-switcher-outline:where(.bk-switcher).bk-primary.is-checked:after {
   background: #3a84ff;
 }
-.bk-switcher.bk-switcher-outline.bk-switcher.bk-primary.is-checked .switcher-text {
+:where(.bk-switcher).bk-switcher-outline:where(.bk-switcher).bk-primary.is-checked .switcher-text {
   color: #3a84ff;
 }
-.bk-switcher.bk-switcher-square {
+:where(.bk-switcher).bk-switcher-square {
   border-radius: 2px;
 }
-.bk-switcher.bk-switcher-square:after {
+:where(.bk-switcher).bk-switcher-square:after {
   border-radius: 2px;
 }
-.bk-switcher.bk-switcher-large {
+:where(.bk-switcher).bk-switcher-large {
   height: 24px;
   min-width: 42px;
   line-height: 22px;
 }
-.bk-switcher.bk-switcher-large:after {
+:where(.bk-switcher).bk-switcher-large:after {
   width: 20px;
   height: 20px;
 }
-.bk-switcher.bk-switcher-large .bk-switcher-loading {
+:where(.bk-switcher).bk-switcher-large .bk-switcher-loading {
   width: 20px;
   height: 20px;
   font-size: 16px;
 }
-.bk-switcher.bk-switcher-large.is-checked .bk-switcher-loading {
+:where(.bk-switcher).bk-switcher-large.is-checked .bk-switcher-loading {
   margin-left: -21px;
 }
-.bk-switcher.bk-switcher-small {
+:where(.bk-switcher).bk-switcher-small {
   height: 16px;
   min-width: 26px;
   line-height: 22px;
 }
-.bk-switcher.bk-switcher-small:after {
+:where(.bk-switcher).bk-switcher-small:after {
   width: 12px;
   height: 12px;
 }
-.bk-switcher.bk-switcher-small .bk-switcher-loading {
+:where(.bk-switcher).bk-switcher-small .bk-switcher-loading {
   width: 12px;
   height: 12px;
   font-weight: 700;
   transform: scale(0.66667);
 }
-.bk-switcher.bk-switcher-small.is-checked .bk-switcher-loading {
+:where(.bk-switcher).bk-switcher-small.is-checked .bk-switcher-loading {
   margin-left: -13px;
 }
 :not(.show-label).bk-switcher-default.bk-switcher-outline::after {