@douyinfe/semi-foundation 2.39.0-beta.0 → 2.40.0-alpha.0

package/lib/cjs/select/select.css

@@ -445,9 +445,44 @@
 .semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
   opacity: 0;
 }
+.semi-select-borderless:not(:focus-within):not(:hover).semi-select-borderless-arrow .semi-select-arrow {
+  opacity: 1;
+}
+.semi-select-borderless:hover {
+  background-color: var(--semi-color-fill-1);
+  border: 1px solid transparent;
+}
+.semi-select-borderless:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-select-borderless:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-select-borderless:focus-within:not(:active) {
   background-color: transparent;
 }
+.semi-select-borderless.semi-select-disabled {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-select-borderless.semi-select-disabled:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-selection,
+.semi-select-borderless.semi-select-disabled .semi-select-selection-placeholder {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-prefix,
+.semi-select-borderless.semi-select-disabled .semi-select-suffix {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-arrow {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-tag {
+  color: var(--semi-color-disabled-text);
+}
 .semi-select-borderless.semi-select-error:not(:focus-within) {
   border-color: var(--semi-color-danger);
 }

package/lib/cjs/select/select.scss

@@ -40,7 +40,7 @@ $overflowList: #{$prefix}-overflow-list;
         outline: 0;
     }
 
-    &:active{
+    &:active {
         background-color: $color-select-bg-active;
     }
 
@@ -52,6 +52,7 @@ $overflowList: #{$prefix}-overflow-list;
     &-large {
         min-height: $height-select_large;
         line-height: $height-select_large;
+
         .#{$module}-selection {
             @include font-size-header-6;
         }
@@ -196,6 +197,7 @@ $overflowList: #{$prefix}-overflow-list;
 
         .#{$prefix}-tag-group {
             height: inherit;
+
             .#{$prefix}-tag {
                 @include select-tag-margin;
             }
@@ -326,6 +328,7 @@ $overflowList: #{$prefix}-overflow-list;
         width: $width-select_clear-icon;
         color: $color-select_clearBtn-text-default;
         flex-shrink: 0;
+
         &:hover {
             color: $color-select_clearBtn-text-hover;
         }
@@ -435,6 +438,7 @@ $overflowList: #{$prefix}-overflow-list;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
+
     &-chosen {
         .#{$module}-option-icon {
             display: flex;
@@ -475,36 +479,84 @@ $overflowList: #{$prefix}-overflow-list;
 
 .#{$module}-borderless {
 
-    &:not(:focus-within):not(:hover){
-        background-color:transparent;
-        border-color: transparent;
+    &:not(:focus-within):not(:hover) {
+        background-color: $color-select_borderless-bg-default;
+        border-color: $color-select_borderless-border-default;
+
         .#{$module}-arrow {
             opacity: 0;
         }
+
+        &.#{$module}-borderless-arrow {
+            .#{$module}-arrow {
+                opacity: 1;
+            }
+        }
     }
 
-    &:focus-within:not(:active){
-        background-color:transparent;
+    &:hover {
+        background-color: $color-select_borderless-bg-hover;
+        border: $width-select-border-hover solid $color-select_borderless-border-hover;
+    }
+
+    &:focus {
+        border: $width-select-border-focus solid $color-select_borderless-border-focus;
+        background-color: $color-select_borderless-bg-focus;
+        outline: 0;
+    }
+
+    &:active {
+        background-color: $color-select_borderless-bg-active;
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+    &.#{$module}-disabled {
+        background-color: $color-select_borderless_input_disabled-bg;
+
+        &:hover {
+            background-color: $color-select_borderless_input_disabled-bg;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-arrow {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$prefix}-tag {
+            color: $color-select_borderless_input_disabled-text;
+        }
     }
 
     // split style into not and normal to avoid style override
-    &.#{$module}-error:not(:focus-within){
+    &.#{$module}-error:not(:focus-within) {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:not(:focus-within){
+    &.#{$module}-warning:not(:focus-within) {
         border-color: $color-select_warning-border-focus;
     }
 
-    &.#{$module}-error:focus-within{
+    &.#{$module}-error:focus-within {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:focus-within{
+    &.#{$module}-warning:focus-within {
         border-color: $color-select_warning-border-focus;
     }
 
 }
 
 
-    @import './rtl.scss';
+@import './rtl.scss';

package/lib/cjs/select/variables.scss

@@ -47,6 +47,16 @@ $color-select_option-border-default: var(--semi-color-border); // 分组选择
 $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
+$color-select_borderless-bg-default: transparent; // borderless 选择器输入框背景色 - 默认态
+$color-select_borderless-bg-hover: var(--semi-color-fill-1); // borderless 选择器输入框背景色 - 悬停态
+$color-select_borderless-bg-active: var(--semi-color-fill-2); // borderless 选择器输入框背景色 - 按下态
+$color-select_borderless-bg-focus: var(--semi-color-fill-0); // borderless 选择器输入框背景色 - 聚焦态
+$color-select_borderless-border-default: transparent; // borderless 选择器输入框边框颜色 - 默认态
+$color-select_borderless-border-hover: $color-select-border-default; // borderless 选择器输入框边框颜色  - 悬停态
+$color-select_borderless-border-active: var(--semi-color-focus-border); // borderless 选择器输入框边框颜色  - 按下态
+$color-select_borderless-border-focus: $color-select-border-active; // borderless 选择器输入框边框颜色  - 聚焦态
+$color-select_borderless_input_disabled-text: var(--semi-color-disabled-text); // borderless 选择器输入框文本颜色  - 禁用态
+$color-select_borderless_input_disabled-bg: var(--semi-color-disabled-fill); // borderless 禁用选择器输入框背景色 - 禁用态
 
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小

package/lib/cjs/switch/switch.css

@@ -51,6 +51,9 @@
 .semi-switch-disabled:active {
   background-color: transparent;
 }
+.semi-switch-disabled:active .semi-switch-knob {
+  width: 18px;
+}
 .semi-switch-disabled .semi-switch-knob {
   cursor: not-allowed;
   box-shadow: none;
@@ -64,6 +67,9 @@
   border-color: transparent;
   background-color: var(--semi-color-success-disabled);
 }
+.semi-switch-disabled.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(18px);
+}
 .semi-switch-disabled.semi-switch-checked .semi-switch-knob {
   box-shadow: none;
   border: none;

package/lib/cjs/switch/switch.scss

@@ -25,9 +25,7 @@ $module: #{$prefix}-switch;
 
     &:active {
         border: $border-thickness-control $color-switch_default-bg-active solid;
-
         .#{$module}-knob {
-            // width: $knob-size + $knob-active-expand;
             width: $width-switch_knob_active;
         }
     }
