@douyinfe/semi-foundation 2.17.1 → 2.18.0-beta.0

package/tabs/animation.scss

@@ -0,0 +1,23 @@
+$transition_duration-tabs_tab_line-border: var(--semi-transition_duration-faster);//线条式标签页标示线-边框-动画持续时间
+$transition_function-tabs_tab_line-border: var(--semi-transition_function-easeIn);//线条式标签页标示线-边框-过渡曲线
+$transition_delay-tabs_tab_line-border: var(--semi-transition_delay-fastest);//线条式标签页标示线-边框-延迟时间
+
+$transition_duration-tabs_tab_line-text: var(--semi-transition_duration-faster);//线条式标签页-文字-动画持续时间
+$transition_function-tabs_tab_line-text: var(--semi-transition_function-easeIn);//线条式标签页-文字-过渡曲线
+$transition_delay-tabs_tab_line-text: var(--semi-transition_delay-fastest);//线条式标签页-文字-延迟时间
+
+
+$transition_duration-tabs_tab_button-bg: var(--semi-transition_duration-faster);//按钮式标签页-背景色-动画持续时间
+$transition_function-tabs_tab_button-bg: var(--semi-transition_function-easeIn);//按钮式标签页-背景色-过渡曲线
+$transition_delay-tabs_tab_button-bg: var(--semi-transition_delay-fastest);//按钮式标签页-背景色-延迟时间
+
+
+$transition_duration-tabs_tab_card-bg: var(--semi-transition_duration-faster);//卡片式标签页文字-背景色-动画持续时间
+$transition_function-tabs_tab_card-bg: var(--semi-transition_function-easeIn);//卡片式标签页文字-背景色-过渡曲线
+$transition_delay-tabs_tab_card-bg: var(--semi-transition_delay-fastest);//卡片式标签页文字-背景色-延迟时间
+
+//transform token
+
+$transform_scale-tabs_tab_line-item: var(--semi-transform_scale-none);//线条式标签页item 放大
+$transform_scale-tabs_tab_button-item: var(--semi-transform_scale-none);//按钮式标签页item 放大
+$transform_scale-tabs_tab_card-item: var(--semi-transform_scale-none);//线条式标签页item 放大

package/tabs/tabs.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-tabs;
 
@@ -44,6 +45,8 @@ $module: #{$prefix}-tabs;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
                 color: $color-tabs_tab-icon-default;
+                transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+           
             }
             
             .#{$prefix}-icon-close {
@@ -156,10 +159,13 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
+            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+            transform:scale($transform_scale-tabs_tab_line-item);
             
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
-                
+                transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的border-color 的 transition
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
@@ -207,7 +213,9 @@ $module: #{$prefix}-tabs;
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab_left-padding;
                 border-left: $width-tabs_bar_line_tab-border solid transparent;
