@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/switch/rtl.scss

@@ -0,0 +1,103 @@
+$module: #{$prefix}-switch;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-checked {
+            .#{$module}-knob {
+                transform: translateX(-$motion-switch_checked-translateX);
+            }
+
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($width-switch_knob_expand - $motion-switch_checked-translateX);
+                }
+            }
+        }
+
+        &-knob {
+            right: 0;
+            left: auto;
+            transform: translateX(-$motion-switch_unchecked-translateX);
+        }
+
+        &-native-control {
+            right: 0;
+        }
+
+        &-unchecked-text {
+            left: 0;
+        }
+    }
+
+    .#{$module}-loading {
+        .#{$module}-loading-spin {
+            transform: translateX(-$motion-switch_spin_unchecked-translateX);
+        }
+    
+        &.#{$module}-checked {
+            .#{$module}-loading-spin {
+                transform: translateX(-$motion-switch_spin_checked-translateX);
+            }
+        }
+    }
+    
+    .#{$module}-loading.#{$module}-small {
+        .#{$module}-loading-spin {
+            transform: translateX(-$motion-switch_spin_unchecked_small-translateX);
+        }
+        &.#{$module}-checked{
+            .#{$module}-loading-spin {
+                transform: translateX(-$motion-switch_spin_checked_small-translateX);
+            }
+        }
+    }
+    
+    .#{$module}-loading.#{$module}-large {
+        .#{$module}-loading-spin {
+            transform: translateX(-$motion-switch_spin_unchecked_large-translateX);
+        }
+    
+        &.#{$module}-checked {
+            .#{$module}-loading-spin {
+                transform: translateX(-$motion-switch_spin_checked_large-translateX);
+            }
+        }
+    }
+
+    .#{$module}-large {
+        .#{$module}-knob {
+            transform: translateX(-$motion-switch_unchecked_large-translateX);
+        }
+        &.#{$module}-checked {
+            .#{$module}-knob {
+                transform: translateX(-$motion-switch_checked_large-translateX);
+            }
+
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($motion-switch_expand_large-translateX - $motion-switch_checked_large-translateX);
+                }
+            }
+        }
+    }
+
+    .#{$module}-small {
+        .#{$module}-knob {
+            transform: translateX(-$motion-switch_unchecked_small-translateX);
+        }
+        &.#{$module}-checked {
+            .#{$module}-knob {
+                transform: translateX(-$motion-switch_checked_small-translateX);
+            }
+
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($motion-switch_expand_small-translateX - $motion-switch_checked_small-translateX);
+                }
+            }
+        }
+    }
+}

package/lib/cjs/switch/switch.css

