@tendaui/components 1.3.0 → 1.3.1

package/styles/components/slider/_vars.scss

@@ -1,51 +1,51 @@
-@use "../../_vars.scss" as *;
-$slider-background: $bg-color-secondarycomponent;
-$slider-background-current: $brand-color;
-$slider-text: $text-color-primary;
-$slider-control-bar-background: #fff; // 滑块背景色不随默认深色模式切换改变，固定为白色，故不使用背景色 token
-$slider-control-bar-border: $brand-color;
-
-$slider-background-hover: $bg-color-secondarycomponent-hover;
-$slider-control-bar-background-hover: $gray-color-1; // 滑块背景色不随默认深色模式切换改变，hover 后颜色固定为 $gray-color-1
-
-$slider-background-disabled: $bg-color-component-disabled;
-$slider-background-current-disabled: $brand-color-disabled;
-$slider-control-bar-border-disabled: $brand-color-disabled;
-$slider-text-disabled: $text-color-disabled;
-$slider-shadow: $shadow-1;
-$slider-input-shadow: 0 0 0px 2px $brand-color-focus;
-$slider-center-line-background: rgba(0, 0, 0, 90%);
-
-// 尺寸
-$slider-input-width: 80px;
-$slider-row-input-width: 120px;
-$slider-rail-track-step-size: $size-2;
-$slider-height: calc($comp-paddingTB-xs * 2 + $slider-rail-track-step-size);
-$slider-control-bar-size: $comp-size-xxxs;
-$slider-vertical-height: 100%;
-$slider-vertical-mark-width: 18px;
-$slider-stop-width: 1px;
-$slider-stop-height: $size-2;
-$slider-center-line-width: $size-4;
-$slider-center-line-height: 1px;
-
-// 边距
-$slider-input-margin-left: $comp-margin-xxl;
-$slider-input-vertical-padding-top: $comp-paddingTB-l;
-$slider-input-vertical-margin-left: 0px;
-$slider-padding: $comp-paddingTB-xs 0;
-$slider-vertical-padding: 0;
-$slider-vertical-handle-margin-top: -6px;
-$slider-vertical-handle-margin-left: -5px;
-$slider-vertical-text-margin-top: 0;
-$slider-vertical-text-margin-left: $comp-margin-xxs;
-$slider-center-line-margin: 0 $comp-margin-s;
-
-// 字体
-$slider-text-font: $font-body-small;
-
-// 边框
-$slider-border-radius: $border-radius-round;
-
-// 定位
-$slider-text-top: calc($slider-rail-track-step-size + $comp-paddingTB-xs + 2px);
+@use "../../_vars.scss" as *;
+$slider-background: $bg-color-secondarycomponent;
+$slider-background-current: $brand-color;
+$slider-text: $text-color-primary;
+$slider-control-bar-background: #fff; // 滑块背景色不随默认深色模式切换改变，固定为白色，故不使用背景色 token
+$slider-control-bar-border: $brand-color;
+
+$slider-background-hover: $bg-color-secondarycomponent-hover;
+$slider-control-bar-background-hover: $gray-color-1; // 滑块背景色不随默认深色模式切换改变，hover 后颜色固定为 $gray-color-1
+
+$slider-background-disabled: $bg-color-component-disabled;
+$slider-background-current-disabled: $brand-color-disabled;
+$slider-control-bar-border-disabled: $brand-color-disabled;
+$slider-text-disabled: $text-color-disabled;
+$slider-shadow: $shadow-1;
+$slider-input-shadow: 0 0 0px 2px $brand-color-focus;
+$slider-center-line-background: rgba(0, 0, 0, 90%);
+
+// 尺寸
+$slider-input-width: 80px;
+$slider-row-input-width: 120px;
+$slider-rail-track-step-size: $size-2;
+$slider-height: calc($comp-paddingTB-xs * 2 + $slider-rail-track-step-size);
+$slider-control-bar-size: $comp-size-xxxs;
+$slider-vertical-height: 100%;
+$slider-vertical-mark-width: 18px;
+$slider-stop-width: 1px;
+$slider-stop-height: $size-2;
+$slider-center-line-width: $size-4;
+$slider-center-line-height: 1px;
+
+// 边距
+$slider-input-margin-left: $comp-margin-xxl;
+$slider-input-vertical-padding-top: $comp-paddingTB-l;
+$slider-input-vertical-margin-left: 0px;
+$slider-padding: $comp-paddingTB-xs 0;
+$slider-vertical-padding: 0;
+$slider-vertical-handle-margin-top: -6px;
+$slider-vertical-handle-margin-left: -5px;
+$slider-vertical-text-margin-top: 0;
+$slider-vertical-text-margin-left: $comp-margin-xxs;
+$slider-center-line-margin: 0 $comp-margin-s;
+
+// 字体
+$slider-text-font: $font-body-small;
+
+// 边框
+$slider-border-radius: $border-radius-round;
+
+// 定位
+$slider-text-top: calc($slider-rail-track-step-size + $comp-paddingTB-xs + 2px);

