From 7ab65977e1577719270edad1a328c9ff9334a06f Mon Sep 17 00:00:00 2001
From: Jack <jacklukic@gmail.com>
Date: Mon, 10 Jul 2017 21:09:11 -0700
Subject: [PATCH] CSS indenting #3714

---
 RELEASE-NOTES.md                   |  1 +
 src/definitions/elements/step.less | 68 +++++++++++++++---------------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index a27d3384a..c3565b720 100755
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -15,6 +15,7 @@
 - **Popup* - Added `bind clickaway` `bind touch close` `bind close on scroll` behaviors to make it easier for `on: 'manual'` popup to specify behavior
 - **Popup** - Separated className setting for `visible` into `visible` and `popupVisible`, this way you can remove visible indication on activating element without modifying popup visibility.
 - **Build Tools** - All Gulp/NPM dependencies have been updated to their latest versions
+- **Steps** - Steps now include an `unstackable` variation **Thanks @TemaSM** #3714
 
 **Bugs**
 - **Table**- Fix inverted table header color not applying properly to `sortable table` #5303 **Thanks @Banandrew**
diff --git a/src/definitions/elements/step.less b/src/definitions/elements/step.less
index 881ac829a..5c4aff2a6 100755
--- a/src/definitions/elements/step.less
+++ b/src/definitions/elements/step.less
@@ -260,40 +260,40 @@
 /* Mobile (Default) */
 @media only screen and (max-width: (@largestMobileScreen)) {
 
-.ui:not(.unstackable).steps {
-  display: inline-flex;
-  overflow: visible;
-  flex-direction: column;
-}
-.ui:not(.unstackable).steps .step {
-  width: 100% !important;
-  flex-direction: column;
-  border-radius: @borderRadius;
-  padding: @verticalPadding @horizontalPadding;
-}
-.ui:not(.unstackable).steps .step:first-child {
-  padding: @verticalPadding @horizontalPadding;
-  border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
-}
-.ui:not(.unstackable).steps .step:last-child {
-  border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
-}
-
-/* Arrow */
-.ui:not(.unstackable).steps .step:after {
-  display: none !important;
-}
-
-/* Content */
-.ui:not(.unstackable).steps .step .content {
-  text-align: center;
-}
-
-/* Icon */
-.ui:not(.unstackable).steps .step > .icon,
-.ui:not(.unstackable).ordered.steps .step:before {
-  margin: 0em 0em @mobileIconDistance 0em;
-}
+  .ui.steps:not(.unstackable) {
+    display: inline-flex;
+    overflow: visible;
+    flex-direction: column;
+  }
+  .ui.steps:not(.unstackable) .step {
+    width: 100% !important;
+    flex-direction: column;
+    border-radius: @borderRadius;
+    padding: @verticalPadding @horizontalPadding;
+  }
+  .ui.steps:not(.unstackable) .step:first-child {
+    padding: @verticalPadding @horizontalPadding;
+    border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
+  }
+  .ui.steps:not(.unstackable) .step:last-child {
+    border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
+  }
+
+  /* Arrow */
+  .ui.steps:not(.unstackable) .step:after {
+    display: none !important;
+  }
+
+  /* Content */
+  .ui.steps:not(.unstackable) .step .content {
+    text-align: center;
+  }
+
+  /* Icon */
+  .ui.steps:not(.unstackable) .step > .icon,
+  .ui.ordered.steps:not(.unstackable) .step:before {
+    margin: 0em 0em @mobileIconDistance 0em;
+  }
 
 }