@@ -0,0 +1,288 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-switch {
+  box-sizing: border-box;
+  display: inline-block;
+  border-radius: 12px;
+  border: 1px transparent solid;
+  position: relative;
+  cursor: pointer;
+  background-color: var(--semi-color-fill-0);
+  transition: background-color 200ms ease-in-out;
+  width: 40px;
+  height: 24px;
+}
+.semi-switch:hover {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-switch:active {
+  border: 1px var(--semi-color-fill-2) solid;
+}
+.semi-switch:active .semi-switch-knob {
+  width: 24px;
+}
+.semi-switch-checked {
+  background-color: var(--semi-color-success);
+}
+.semi-switch-checked:hover {
+  background-color: var(--semi-color-success-hover);
+}
+.semi-switch-checked .semi-switch-knob {
+  transform: translateX(18px);
+}
+.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(12px);
+}
+.semi-switch-active {
+  background-color: var(--semi-color-success-active);
+}
+.semi-switch-disabled {
+  cursor: not-allowed;
+  background-color: transparent;
+  border: 1px var(--semi-color-border) solid;
+}
+.semi-switch-disabled:hover {
+  background-color: transparent;
+}
+.semi-switch-disabled:active {
+  background-color: transparent;
+}
+.semi-switch-disabled .semi-switch-knob {
+  cursor: not-allowed;
+  box-shadow: none;
+  border: 1px var(--semi-color-border) solid;
+}
+.semi-switch-disabled.semi-switch-checked {
+  border-color: transparent;
+  background-color: var(--semi-color-success-disabled);
+}
+.semi-switch-disabled.semi-switch-checked .semi-switch-knob {
+  box-shadow: none;
+  border: none;
+}
+.semi-switch-knob {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  border-radius: 9px;
+  background-color: white;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: auto;
+  transition: transform 200ms ease-in-out, width 200ms ease-in-out;
+  width: 18px;
+  height: 18px;
+  top: 2px;
+  transform: translateX(2px);
+}
+.semi-switch-native-control {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: inherit;
+  pointer-events: auto;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.semi-switch-native-control[type=checkbox] {
+  width: 100%;
+  height: 100%;
+}
+.semi-switch-checked-text, .semi-switch-unchecked-text {
+  position: absolute;
+  font-size: 12px;
+  height: 100%;
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.semi-switch-checked-text {
+  color: var(--semi-color-white);
+}
+.semi-switch-unchecked-text {
+  color: var(--semi-color-text-2);
+  right: 0;
+}
+.semi-switch-loading {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--semi-color-fill-1);
+}
+.semi-switch-loading-spin .semi-spin-wrapper {
+  display: inline-flex;
+  align-items: center;
+  color: var(--semi-color-white);
+}
+
+.semi-switch-loading .semi-switch-loading-spin {
+  transform: translateX(2px);
+}
+.semi-switch-loading .semi-switch-loading-spin > .semi-spin-wrapper > svg {
+  width: 18px;
+  height: 18px;
+}
+.semi-switch-loading.semi-switch-checked {
+  background-color: var(--semi-color-success-hover);
+}
+.semi-switch-loading.semi-switch-checked .semi-switch-loading-spin {
+  transform: translateX(16px);
+}
+
+.semi-switch-loading.semi-switch-small .semi-switch-loading-spin {
+  transform: translateX(2px);
+}
+.semi-switch-loading.semi-switch-small .semi-switch-loading-spin > .semi-spin-wrapper > svg {
+  width: 10px;
+  height: 10px;
+}
+.semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin {
+  transform: translateX(10px);
+}
+
+.semi-switch-loading.semi-switch-large .semi-switch-loading-spin {
+  transform: translateX(2px);
+}
+.semi-switch-loading.semi-switch-large .semi-switch-loading-spin > .semi-spin-wrapper > svg {
+  width: 28px;
+  height: 28px;
+}
+.semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin {
+  transform: translateX(22px);
+}
+
+.semi-switch-disabled.semi-switch-checked {
+  background-color: var(--semi-color-success-disabled);
+}
+
+.semi-switch-large {
+  width: 54px;
+  height: 32px;
+  border-radius: 16px;
+}
+.semi-switch-large .semi-switch-knob {
+  width: 24px;
+  height: 24px;
+  top: 3px;
+  border-radius: 12px;
+  transform: translateX(3px);
+}
+.semi-switch-large.semi-switch-checked .semi-switch-knob {
+  transform: translateX(26px);
+}
+.semi-switch-large.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(16px);
+}
+.semi-switch-large:active .semi-switch-knob {
+  width: 34px;
+}
+.semi-switch-large .semi-switch-checked-text,
+.semi-switch-large .semi-switch-unchecked-text {
+  width: 26px;
+  font-size: 14px;
+}
+
+.semi-switch-small {
+  width: 26px;
+  height: 16px;
+  border-radius: 8px;
+}
+.semi-switch-small .semi-switch-knob {
+  width: 12px;
+  height: 12px;
+  top: 1px;
+  border-radius: 6px;
+  transform: translateX(1px);
+}
+.semi-switch-small.semi-switch-checked .semi-switch-knob {
+  transform: translateX(11px);
+}
+.semi-switch-small.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(9px);
+}
+.semi-switch-small:active .semi-switch-knob {
+  width: 14px;
+}
+
+.semi-form .semi-switch-native-control {
+  width: 100%;
+  height: 100%;
+}
+
+.semi-rtl .semi-switch,
+.semi-portal-rtl .semi-switch {
+  direction: rtl;
+}
+.semi-rtl .semi-switch-checked .semi-switch-knob,
+.semi-portal-rtl .semi-switch-checked .semi-switch-knob {
+  transform: translateX(-18px);
+}
+.semi-rtl .semi-switch-checked:active .semi-switch-knob,
+.semi-portal-rtl .semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(-12px);
+}
+.semi-rtl .semi-switch-knob,
+.semi-portal-rtl .semi-switch-knob {
+  right: 0;
+  left: auto;
+  transform: translateX(-2px);
+}
+.semi-rtl .semi-switch-native-control,
+.semi-portal-rtl .semi-switch-native-control {
+  right: 0;
+}
+.semi-rtl .semi-switch-unchecked-text,
+.semi-portal-rtl .semi-switch-unchecked-text {
+  left: 0;
+}
+.semi-rtl .semi-switch-loading .semi-switch-loading-spin,
+.semi-portal-rtl .semi-switch-loading .semi-switch-loading-spin {
+  transform: translateX(-2px);
+}
+.semi-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin,
+.semi-portal-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin {
+  transform: translateX(-16px);
+}
+.semi-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin,
+.semi-portal-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin {
+  transform: translateX(-2px);
+}
+.semi-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin,
+.semi-portal-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin {
+  transform: translateX(-10px);
+}
+.semi-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin,
+.semi-portal-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin {
+  transform: translateX(-2px);
+}
+.semi-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin,
+.semi-portal-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin {
+  transform: translateX(-22px);
+}
+.semi-rtl .semi-switch-large .semi-switch-knob,
+.semi-portal-rtl .semi-switch-large .semi-switch-knob {
+  transform: translateX(-3px);
+}
+.semi-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob,
+.semi-portal-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob {
+  transform: translateX(-26px);
+}
+.semi-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob,
+.semi-portal-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(-16px);
+}
+.semi-rtl .semi-switch-small .semi-switch-knob,
+.semi-portal-rtl .semi-switch-small .semi-switch-knob {
+  transform: translateX(-1px);
+}
+.semi-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob,
+.semi-portal-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob {
+  transform: translateX(-11px);
+}
+.semi-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob,
+.semi-portal-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(-9px);
+}

