@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/switch/rtl.scss

@@ -1,103 +0,0 @@
-$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

@@ -1,288 +0,0 @@
-/* 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

@@ -1,282 +0,0 @@
-@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';