bkui-vue 0.0.1-beta.14 → 0.0.1-beta.15

package/lib/switcher/switcher.less

@@ -3,162 +3,181 @@
 
 .@{bk-prefix}-switcher {
   position: relative;
+  position: relative;
+  display: inline-block;
   display: inline-block;
+  height: 20px;
 
   /* 默认尺寸 */
-  width: 36px;
-  height: 20px;
+  min-width: 36px;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
   line-height: 20px;
   text-align: left;
   vertical-align: middle;
+  list-style: none;
+  cursor: pointer;
   background-color: @switch-grey-color;
+  border: 1px solid transparent;
   border-radius: 50px;
+  border-radius: 100px;
+  box-sizing: border-box;
   transition: all .4s ease;
-
-  &:focus {
-    box-shadow: 0px 0px 6px @switch-grey-color;
-  }
+  transition: all .36s;
+  user-select: none;
 
   &:after {
     position: absolute;
-    top: 2px;
-    left: 2px;
-    display: block;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    background: @switch-default-color;
-    border-radius: 100px;
-    content: '';
-    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-    transition: all .3s ease
-  }
-
-  &:not(.show-label):after {
+    top: 1px;
+    left: 1px;
     width: 16px;
     height: 16px;
+    cursor: pointer;
+    background: @switch-default-color;
+    background-color: #fff;
+    border-radius: 18px;
+    content: ' ';
+    transition: all .3s ease;
   }
 
-  &:not(.show-label).is-checked {
-    &:after {
-      margin-left: -18px;
-    }
+  .switcher-text {
+    display: block;
+    margin-right: 6px;
+    margin-left: 28px;
+    font-size: 12px;
+    font-weight: 400;
+    color: #fff;
+    text-align: center;
+    transition: all .3s ease;
   }
 
-  &.is-loading {
-    cursor: defalt;
+  .animating-node {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    pointer-events: none;
+    border-radius: inherit;
+    content: '';
+    // box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
+    opacity: .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-fill-mode: forwards;
 
-    input[type=checkbox] {
-      cursor: default;
-    }
   }
 
+
   .bk-switcher-loading {
     position: absolute;
-    top: 50%;
+    top: 1px;
     left: 1px;
-    z-index: 10;
-    display: flex;
-    width: 18px;
-    height: 18px;
-    transform: translateY(-50%);
+    z-index: 1;
+    width: 16px;
+    height: 16px;
+    font-size: 12px;
+    color: @switch-grey-color;
+    cursor: pointer;
+    background: transparent;
+    border-radius: 16px;
+    content: ' ';
+    transition: all .36s cubic-bezier(.78,.14,.15,.86);
 
     svg {
-      color: rgb(58, 132, 255);;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+      animation: loading 1s linear infinite 
     }
   }
 
-  .switcher-label {
-    display: none;
-    width: 30px;
-    height: 28px;
-    margin: 0 0 0 26px;
-    font-size: 12px;
-    font-weight: normal;
-    color: @switch-default-color;
-    text-align: center;
-    vertical-align: top;
-    transition: all ease .3s;
-
-    .on-text {
-      display: none;
-    }
+  &.is-loading {
+    cursor: defalt;
 
-    .off-text {
-      display: inline-block
+    input[type=checkbox] {
+      cursor: default;
     }
   }
 
   /* 显示文本时固定尺寸 */
   &.show-label {
-    width: 60px;
     height: 28px;
+    min-width: 60px;
     line-height: 28px;
 
-    .switcher-label {
-      display: inline-block;
+    &::after {
+      width: 24px;
+      height: 24px;
     }
 
     .bk-switcher-loading {
-      width: 26px;
-      height: 26px;
-      align-items: center;
-      justify-content: center;
+      width: 24px;
+      height: 24px;
+      font-size: 20px;
+    }
+  }
 
-      svg {
-        font-size: 24px;
-      }
+  &.show-label.is-checked {
+    .bk-switcher-loading {
+      left: 100%;
+      margin-left: -25px;
     }
   }
 
   &.is-disabled {
-    cursor: default;
-
-    /* background-color: #eee !important; */
+    cursor: not-allowed;
     opacity: .3;
 
-    input[type=checkbox] {
+    .bk-switcher-loading {
       cursor: not-allowed;
     }
-  }
 
+    &::after {
+      cursor: not-allowed;
+    }
+  }
+  
   &.is-checked {
     background: @success-color;
-
-    &:focus {
-      box-shadow: 0px 0px 6px @success-color;
+    
+    .bk-switcher-loading {
+      svg {
+        color: @success-color;
+      }
     }
 
-    &.primary {
+    &:not(.bk-switcher-outline)&.primary {
       background: @primary-color;
 
-      &:focus {
-        box-shadow: 0px 0px 6px @primary-color;
+      .bk-switcher-loading {
+        svg {
+          color: @primary-color;
+        }
       }
     }
 
     &:after {
-      top: 2px;
       left: 100%;
-      margin-left: -26px;
+      margin-left: -1px;
+      transform: translateX(-100%);
     }
 
-    .switcher-label {
-      margin-left: 4px;
-
-      .on-text {
-        display: inline-block;
-      }
-
-      .off-text {
-        display: none;
-      }
+    .switcher-text {
+      margin-right: 28px;
+      margin-left: 6px;
     }
 
-    .bk-switcher-loading {
-      right: 1px;
-      left: auto;
-    }
+  }
+
+  &:not(.show-label).is-checked .bk-switcher-loading {
+    left: 100%;
+    margin-left: -17px;
   }
 
   &.bk-switcher-outline {
@@ -166,64 +185,63 @@
     border: 1px solid @switch-grey-color;
 
     &:after {
-      width: 22px;
-      height: 22px;
+      width: 24px;
+      height: 24px;
       background-color: @switch-grey-color;
       box-shadow: none;
     }
 
-    .switcher-label {
-      height: 26px;
-      margin-left: 24px;
+    .switcher-text {
       color: @switch-grey-color;
     }
 
-    .bk-switcher-loading {
-      width: 22px;
-      height: 22px;
-      align-items: center;
-      justify-content: center;
-    }
+
 
     &.is-checked {
       border: 1px solid @success-color;
 
       &:after {
-        margin-left: -24px;
+        // margin-left: -33px;
         background-color: @success-color;
       }
 
-      .switcher-label {
-        margin-left: 4px;
+      .switcher-text {
         color: @success-color;
       }
+
     }
 
-    &.is-disabled {
-      background-color: @switch-default-color;
-      border-color: #eee;
+    // &.is-disabled {
+    //   background-color: @switch-default-color;
+    //   border-color: #eee;
 
-      .switcher-label {
-        color: #eee;
-      }
+    //   .switcher-text {
+    //     color: #eee;
+    //   }
 
-      &:after {
-        background-color: #eee;
+    //   &:after {
+    //     background-color: #eee;
+    //   }
+    // }
+
+    .bk-switcher-loading {
+      svg {
+        color: #fff;
       }
     }
+  }
 
-    &.bk-switcher-large {
+  &.bk-switcher-outline&.primary {
+    &.is-checked {
+      border: 1px solid @primary-color;
       &:after {
-        width: 18px;
-        height: 18px;
+        background: @primary-color;
       }
-
-      &.is-checked {
-        &:after {
-          margin-left: -20px;
-        }
+      .switcher-text {
+        color: @primary-color;
       }
     }
+
   }
 
   &.bk-switcher-square {
@@ -232,40 +250,43 @@
     &:after {
       border-radius: 2px;
     }
-
-    .switcher-label {
-      width: 35px;
-    }
   }
 
   &.bk-switcher-large {
-    width: 42px;
     height: 24px;
+    min-width: 42px;
     line-height: 22px;
-    border-radius: 12px;
-
+    
     &:after {
       width: 20px;
       height: 20px;
     }
 
+    .bk-switcher-loading {
+      width: 20px;
+      height: 20px;
+      font-size: 16px;
+    }
+
     &.is-checked {
-      &:after {
-        top: 2px;
-        left: 100%;
-        margin-left: -22px;
+      .bk-switcher-loading {
+        margin-left: -21px;
       }
     }
 
-    .bk-switcher-loading {
-      width: 22px;
-      height: 22px;
-    }
+    // &.is-checked {
+    //   &:after {
+    //     top: 2px;
+    //     left: 100%;
+    //     margin-left: -22px;
+    //   }
+
+    // }
   }
 
   &.bk-switcher-small {
-    width: 26px;
     height: 16px;
+    min-width: 26px;
     line-height: 22px;
 
     &:after {
@@ -273,30 +294,65 @@
       height: 12px;
     }
 
-    &.is-checked {
-      &:after {
-        top: 2px;
-        left: 100%;
-        margin-left: -14px;
-      }
+    .bk-switcher-loading {
+      width: 12px;
+      height: 12px;
+      font-weight: 700;
+      transform: scale(.66667);
     }
+  }
 
+  &.bk-switcher-small.is-checked {
     .bk-switcher-loading {
-      width: 14px;
-      height: 14px;
+      margin-left: -13px;
     }
+   
   }
+}
 
-  input[type=checkbox],
-  input[type=radio] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    cursor: pointer;
+&:not(.show-label).bk-switcher-nomal.bk-switcher-outline {
+  &::after {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+&:not(.show-label).bk-switcher-outline.is-checked.bk-switcher-small {
+  &::after {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+&:not(.show-label).bk-switcher-outline.is-checked.bk-switcher-large {
+  &::after {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+&:not(.show-label).bk-switcher-outline.is-checked {
+  &::after {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+
+@keyframes fadeEffect {
+  100% {
     opacity: 0;
   }
 }
+
+@keyframes waveEffect {
+  100% {
+    box-shadow: 0 0 0 #1890ff;
+  } 
+}
+
+@keyframes loading {
+  100% {
+    transform: rotate(1turn);
+  }
+}