From cd2a7d16962f8e19feddd32db46c7ca35febb2b4 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Sun, 2 Mar 2014 18:09:07 -0500
Subject: [PATCH] Step: Adds vertical variation to step

---
 server/documents/elements/step.html.eco | 22 +++++++++++++
 src/elements/step.less                  | 41 +++++++++++++++++++++++++
 2 files changed, 63 insertions(+)

diff --git a/server/documents/elements/step.html.eco b/server/documents/elements/step.html.eco
index 1e619bd17..e0f7e7836 100755
--- a/server/documents/elements/step.html.eco
+++ b/server/documents/elements/step.html.eco
@@ -14,6 +14,7 @@ type        : 'UI Element'
     <div class="ui vertical pointing secondary menu">
       <a class="active item">Element</a>
       <a class="item">Groups</a>
+      <a class="item">Types</a>
       <a class="item">States</a>
       <a class="item">Variations</a>
     </div>
@@ -50,6 +51,27 @@ type        : 'UI Element'
     </div>
   </div>
 
+  <h2 class="ui dividing header">Types</h2>
+
+  <div class="example">
+    <h4 class="ui header">Vertical</h4>
+    <p>Vertical steps display each step stacked vertically</p>
+    <div class="ui vertical steps">
+      <div class="ui step">
+        Shipping
+      </div>
+      <div class="ui active step">
+        Billing
+      </div>
+      <div class="ui disabled step">
+        Confirm Order
+      </div>
+      <div class="ui disabled step">
+        Complete
+      </div>
+    </div>
+  </div>
+
   <h2 class="ui dividing header">States</h2>
 
   <div class="example">
diff --git a/src/elements/step.less b/src/elements/step.less
index 716da8f22..8715df79d 100755
--- a/src/elements/step.less
+++ b/src/elements/step.less
@@ -74,6 +74,46 @@
   ;
 }
 
+/*******************************
+            Types
+*******************************/
+
+.ui.vertical.steps {
+  overflow: visible;
+}
+.ui.vertical.steps .step {
+  display: block;
+  border-radius: 0em;
+  padding: 1em 2em;
+}
+.ui.vertical.steps .step:first-child {
+  padding: 1em 2em;
+  border-top-left-radius: 0.3125rem;
+  border-top-right-radius: 0.3125rem;
+}
+.ui.vertical.steps .step:last-child {
+  border-bottom-left-radius: 0.3125rem;
+  border-bottom-right-radius: 0.3125rem;
+}
+
+/* Arrow */
+.ui.vertical.steps .step:after {
+  display: none;
+}
+
+/* Disabled */
+.ui.vertical.steps .disabled.step:after {
+  padding: 1em 2em;
+}
+
+
+/* Active Arrow */
+.ui.vertical.steps .active.step:after {
+  display: block;
+}
+
+
+
 /*******************************
             Group
 *******************************/
@@ -82,6 +122,7 @@
   cursor: pointer;
   display: inline-block;
   font-size: 0em;
+  overflow: hidden;
 
   -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);