@douyinfe/semi-foundation 2.36.0-alpha.0 → 2.36.0

package/steps/bacisSteps.scss

@@ -2,400 +2,351 @@ $module: #{$prefix}-steps;
 $item: #{$module}-item;
 $basicType: #{$module}-basic;
 
-@mixin basic-horizontal {
-    display: flex;
-    flex-flow: row nowrap;
-    column-gap: $spacing-steps_basic_item-paddingLeft;
-}
+.#{$basicType} {
 
-@mixin basic-horizontal-hasline {
-    &.#{$module}-hasline {
-        .#{$item}-title {
+    &.#{$module}-horizontal {
+        &.#{$module}-hasline {
+            .#{$item}-title {
 
-            &::after {
-                content: "";
-                position: absolute;
-                top: 50%;
-                left: 100%;
-                display: block;
-                width: $width-steps_title_after;
-                height: $height-steps_title_after;
-                background: $color-steps_title_after-bg;
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 50%;
+                    left: 100%;
+                    display: block;
+                    width: $width-steps_title_after;
+                    height: $height-steps_title_after;
+                    background: $color-steps_title_after-bg;
+                }
             }
         }
-    }
-}
-
-@mixin basic-horizontal-item {
 
-    &:last-child {
-        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
 
-        .#{$item}-title {
-            max-width: 100%;
-            padding-right: 0;
+        .#{$item} {
+            padding-left: $spacing-steps_basic_item-paddingLeft;
 
-            &::after {
-                display: none;
+            &:first-child {
+                padding-left: 0;
             }
-        }
-    }
 
-    // done 只和后面的竖线的颜色有关系
-    &-done {
-        .#{$item}-container {
-            .#{$item}-title {
+            &:last-child {
+                flex: none;
 
-                &::after {
-                    background: $color-steps_item_done_after-bg;
+                .#{$item}-title {
+                    max-width: 100%;
+                    padding-right: 0;
+
+                    &::after {
+                        display: none;
+                    }
                 }
             }
-        }
-    }
 
-    .#{$item}-content {
-        flex: 1;
-    }
+            &-done {
+                .#{$item}-container {
+                    .#{$item}-title {
 
-    .#{$item}-description {
-        @include font-size-small;
-        color: $color-steps_minor-text-default;
-        width: $width-steps_basic_item_description;
-        max-width: $width-steps_basic_item_description-maxWidth;
-        @include text-overflow-hidden;
-    }
+                        &::after {
+                            background: $color-steps_item_done_after-bg;
+                        }
+                    }
+                }
+            }
 
-    .#{$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
-               
-        }
-    }
-}
+            .#{$item}-content {
+                flex: 1;
+            }
 
-@mixin basic-vertical {
-    display: flex;
-    flex-flow: column nowrap;
-    row-gap: $spacing-steps_basic_vertical_item-paddingTop;
-}
+            .#{$item}-description {
+                @include font-size-small;
+                color: $color-steps_minor-text-default;
+                width: $width-steps_basic_item_description;
+                max-width: $width-steps_basic_item_description-maxWidth;
+                @include text-overflow-hidden;
+            }
 
-@mixin basic-vertical-hasline {
-    &.#{$module}-hasline {
-        .#{$item}-icon {
-
-            &::after {
-                content: "";
-                position: absolute;
-                top: 100%;
-                left: 50%;
-                display: block;
-                width: $width-steps_vertical_icon_after;
-                height: $height-steps_vertical_icon_after;
-                background: $color-steps_icon_after-bg;
+            .#{$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
+                       
+                }
             }
-        }
-    }
-}
 
-@mixin basic-vertical-small {
-    .#{$item}-content {
-        min-height: $height-steps_basic_vertical_small_item_content-minHeight;
+        }
     }
-}
 
-@mixin basic-vertical-item {
-    &:last-child {
-        .#{$item}-icon {
+    &.#{$module}-vertical {
+        display: flex;
+        flex-flow: column nowrap;
 
-            &::after {
-                display: none;
+        &.#{$module}-small {
+            .#{$item} {
+                .#{$item}-content {
+                    min-height: $height-steps_basic_vertical_small_item_content-minHeight;
+                }
             }
         }
-    }
 
-    &-done {
-        .#{$item}-icon {
+        &.#{$module}-hasline {
+            .#{$item}-icon {
 
-            &::after {
-                background: $color-steps_item_done_icon_after-bg;
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 100%;
+                    left: 50%;
+                    display: block;
+                    width: $width-steps_vertical_icon_after;
+                    height: $height-steps_vertical_icon_after;
+                    background: $color-steps_icon_after-bg;
+                }
             }
         }
-    }
 
-    .#{$item}-content {
-        min-height: $height-steps_basic_vertical_icon_content-minHeight;
-        padding-bottom: $spacing-steps_basic_vertical_item_content-paddingBottom;
-    }
+        .#{$item} {
+            padding-top: $spacing-steps_basic_vertical_item-paddingTop;
 
