@douyinfe/semi-foundation 2.24.3 → 2.25.0

package/tabs/tabs.scss

@@ -542,16 +542,20 @@ $module: #{$prefix}-tabs;
 
     &-pane-animate-leftShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-leftShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
     &-pane-animate-rightShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-rightShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 
     &-pane-animate-topShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-topShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
     &-pane-animate-bottomShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-bottomShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 }
 

package/tag/tag.scss

@@ -10,7 +10,6 @@ $types: "ghost", "solid", "light";
 
 .#{$module} {
     box-sizing: border-box;
-    display: inline-block;
     border-radius: $radius-tag;
     background-color: transparent;
     position: relative;
@@ -19,6 +18,8 @@ $types: "ghost", "solid", "light";
     overflow: hidden;
     white-space: nowrap;
     vertical-align: bottom;
+    @include all-center;
+    display: inline-flex;
 
     &-default,
     &-small {
@@ -51,9 +52,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-content {
-        display: flex;
-        @include all-center;
-        height: 100%;
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
     &-close {
@@ -61,6 +63,14 @@ $types: "ghost", "solid", "light";
         color: $color-tag_close-icon-default;
         padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
+
+        :hover {
+            color: $color-tag_close-icon-hover
+        }
+
+        :active {
+            color: $color-tag_close-icon-active
+        }
     }
 
     &-closable {

package/tag/variables.scss

@@ -29,6 +29,8 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon-hover: var(--semi-color-text-1); // 可删除的标签删除按钮颜色 - 悬浮
+$color-tag_close-icon-active: var(--semi-color-text-0); // 可删除的标签删除按钮颜色 - 按下
 $color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距

package/tagInput/tagInput.scss

@@ -11,10 +11,19 @@ $module: #{$prefix}-tagInput;
     display: inline-flex;
     font-weight: $font-weight-regular;
     width: 100%;
+    min-height: $height-tagInput-default;
     box-sizing: border-box;
     transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
         border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;
 
+    &-small {
+        min-height: $height-tagInput-small;
+    }
+
+    &-large {
+        min-height: $height-tagInput-large;
+    }
+
     &-drag {
 
         &-item {
@@ -106,18 +115,6 @@ $module: #{$prefix}-tagInput;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
 
-        &-small {
-            min-height: $height-tagInput-small;
-        }
-
-        &-default {
-            min-height: $height-tagInput-default;
-        }
-
-        &-large {
-            min-height: $height-tagInput-large;
-        }
-
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;

package/toast/toast.scss

@@ -90,10 +90,12 @@ $icon: #{$prefix}-toast-icon;
 
     &-animation-show{
         animation: $animation_duration-toast-show #{$module}-keyframe-toast-show $animation_function-toast-show $animation_delay-toast-show ;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: $animation_duration-toast-hide #{$module}-keyframe-toast-hide $animation_function-toast-hide $animation_delay-toast-hide ;
+        animation-fill-mode: forwards;
     }
 
     @keyframes #{$module}-keyframe-toast-show{

package/tooltip/tooltip.scss

@@ -91,10 +91,12 @@ $module-icon: #{$module}-icon-arrow;
 
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-tooltip_in $animation_function-tooltip_in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-tooltip_out $animation_function-tooltip_out;
+        animation-fill-mode: forwards;
     }
 
 }