Step: Adds vertical variation to step

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">

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);