-    .#{$item}-icon {
-        display: inline-flex;
-        position: relative;
-        padding-bottom: $spacing-steps_basic_vertical_item_icon-paddingBottom;
-    }
+            &:first-child {
+                padding-top: 0;
+            }
 
-    .#{$item}-description {
-        @include font-size-small;
-        color: $color-steps_minor-text-default;
-        width: $width-steps_basic_vertical_item_description;
-    }
+            &:last-child {
+                .#{$item}-icon {
 
-    .#{$item}-title {
-        max-width: $width-steps_basic_vertical_item_title-maxWidth;
+                    &::after {
+                        display: none;
+                    }
+                }
+            }
 
-        .#{$item}-title-text {
-            @include text-overflow-hidden;
-        }
-    }
-}
+            &-done {
+                .#{$item}-icon {
 
-@mixin basic-item {
-    @include box-sizing;
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    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:hover {
+                    &::after {
+                        background: $color-steps_item_done_icon_after-bg;
+                    }
+                }
+            }
 
-        .#{$item}-title {
-            color: $color-steps_item_title-text-hover;
-        }
+            .#{$item}-content {
+                min-height: $height-steps_basic_vertical_icon_content-minHeight;
+                padding-bottom: $spacing-steps_basic_vertical_item_content-paddingBottom;
+            }
 
-        .#{$item}-description {
-            color: $color-steps_item_description-text-hover;
-        }
-    }
+            .#{$item}-icon {
+                display: inline-flex;
+                position: relative;
+                padding-bottom: $spacing-steps_basic_vertical_item_icon-paddingBottom;
+            }
 
-    .#{$item}-container {
-        display: flex;
-        align-items: flex-start;
-    }
-    .#{$item}-left {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-right: $spacing-steps_basic_item_left-marginRight;
-        
+            .#{$item}-description {
+                @include font-size-small;
+                color: $color-steps_minor-text-default;
+                width: $width-steps_basic_vertical_item_description;
+            }
 
-        .#{$item}-icon {
-            display: flex;
-            height: $height-steps_basic_item_left-icon;
-            align-items: center;
-        }
+            .#{$item}-title {
+                max-width: $width-steps_basic_vertical_item_title-maxWidth;
 
-        .#{$item}-number-icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: $width-steps_basic_item_left_number-icon;
-            height: $height-steps_basic_item_left_number-icon;
-            @include font-size-header-6;
-            font-weight: $font-steps_basic_item_left_number_icon-fontWeight;
-            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变化
+                .#{$item}-title-text {
+                    @include text-overflow-hidden;
+                }
+            }
         }
     }
 
-
-    .#{$item}-title {
+    .#{$item} {
+        @include box-sizing;
         position: relative;
         display: inline-block;
-        @include font-size-header-6;
-        line-height: $font-steps_basic_item_title-lineHeight;
-        font-weight: $font-steps_basic_item_title-fontWeight;
-        color: $color-steps_main-text-default;
         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变化
-    }
-
-    // 完成状态的样式
+        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);
 
-    &-finish {
-        .#{$item}-left {
+        &-hover:hover {
 
-            .#{$item}-icon {
-                color: $color-steps_item_finish-icon;
+            .#{$item}-title {
+                color: $color-steps_item_title-text-hover;
+            }
 
-                .#{$item}-number-icon {
-                    color: $color-steps_item_finish_number-icon;
-                }
+            .#{$item}-description {
+                color: $color-steps_item_description-text-hover;
             }
         }
-    }
-
-    // 等待状态的样式
 
-    &-wait {
-        .#{$item}-title {
-            color: $color-steps_item_wait_title-text;
+        .#{$item}-container {
+            display: flex;
+            align-items: flex-start;
         }
-
         .#{$item}-left {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: $spacing-steps_basic_item_left-marginRight;
+            
 
             .#{$item}-icon {
-                color: $color-steps_item_wait_left_icon-icon;
+                display: flex;
+                height: $height-steps_basic_item_left-icon;
+                align-items: center;
+            }
 
-                .#{$item}-number-icon {
-                    background: $color-steps_item_wait_left_number_icon-bg;
-                    color: $color-steps_item_wait_left_number_icon-icon;
-                }
+            .#{$item}-number-icon {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: $width-steps_basic_item_left_number-icon;
+                height: $height-steps_basic_item_left_number-icon;
+                @include font-size-header-6;
+                font-weight: $font-steps_basic_item_left_number_icon-fontWeight;
+                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变化
             }
         }
 
-        &:hover {
+
+        .#{$item}-title {
+            position: relative;
+            display: inline-block;
+            @include font-size-header-6;
+            line-height: $font-steps_basic_item_title-lineHeight;
+            font-weight: $font-steps_basic_item_title-fontWeight;
+            color: $color-steps_main-text-default;
+            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变化
+       
+        }
+
+        // 完成状态的样式
+
+        &-finish {
             .#{$item}-left {
 
                 .#{$item}-icon {
+                    color: $color-steps_item_finish-icon;
 
                     .#{$item}-number-icon {
-                        background: $color-steps_item_wait_left_number_icon-bg-hover;
-                        color: $color-steps_item_wait_left_number_icon-icon-hover;
+                        color: $color-steps_item_finish_number-icon;
                     }
                 }
             }