package/styles/components/switch/_index.scss

@@ -1,38 +1,38 @@
-@use "../../_vars.scss" as *;
-@use "../../_vars.scss" as *;
-
-@use "./_vars.scss" as *;
-
-@use "./_mixins.scss" as *;
-
-@use "../../mixins/_reset.scss" as *;
-
-.#{$prefix}-switch {
-  @include reset;
-
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-  align-items: center;
-  outline: none;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  height: $switch-height-default;
-  line-height: $switch-height-default;
-  border-radius: $border-radius-round;
-  min-width: $switch-min-width-default;
-  transition: $switch-transition;
-  background-color: $switch-unchecked-bg-color;
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    background-color: $switch-unchecked-bg-color-hover;
-  }
-
-  &__handle {
-    position: absolute;
+@use "../../_vars.scss" as *;
+@use "../../_vars.scss" as *;
+
+@use "./_vars.scss" as *;
+
+@use "./_mixins.scss" as *;
+
+@use "../../mixins/_reset.scss" as *;
+
+.#{$prefix}-switch {
+  @include reset;
+
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  outline: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  height: $switch-height-default;
+  line-height: $switch-height-default;
+  border-radius: $border-radius-round;
+  min-width: $switch-min-width-default;
+  transition: $switch-transition;
+  background-color: $switch-unchecked-bg-color;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: $switch-unchecked-bg-color-hover;
+  }
+
+  &__handle {
+    position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -43,25 +43,25 @@
     border-radius: $border-radius-round;
     transition: $switch-handle-transition;
     box-shadow: $shadow-1;
-
-    .t-icon {
-      font-size: calc($switch-height-default - 4px);
-      color: transparent;
-    }
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: $border-radius-round;
-      background-color: $switch-handle-bg-color;
-      transition: $switch-handle-transition;
-    }
-  }
-
+
+    .t-icon {
+      font-size: calc($switch-height-default - 4px);
+      color: transparent;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: $border-radius-round;
+      background-color: $switch-handle-bg-color;
+      transition: $switch-handle-transition;
+    }
+  }
+
   &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
     .#{$prefix}-switch__handle::before {
       left: 0;
@@ -74,34 +74,34 @@
         left: -6px;
       }
     }
-
-    .#{$prefix}-switch__content {
-      opacity: 0;
-    }
-  }
-
-  &__content {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    color: $switch-content-color-unchecked;
-    padding: 0 $switch-content-margin-right-default 0 $switch-content-margin-left-default;
-    font-size: $switch-content-font-size-default;
-    min-width: $switch-min-width-default;
-    transition: $switch-content-transition;
-
-    .t-icon {
-      font-size: $font-size-l;
-    }
-  }
-
-  &.#{$prefix}-is-checked {
-    background-color: $switch-checked-bg-color;
-
-    &:hover {
-      background-color: $switch-checked-bg-color-hover;
-    }
-
+
+    .#{$prefix}-switch__content {
+      opacity: 0;
+    }
+  }
+
+  &__content {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    color: $switch-content-color-unchecked;
+    padding: 0 $switch-content-margin-right-default 0 $switch-content-margin-left-default;
+    font-size: $switch-content-font-size-default;
+    min-width: $switch-min-width-default;
+    transition: $switch-content-transition;
+
+    .t-icon {
+      font-size: $font-size-l;
+    }
+  }
+
+  &.#{$prefix}-is-checked {
+    background-color: $switch-checked-bg-color;
+
+    &:hover {
+      background-color: $switch-checked-bg-color-hover;
+    }
+
     .#{$prefix}-switch__handle {
       left: calc(100% - $switch-width-border-check-default);
       transform: translate(-100%, 0);
