style: fix sass version >= 1.77.7, this use of declarations after nes… (#2370)

* style: fix sass version >= 1.77.7, this use of declarations after nested rules deprecated

packages/semi-foundation/button/button.scss

@@ -243,13 +243,12 @@ $module: #{$prefix}-button;
 
     &-disabled {
         color: $color-button_disabled_solid-text-default;
+        cursor: not-allowed;
 
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             color: $color-button_disabled-text-hover;
         }
 
-        cursor: not-allowed;
-
         &.#{$module}-light,
         &.#{$module}-borderless {
             color: $color-button_disabled-text-default;

packages/semi-foundation/cascader/cascader.scss

@@ -283,13 +283,12 @@ $module: #{$prefix}-cascader;
     &-disabled {
         cursor: not-allowed;
         user-select: none;
+        background-color: $color-cascader_input_disabled-bg-default;
 
         .#{$module}-selection {
             cursor: not-allowed;
         }
 
-        background-color: $color-cascader_input_disabled-bg-default;
-
         &:hover {
             background-color: $color-cascader_input_disabled-bg-hover;
         }

packages/semi-foundation/checkbox/checkbox.scss

@@ -193,12 +193,11 @@ $module: #{$prefix}-checkbox;
 
         .#{$module}-inner {
             position: relative;
+            flex-shrink: 0;
 
             &-display {
                 background: $color-checkbox_cardType_inner-bg-default;
             }
-
-            flex-shrink: 0;
         }
 
         .#{$module}-inner-pureCardType {

packages/semi-foundation/datePicker/datePicker.scss

@@ -319,6 +319,7 @@ $module-list: #{$prefix}-scrolllist;
         @include font-size-small;
         font-weight: $font-weight-bold;
         color: $color-datepicker_day-text-default;
+        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
 
         &-item {
             width: $width-datepicker_day;
@@ -327,8 +328,6 @@ $module-list: #{$prefix}-scrolllist;
             text-align: center;
             display: inline-block;
         }
-
-        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
     }
 
     // 月面板-月周

packages/semi-foundation/dropdown/dropdown.scss

@@ -33,11 +33,12 @@ $module: #{$prefix}-dropdown;
         padding-bottom: $spacing-dropdown_title-paddingBottom;
         padding-left: $spacing-dropdown_title-paddingLeft;
         padding-right: $spacing-dropdown_title-paddingRight;
+        @include font-size-small;
+        cursor: default;
+        
         &-withTick {
             padding-left: $spacing-dropdown_title_withTick-paddingLeft;
         }
-        @include font-size-small;
-        cursor: default;
     }
     &-item {
         padding: $spacing-dropdown_item-paddingY $spacing-dropdown_item-paddingX;

packages/semi-foundation/form/form.scss

@@ -263,15 +263,16 @@ $rating: #{$prefix}-rating;
 
 .#{$form}-vertical {
     .#{$form}-field-group {
-        .#{$field} {
-            margin-top: 0;
-            margin-bottom: 0;
-        }
         margin-top: 0;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
         overflow: hidden;
+        
+        .#{$field} {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
     }
 }
 

packages/semi-foundation/grid/grid.scss

@@ -4,9 +4,9 @@
 $module: #{$prefix};
 
 .#{$module}-row {
-    @include make-row();
     display: block;
     box-sizing: border-box;
+    @include make-row();
 }
 
 .#{$module}-row-flex {

packages/semi-foundation/input/input.scss

@@ -562,14 +562,13 @@ $module: #{$prefix}-input;
 
         background-color: $color-input_default-bg-default;
         color: $color-input_prefix-text-default;
+        @include font-size-regular;
+        flex-shrink: 0;
 
         &-icon,
         &-text {
             padding: $spacing-input_prepend-paddingY $spacing-input_prepend-paddingX;
         }
-
-        @include font-size-regular;
-        flex-shrink: 0;
     }
 
     &-append {
@@ -692,6 +691,8 @@ $module: #{$prefix}-input;
 
 .#{$module}-only_border{
     background: transparent;
+    border-color: $color_input-default-border-only_border-default;
+    
     &:hover{
         background: transparent;
         border-color: $color_input-default-border-only_border-hover;
@@ -699,7 +700,6 @@ $module: #{$prefix}-input;
     &:focus-within{
         background: transparent;
     }
-    border-color: $color_input-default-border-only_border-default;
 
 }
 

packages/semi-foundation/navigation/navigation.scss

@@ -438,7 +438,9 @@ $module: #{$prefix}-navigation;
                 &-selected {
                     font-weight: $font-navigation_sub_selected-fontWeight;
                     @include item-selected;
-                    background-color: $color-navigation_itemL1-bg-default;
+                    & {
+                        background-color: $color-navigation_itemL1-bg-default;
+                    }
 
                     &.#{$module}-sub-title-disabled {
                         @include item-disabled-selected;

packages/semi-foundation/popconfirm/popconfirm.scss

@@ -46,10 +46,11 @@ $module: #{$prefix}-popconfirm;
     }
 
     &-body {
+        color: $color-popconfirm_body-text;
+
         &-withIcon {
             margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
         }
-        color: $color-popconfirm_body-text;
 
         & > p {
             margin: $spacing-popconfirm_body_p-margin;

packages/semi-foundation/radio/radio.scss

@@ -13,17 +13,16 @@ $inner-width: $width-icon-medium;
     column-gap: $spacing-radio_addon-paddingLeft;
     transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
     border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
-
-    &.#{$module}-vertical {
-        display: block;
-    }
-
     min-height: $height-radio_inner_min;
     min-width: $width-radio_inner;
     cursor: pointer;
     vertical-align: bottom;
     text-align: left;
 
+    &.#{$module}-vertical {
+        display: block;
+    }
+
     input[type="checkbox"],
     input[type="radio"] {
         position: absolute;
@@ -114,10 +113,11 @@ $inner-width: $width-icon-medium;
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
+            flex-shrink: 0;
+
             &-display {
                 background: $color-radio_card-bg-default;
             }
-            flex-shrink: 0;
         }
 
         .#{$module}-addon {

packages/semi-foundation/select/select.scss

@@ -185,12 +185,11 @@ $overflowList: #{$prefix}-overflow-list;
         }
 
         .#{$prefix}-tag {
