Browse Source

fix: switch add more token

代强 3 years ago
parent
commit
ff158e95ce

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

@@ -7,12 +7,12 @@ $module: #{$prefix}-switch;
 
         &-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked-translateX);
+                transform: translateX(-$spacing-switch_checked-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($width-switch_knob_expand - $motion-switch_checked-translateX);
+                    transform: translateX($width-switch_knob_expand - $spacing-switch_checked-translateX);
                 }
             }
         }
@@ -34,51 +34,51 @@ $module: #{$prefix}-switch;
 
     .#{$module}-loading {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked-translateX);
         }
     
         &.#{$module}-checked {
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked-translateX);
+                transform: translateX(-$spacing-switch_spin_checked-translateX);
             }
         }
     }
     
     .#{$module}-loading.#{$module}-small {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked_small-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked_small-translateX);
         }
         &.#{$module}-checked{
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked_small-translateX);
+                transform: translateX(-$spacing-switch_spin_checked_small-translateX);
             }
         }
     }
     
     .#{$module}-loading.#{$module}-large {
         .#{$module}-loading-spin {
-            transform: translateX(-$motion-switch_spin_unchecked_large-translateX);
+            transform: translateX(-$spacing-switch_spin_unchecked_large-translateX);
         }
     
         &.#{$module}-checked {
             .#{$module}-loading-spin {
-                transform: translateX(-$motion-switch_spin_checked_large-translateX);
+                transform: translateX(-$spacing-switch_spin_checked_large-translateX);
             }
         }
     }
 
     .#{$module}-large {
         .#{$module}-knob {
-            transform: translateX(-$motion-switch_unchecked_large-translateX);
+            transform: translateX(-$spacing-switch_unchecked_large-translateX);
         }
         &.#{$module}-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked_large-translateX);
+                transform: translateX(-$spacing-switch_checked_large-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($motion-switch_expand_large-translateX - $motion-switch_checked_large-translateX);
+                    transform: translateX($spacing-switch_expand_large-translateX - $spacing-switch_checked_large-translateX);
                 }
             }
         }
@@ -86,16 +86,16 @@ $module: #{$prefix}-switch;
 
     .#{$module}-small {
         .#{$module}-knob {
-            transform: translateX(-$motion-switch_unchecked_small-translateX);
+            transform: translateX(-$spacing-switch_unchecked_small-translateX);
         }
         &.#{$module}-checked {
             .#{$module}-knob {
-                transform: translateX(-$motion-switch_checked_small-translateX);
+                transform: translateX(-$spacing-switch_checked_small-translateX);
             }
 
             &:active {
                 .#{$module}-knob {
-                    transform: translateX($motion-switch_expand_small-translateX - $motion-switch_checked_small-translateX);
+                    transform: translateX($spacing-switch_expand_small-translateX - $spacing-switch_checked_small-translateX);
                 }
             }
         }

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

@@ -44,12 +44,12 @@ $module: #{$prefix}-switch;
         }
 
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked-translateX);
+            transform: translateX($spacing-switch_checked-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked-translateX - $width-switch_knob_expand);
+                transform: translateX($spacing-switch_checked-translateX - $width-switch_knob_expand);
             }
         }
     }
@@ -157,7 +157,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked-translateX);
+        transform: translateX($spacing-switch_spin_unchecked-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-default;
@@ -169,7 +169,7 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_spin_checked-bg-default;
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked-translateX);
+            transform: translateX($spacing-switch_spin_checked-translateX);
         }
     }
 }
@@ -177,7 +177,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading.#{$module}-small {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked_small-translateX);
+        transform: translateX($spacing-switch_spin_unchecked_small-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-small;
@@ -187,7 +187,7 @@ $module: #{$prefix}-switch;
     &.#{$module}-checked{
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked_small-translateX);
+            transform: translateX($spacing-switch_spin_checked_small-translateX);
         }
     }
 }
@@ -195,7 +195,7 @@ $module: #{$prefix}-switch;
 .#{$module}-loading.#{$module}-large {
 
     .#{$module}-loading-spin {
-        transform: translateX($motion-switch_spin_unchecked_large-translateX);
+        transform: translateX($spacing-switch_spin_unchecked_large-translateX);
 
         &>.#{$prefix}-spin-wrapper>svg{
             width: $width-switch_spin-large;
@@ -206,7 +206,7 @@ $module: #{$prefix}-switch;
     &.#{$module}-checked {
 
         .#{$module}-loading-spin {
-            transform: translateX($motion-switch_spin_checked_large-translateX);
+            transform: translateX($spacing-switch_spin_checked_large-translateX);
         }
     }
 }
@@ -224,16 +224,16 @@ $module: #{$prefix}-switch;
         height: $width-switch_knob_large;
         top: $spacing-switch_knob_large-padding;
         border-radius: $width-switch_knob_large * 0.5;
