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

package/rating/rating.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-rating;
 
@@ -37,6 +38,7 @@ $module: #{$prefix}-rating;
         color: inherit;
         cursor: pointer;
         transition: all 0.5s;
+        transform:scale($transform-scale-rating);
 
         &:not(:last-child) {
             margin-right: $spacing-rating_item-marginRight;
@@ -75,6 +77,7 @@ $module: #{$prefix}-rating;
 
         &-first,
         &-second {
+            transition: color $transition_duration-rating-color $transition_function-rating-color $transition_delay-rating-color;
             color: $color-rating-bg-default;
             user-select: none;
         }

package/scrollList/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-scrollList_selected_item-bg: var(--semi-transition_duration-fastest); // 滚动列表选中选项-背景颜色-动画持续时间
+$transition_function-scrollList_selected_item-bg: var(--semi-transition_function-easeOut); // 滚动列表选中选项-背景颜色-过渡曲线
+$transition_delay-scrollList_selected_item-bg: 0ms; // 滚动列表选中选项-背景颜色-延迟时间

package/scrollList/scrollList.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 // @import '../theme/_font.scss';
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-scrolllist;
 
@@ -38,11 +39,9 @@ $module: #{$prefix}-scrolllist;
 
         .#{$module}-item-wheel .#{$module}-list-outer-nocycle,
         .#{$module}-item {
-
             & > ul {
-
                 &:before {
-                    content: "";
+                    content: '';
                     display: block;
                     width: 100%;
                     height: ($height-scrollList - $height-scrollList_item) / 2;
@@ -63,7 +62,6 @@ $module: #{$prefix}-scrolllist;
 
         .#{$module}-item,
         .#{$module}-item-wheel .#{$module}-list-outer {
-
             & > ul {
                 box-sizing: border-box;
                 width: 100%;
@@ -84,7 +82,7 @@ $module: #{$prefix}-scrolllist;
                     // padding: 8px 18px;
                     cursor: pointer;
                     background-color: $color-scrollList_item-bg;
-
+                    transition: background-color $transition_duration-scrollList_selected_item-bg $transition_function-scrollList_selected_item-bg $transition_delay-scrollList_selected_item-bg;
                     &.#{$module}-item-sel {
                         background: $color-scrollList_selected_item-bg;
                         color: $color-scrollList_selected_item-text;
@@ -147,14 +145,14 @@ $module: #{$prefix}-scrolllist;
                     top: 0;
                     margin-top: $spacing-scrollList_item_wheel_list_shade_pre-marginTop;
                     background: $color-scrollList-bg;
-                    opacity: .5;
+                    opacity: 0.5;
                 }
 
                 &-post {
                     top: 50%;
                     margin-top: $spacing-scrollList_item_wheel_list_shade_post-marginTop;
                     background: $color-scrollList-bg;
-                    opacity: .5;
+                    opacity: 0.5;
                 }
             }
 
@@ -180,4 +178,4 @@ $module: #{$prefix}-scrolllist;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/select/animation.scss

@@ -0,0 +1,15 @@
+$transition_duration-select-bg: var(--semi-transition_duration-faster);//选择器-背景色-动画持续时间
+$transition_function-select-bg: var(--semi-transition_function-easeIn);//选择器-背景色-过渡曲线
+$transition_delay-select-bg: var(--semi-transition_delay-fastest);//选择器-背景色-延迟时间
+
+$transition_duration-select-border: var(--semi-transition_duration-faster);//选择器-边框-动画持续时间
+$transition_function-select-border: var(--semi-transition_function-easeIn);//选择器-边框-过渡曲线
+$transition_delay-select-border: var(--semi-transition_delay-fastest);//选择器-边框-延迟时间
+
+$transition_duration-select_option-bg: var(--semi-transition_duration-faster);//选择器-选项-动画持续时间
+$transition_function-select_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
+$transition_delay-select_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间
+
+// transform token
+$transform_scale-select: var(--semi-transform_scale-none);//选择框-变大
+$transform_rotate-select-arrow: var(--semi-transform-rotate-none);//选择框-箭头-旋转

package/select/option.scss

@@ -20,6 +20,7 @@ $multiple: #{$module}-multiple;
     align-items: center;
     cursor: pointer;
     box-sizing: border-box;
+    transition: background-color $transition_duration-select_option-bg $transition_function-select_option-bg $transition_delay-select_option-bg;
 
     &-icon {
         width: $width-select_option_tick;

package/select/select.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
-@import './option.scss';
 @import './variables.scss';
+@import "./animation.scss";
+@import './option.scss';
 @import './mixin.scss';
 
 $module: #{$prefix}-select;
@@ -21,7 +22,9 @@ $multiple: #{$module}-multiple;
     position: relative;
     outline: none;
     cursor: pointer;
-
+    transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
+    border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
+    transform:scale($transform_scale-select);
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -259,6 +262,8 @@ $multiple: #{$module}-multiple;
         width: $width-select_arrow;
         color: $color-select-icon-default;
         flex-shrink: 0;
+        transform: rotate($transform_rotate-select-arrow);
+
 
         &-empty {
             // 不显示arrow时，右侧留出12px空白

package/select/variables.scss

@@ -91,14 +91,14 @@ $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
-$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
-$spacing-select_option_list-paddingRight: 0; // 选择器内容区右侧内边距
-$spacing-select_option_list-paddingBottom: 0; // 选择器内容区底部内边距
-$spacing-select_option_list-paddingLeft: 0; // 选择器内容区左侧内边距
+$spacing-select_option_list-paddingTop: 0px; // 选择器内容区顶部内边距
+$spacing-select_option_list-paddingRight: 0px; // 选择器内容区右侧内边距
+$spacing-select_option_list-paddingBottom: 0px; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingLeft: 0px; // 选择器内容区左侧内边距
 
 // Radius
 $radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
-$radius-select_option: 0; // 选择器待选项圆角
+$radius-select_option: 0px; // 选择器待选项圆角
 
 // Font
 $font-select-fontWeight: $font-weight-regular; // 选择器文本字重

package/sideSheet/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-sideSheet_mask-bg: var(--semi-transition_delay-fastest); // 侧边栏打开后-蒙层颜色-动画持续时间
+$transition_function-sideSheet_mask-bg: var(--semi-transition_function-easeOut); // 侧边栏打开后-蒙层颜色-过渡曲线
+$transition_delay-sideSheet_mask-bg: 0ms; // 侧边栏打开后-蒙层颜色-延迟时间
+
+$transition_duration-sideSheet_inner: var(--semi-transition_delay-fastest); // 侧边栏-动画持续时间
+$transition_function-sideSheet_inner: var(--semi-transition_function-easeOut); // 侧边栏-过渡曲线
+$transition_delay-sideSheet_inner: 0ms; // 侧边栏-延迟时间

package/sideSheet/sideSheet.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-sidesheet;
 
@@ -85,6 +86,8 @@ $module: #{$prefix}-sidesheet;
         background-color: $color-sideSheet-bg;
         // background-clip: padding-box;
         border: 0;
+        transition: $transition_duration-sideSheet_inner $transition_function-sideSheet_inner
+            $transition_delay-sideSheet_inner;
     }
 
     &-header {
@@ -115,8 +118,12 @@ $module: #{$prefix}-sidesheet;
         width: 100%;
         height: 100%;
         background-color: $color-sideSheet_mask-bg;
+        opacity: 1;
+        transition: opacity $transition_duration-sideSheet_mask-bg $transition_function-sideSheet_mask-bg
+            $transition_delay-sideSheet_mask-bg;
 
         &-hidden {
+            opacity: 0;
             display: none;
         }
     }
@@ -168,4 +175,4 @@ $module: #{$prefix}-sidesheet;
     display: none;
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/skeleton/skeleton.scss

@@ -1,8 +1,7 @@
-@import "./variables.scss";
+@import './variables.scss';
 $module: #{$prefix}-skeleton;
 
 .#{$module} {
-
     &-avatar,
     &-image,
     &-title,
@@ -101,7 +100,6 @@ $module: #{$prefix}-skeleton;
     }
 
     @keyframes skeleton-loading {
-
         0% {
             background-position: 100% 50%;
         }
@@ -112,4 +110,4 @@ $module: #{$prefix}-skeleton;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/slider/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-slider_handle-bg: var(--semi-transition_duration-faster);//滑动条圆形按钮-背景色-动画持续时间
+$transition_function-slider_handle-bg: var(--semi-transition_function-easeIn);//滑动条圆形按钮-背景色-过渡曲线
+$transition_delay-slider_handle-bg: var(--semi-transition_delay-fastest);//滑动条圆形按钮-背景色-延迟时间
+
+//transform token
+
+$transform_scale-slider_handle: var(--semi-transform_scale-small);//滑动条圆形按钮-放大

package/slider/slider.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
-@import './variables.scss';
+@import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-slider;
 
@@ -54,8 +55,8 @@ $module: #{$prefix}-slider;
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: #fff 0.3s;
-
+        transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
+        transform: scale($transform_scale-slider_handle);
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }

package/spin/spin.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "../keyframes/rotate.scss";
+@import './variables.scss';
+@import './mixin.scss';
+@import '../keyframes/rotate.scss';
 
 $module: #{$prefix}-spin;
 
@@ -18,7 +18,7 @@ $module: #{$prefix}-spin;
         top: $spacing-spin_wrapper-top;
         color: $color-spin-bg;
 
-        &>svg {
+        & > svg {
             animation: $motion-spin_wrapper_svg-animationDuration linear infinite #{$prefix}-animation-rotate;
             @include size($width-spin_middle);
         }
@@ -40,7 +40,7 @@ $module: #{$prefix}-spin;
         // 添加一个遮罩解决嵌套 Spin 穿透问题
 
         &::after {
-            content: "";
+            content: '';
             position: absolute;
             top: 0;
             left: 0;
@@ -60,13 +60,12 @@ $module: #{$prefix}-spin;
     }
 
     &-hidden {
-
         &::after {
             content: none;
         }
 
         // 考虑到嵌套，.spin-chidren 节点的 opacity 由直接父级节点的 .spin-hidden 决定
-        &>.#{$module}-children {
+        & > .#{$module}-children {
             opacity: 1;
             user-select: auto;
         }
@@ -76,7 +75,7 @@ $module: #{$prefix}-spin;
 .#{$module}-small {
     @include size($width-spin_small);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_small);
     }
 }
