@douyinfe/semi-foundation 2.29.0 → 2.30.0-alpha.0

package/steps/fillSteps.scss

@@ -1,198 +1,204 @@
 $module: #{$prefix}-steps;
-
-.#{$module} {
-    .#{$prefix}-col {
-        flex: 1;
+$fill: #{$module}-item-fill;
+
+@mixin steps-item {
+    @include box-sizing;
+    display: flex;
+    height: $height-steps_item;
+    position: relative;
+    overflow: hidden;
+    margin-right: $spacing-steps_item-marginRight;
+    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;
+        @include font-size-header-5;
+        font-weight: $font-weight-bold;
+        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
+                    
     }
 
-    &-vertical {
-        .#{$prefix}-row-flex {
-            flex-direction: column;
-        }
+    .#{$module}-item-description {
+        @include font-size-regular;
+        color: $color-steps_minor-text-default;
+        width: $width-steps_item_description;
+        @include text-overflow-hidden;
     }
 
-    // .#{$module}-horizontal {
-    //     .#{$module}-item-title {
-    //         &-text {
-    //             position: relative;
-    //             &::after {
-    //                 content: '';
-    //                 display: block;
-    //                 width: 9999px;
-    //                 height: 1px;
-    //                 position: absolute;
-    //                 top: 12px;
-    //                 left: 120%;
-    //                 background-color: var(--semi-color-border);
-    //             }
-    //         }
-    //     }
-    // }
+    &-process {
+        background-color: $color-steps_process-bg-default;
 
-    .#{$module}-item {
-        @include box-sizing;
-        display: flex;
-        height: $height-steps_item;
-        position: relative;
-        overflow: hidden;
-        margin-right: $spacing-steps_item-marginRight;
-        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;
-            @include font-size-header-5;
-            font-weight: $font-weight-bold;
-            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-left:not(.#{$module}-item-icon) {
+            background: $color-steps_primary-bg-default;
         }
 
-        .#{$module}-item-description {
-            @include font-size-regular;
-            color: $color-steps_minor-text-default;
-            width: $width-steps_item_description;
-            @include text-overflow-hidden;
+        .#{$module}-item-title,
+        .#{$module}-item-icon {
+            color: $color-steps_primary-icon-default;
         }
+    }
 
-        &-process {
-            background-color: $color-steps_process-bg-default;
-
-            .#{$module}-item-left:not(.#{$module}-item-icon) {
-                background: $color-steps_primary-bg-default;
-            }
+    &-wait {
+        .#{$module}-item-left:not(.#{$module}-item-icon) {
+            background: $color-steps-bg-default;
+        }
 
-            .#{$module}-item-title,
-            .#{$module}-item-icon {
-                color: $color-steps_primary-icon-default;
-            }
+        .#{$module}-item-icon {
+            color: $color-steps-icon-default;
         }
+    }
 
-        &-wait {
-            .#{$module}-item-left:not(.#{$module}-item-icon) {
-                background: $color-steps-bg-default;
-            }
+    &-finish {
 
-            .#{$module}-item-icon {
-                color: $color-steps-icon-default;
-            }
+        .#{$prefix}-icon,
+        .#{$module}-item-title {
+            color: $color-steps_success-text-default;
         }
 
-        &-finish {
+        &:hover {
+            background-color: $color-steps-bg-hover;
 
             .#{$prefix}-icon,
             .#{$module}-item-title {
-                color: $color-steps_success-text-default;
+                color: $color-steps_success-text-hover;
             }
+        }
 
-            &:hover {
-                background-color: $color-steps-bg-hover;
+        &:active {
+            background-color: $color-steps-bg-active;
 
-                .#{$prefix}-icon,
-                .#{$module}-item-title {
-                    color: $color-steps_success-text-hover;
-                }
+            .#{$prefix}-icon,
+            .#{$module}-item-title {
+                color: $color-steps_success-text-active;
             }
+        }
+    }
 
-            &:active {
-                background-color: $color-steps-bg-active;
+    &-error {
 
-                .#{$prefix}-icon,
-                .#{$module}-item-title {
-                    color: $color-steps_success-text-active;
-                }
-            }
+        .#{$prefix}-icon,
+        .#{$module}-item-title {
+            color: $color-steps_danger-text-default;
         }
 
-        &-error {
+        &:hover {
+            background: $color-steps-bg-hover;
 
             .#{$prefix}-icon,
             .#{$module}-item-title {
-                color: $color-steps_danger-text-default;
+                color: $color-steps_danger-text-hover;
             }
+        }
 
-            &:hover {
-                background: $color-steps-bg-hover;
+        &:active {
+            background-color: $color-steps-bg-active;
 
-                .#{$prefix}-icon,
-                .#{$module}-item-title {
-                    color: $color-steps_danger-text-hover;
-                }
+            .#{$prefix}-icon,
+            .#{$module}-item-title {
+                color: $color-steps_danger-text-active;
             }
+        }
+    }
 
-            &:active {
-                background-color: $color-steps-bg-active;
+    &-warning {
 
-                .#{$prefix}-icon,
-                .#{$module}-item-title {
-                    color: $color-steps_danger-text-active;
-                }
-            }
+        .#{$module}-item-title,
+        .#{$prefix}-icon {
+            color: $color-steps_warning-text-default;
         }
 
-        &-warning {
+        &:hover {
+            background: $color-steps-bg-hover;
 
             .#{$module}-item-title,
             .#{$prefix}-icon {
-                color: $color-steps_warning-text-default;
+                color: $color-steps_warning-text-hover;
             }
+        }
 