@@ -69,6 +67,9 @@ $module: #{$prefix}-switch;
 
         &:active {
             background-color: $color-switch_disabled-bg-active;
+            .#{$module}-knob {
+                width: $width-switch_knob_default;
+            }
         }
 
         .#{$module}-knob {
@@ -85,6 +86,11 @@ $module: #{$prefix}-switch;
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;
             background-color: $color-switch_checked_disabled-bg-default;
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($spacing-switch_checked-translateX);
+                }
+            }
             .#{$module}-knob {
                 @include shadow-0;
                 border: none;

package/lib/es/select/select.css

@@ -445,9 +445,44 @@
 .semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
   opacity: 0;
 }
+.semi-select-borderless:not(:focus-within):not(:hover).semi-select-borderless-arrow .semi-select-arrow {
+  opacity: 1;
+}
+.semi-select-borderless:hover {
+  background-color: var(--semi-color-fill-1);
+  border: 1px solid transparent;
+}
+.semi-select-borderless:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-select-borderless:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-select-borderless:focus-within:not(:active) {
   background-color: transparent;
 }
+.semi-select-borderless.semi-select-disabled {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-select-borderless.semi-select-disabled:hover {
+  background-color: var(--semi-color-disabled-fill);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-selection,
+.semi-select-borderless.semi-select-disabled .semi-select-selection-placeholder {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-prefix,
+.semi-select-borderless.semi-select-disabled .semi-select-suffix {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-select-arrow {
+  color: var(--semi-color-disabled-text);
+}
+.semi-select-borderless.semi-select-disabled .semi-tag {
+  color: var(--semi-color-disabled-text);
+}
 .semi-select-borderless.semi-select-error:not(:focus-within) {
   border-color: var(--semi-color-danger);
 }

package/lib/es/select/select.scss

@@ -40,7 +40,7 @@ $overflowList: #{$prefix}-overflow-list;
         outline: 0;
     }
 
-    &:active{
+    &:active {
         background-color: $color-select-bg-active;
     }
 
@@ -52,6 +52,7 @@ $overflowList: #{$prefix}-overflow-list;
     &-large {
         min-height: $height-select_large;
         line-height: $height-select_large;
+
         .#{$module}-selection {
             @include font-size-header-6;
         }
@@ -196,6 +197,7 @@ $overflowList: #{$prefix}-overflow-list;
 
         .#{$prefix}-tag-group {
             height: inherit;
+
             .#{$prefix}-tag {
                 @include select-tag-margin;
             }
@@ -326,6 +328,7 @@ $overflowList: #{$prefix}-overflow-list;
         width: $width-select_clear-icon;
         color: $color-select_clearBtn-text-default;
         flex-shrink: 0;
+
         &:hover {
             color: $color-select_clearBtn-text-hover;
         }
@@ -435,6 +438,7 @@ $overflowList: #{$prefix}-overflow-list;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
+
     &-chosen {
         .#{$module}-option-icon {
             display: flex;
@@ -475,36 +479,84 @@ $overflowList: #{$prefix}-overflow-list;
 
 .#{$module}-borderless {
 
-    &:not(:focus-within):not(:hover){
-        background-color:transparent;
-        border-color: transparent;
+    &:not(:focus-within):not(:hover) {
+        background-color: $color-select_borderless-bg-default;
+        border-color: $color-select_borderless-border-default;
+
         .#{$module}-arrow {
             opacity: 0;
         }
+
+        &.#{$module}-borderless-arrow {
+            .#{$module}-arrow {
+                opacity: 1;
+            }
+        }
     }
 
-    &:focus-within:not(:active){
-        background-color:transparent;
+    &:hover {
+        background-color: $color-select_borderless-bg-hover;
+        border: $width-select-border-hover solid $color-select_borderless-border-hover;
+    }
+
+    &:focus {
+        border: $width-select-border-focus solid $color-select_borderless-border-focus;
+        background-color: $color-select_borderless-bg-focus;
+        outline: 0;
+    }
+
+    &:active {
+        background-color: $color-select_borderless-bg-active;
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+    &.#{$module}-disabled {
+        background-color: $color-select_borderless_input_disabled-bg;
+
+        &:hover {
+            background-color: $color-select_borderless_input_disabled-bg;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-arrow {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$prefix}-tag {
+            color: $color-select_borderless_input_disabled-text;
+        }
     }
 
     // split style into not and normal to avoid style override
-    &.#{$module}-error:not(:focus-within){
+    &.#{$module}-error:not(:focus-within) {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:not(:focus-within){
+    &.#{$module}-warning:not(:focus-within) {
         border-color: $color-select_warning-border-focus;
     }
 
-    &.#{$module}-error:focus-within{
+    &.#{$module}-error:focus-within {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:focus-within{
+    &.#{$module}-warning:focus-within {
         border-color: $color-select_warning-border-focus;
     }
 
 }
 
 
-    @import './rtl.scss';
+@import './rtl.scss';

package/lib/es/select/variables.scss

@@ -47,6 +47,16 @@ $color-select_option-border-default: var(--semi-color-border); // 分组选择
 $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
+$color-select_borderless-bg-default: transparent; // borderless 选择器输入框背景色 - 默认态
+$color-select_borderless-bg-hover: var(--semi-color-fill-1); // borderless 选择器输入框背景色 - 悬停态
+$color-select_borderless-bg-active: var(--semi-color-fill-2); // borderless 选择器输入框背景色 - 按下态
+$color-select_borderless-bg-focus: var(--semi-color-fill-0); // borderless 选择器输入框背景色 - 聚焦态
+$color-select_borderless-border-default: transparent; // borderless 选择器输入框边框颜色 - 默认态
+$color-select_borderless-border-hover: $color-select-border-default; // borderless 选择器输入框边框颜色  - 悬停态
+$color-select_borderless-border-active: var(--semi-color-focus-border); // borderless 选择器输入框边框颜色  - 按下态
+$color-select_borderless-border-focus: $color-select-border-active; // borderless 选择器输入框边框颜色  - 聚焦态
+$color-select_borderless_input_disabled-text: var(--semi-color-disabled-text); // borderless 选择器输入框文本颜色  - 禁用态
+$color-select_borderless_input_disabled-bg: var(--semi-color-disabled-fill); // borderless 禁用选择器输入框背景色 - 禁用态
 
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小

package/lib/es/switch/switch.css

@@ -51,6 +51,9 @@
 .semi-switch-disabled:active {
   background-color: transparent;
 }
+.semi-switch-disabled:active .semi-switch-knob {
+  width: 18px;
+}
 .semi-switch-disabled .semi-switch-knob {
   cursor: not-allowed;
   box-shadow: none;
@@ -64,6 +67,9 @@
   border-color: transparent;
   background-color: var(--semi-color-success-disabled);
 }
+.semi-switch-disabled.semi-switch-checked:active .semi-switch-knob {
+  transform: translateX(18px);
+}
 .semi-switch-disabled.semi-switch-checked .semi-switch-knob {
   box-shadow: none;
   border: none;

package/lib/es/switch/switch.scss

@@ -25,9 +25,7 @@ $module: #{$prefix}-switch;
 
     &:active {
         border: $border-thickness-control $color-switch_default-bg-active solid;
-
         .#{$module}-knob {
-            // width: $knob-size + $knob-active-expand;
             width: $width-switch_knob_active;
         }
     }
@@ -69,6 +67,9 @@ $module: #{$prefix}-switch;
 
         &:active {
             background-color: $color-switch_disabled-bg-active;
+            .#{$module}-knob {
+                width: $width-switch_knob_default;
+            }
         }
 
         .#{$module}-knob {