@@ -109,57 +109,57 @@
       height: calc($switch-height-default - 2 * $switch-width-border-check-default);
       top: $switch-width-border-check-default;
     }
-
-    .#{$prefix}-switch__content {
-      padding: 0 $switch-content-margin-left-default 0 $switch-content-margin-right-default;
-      color: $switch-content-color-checked;
-    }
-  }
-
-  &.#{$prefix}-is-loading {
-    cursor: not-allowed;
-    background-color: $switch-unchecked-bg-color-loading;
-
-    .#{$prefix}-loading {
-      display: inline-flex;
-    }
-
-    .#{$prefix}-switch__handle {
-      .t-icon {
-        color: $switch-unchecked-bg-color-loading;
-      }
-    }
-
-    &.#{$prefix}-is-checked {
-      background-color: $switch-checked-bg-color-loading;
-
-      .#{$prefix}-switch__handle {
-        .t-icon {
-          color: $switch-checked-bg-color-loading;
-        }
-      }
-    }
-  }
-
-  &.#{$prefix}-is-disabled {
-    cursor: not-allowed;
-    background-color: $switch-unchecked-bg-color-disabled;
-
-    .#{$prefix}-switch__handle {
-      box-shadow: none;
-    }
-
-    &.#{$prefix}-is-checked {
-      background-color: $switch-checked-bg-color-disabled;
-
-      .#{$prefix}-switch__handle {
-        box-shadow: none;
-
-        .t-icon {
-          color: $switch-checked-bg-color-disabled;
-        }
-      }
-    }
+
+    .#{$prefix}-switch__content {
+      padding: 0 $switch-content-margin-left-default 0 $switch-content-margin-right-default;
+      color: $switch-content-color-checked;
+    }
+  }
+
+  &.#{$prefix}-is-loading {
+    cursor: not-allowed;
+    background-color: $switch-unchecked-bg-color-loading;
+
+    .#{$prefix}-loading {
+      display: inline-flex;
+    }
+
+    .#{$prefix}-switch__handle {
+      .t-icon {
+        color: $switch-unchecked-bg-color-loading;
+      }
+    }
+
+    &.#{$prefix}-is-checked {
+      background-color: $switch-checked-bg-color-loading;
+
+      .#{$prefix}-switch__handle {
+        .t-icon {
+          color: $switch-checked-bg-color-loading;
+        }
+      }
+    }
+  }
+
+  &.#{$prefix}-is-disabled {
+    cursor: not-allowed;
+    background-color: $switch-unchecked-bg-color-disabled;
+
+    .#{$prefix}-switch__handle {
+      box-shadow: none;
+    }
+
+    &.#{$prefix}-is-checked {
+      background-color: $switch-checked-bg-color-disabled;
+
+      .#{$prefix}-switch__handle {
+        box-shadow: none;
+
+        .t-icon {
+          color: $switch-checked-bg-color-disabled;
+        }
+      }
+    }
   }
 }
 
@@ -197,7 +197,7 @@
   height: $switch-height-l;
   line-height: $switch-height-l;
   border-radius: $border-radius-round;
-
+
   &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
     .#{$prefix}-switch__handle::before {
       left: 0;
@@ -217,22 +217,22 @@
     left: $switch-width-border-l;
     width: calc($switch-height-l - 2 * $switch-width-border-l);
     height: calc($switch-height-l - 2 * $switch-width-border-l);
-
-    .t-icon {
-      font-size: calc($switch-height-l - 4px);
-    }
-  }
-
-  .#{$prefix}-switch__content {
-    padding: 0 $switch-content-margin-right-l 0 $switch-content-margin-left-l;
-    min-width: $switch-min-width-l;
-    font-size: $switch-content-font-size-l;
-
-    .t-icon {
-      font-size: $switch-content-font-size-l;
-    }
-  }
-
+
+    .t-icon {
+      font-size: calc($switch-height-l - 4px);
+    }
+  }
+
+  .#{$prefix}-switch__content {
+    padding: 0 $switch-content-margin-right-l 0 $switch-content-margin-left-l;
+    min-width: $switch-min-width-l;
+    font-size: $switch-content-font-size-l;
+
+    .t-icon {
+      font-size: $switch-content-font-size-l;
+    }
+  }
+
   &.#{$prefix}-is-checked {
     .#{$prefix}-switch__handle {
       left: calc(100% - $switch-width-border-check-l);
