Steps now are horizontally pointing again (like 1.x), added many new variables to control

src/definitions/elements/step.less

@@ -35,6 +35,7 @@
   box-shadow: @stepsBoxShadow;
   line-height: @lineHeight;
   border-radius: @stepsBorderRadius;
+  border: @stepsBorder;
 }
 
 .ui.steps .step:first-child {
@@ -51,10 +52,11 @@
 }
 
 .ui.steps .step:last-child {
+  border-right: none;
   margin-right: 0em;
 }
 .ui.steps .step:last-child:after {
-  display: none;
+  display: @lastArrowDisplay;
 }
 
 /*******************************
@@ -69,6 +71,7 @@
   flex-direction: row;
   vertical-align: middle;
   align-items: center;
+  justify-content: @justifyContent;
 
   margin: @verticalMargin @horizontalMargin;
   padding: @verticalPadding @horizontalPadding;
@@ -76,6 +79,8 @@
   color: @textColor;
   box-shadow: @boxShadow;
   border-radius: @borderRadius;
+  border: @border;
+  border-right: @divider;
 }
 
 
@@ -199,12 +204,15 @@
 .ui.vertical.steps .step {
   border-radius: @borderRadius;
   padding: @verticalPadding @horizontalPadding;
+  border-bottom: @verticalDivider;
+  justify-content: @verticalJustifyContent;
 }
 .ui.vertical.steps .step:first-child {
   padding: @verticalPadding @horizontalPadding;
   border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
 }
 .ui.vertical.steps .step:last-child {
+  border-bottom: none;
   border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
 }
 
@@ -218,10 +226,14 @@
   border-width: @verticalArrowBorderWidth;
 }
 
-
-/* Active Arrow */
-.ui.steps .active.step:after {
-  display: block;
+.ui.vertical.steps .step:after {
+  display: @verticalArrowDisplay;
+}
+.ui.vertical.steps .active.step:after {
+  display: @verticalActiveArrowDisplay;
+}
+.ui.vertical.steps .step:last-child:after {
+  display: @verticalLastArrowDisplay;
 }
 
 
@@ -293,6 +305,15 @@
   color: @activeIconColor;
 }
 
+/* Active Arrow */
+.ui.steps .step:after {
+  display: @arrowDisplay;
+}
+.ui.steps .active.step:after {
+  display: @activeArrowDisplay;
+}
+
+
 /* Active Hover */
 .ui.steps .link.active.step:hover::after,
 .ui.steps .link.active.step:hover,
@@ -376,26 +397,28 @@
 ---------------*/
 
 /* Top */
-.attached.ui.steps {
-  margin: @attachedTopMargin;
+.ui.attached.steps {
+  width: @attachedWidth !important;
+  margin: 0em @attachedHorizontalOffset @attachedVerticalOffset;
+  max-width: @attachedWidth;
   border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
 }
-.attached.ui.steps .step:first-child {
+.ui.attached.steps .step:first-child {
   border-radius: @stepsBorderRadius 0em 0em 0em;
 }
-.attached.ui.steps .step:last-child {
+.ui.attached.steps .step:last-child {
   border-radius: 0em @stepsBorderRadius 0em 0em;
 }
 
 /* Bottom */
-.bottom.attached.ui.steps {
-  margin: @attachedBottomMargin;
+.ui.bottom.attached.steps {
+  margin: @attachedVerticalOffset @attachedHorizontalOffset 0em;
   border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
 }
-.bottom.attached.ui.steps .step:first-child {
+.ui.bottom.attached.steps .step:first-child {
   border-radius: 0em 0em 0em @stepsBorderRadius;
 }
-.bottom.attached.ui.steps .step:last-child {
+.ui.bottom.attached.steps .step:last-child {
   border-radius: 0em 0em @stepsBorderRadius 0em;
 }
 

src/themes/default/elements/step.variables

@@ -2,6 +2,15 @@
              Step
 *******************************/
 
+/*-------------------
+       Group
+--------------------*/
+
+@stepsBorderRadius: @defaultBorderRadius;
+@stepsBackground: '';
+@stepsBoxShadow: none;
+@stepsBorder: 1px solid @borderColor;
+
 /*-------------------
       Element
 --------------------*/
@@ -9,9 +18,9 @@
 @verticalMargin: 0em;
 @horizontalMargin: 0em;
 
-@arrowSize: @relativeLarge;
-@verticalPadding: @relativeLarge;
-@horizontalPadding: @relativeHuge;
+@arrowSize: @relativeHuge;
+@verticalPadding: @relativeHuge;
+@horizontalPadding: 2em;
 
 @transition:
   background-color @defaultDuration @defaultEasing,
@@ -22,12 +31,14 @@
 @borderRadius: @defaultBorderRadius;
 @lineHeight: @relativeLarge;
 @alignItems: center;
-
+@justifyContent: center;
 @backgroundColor: @white;
 @background: @backgroundColor;
 @borderRadius: 0em;
 @borderWidth: 1px;
-@boxShadow: 0px 0px 0px @borderWidth @solidBorderColor;
+@boxShadow: none;
+@border: none;
+@divider: @borderWidth solid @borderColor;
 
 /* Icon */
 @iconDistance: 1rem;
@@ -49,32 +60,35 @@
 
 /* Arrow */
 @arrowBackgroundColor: @backgroundColor;
-@arrowTopOffset: 100%;
-@arrowRightOffset: 50%;
-@arrowBorderWidth: 0px 0px @borderWidth @borderWidth;
+@arrowTopOffset: 50%;
+@arrowRightOffset: 0%;
+@arrowBorderWidth: 0px @borderWidth @borderWidth 0px;
+
+@arrowDisplay: block;
+@activeArrowDisplay: block;
+@lastArrowDisplay: none;
 
 /*-------------------
        Types
 --------------------*/
 
+@verticalJustifyContent: 'flex-start';
+@verticalDivider: @divider;
 @verticalArrowTopOffset: 50%;
 @verticalArrowRightOffset: 0%;
 @verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px;
 
-/*-------------------
-       Group
---------------------*/
-
-@stepsBorderRadius: @defaultBorderRadius;
-@stepsBackground: '';
-@stepsBoxShadow: '';
+@verticalArrowDisplay: none;
+@verticalActiveArrowDisplay: block;
+@verticalLastArrowDisplay: block;
 
 /*-------------------
       Variations
 --------------------*/
 
-@attachedTopMargin: 0em;
-@attachedBottomMargin: -1px 0em 0em;
+@attachedHorizontalOffset: -@borderWidth;
+@attachedVerticalOffset: -@borderWidth;
+@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
 
 @orderedFontFamily: inherit;
 @orderedFontWeight: bold;