@@ -84,7 +83,7 @@ $module: #{$prefix}-spin;
 .#{$module}-middle {
     @include size($width-spin_middle);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_middle);
     }
 }
@@ -92,7 +91,7 @@ $module: #{$prefix}-spin;
 .#{$module}-large {
     @include size($width-spin_large);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_large);
     }
 }
@@ -101,4 +100,4 @@ $module: #{$prefix}-spin;
     overflow: hidden;
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/steps/animation.scss

@@ -0,0 +1,17 @@
+$transition_duration-steps_item_title-text: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_title-text: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_title-text: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+$transition_duration-steps_item_title-icon: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_title-icon: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_title-icon: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+$transition_duration-steps_item_backgroundColor: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_backgroundColor: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_backgroundColor: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+
+
+//transform token
+
+$transform_scale-step-item: var(--semi-transform_scale-small);//步骤条item-放大

package/steps/bacisSteps.scss

@@ -69,9 +69,11 @@ $basicType: #{$module}-basic;
 
             .#{$item}-title {
                 max-width: $width-steps_basic_item_title-maxWidth;
-
+                
                 .#{$item}-title-text {
                     @include text-overflow-hidden;
+                    transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
+                       
                 }
             }
 
@@ -166,6 +168,10 @@ $basicType: #{$module}-basic;
         overflow: hidden;
         flex: 1;
         cursor: pointer;
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text, //step文字color的transition变化
+        background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
+        
+        transform:scale($transform_scale-step-item);
 
         &:hover {
 
@@ -187,7 +193,7 @@ $basicType: #{$module}-basic;
             justify-content: center;
             align-items: center;
             margin-right: $spacing-steps_basic_item_left-marginRight;
-
+            
 
             .#{$item}-icon {
                 display: flex;
@@ -206,7 +212,7 @@ $basicType: #{$module}-basic;
                 background: $color-steps_item_left_number_icon-bg;
                 border-radius: $radius-steps_basic_item_left_number_icon;
                 color: $color-steps_item_left_number_icon-icon;
-
+                transition: color $transition_duration-steps_item_title-icon $transition_function-steps_item_title-icon $transition_delay-steps_item_title-icon; //step icon color的transition变化
             }
         }
 