@@ -241,10 +241,10 @@
       width: calc($switch-height-l - 2 * $switch-width-border-check-l);
       height: calc($switch-height-l - 2 * $switch-width-border-check-l);
     }
-
-    .#{$prefix}-switch__content {
-      padding: 0 $switch-content-margin-left-l 0 $switch-content-margin-right-l;
-    }
+
+    .#{$prefix}-switch__content {
+      padding: 0 $switch-content-margin-left-l 0 $switch-content-margin-right-l;
+    }
   }
 }
 
@@ -282,7 +282,7 @@
   height: $switch-height-s;
   line-height: $switch-height-s;
   border-radius: $border-radius-round;
-
+
   &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
     .#{$prefix}-switch__handle::before {
       left: 0;
@@ -302,22 +302,22 @@
     left: $switch-width-border-s;
     width: calc($switch-height-s - 2 * $switch-width-border-s);
     height: calc($switch-height-s - 2 * $switch-width-border-s);
-
-    .t-icon {
-      font-size: calc($switch-height-s - 4px);
-    }
-  }
-
-  .#{$prefix}-switch__content {
-    padding: 0 $switch-content-margin-right-s 0 $switch-content-margin-left-s;
-    min-width: $switch-min-width-s;
-    font-size: $switch-content-font-size-s;
-
-    .t-icon {
-      font-size: $switch-content-font-size-l;
-    }
-  }
-
+
+    .t-icon {
+      font-size: calc($switch-height-s - 4px);
+    }
+  }
+
+  .#{$prefix}-switch__content {
+    padding: 0 $switch-content-margin-right-s 0 $switch-content-margin-left-s;
+    min-width: $switch-min-width-s;
+    font-size: $switch-content-font-size-s;
+
+    .t-icon {
+      font-size: $switch-content-font-size-l;
+    }
+  }
+
   &.#{$prefix}-is-checked {
     .#{$prefix}-switch__handle {
       left: calc(100% - $switch-width-border-check-s);
@@ -326,10 +326,10 @@
       width: calc($switch-height-s - 2 * $switch-width-border-check-s);
       height: calc($switch-height-s - 2 * $switch-width-border-check-s);
     }
-
-    .#{$prefix}-switch__content {
-      padding: 0 $switch-content-margin-left-s 0 $switch-content-margin-right-s;
-    }
+
+    .#{$prefix}-switch__content {
+      padding: 0 $switch-content-margin-left-s 0 $switch-content-margin-right-s;
+    }
   }
 }
 

package/styles/components/switch/_vars.scss