@@ -85,6 +86,11 @@ $module: #{$prefix}-switch;
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;
             background-color: $color-switch_checked_disabled-bg-default;
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($spacing-switch_checked-translateX);
+                }
+            }
             .#{$module}-knob {
                 @include shadow-0;
                 border: none;

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.39.0-beta.0",
+    "version": "2.40.0-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.39.0-beta.0",
+        "@douyinfe/semi-animation": "2.40.0-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "18bd0485b9985b913d849000edab0ab2b5f3c232",
+    "gitHead": "3c30c680ff8335f275dce40e16c8994af178ca78",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/select.scss

@@ -40,7 +40,7 @@ $overflowList: #{$prefix}-overflow-list;
         outline: 0;
     }
 
-    &:active{
+    &:active {
         background-color: $color-select-bg-active;
     }
 
@@ -52,6 +52,7 @@ $overflowList: #{$prefix}-overflow-list;
     &-large {
         min-height: $height-select_large;
         line-height: $height-select_large;
+
         .#{$module}-selection {
             @include font-size-header-6;
         }
@@ -196,6 +197,7 @@ $overflowList: #{$prefix}-overflow-list;
 
         .#{$prefix}-tag-group {
             height: inherit;
+
             .#{$prefix}-tag {
                 @include select-tag-margin;
             }
