feat(step): support horizontal content

fomantic · Nov 8, 2024 · 139f225 · 139f225
1 parent 20747a2
commit 139f225
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less
@@ -213,6 +213,24 @@
                 &:last-child {
                     flex: 0;
                 }
+                & .content {
+                    margin-top: @circularStepContentMarginTop;
+                    padding: @circularStepContentPadding;
+                    &.center.aligned  {
+                        margin-top: @circularStepContentCenterAlignedMarginTop;
+                        & .title {
+                            padding: @circularStepContentPadding;
+                            margin-left: @circularStepContentCenterAlignedMarginLeft;
+                            background: @circularStepContentCenterAlignedBackground;
+                        }
+                    }
+                    &.bottom.aligned  {
+                        margin-top: @circularStepContentBottomAlignedMarginTop;
+                    }
+                    &:not(.aligned) .title + .description {
+                        margin-top: @circularStepContentDescriptionDistance;
+                    }
+                }
             }
         }
 
@@ -265,6 +283,14 @@
             }
         }
     }
+    @supports selector(:has(.f)) {
+        .ui.circular.steps:not(.vertical) .step:last-child:has(.content) {
+            flex: 1;
+        }
+        .ui.circular.steps:not(.vertical) .step:last-child:has(.center.aligned.content) {
+            background: none;
+        }
+    }
 }
 
 & when (@variationStepOrdered) {
@@ -821,6 +847,9 @@
                 & .step:not(.active):not(.completed)::before {
                     border-color: @invertedTextColor;
                 }
+                & .step .center.aligned.content .title {
+                    background: @invertedCircularStepContentCenterAlignedBackground;
+                }
             }
             &:not(.ordered) .step:not(.active):not(.completed)::after {
                 background: @invertedTextColor;

diff --git a/src/themes/default/elements/step.variables b/src/themes/default/elements/step.variables
@@ -114,6 +114,16 @@
 @circularStepCompletedIconLineHeight: 1em;
 @circularStepCompletedIconDistance: calc(-@circularStepRingSize + ((@circularStepRingSize / 2) / 2) + (@circularStepBorderWidth / 2));
 
+@circularStepContentMarginTop: -1.5em;
+@circularStepContentCenterAlignedMarginTop: -0.65em;
+@circularStepContentBottomAlignedMarginTop: 0.5em;
+@circularStepContentHorizontalPadding: 0.5em;
+@circularStepContentPadding: 0 @circularStepContentHorizontalPadding;
+@circularStepContentCenterAlignedMarginLeft: -@circularStepContentHorizontalPadding;
+@circularStepContentDescriptionDistance: 0.5em;
+@circularStepContentCenterAlignedBackground: @white;
+@invertedCircularStepContentCenterAlignedBackground: @black;
+
 @verticalCircularStepPadding: 3em;
 @verticalCircularStepContentPadding: 3.5em;
 @verticalCircularStepLineDistance: calc(@circularStepRingSize / unit(@circularStepBorderWidth));