浏览代码

feat: add switch token

代强 2 年之前
父节点
当前提交
7a6acbf4a4

+ 1 - 1
packages/semi-foundation/switch/rtl.scss

@@ -20,7 +20,7 @@ $module: #{$prefix}-switch;
         &-knob {
         &-knob {
             right: 0;
             right: 0;
             left: auto;
             left: auto;
-            transform: translateX(-$motion-switch_unchecked-translateX);
+            transform: translateX(-1 * $spacing-switch_unchecked-translateX);
         }
         }
 
 
         &-native-control {
         &-native-control {

+ 2 - 2
packages/semi-foundation/switch/switch.scss

@@ -94,14 +94,14 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_knob-bg-default;
         background-color: $color-switch_knob-bg-default;
         box-sizing: border-box;
         box-sizing: border-box;
         position: absolute;
         position: absolute;
-        left: 0;
+        left: $spacing-switch_knob-left;
         right: auto;
         right: auto;
         transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
         transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
 
 
         width: $width-switch_knob_default;
         width: $width-switch_knob_default;
         height: $width-switch_knob_default;
         height: $width-switch_knob_default;
         top: $spacing-switch_knob-padding;
         top: $spacing-switch_knob-padding;
-        transform: translateX($motion-switch_unchecked-translateX);
+        transform: translateX($spacing-switch_unchecked-translateX);
     }
     }
 
 
     &-native-control {
     &-native-control {

+ 3 - 2
packages/semi-foundation/switch/variables.scss

@@ -1,5 +1,5 @@
 // Other
 // Other
-$motion-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量 - 动画用
+$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量 - 动画用
 $motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
 $motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
 $motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
 $motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
 $motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
 $motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
@@ -62,9 +62,10 @@ $width-switch-outline: 2px; // 开关轮廓宽度
 
 
 
 
 // Spacing
 // Spacing
-$spacing-switch_knob-padding: 2px; // 开关按钮边距
+$spacing-switch_knob-padding: 2px; // 开关按钮顶部边距
 $spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
 $spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
 $spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
 $spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
+$spacing-switch_knob-left: 0px; // 开关左侧偏移距离
 
 
 // Radius
 // Radius
 $radius-switch: $height-switch * 0.5; // 开关圆角
 $radius-switch: $height-switch * 0.5; // 开关圆角