+
+
         }
-    }
 
-    // 进行状态的样式
+        // 等待状态的样式
 
-    &-process {
-        .#{$item}-left {
+        &-wait {
+            .#{$item}-title {
+                color: $color-steps_item_wait_title-text;
+            }
 
-            .#{$item}-icon {
-                color: $color-steps_item_process_left-icon;
+            .#{$item}-left {
 
-                .#{$item}-number-icon {
-                    color: $color-steps_item_process_left_number-icon;
+                .#{$item}-icon {
+                    color: $color-steps_item_wait_left_icon-icon;
+
+                    .#{$item}-number-icon {
+                        background: $color-steps_item_wait_left_number_icon-bg;
+                        color: $color-steps_item_wait_left_number_icon-icon;
+                    }
                 }
             }
-        }
-    }
 
-    // 错误状态的样式
+            &-hover:hover {
+                .#{$item}-left {
 
-    &-error {
-        .#{$item}-left {
-
-            .#{$item}-icon {
-                color: $color-steps_item_error_left-icon;
+                    .#{$item}-icon {
 
-                .#{$item}-number-icon {
-                    color: $color-steps_item_error_left_number-icon;
+                        .#{$item}-number-icon {
+                            background: $color-steps_item_wait_left_number_icon-bg-hover;
+                            color: $color-steps_item_wait_left_number_icon-icon-hover;
+                        }
+                    }
                 }
             }
         }
-    }
 
-    // 警告状态的样式
+        // 进行状态的样式
 
-    &-warning {
-        .#{$item}-left {
+        &-process {
+            .#{$item}-left {
 
-            .#{$item}-icon {
-                color: $color-steps_item_warning_left-icon;
+                .#{$item}-icon {
+                    color: $color-steps_item_process_left-icon;
 
-                .#{$item}-number-icon {
-                    color: $color-steps_item_warning_left_number-icon;
+                    .#{$item}-number-icon {
+                        color: $color-steps_item_process_left_number-icon;
+                    }
                 }
             }
         }
-    }
-}
 
-@mixin basic-item-small {
-    .#{$item}-title {
-        @include font-size-regular;
-    }
+        // 错误状态的样式
 
-    .#{$item}-left {
+        &-error {
+            .#{$item}-left {
 
-        .#{$item}-icon {
-            height: $height-steps_basic_small_item_left-icon;
+                .#{$item}-icon {
+                    color: $color-steps_item_error_left-icon;
 
-            .#{$item}-number-icon {
-                @include font-size-small;
-                width: $width-steps_basic_small_item_left_number-icon;
-                height: $width-steps_basic_small_item_left_number-icon;
+                    .#{$item}-number-icon {
+                        color: $color-steps_item_error_left_number-icon;
+                    }
+                }
             }
         }
-    }
-}
 
-.#{$basicType} {
-    &.#{$module}-horizontal {
-        @include basic-horizontal;
-        @include basic-horizontal-hasline;
+        // 警告状态的样式
 
-        .#{$item} {
-            @include basic-horizontal-item;
-        }
-    }
+        &-warning {
+            .#{$item}-left {
 
-    &.#{$module}-vertical {
-        @include basic-vertical;
-        @include basic-vertical-hasline;
+                .#{$item}-icon {
+                    color: $color-steps_item_warning_left-icon;
 
-        &.#{$module}-small {
-            .#{$item} {
-                @include basic-vertical-small;
+                    .#{$item}-number-icon {
+                        color: $color-steps_item_warning_left_number-icon;
+                    }
+                }
             }
         }
-
-        .#{$item} {
-            @include basic-vertical-item;
-        }
-    }
-
-    .#{$item} {
-        @include basic-item;
     }
 
     &.#{$module}-small {
-        .#{$item} {
-            @include basic-item-small;
-        }
-    }
-}
 
-// 以下样式用于 C2D 变体生成。
-// The following styles are used for C2D variant generation. 
-.#{$item}-basic {
-    &.#{$item}-horizontal {
-        @include basic-horizontal; 
-
-        &.#{$item} {
-            @include basic-horizontal-item;
-        }
-    }
+        .#{$item} {
 
-    &.#{$item}-vertical {
-        @include basic-vertical;
+            .#{$item}-title {
+                @include font-size-regular;
+            }
 
-        &.#{$item} {
-            @include basic-vertical-item;   
-        }
-    }
+            .#{$item}-left {
 
-    &.#{$item} {
-        @include basic-item;
-    }
+                .#{$item}-icon {
+                    height: $height-steps_basic_small_item_left-icon;
 
-    &.#{$item}-small {
-        &.#{$item} {
-            @include basic-item-small;
+                    .#{$item}-number-icon {
+                        @include font-size-small;
+                        width: $width-steps_basic_small_item_left_number-icon;
+                        height: $width-steps_basic_small_item_left_number-icon;
+                    }
+                }
+            }
         }
     }
 }