package/lib/cjs/switch/switch.scss

@@ -0,0 +1,282 @@
+@import './variables.scss';
+
+$module: #{$prefix}-switch;
+
+.#{$module} {
+    box-sizing: border-box;
+    display: inline-block;
+    border-radius: $radius-switch;
+    border: $border-thickness-control $color-switch_default-border-default solid;
+    position: relative;
+    cursor: pointer;
+    background-color: $color-switch_default-bg-default;
+    // box-shadow: inset 0 0 0 0 $color-switch_default-bg-success;
+    transition: background-color $motion-switch-transitionDuration ease-in-out;
+    width: $width-switch;
+    height: $height-switch;
+
+    &:hover {
+        background-color: $color-switch_default-bg-hover;
+    }
+
+    &:active {
+        border: $border-thickness-control $color-switch_default-bg-active solid;
+
+        .#{$module}-knob {
+            // width: $knob-size + $knob-active-expand;
+            width: $width-switch_knob_active;
+        }
+    }
+
+    &-checked {
+        background-color: $color-switch_checked-bg-default;
+
+        &:hover {
+            background-color: $color-switch_checked-bg-hover;
+        }
+
+        .#{$module}-knob {
+            transform: translateX($motion-switch_checked-translateX);
+        }
+
+        &:active {
+            .#{$module}-knob {
+                transform: translateX($motion-switch_checked-translateX - $width-switch_knob_expand);
+            }
+        }
+    }
+
+    &-active {
+        background-color: $color-switch_checked-bg-active;
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+        background-color: $color-switch_disabled-bg-default;
+        border: $border-thickness-control $color-switch_disabled-border-default solid;
+
+        &:hover {
+            background-color: $color-switch_disabled-bg-hover;
+        }
+
+        &:active {
+            background-color: $color-switch_disabled-bg-active;
+        }
+        
+        .#{$module}-knob {
+            cursor: not-allowed;
+            @include shadow-0;
+            border: $width-switch_knob_disabled-border $color-switch_knob-border-default solid;
+        }
+
+        &.#{$module}-checked {
+            border-color: $color-switch_checked_disabled-border-default;
+            background-color: $color-switch_checked_disabled-bg-default;
+            .#{$module}-knob {
+                @include shadow-0;
+                border: none;
+            }
+        }
+    }
+
+    &-knob {
+        @include shadow-knob;
+        cursor: pointer;
+        border-radius: $width-switch_knob_default / 2;
+        background-color: $color-switch_knob-bg-default;
+        box-sizing: border-box;
+        position: absolute;
+        left: 0;
+        right: auto;
+        transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
+
+        width: $width-switch_knob_default;
+        height: $width-switch_knob_default;
+        top: $spacing-switch_knob-padding;
+        transform: translateX($motion-switch_unchecked-translateX);
+    }
+
+    &-native-control {
+
+        &[type="checkbox"] {
+            width: 100%;
+            height: 100%;
+        }
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: inherit;
+        pointer-events: auto;
+        margin: 0; // 消除ua样式影响
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    &-checked-text,
+    &-unchecked-text {
+        position: absolute;
+        font-size: $font-size-small;
+        height: 100%;
+        width: 20px;
+        @include all-center;
+    }
+
+    &-checked-text {
+        color: $color-switch_checked-text-default;
+    }
+
+    &-unchecked-text {
+        color: $color-switch_unchecked-text-default;
+        right: 0;
+    }
+
+    &-loading {
+        display: inline-flex;
+        align-items: center;
+        background-color: $color-switch_spin_unchecked-bg-default;
+
+        &-spin {
+            .#{$prefix}-spin-wrapper{
+                display: inline-flex;
+                align-items: center;
+                color: $color-switch_loading_spin-default;
+            }
+        }
+    }
+}
+
+.#{$module}-loading {
+
+    .#{$module}-loading-spin {
+        transform: translateX($motion-switch_spin_unchecked-translateX);
+
+        &>.#{$prefix}-spin-wrapper>svg{
+            width: $width-switch_spin-default;
+            height: $width-switch_spin-default;
+        }
+    }
+
+    &.#{$module}-checked {
+        background-color: $color-switch_spin_checked-bg-default;
+
+        .#{$module}-loading-spin {
+            transform: translateX($motion-switch_spin_checked-translateX);
+        }
+    }
+}
+
+.#{$module}-loading.#{$module}-small {
+
+    .#{$module}-loading-spin {
+        transform: translateX($motion-switch_spin_unchecked_small-translateX);
+
+        &>.#{$prefix}-spin-wrapper>svg{
+            width: $width-switch_spin-small;
+            height: $width-switch_spin-small;
+        }
+    }
+    &.#{$module}-checked{
+
+        .#{$module}-loading-spin {
+            transform: translateX($motion-switch_spin_checked_small-translateX);
+        }
+    }
+}
+
+.#{$module}-loading.#{$module}-large {
+
+    .#{$module}-loading-spin {
+        transform: translateX($motion-switch_spin_unchecked_large-translateX);
+
+        &>.#{$prefix}-spin-wrapper>svg{
+            width: $width-switch_spin-large;
+            height: $width-switch_spin-large;
+        }
+    }
+
+    &.#{$module}-checked {
+
+        .#{$module}-loading-spin {
+            transform: translateX($motion-switch_spin_checked_large-translateX);
+        }
+    }
+}
+
+.#{$module}-disabled.#{$module}-checked {
+    background-color: $color-switch_checked_disabled-bg-default;
+}
+
+.#{$module}-large {
+    width: $width-switch_large;
+    height: $height-switch_large;
+    border-radius: $radius-switch_large;
+    .#{$module}-knob {
+        width: $width-switch_knob_large;
+        height: $width-switch_knob_large;
+        top: $spacing-switch_knob_large-padding;
+        border-radius: $width-switch_knob_large / 2;
+        transform: translateX($motion-switch_unchecked_large-translateX);
+    }
+    &.#{$module}-checked {
+        .#{$module}-knob {
+            transform: translateX($motion-switch_checked_large-translateX);
+        }
+
+        &:active {
+            .#{$module}-knob {
+                transform: translateX($motion-switch_checked_large-translateX - $motion-switch_expand_large-translateX);
+            }
+        }
+    }
+
+    &:active {
+        .#{$module}-knob {
+            width: $width-switch_knob_large_active;
+        }
+    }
+    .#{$module}-checked-text,
+    .#{$module}-unchecked-text {
+        width: $width-switch_checked_unchecked_text;
+        font-size: $font-size-regular;
+    }
+}
+
+.#{$module}-small {
+    width: $width-switch_small;
+    height: $height-switch_small;
+    border-radius: $radius-switch_small;
+    .#{$module}-knob {
+        width: $width-switch_knob_large_small;
+        height: $width-switch_knob_large_small;
+        top: $spacing-switch_knob_small-padding;
+        border-radius: $width-switch_knob_large_small / 2;
+        transform: translateX($motion-switch_unchecked_small-translateX);
+    }
+    &.#{$module}-checked {
+        .#{$module}-knob {
+            transform: translateX($motion-switch_checked_small-translateX);
+        }
+
+        &:active {
+            .#{$module}-knob {
+                transform: translateX($motion-switch_checked_small-translateX - $motion-switch_expand_small-translateX);
+            }
+        }
+    }
+
+    &:active {
+        .#{$module}-knob {
+            width: $width-switch_knob_small_active;
+        }
+    }
+}
+
+.#{$prefix}-form {
+    .#{$prefix}-switch-native-control {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@import './rtl.scss';