@@ -326,6 +328,7 @@ $overflowList: #{$prefix}-overflow-list;
         width: $width-select_clear-icon;
         color: $color-select_clearBtn-text-default;
         flex-shrink: 0;
+
         &:hover {
             color: $color-select_clearBtn-text-hover;
         }
@@ -435,6 +438,7 @@ $overflowList: #{$prefix}-overflow-list;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
+
     &-chosen {
         .#{$module}-option-icon {
             display: flex;
@@ -475,36 +479,84 @@ $overflowList: #{$prefix}-overflow-list;
 
 .#{$module}-borderless {
 
-    &:not(:focus-within):not(:hover){
-        background-color:transparent;
-        border-color: transparent;
+    &:not(:focus-within):not(:hover) {
+        background-color: $color-select_borderless-bg-default;
+        border-color: $color-select_borderless-border-default;
+
         .#{$module}-arrow {
             opacity: 0;
         }
+
+        &.#{$module}-borderless-arrow {
+            .#{$module}-arrow {
+                opacity: 1;
+            }
+        }
     }
 
-    &:focus-within:not(:active){
-        background-color:transparent;
+    &:hover {
+        background-color: $color-select_borderless-bg-hover;
+        border: $width-select-border-hover solid $color-select_borderless-border-hover;
+    }
+
+    &:focus {
+        border: $width-select-border-focus solid $color-select_borderless-border-focus;
+        background-color: $color-select_borderless-bg-focus;
+        outline: 0;
+    }
+
+    &:active {
+        background-color: $color-select_borderless-bg-active;
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+    &.#{$module}-disabled {
+        background-color: $color-select_borderless_input_disabled-bg;
+
+        &:hover {
+            background-color: $color-select_borderless_input_disabled-bg;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-arrow {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$prefix}-tag {
+            color: $color-select_borderless_input_disabled-text;
+        }
     }
 
     // split style into not and normal to avoid style override
-    &.#{$module}-error:not(:focus-within){
+    &.#{$module}-error:not(:focus-within) {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:not(:focus-within){
+    &.#{$module}-warning:not(:focus-within) {
         border-color: $color-select_warning-border-focus;
     }
 
-    &.#{$module}-error:focus-within{
+    &.#{$module}-error:focus-within {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:focus-within{
+    &.#{$module}-warning:focus-within {
         border-color: $color-select_warning-border-focus;
     }
 
 }
 
 
