feat(steps): adjust steps style

oruga-ui · Nov 8, 2024 · f9feaac · f9feaac
1 parent 1764a01
commit f9feaac
Showing 1 changed file with 23 additions and 83 deletions.
diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss
@@ -1,8 +1,9 @@
 @use "sass:list";
 
 /* @docs */
-$steps-details-background-color: hsl(0, 0%, 100%) !default;
-$steps-details-padding: 0.2em !default;
+$steps-title-background-color: hsl(0, 0%, 100%) !default;
+$steps-title-padding: 0.2em !default;
+$steps-title-font-weight: 500 !default;
 $steps-marker-background: var(--#{$prefix}grey-light) !default;
 $steps-marker-color: var(--#{$prefix}primary-invert) !default;
 $steps-marker-border: 0.2em solid #fff !default;
@@ -17,9 +18,9 @@ $steps-divider-height: 0.2em !default;
 $steps-vertical-padding: 1em 0 !default;
 $steps-item-line-height: var(--#{$prefix}base-line-height) !default;
 $steps-link-color: hsl(0, 0%, 29%) !default;
+$steps-content-spacer: 1rem !default;
 $steps-content-padding: 1rem !default;
 $steps-font-size: var(--#{$prefix}base-font-size) !default;
-$steps-details-title-font-weight: 600 !default;
 /* @docs */
 
 @mixin steps-size($size, $name: null) {
@@ -39,78 +40,9 @@ $steps-details-title-font-weight: 600 !default;
   }
 
   .o-steps__step-label {
-    text-align: center;
-    z-index: 1;
-    background-color: var(
-      --#{$prefix}steps-details-background-color,
-      $steps-details-background-color
-    );
-    padding: var(--#{$prefix}steps-details-padding, $steps-details-padding);
     font-size: calc(var(--#{$prefix}#{$sizeVarName}, $size) * 1.2);
-    height: var(
-      --#{$prefix}steps-details-title-font-weight,
-      $steps-details-title-font-weight
-    );
     line-height: var(--#{$prefix}#{$sizeVarName}, $size);
   }
-
-  &.o-steps--vertical {
-    .o-steps--label-right {
-      .o-steps__divider {
-        left: calc(
-          (
-              var(--#{$prefix}#{$sizeVarName}, $size) - var(
-                  --#{$prefix}steps-divider-height,
-                  $steps-divider-height
-                )
-            ) * 0.5
-        );
-      }
-    }
-
-    .o-steps--label-left {
-      .o-steps__divider {
-        left: auto;
-        right: calc(
-          (
-              var(--#{$prefix}#{$sizeVarName}, $size) - var(
-                  --#{$prefix}steps-divider-height,
-                  $steps-divider-height
-                )
-            ) * 0.5
-        );
-      }
-    }
-
-    &.o-steps-position-right {
-      .o-steps--label-right {
-        .o-steps__divider {
-          left: calc(
-            (
-                var(--#{$prefix}#{$sizeVarName}, $size) - var(
-                    --#{$prefix}steps-divider-height,
-                    $steps-divider-height
-                  )
-              ) * 0.5
-          );
-        }
-      }
-
-      .o-steps--label-left {
-        .o-steps__divider {
-          left: auto;
-          right: calc(
-            (
-                var(--#{$prefix}#{$sizeVarName}, $size) - var(
-                    --#{$prefix}steps-divider-height,
-                    $steps-divider-height
-                  )
-              ) * 0.5
-          );
-        }
-      }
-    }
-  }
 }
 
 .o-steps {
@@ -220,11 +152,15 @@ $steps-details-title-font-weight: 600 !default;
     overflow: visible;
     display: flex;
     flex-direction: column;
-    padding: var(--#{$prefix}steps-content-padding, $steps-content-padding);
+    margin-top: var(--#{$prefix}steps-content-spacer, $steps-content-spacer);
 
     &-transitioning {
       overflow: hidden;
     }
+
+    &:not(:has(.o-steps__panel:empty)) {
+      padding: var(--#{$prefix}steps-content-padding, $steps-content-padding);
+    }
   }
 
   &--animated {
@@ -262,6 +198,20 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
+  &__step-label {
+    text-align: center;
+    z-index: 1;
+    background-color: var(
+      --#{$prefix}steps-title-background-color,
+      $steps-title-background-color
+    );
+    padding: var(--#{$prefix}steps-title-padding, $steps-title-padding);
+    font-weight: var(
+      --#{$prefix}steps-title-font-weight,
+      $steps-title-font-weight
+    );
+  }
+
   &__marker {
     align-items: center;
     display: flex;
@@ -287,16 +237,6 @@ $steps-details-title-font-weight: 600 !default;
     }
   }
 
-  &__details {
-    text-align: center;
-    z-index: 1;
-    padding: var(--#{$prefix}steps-details-padding, $steps-details-padding);
-    background-color: var(
-      --#{$prefix}steps-details-background-color,
-      $steps-details-background-color
-    );
-  }
-
   &__nav-item--active {
     .o-steps__link {
       cursor: default;