-        transform: translateX($motion-switch_unchecked_large-translateX);
+        transform: translateX($spacing-switch_unchecked_large-translateX);
     }
     &.#{$module}-checked {
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked_large-translateX);
+            transform: translateX($spacing-switch_checked_large-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked_large-translateX - $motion-switch_expand_large-translateX);
+                transform: translateX($spacing-switch_checked_large-translateX - $spacing-switch_expand_large-translateX);
             }
         }
     }
@@ -259,16 +259,16 @@ $module: #{$prefix}-switch;
         height: $width-switch_knob_large_small;
         top: $spacing-switch_knob_small-padding;
         border-radius: $width-switch_knob_large_small * 0.5;
-        transform: translateX($motion-switch_unchecked_small-translateX);
+        transform: translateX($spacing-switch_unchecked_small-translateX);
     }
     &.#{$module}-checked {
         .#{$module}-knob {
-            transform: translateX($motion-switch_checked_small-translateX);
+            transform: translateX($spacing-switch_checked_small-translateX);
         }
 
         &:active {
             .#{$module}-knob {
-                transform: translateX($motion-switch_checked_small-translateX - $motion-switch_expand_small-translateX);
+                transform: translateX($spacing-switch_checked_small-translateX - $spacing-switch_expand_small-translateX);
             }
         }
     }

+ 15 - 15
packages/semi-foundation/switch/variables.scss

@@ -1,18 +1,18 @@
 // Other
 $spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
-$motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
-$motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
-$motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
-$motion-switch_expand_large-translateX: 10px;
-$motion-switch_unchecked_large-translateX: 3px;
-$motion-switch_spin_unchecked_large-translateX: 2px;
-$motion-switch_checked_large-translateX: 26px; // 大尺寸选中开关右侧偏移量
-$motion-switch_spin_checked_large-translateX: 22px; // 大尺寸选中开关加载图标右侧偏移量
-$motion-switch_expand_small-translateX: 2px;
-$motion-switch_unchecked_small-translateX: 1px;
-$motion-switch_spin_unchecked_small-translateX: 2px;
-$motion-switch_checked_small-translateX: 11px; // 小尺寸选中开关右侧偏移量
-$motion-switch_spin_checked_small-translateX: 10px; // 小尺寸选中开关加载图标右侧偏移量
+$spacing-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量
+$spacing-switch_checked-translateX: 18px; // 选中开关右侧偏移量
+$spacing-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
+$spacing-switch_expand_large-translateX: 10px;
+$spacing-switch_unchecked_large-translateX: 3px; // 大尺寸未选中开关右侧偏移量
+$spacing-switch_spin_unchecked_large-translateX: 2px;  // 大尺寸未选中开关加载图标右侧偏移量
+$spacing-switch_checked_large-translateX: 26px; // 大尺寸选中开关右侧偏移量
+$spacing-switch_spin_checked_large-translateX: 22px; // 大尺寸选中开关加载图标右侧偏移量
+$spacing-switch_expand_small-translateX: 2px;
+$spacing-switch_unchecked_small-translateX: 1px; // 小尺寸未选中开关右侧偏移量
+$spacing-switch_spin_unchecked_small-translateX: 2px; // 小尺寸未选中开关加载图标右侧偏移量
+$spacing-switch_checked_small-translateX: 11px; // 小尺寸选中开关右侧偏移量
+$spacing-switch_spin_checked_small-translateX: 10px; // 小尺寸选中开关加载图标右侧偏移量
 $motion-switch-transitionDuration: 200ms; // 开关动画时长
 
 // Color
@@ -48,11 +48,11 @@ $width-switch_knob_active: $width-switch_knob_default + $width-switch_knob_expan
 $height-switch_large: 32px; // 大尺寸开关高度
 $width-switch_large: 54px; // 大尺寸开关宽度
 $width-switch_knob_large: 24px; // 大尺寸开关按钮宽度
-$width-switch_knob_large_active: $width-switch_knob_large + $motion-switch_expand_large-translateX; // 大尺寸开关按钮按下态宽度
+$width-switch_knob_large_active: $width-switch_knob_large + $spacing-switch_expand_large-translateX; // 大尺寸开关按钮按下态宽度
 $height-switch_small: 16px; // 小尺寸开关高度
 $width-switch_small: 26px; // 小尺寸开关宽度
 $width-switch_knob_large_small: 12px; // 小尺寸开关按钮宽度
-$width-switch_knob_small_active: $width-switch_knob_large_small + $motion-switch_expand_small-translateX; // 小尺寸开关按钮按下态宽度
+$width-switch_knob_small_active: $width-switch_knob_large_small + $spacing-switch_expand_small-translateX; // 小尺寸开关按钮按下态宽度
 $width-switch_knob_disabled-border: 1px; // 小尺寸开关按钮宽度
 $width-switch_checked_unchecked_text: 26px; // 开关按钮文字宽度
 $width-switch_spin-small: 10px; // 小尺寸开关加载 spin 宽度