@@ -221,6 +227,8 @@ $basicType: #{$module}-basic;
             vertical-align: top;
             padding-right: $spacing-steps_basic_item_title-paddingRight;
             padding-bottom: $spacing-steps_basic_item_title-paddingBottom;
+            transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; //step文字color的transition变化
+       
         }
 
         // 完成状态的样式

package/steps/fillSteps.scss

@@ -39,7 +39,10 @@ $module: #{$prefix}-steps;
         border: $width-steps_item-border solid $color-steps-border-default;
         border-radius: $radius-steps_item;
         padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
-
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
+        transform:scale($transform_scale-step-item);
+        transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
+        
         .#{$module}-item-title {
             position: relative;
             // display: inline-block;
@@ -48,6 +51,8 @@ $module: #{$prefix}-steps;
             width: $width-steps_item_title;
             @include text-overflow-hidden;
             color: $color-steps_main-text-default;
+            transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
+                     
         }
 
         .#{$module}-item-description {

package/steps/navSteps.scss

@@ -8,7 +8,7 @@ $basicType: #{$module}-nav;
 
     .#{$item} {
         @include box-sizing;
-
+        
         &:last-child {
             flex: none;
 

package/steps/steps.scss

@@ -2,6 +2,7 @@
 // @import '../theme/mixin.scss';
 // @import '../theme/font.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 @import "./fillSteps.scss";
 @import "./bacisSteps.scss";
 @import "./navSteps.scss";

package/switch/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-switch-bg: 200ms;//开关-背景色-动画持续时间
+$transition_function-switch-bg: var(--semi-transition_function-easeIn);//开关-背景色-过渡曲线
+$transition_delay-switch-bg: var(--semi-transition_delay-fastest);//开关-背景色-延迟时间
+

package/switch/foundation.ts

@@ -30,8 +30,8 @@ export default class SwitchFoundation<P = Record<string, any>, S = Record<string
 
     handleChange(checked: boolean, e: any): void {
         const propChecked = this.getProps().checked;
-        const isControledComponent = typeof propChecked !== 'undefined';
-        if (isControledComponent) {
+        const isControlledComponent = typeof propChecked !== 'undefined';
+        if (isControlledComponent) {
             this._adapter.notifyChange(checked, e);
         } else {
             this._adapter.setNativeControlChecked(checked);

package/switch/switch.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-switch;
 
@@ -11,7 +12,9 @@ $module: #{$prefix}-switch;
     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;
+    //transition: background-color $motion-switch-transitionDuration ease-in-out;
+    transition: background-color $transition_duration-switch-bg $transition_function-switch-bg $transition_delay_switch-bg;
+
     width: $width-switch;
     height: $height-switch;
 

package/table/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-table_body-bg: var(--semi-transition_duration-faster); // 表格-背景颜色-动画持续时间
+$transition_function-table_body-bg: var(--semi-transition_function-easeOut); // 表格-背景颜色-过渡曲线
+$transition_delay-table_body-bg: 0ms; // 表格-背景颜色-延迟时间

package/table/table.scss

@@ -1,6 +1,7 @@
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "./operationPanel.scss";
+@import './variables.scss';
+@import './mixin.scss';
+@import './operationPanel.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-table;
 
@@ -23,7 +24,7 @@ $module: #{$prefix}-table;
         color: $color-table-text-default;
         width: 100%;
 
-        &[data-column-fixed=true] {
+        &[data-column-fixed='true'] {
             z-index: 1;
         }
     }
@@ -76,7 +77,6 @@ $module: #{$prefix}-table;
             display: table-column;
         }
         .#{$module}-column {
-
             &-expand,
             &-selection {
                 width: $width-table_column_selection;
@@ -102,7 +102,6 @@ $module: #{$prefix}-table;
                 position: relative;
 
                 &.#{$module}-cell-fixed {
-
                     &-left,
                     &-right {
                         z-index: $z-table_fixed_column;
@@ -111,7 +110,7 @@ $module: #{$prefix}-table;
 
                         &::before {
                             background-color: $color-table_th-bg-default;
-                            content: "";
+                            content: '';
                             position: absolute;
                             left: 0;
                             top: 0;
@@ -141,7 +140,7 @@ $module: #{$prefix}-table;
 
                         // scroll-bar 列无需有box-shadow
 
-                        &[x-type="column-scrollbar"] {
+                        &[x-type='column-scrollbar'] {
                             box-shadow: none;
                             border-left: transparent;
                         }
@@ -152,7 +151,7 @@ $module: #{$prefix}-table;
                     text-align: center;
                 }
 
-                &[colspan]:not([colspan="1"]) {
+                &[colspan]:not([colspan='1']) {
                     text-align: center;
                 }
 
@@ -198,14 +197,13 @@ $module: #{$prefix}-table;
                     background-color: $color-table_body-bg-hover;
 
                     &.#{$module}-cell-fixed {
-
                         &-left,
                         &-right {
                             background-color: $color-table_body-bg-default;
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
-                                content: "";
+                                content: '';
                                 position: absolute;
                                 left: 0;
                                 top: 0;
@@ -236,7 +234,6 @@ $module: #{$prefix}-table;
                 }
             }
             &.#{$module}-row {
-
                 &-expand {
                     & > .#{$module}-row-cell {
                         background-color: $color-table_row_expanded-bg-default;
@@ -245,10 +242,9 @@ $module: #{$prefix}-table;
             }
 
             & > .#{$module}-cell-fixed {
-
                 &-left,
                 &-right {
-                    z-index: $z-table_fixed_column;;
+                    z-index: $z-table_fixed_column;
                     position: sticky;
                     background-color: $color-table-bg-default;
                 }
@@ -262,6 +258,16 @@ $module: #{$prefix}-table;
                     border-left: $width-table_cell_fixed_right_first solid $color-table_shadow-border-default;
                     box-shadow: #{$shadow-table_left};
                 }
+
+                & > * {
+                    transition: background-color $transition_duration-table_body-bg $transition_function-table_body-bg
+                        $transition_delay-table_body-bg;
+                }
+            }
+
+            & > * {
+                transition: background-color $transition_duration-table_body-bg $transition_function-table_body-bg
+                    $transition_delay-table_body-bg;
             }
         }
 
@@ -322,7 +328,6 @@ $module: #{$prefix}-table;
     }
 
     .#{$module}-selection {
-
         &-wrap {
             // inline-flex vertical-align baseline 会导致父元素高度异常
             display: inline-flex;
@@ -339,7 +344,6 @@ $module: #{$prefix}-table;
     }
 
     .#{$module}-column {
-
         &-hidden {
             display: none;
         }
@@ -433,7 +437,6 @@ $module: #{$prefix}-table;
         }
 
         .#{$module}-header {
-
             &::-webkit-scrollbar {
                 border-right: $border-table;
             }
@@ -446,7 +449,6 @@ $module: #{$prefix}-table;
         }
 
         .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-
             .react-resizable-handle {
                 background-color: transparent;
             }
@@ -496,7 +498,6 @@ $module: #{$prefix}-table;
 
         // when header is fixed, table should use `table-layout: fixed` to avoid align bug
         &-header {
-
             table {
                 table-layout: fixed;
             }
@@ -504,9 +505,7 @@ $module: #{$prefix}-table;
     }
 
     &-scroll {
-
         &-position {
-
             &-left {
                 .#{$module}-tbody,
                 .#{$module}-thead {
@@ -550,4 +549,4 @@ $module: #{$prefix}-table;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';