@@ -1,63 +1,63 @@
-@use "../../_vars.scss" as *;
-
-// 颜色
-$switch-checked-bg-color: $brand-color;
-$switch-checked-bg-color-hover: $brand-color-hover;
-$switch-checked-bg-color-loading: $brand-color-focus;
-$switch-checked-bg-color-disabled: $brand-color-disabled;
-
-$switch-unchecked-bg-color: $bg-color-secondarycomponent;
-$switch-unchecked-bg-color-hover: $bg-color-secondarycomponent-hover;
-$switch-unchecked-bg-color-loading: $bg-color-component-disabled;
-$switch-unchecked-bg-color-disabled: $bg-color-component-disabled;
-
-$switch-handle-bg-color: #fff;
-$switch-content-color-checked: $text-color-anti;
-$switch-content-color-unchecked: $text-color-anti;
-
-// 尺寸
-$switch-height-l: $comp-size-xs;
-$switch-height-default: $comp-size-xxs;
-$switch-height-s: $comp-size-xxxs;
-
-$switch-min-width-l: calc($switch-height-l / 0.618);
-$switch-min-width-default: calc($switch-height-default / 0.618);
-$switch-min-width-s: calc($switch-height-s / 0.618);
-
-//change uncheck handle size
-$switch-width-border-base: 5px;
-$switch-width-border-value: 1px; //公差
-
-$switch-width-border-l: $switch-width-border-base;
-$switch-width-border-default: ($switch-width-border-base - $switch-width-border-value * 1);
-$switch-width-border-s: ($switch-width-border-base - $switch-width-border-value * 2);
-
-//change check handle size
-$switch-width-border-check-base: 3px;
-$switch-width-border-check-value: 0.5px; //公差
-
-$switch-width-border-check-l: $switch-width-border-check-base;
-$switch-width-border-check-default: ($switch-width-border-check-base - $switch-width-border-check-value * 1);
-$switch-width-border-check-s: ($switch-width-border-check-base - $switch-width-border-check-value * 2);
-
-// 字体
-$switch-content-font-size-l: $font-size-l;
-$switch-content-font-size-default: $font-size-s;
-$switch-content-font-size-s: 9px;
-
-// 间距
-$switch-content-margin-left-l: calc($switch-min-width-l / 2 + 4px);
-$switch-content-margin-right-l: $comp-margin-s;
-
-$switch-content-margin-left-default: calc($switch-min-width-default / 2 + 2px);
-$switch-content-margin-right-default: $comp-margin-xs;
-
-$switch-content-margin-left-s: calc($switch-min-width-s / 2 + 2px);
-$switch-content-margin-right-s: $comp-margin-xxs;
-
-// 动画
-$switch-transition: all $anim-duration-base $anim-time-fn-easing;
-$switch-handle-transition: all $anim-duration-base $anim-time-fn-easing;
-$switch-content-transition:
-  padding $anim-duration-base $anim-time-fn-easing,
-  opacity $anim-duration-base linear;
+@use "../../_vars.scss" as *;
+
+// 颜色
+$switch-checked-bg-color: $brand-color;
+$switch-checked-bg-color-hover: $brand-color-hover;
+$switch-checked-bg-color-loading: $brand-color-focus;
+$switch-checked-bg-color-disabled: $brand-color-disabled;
+
+$switch-unchecked-bg-color: $bg-color-secondarycomponent;
+$switch-unchecked-bg-color-hover: $bg-color-secondarycomponent-hover;
+$switch-unchecked-bg-color-loading: $bg-color-component-disabled;
+$switch-unchecked-bg-color-disabled: $bg-color-component-disabled;
+
+$switch-handle-bg-color: #fff;
+$switch-content-color-checked: $text-color-anti;
+$switch-content-color-unchecked: $text-color-anti;
+
+// 尺寸
+$switch-height-l: $comp-size-xs;
+$switch-height-default: $comp-size-xxs;
+$switch-height-s: $comp-size-xxxs;
+
+$switch-min-width-l: calc($switch-height-l / 0.618);
+$switch-min-width-default: calc($switch-height-default / 0.618);
+$switch-min-width-s: calc($switch-height-s / 0.618);
+
+//change uncheck handle size
+$switch-width-border-base: 5px;
+$switch-width-border-value: 1px; //公差
+
+$switch-width-border-l: $switch-width-border-base;
+$switch-width-border-default: ($switch-width-border-base - $switch-width-border-value * 1);
+$switch-width-border-s: ($switch-width-border-base - $switch-width-border-value * 2);
+
+//change check handle size
+$switch-width-border-check-base: 3px;
+$switch-width-border-check-value: 0.5px; //公差
+
+$switch-width-border-check-l: $switch-width-border-check-base;
+$switch-width-border-check-default: ($switch-width-border-check-base - $switch-width-border-check-value * 1);
+$switch-width-border-check-s: ($switch-width-border-check-base - $switch-width-border-check-value * 2);
+
+// 字体
+$switch-content-font-size-l: $font-size-l;
+$switch-content-font-size-default: $font-size-s;
+$switch-content-font-size-s: 9px;
+
+// 间距
+$switch-content-margin-left-l: calc($switch-min-width-l / 2 + 4px);
+$switch-content-margin-right-l: $comp-margin-s;
+
+$switch-content-margin-left-default: calc($switch-min-width-default / 2 + 2px);
+$switch-content-margin-right-default: $comp-margin-xs;
+
+$switch-content-margin-left-s: calc($switch-min-width-s / 2 + 2px);
+$switch-content-margin-right-s: $comp-margin-xxs;
+
+// 动画
+$switch-transition: all $anim-duration-base $anim-time-fn-easing;
+$switch-handle-transition: all $anim-duration-base $anim-time-fn-easing;
+$switch-content-transition:
+  padding $anim-duration-base $anim-time-fn-easing,
+  opacity $anim-duration-base linear;