feat(step): refactor variables and calc() function

fomantic · Oct 10, 2023 · 89dc439 · 89dc439
1 parent f133607
commit 89dc439
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less
@@ -191,10 +191,10 @@
                 align-items: center;
                 flex: 1;
                 position: relative;
-                margin-left: @circularStepLineMargin;
+                margin-left: @circularStepRingSize;
 
                 &::before {
-                    left: -@circularStepLineMargin;
+                    left: -@circularStepRingSize;
                 }
                 &::after {
                     left: @circularStepIconDistance;
@@ -208,7 +208,7 @@
                     background: @circularStepCompletedBackground;
                 }
                 &.completed::after {
-                    left: calc(-1.65em + (@circularStepBorderWidth / 2));
+                    left: @circularStepCompletedIconDistance;
                 }
                 &:last-child {
                     flex: 0;
@@ -263,7 +263,6 @@
                     content: "\e800";
                     font-family: Step;
                     color: @circularStepCompletedColor;
-                    left: @circularStepCompletedIconDistance;
                     height: auto;
                     line-height: @circularStepCompletedIconLineHeight;
                 }
@@ -403,7 +402,7 @@
                         content: "";
                         position: absolute;
                         border-left: @circularStepBorder;
-                        top: @circularStepLineMargin;
+                        top: @circularStepRingSize;
                         bottom: 0;
                         left: @verticalCircularStepLineDistance;
                     }

diff --git a/src/themes/default/elements/step.variables b/src/themes/default/elements/step.variables
@@ -104,16 +104,15 @@
 /* Circular */
 @circularStepsMargin: @stepMargin;
 @circularStepsPadding: @stepMargin;
-@circularStepLineMargin: 2.2em;
 @circularStepDisabledItemOpacity: 0.5;
 @circularStepColor: @borderColor;
 @circularStepBorderWidth: 2px;
 @circularStepBorder: @circularStepBorderWidth solid @circularStepColor;
 @circularStepRingSize: 2.2em;
 @circularStepIconSize: 0.95em;
-@circularStepIconDistance: calc((-@circularStepRingSize + @circularStepIconSize) - 0.35em);
+@circularStepIconDistance: calc((-@circularStepRingSize + @circularStepIconSize) - 0.3em);
 @circularStepCompletedIconLineHeight: 1em;
-@circularStepCompletedIconDistance: calc(-@circularStepRingSize + (calc((@circularStepRingSize / unit(@circularStepBorderWidth)) / unit(@circularStepBorderWidth))));
+@circularStepCompletedIconDistance: calc(-@circularStepRingSize + ((@circularStepRingSize / 2) / 2) + (@circularStepBorderWidth / 2));
 
 @verticalCircularStepPadding: 3em;
 @verticalCircularStepContentPadding: 3.5em;