-            &:hover {
-                background: $color-steps-bg-hover;
+        &:active {
+            background-color: $color-steps-bg-active;
 
-                .#{$module}-item-title,
-                .#{$prefix}-icon {
-                    color: $color-steps_warning-text-hover;
-                }
+            .#{$module}-item-title,
+            .#{$prefix}-icon {
+                color: $color-steps_warning-text-active;
             }
+        }
+    }
 
-            &:active {
-                background-color: $color-steps-bg-active;
-
-                .#{$module}-item-title,
-                .#{$prefix}-icon {
-                    color: $color-steps_warning-text-active;
-                }
-            }
+    &-clickable {
+        cursor: pointer;
+    }
+    
+};
+
+@mixin steps-item-left {
+    &-left {
+        width: $width-steps_item_left;
+        height: $height-steps_item_left;
+        line-height: $font-steps_item_left-lineHeight;
+        text-align: center;
+        border-radius: $radius-steps_item_left;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        @include font-size-header-4;
+        font-weight: $font-weight-bold;
+        flex-grow: 0;
+
+        &.#{$module}-item-plain {
+            color: $color-steps-text-default;
         }
 
-        &-clickable {
-            cursor: pointer;
+        &-process {
+            background: $color-steps_process-bg-default;
         }
+    }
+}
 
-        &-left {
-            width: $width-steps_item_left;
-            height: $height-steps_item_left;
-            line-height: $font-steps_item_left-lineHeight;
-            text-align: center;
-            border-radius: $radius-steps_item_left;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            @include font-size-header-4;
-            font-weight: $font-weight-bold;
-            flex-grow: 0;
+@mixin steps-item-content {
+    &-content {
+        margin-left: $spacing-steps_item_content-marginLeft;
+        flex: 1;
+        overflow: hidden;
+    }
+}
 
-            &.#{$module}-item-plain {
-                color: $color-steps-text-default;
-            }
+.#{$module} {
+    .#{$prefix}-col {
+        flex: 1;
+    }
 
-            &-process {
-                background: $color-steps_process-bg-default;
-            }
+    &-vertical {
+        .#{$prefix}-row-flex {
+            flex-direction: column;
         }
+    }
 
-        &-content {
-            margin-left: $spacing-steps_item_content-marginLeft;
-            flex: 1;
-            overflow: hidden;
-        }
+    .#{$module}-item {
+        @include steps-item;
+        @include steps-item-left;
+        @include steps-item-content;
+    }
+}
+
+// 以下 css 用于 C2D 中变体生成
+.#{$fill} {
+    &.#{$module}-item {
+        @include steps-item;
+    }
+
+    .#{$module}-item {
+        @include steps-item-left;
+        @include steps-item-content;
     }
 }

package/steps/navSteps.scss

@@ -1,63 +1,83 @@
 $module: #{$prefix}-steps;
 $item: #{$module}-item;
 $basicType: #{$module}-nav;
+$navItem: #{$item}-nav;
 
-.#{$basicType} {
-    display: inline-flex;
-    flex-flow: row nowrap;
-
-    .#{$item} {
-        @include box-sizing;
+@mixin steps-nav-item {
+    @include box-sizing;
         
-        &:last-child {
-            flex: none;
+    &:last-child {
+        flex: none;
 
-            .#{$item}-content {
-                width: auto;
-            }
+        .#{$item}-content {
+            width: auto;
         }
+    }
 
-        .#{$item}-container {
-            display: flex;
-            align-items: center;
-            color: $color-steps_nav_item_container-text;
-
-            .#{$item}-icon {
-                display: inline-flex;
-                flex: 1;
-                justify-content: center;
-                color: $color-steps_nav_item-icon;
-                min-width: $width-steps_nav_item_icon-minWidth;
-            }
-        }
+    .#{$item}-container {
+        display: flex;
+        align-items: center;
+        color: $color-steps_nav_item_container-text;
 
-        .#{$item}-content {
+        .#{$item}-icon {
+            display: inline-flex;
             flex: 1;
-            display: inline-block;
+            justify-content: center;
+            color: $color-steps_nav_item-icon;
+            min-width: $width-steps_nav_item_icon-minWidth;
         }
+    }
+
+    .#{$item}-content {
+        flex: 1;
+        display: inline-block;
+    }
 
+    .#{$item}-title {
+        @include font-size-header-6;
+        max-width: $width-steps_nav_item_title-maxWidth;
+        @include text-overflow-hidden;
+        font-weight: $font-steps_nav_item_title-fontWeight;
+    }
+
+
+    &-active {
         .#{$item}-title {
-            @include font-size-header-6;
-            max-width: $width-steps_nav_item_title-maxWidth;
-            @include text-overflow-hidden;
-            font-weight: $font-steps_nav_item_title-fontWeight;
+            color: $color-steps_nav_item_title-text-active;
+            font-weight: $font-steps_nav_item_title_active-fontWeight;
         }
+    }
+}
 
+@mixin steps-nav-small {
+    .#{$item}-title {
+        @include font-size-regular;
+    }
+}
 
-        &-active {
-            .#{$item}-title {
-                color: $color-steps_nav_item_title-text-active;
-                font-weight: $font-steps_nav_item_title_active-fontWeight;
-            }
-        }
+.#{$basicType} {
+    display: inline-flex;
+    flex-flow: row nowrap;
+
+    .#{$item} {
+        @include steps-nav-item;
     }
 
     &.#{$module}-small {
         .#{$item} {
-            .#{$item}-title {
-                @include font-size-regular;
-            }
-
+            @include steps-nav-small;
         }
     }
 }
+
+// C2D 变体生成样式
+.#{$navItem} {
+    &.#{$item} {
+        @include steps-nav-item;
+    }
+
+    &.#{$item}-small {
+        @include steps-nav-small;
+    }
+
+}