-                
+                transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
+          
                 &:hover {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
@@ -338,6 +346,10 @@ $module: #{$prefix}-tabs;
         
         .#{$module}-tab {
             padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
+            transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg, //卡片式tabs的bg的transition
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//卡片式tabs的 color的transition
+          
+            transform:scale($transform_scale-tabs_tab_card-item);
             
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
@@ -380,6 +392,10 @@ $module: #{$prefix}-tabs;
             border-radius: $radius-tabs_tab_button;
             color: $color-tabs_tab_button-text-default;
             border: none;
+            transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
+          
+            transform:scale($transform_scale-tabs_tab_button-item);
             
             &:hover {
                 border: none;

package/tagInput/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-tagInput-bg: var(--semi-transition_duration-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_duration-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

package/tagInput/tagInput.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-tagInput;
 
@@ -10,7 +11,9 @@ $module: #{$prefix}-tagInput;
     font-weight: $font-weight-regular;
     width: 100%;
     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;
+
     &-drag {
 
         &-item {

package/timePicker/utils/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-timePicker-bg: var(--semi-transition_duration-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_duration-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

package/transfer/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration_transfer_item-bg: var(--semi-transition_duration-faster);//穿梭框条目-背景色-动画持续时间
+$transition_function_transfer_item-bg: var(--semi-transition_function-easeIn);//穿梭框条目-背景色-过渡曲线
+$transition_delay_transfer_item-bg: var(--semi-transition_delay-fastest);//穿梭框条目-背景色-延迟时间
+

package/transfer/transfer.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-transfer;
 
@@ -75,6 +76,9 @@ $module: #{$prefix}-transfer;
         flex-wrap: nowrap;
         color: $color-transfer_item-text;
         cursor: pointer;
+        transition: background-color $transition_duration_transfer_item-bg $transition_function-transfer_item-bg $transition_delay-transfer_item-bg;
+
+
 
         &:hover {
             background-color: $color-transfer_item-bg-hover;

package/tree/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-tree_option-bg: var(--semi-transition_duration-faster);//树选项-背景色-动画持续时间
+$transition_function-tree_option-bg: var(--semi-transition_function-easeIn);//树选项-背景色-过渡曲线
+$transition_delay-tree_option-bg: var(--semi-transition_delay-fastest);//树选项-背景色-延迟时间
+
+//transform token
+
+$transform_scale-tree-option: var(--semi-transform_scale-none);//树选项-放大

package/tree/tree.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-tree;
 
@@ -53,6 +54,8 @@ $module: #{$prefix}-tree;
         display: flex;
         align-items: center;
         cursor: pointer;
+        transition: background-color $transition_duration-tree_option-bg $transition_function-tree_option-bg $transition_delay-tree_option-bg;
+        transform:scale($transform_scale-tree-option);
 
         @include font-size-regular;
         word-break: break-word;

package/lib/cjs/select/option.css

@@ -1,77 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-select-option {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  word-break: break-all;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: var(--semi-color-text-0);
-  border-radius: 0;
-  position: relative;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-.semi-select-option-icon {
-  width: 12px;
-  color: transparent;
-  visibility: hidden;
-  margin-right: 8px;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-}
-.semi-select-option-text {
-  display: flex;
-  flex-wrap: wrap;
-  white-space: pre;
-}
-.semi-select-option-keyword {
-  color: var(--semi-color-primary);
-  background-color: inherit;
-  font-weight: 600;
-}
-.semi-select-option:active {
-  background-color: var(--semi-color-fill-1);
-}
-.semi-select-option-empty {
-  cursor: not-allowed;
-  color: var(--semi-color-disabled-text);
-  justify-content: center;
-}
-.semi-select-option-empty:hover {
-  background-color: inherit;
-}
-.semi-select-option-empty:active {
-  background-color: inherit;
-}
-.semi-select-option-disabled {
-  color: var(--semi-color-disabled-text);
-  cursor: not-allowed;
-}
-.semi-select-option-disabled:hover {
-  background-color: var(--semi-color-fill-0);
-}
-.semi-select-option-selected {
-  font-weight: 600;
-}
-.semi-select-option-selected .semi-select-option-icon {
-  visibility: visible;
-  color: var(--semi-color-text-2);
-}
-.semi-select-option-focused {
-  background-color: var(--semi-color-fill-0);
-}
-.semi-select-option:first-of-type {
-  margin-top: 4px;
-}
-.semi-select-option:last-of-type {
-  margin-bottom: 4px;
-}

package/lib/es/select/option.css

@@ -1,77 +0,0 @@
-/* shadow */
-/* sizing */
-/* spacing */
-.semi-select-option {
-  font-size: 14px;
-  line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  word-break: break-all;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: var(--semi-color-text-0);
-  border-radius: 0;
-  position: relative;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-.semi-select-option-icon {
-  width: 12px;
-  color: transparent;
-  visibility: hidden;
-  margin-right: 8px;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-}
-.semi-select-option-text {
-  display: flex;
-  flex-wrap: wrap;
-  white-space: pre;
-}
-.semi-select-option-keyword {
-  color: var(--semi-color-primary);
-  background-color: inherit;
-  font-weight: 600;
-}
-.semi-select-option:active {
-  background-color: var(--semi-color-fill-1);
-}
-.semi-select-option-empty {
-  cursor: not-allowed;
-  color: var(--semi-color-disabled-text);
-  justify-content: center;
-}
-.semi-select-option-empty:hover {
-  background-color: inherit;
-}
-.semi-select-option-empty:active {
-  background-color: inherit;
-}
-.semi-select-option-disabled {
-  color: var(--semi-color-disabled-text);
-  cursor: not-allowed;
-}
-.semi-select-option-disabled:hover {
-  background-color: var(--semi-color-fill-0);
-}
-.semi-select-option-selected {
-  font-weight: 600;
-}
-.semi-select-option-selected .semi-select-option-icon {
-  visibility: visible;
-  color: var(--semi-color-text-2);
-}
-.semi-select-option-focused {
-  background-color: var(--semi-color-fill-0);
-}
-.semi-select-option:first-of-type {
-  margin-top: 4px;
-}
-.semi-select-option:last-of-type {
-  margin-bottom: 4px;
-}