@tendaui/components 1.2.3 → 1.3.0

package/styles/components/slider/_vars.scss

@@ -1,50 +1,51 @@
-$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,37 +1,38 @@
-@import '../../_vars.scss';
-
-@import './_vars.scss';
-
-@import './_mixins.scss';
-
-@import '../../mixins/_reset.scss';
-
-.#{$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;
@@ -42,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;
@@ -73,97 +74,120 @@
         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);
-      width: calc(
-        $switch-height-default - 2 * $switch-width-border-check-default
-      );
-      height: calc(
-        $switch-height-default - 2 * $switch-width-border-check-default
-      );
+      width: calc($switch-height-default - 2 * $switch-width-border-check-default);
+      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}-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}-is-loading {
-    cursor: not-allowed;
-    background-color: $switch-unchecked-bg-color-loading;
-
-    .#{$prefix}-loading {
-      display: inline-flex;
-    }
+[dir="rtl"] .#{$prefix}-switch {
+  &__handle {
+    left: auto;
+    right: $switch-width-border-default;
+  }
 
-    .#{$prefix}-switch__handle {
-      .t-icon {
-        color: $switch-unchecked-bg-color-loading;
-      }
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: -6px;
+      right: 0;
     }
 
     &.#{$prefix}-is-checked {
-      background-color: $switch-checked-bg-color-loading;
-
-      .#{$prefix}-switch__handle {
-        .t-icon {
-          color: $switch-checked-bg-color-loading;
-        }
+      .#{$prefix}-switch__handle::before {
+        right: -6px;
+        left: 0;
       }
     }
   }
 
-  &.#{$prefix}-is-disabled {
-    cursor: not-allowed;
-    background-color: $switch-unchecked-bg-color-disabled;
-
+  &.#{$prefix}-is-checked {
     .#{$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;
-        }
-      }
+      right: auto;
+      left: $switch-width-border-check-default;
+      transform: none;
     }
   }
 }
@@ -173,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;
@@ -193,32 +217,62 @@
     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);
+
+    .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);
+      transform: translate(-100%, 0);
+      top: $switch-width-border-check-l;
+      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-right-l 0 $switch-content-margin-left-l;
-    min-width: $switch-min-width-l;
-    font-size: $switch-content-font-size-l;
+[dir="rtl"] .#{$prefix}-switch.#{$prefix}-size-l {
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: -8px;
+      right: 0;
+    }
 
-    .t-icon {
-      font-size: $switch-content-font-size-l;
+    &.#{$prefix}-is-checked {
+      .#{$prefix}-switch__handle::before {
+        right: -8px;
+        left: 0;
+      }
     }
   }
 
+  .#{$prefix}-switch__handle {
+    left: auto;
+    right: $switch-width-border-l;
+  }
+
   &.#{$prefix}-is-checked {
     .#{$prefix}-switch__handle {
-      left: calc(100% - $switch-width-border-check-l);
-      top: $switch-width-border-check-l;
-      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;
+      right: auto;
+      left: $switch-width-border-check-l;
+      transform: none;
     }
   }
 }
@@ -228,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;
@@ -248,32 +302,62 @@
     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);
+
+    .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);
+      transform: translate(-100%, 0);
+      top: $switch-width-border-check-s;
+      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-right-s 0 $switch-content-margin-left-s;
-    min-width: $switch-min-width-s;
-    font-size: $switch-content-font-size-s;
+[dir="rtl"] .#{$prefix}-switch.#{$prefix}-size-s {
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: -4px;
+      right: 0;
+    }
 
-    .t-icon {
-      font-size: $switch-content-font-size-l;
+    &.#{$prefix}-is-checked {
+      .#{$prefix}-switch__handle::before {
+        right: -4px;
+        left: 0;
+      }
     }
   }
 
+  .#{$prefix}-switch__handle {
+    left: auto;
+    right: $switch-width-border-s;
+  }
+
   &.#{$prefix}-is-checked {
     .#{$prefix}-switch__handle {
-      left: calc(100% - $switch-width-border-check-s);
-      top: $switch-width-border-check-s;
-      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;
+      right: auto;
+      left: $switch-width-border-check-s;
+      transform: none;
     }
   }
 }