feat(step): added right vertical steps variant having the arrow to th…

…e left side
fomantic · May 14, 2020 · 1986ea2 · 1986ea2
1 parent a08f089
commit 1986ea2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less
@@ -235,6 +235,12 @@
     border-width: @verticalArrowBorderWidth;
     display: @verticalArrowDisplay;
   }
+  .ui.right.vertical.steps .step:after {
+    border-width: @verticalLeftArrowBorderWidth;
+    left: @verticalLeftArrowLeftOffset;
+    right: @verticalLeftArrowRightOffset;
+    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
+  }
 
   .ui.vertical.steps .active.step:after {
     display: @verticalActiveArrowDisplay;

diff --git a/src/themes/default/elements/step.variables b/src/themes/default/elements/step.variables
@@ -81,6 +81,9 @@
 @verticalDivider: @divider;
 @verticalArrowTopOffset: 50%;
 @verticalArrowRightOffset: 0;
+@verticalLeftArrowLeftOffset: 0;
+@verticalLeftArrowRightOffset: 100%;
+@verticalLeftArrowBorderWidth: @borderWidth 0 0 @borderWidth;
 @verticalArrowBorderWidth: 0 @borderWidth @borderWidth 0;
 
 @verticalArrowDisplay: none;