-    @import './rtl.scss';
+@import './rtl.scss';

package/select/variables.scss

@@ -47,6 +47,16 @@ $color-select_option-border-default: var(--semi-color-border); // 分组选择
 $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
+$color-select_borderless-bg-default: transparent; // borderless 选择器输入框背景色 - 默认态
+$color-select_borderless-bg-hover: var(--semi-color-fill-1); // borderless 选择器输入框背景色 - 悬停态
+$color-select_borderless-bg-active: var(--semi-color-fill-2); // borderless 选择器输入框背景色 - 按下态
+$color-select_borderless-bg-focus: var(--semi-color-fill-0); // borderless 选择器输入框背景色 - 聚焦态
+$color-select_borderless-border-default: transparent; // borderless 选择器输入框边框颜色 - 默认态
+$color-select_borderless-border-hover: $color-select-border-default; // borderless 选择器输入框边框颜色  - 悬停态
+$color-select_borderless-border-active: var(--semi-color-focus-border); // borderless 选择器输入框边框颜色  - 按下态
+$color-select_borderless-border-focus: $color-select-border-active; // borderless 选择器输入框边框颜色  - 聚焦态
+$color-select_borderless_input_disabled-text: var(--semi-color-disabled-text); // borderless 选择器输入框文本颜色  - 禁用态
+$color-select_borderless_input_disabled-bg: var(--semi-color-disabled-fill); // borderless 禁用选择器输入框背景色 - 禁用态
 
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小

package/switch/switch.scss

@@ -25,9 +25,7 @@ $module: #{$prefix}-switch;
 
     &:active {
         border: $border-thickness-control $color-switch_default-bg-active solid;
-
         .#{$module}-knob {
-            // width: $knob-size + $knob-active-expand;
             width: $width-switch_knob_active;
         }
     }
@@ -69,6 +67,9 @@ $module: #{$prefix}-switch;
 
         &:active {
             background-color: $color-switch_disabled-bg-active;
+            .#{$module}-knob {
+                width: $width-switch_knob_default;
+            }
         }
 
         .#{$module}-knob {
@@ -85,6 +86,11 @@ $module: #{$prefix}-switch;
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;
             background-color: $color-switch_checked_disabled-bg-default;
+            &:active {
+                .#{$module}-knob {
+                    transform: translateX($spacing-switch_checked-translateX);
+                }
+            }
             .#{$module}-knob {
                 @include shadow-0;
                 border: none;