+            @include select-tag-margin;
 
             &:nth-of-type(1) {
                 margin-left: 0;
             }
-
-            @include select-tag-margin;
         }
 
         .#{$prefix}-tag-group {

packages/semi-foundation/steps/bacisSteps.scss

@@ -5,6 +5,9 @@ $basicType: #{$module}-basic;
 .#{$basicType} {
 
     &.#{$module}-horizontal {
+        display: flex;
+        flex-flow: row nowrap;
+
         &.#{$module}-hasline {
             .#{$item}-title {
 
@@ -21,9 +24,6 @@ $basicType: #{$module}-basic;
             }
         }
 
-        display: flex;
-        flex-flow: row nowrap;
-
         .#{$item} {
             padding-left: $spacing-steps_basic_item-paddingLeft;
 

packages/semi-foundation/switch/switch.scss

@@ -116,11 +116,6 @@ $module: #{$prefix}-switch;
     }
 
     &-native-control {
-
-        &[type="checkbox"] {
-            width: inherit;
-            height: inherit;
-        }
         width: 100%;
         height: 100%;
         opacity: 0;
@@ -130,6 +125,11 @@ $module: #{$prefix}-switch;
         position: absolute;
         top: 0;
         left: 0;
+
+        &[type="checkbox"] {
+            width: inherit;
+            height: inherit;
+        }
     }
 
     &-checked-text,

packages/semi-foundation/table/table.scss

@@ -66,12 +66,12 @@ $module: #{$prefix}-table;
 
     &-header {
         overflow: hidden;
+        scrollbar-base-color: transparent;
 
         &::-webkit-scrollbar {
             background-color: transparent;
             border-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default;
         }
-        scrollbar-base-color: transparent;
 
         &-sticky {
             position: sticky;

packages/semi-foundation/tabs/tabs.scss

@@ -326,13 +326,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 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
-                
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
+
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
 
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
@@ -694,13 +693,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 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
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
                 
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
 
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }

packages/semi-foundation/tag/tag.scss

@@ -159,14 +159,13 @@ $types: "ghost", "solid", "light";
 
 .#{$module}-group {
     display: block;
+    height: auto;
 
     .#{$module} {
         margin-bottom: $spacing-tag_group-marginBottom;
         margin-right: $spacing-tag_group-marginRight;
     }
 
-    height: auto;
-
     &-max.#{$module}-group-small {
         height: ($height-tag_small + 2);
     }

packages/semi-foundation/tree/tree.scss

@@ -211,11 +211,12 @@ $module: #{$prefix}-tree;
 
         &-drag-over.#{$module}-option-draggable,
         &-drag-over.#{$module}-option-fullLabel-draggable {
+            border: $width-tree_option_draggable-border solid $color-tree_option_draggable_insert-border-default;
+
             .#{$module}-option-label {
                 border-top: 0;
                 border-bottom: 0;
             }
-            border: $width-tree_option_draggable-border solid $color-tree_option_draggable_insert-border-default;
 
             // selected solid background will overlap with drag over border-bottom
             // add an extra border to complement
@@ -397,11 +398,12 @@ $module: #{$prefix}-tree;
         &-spin-icon {
             display: flex;
             line-height: 0; // make the spin icon in the center
+            color: $color-tree_option_loading-icon-default;
+
             & svg {
                 width: $width-tree_spinIcon;
                 height: $width-tree_spinIcon;
             }
-            color: $color-tree_option_loading-icon-default;
         }
 
         &-selected {

packages/semi-foundation/upload/upload.scss

@@ -109,6 +109,7 @@ $module: #{$prefix}-upload;
         &-title {
             @include font-size-small;
             color: $color-upload_assist-text;
+            margin-bottom: $spacing-upload_title-marginBottom;
 
             &-choosen {
                 margin-right: $spacing-upload_title_choosen-marginRight;
@@ -118,8 +119,6 @@ $module: #{$prefix}-upload;
                 cursor: pointer;
                 color: $color-upload_clear-text;
             }
-
-            margin-bottom: $spacing-upload_title-marginBottom;
         }
     }
 

packages/semi-ui/transfer/_story/transfer.scss

@@ -72,6 +72,8 @@
         height: 353px;
         border: 1px solid var(--semi-color-border);
         border-top: none;
+        margin-right: 16px;
+
         .panel-list {
             overflow-y: auto;
             height: 202px;
@@ -92,7 +94,6 @@
         .panel-item {
             margin-right: 8px;
         }
-        margin-right: 16px;
     }
     .selected-panel {
         width: 200px;