added steps breadcrumbs

docs/routes.js

@@ -25,6 +25,7 @@ export default (
         <Route path="dropdown" component={require('./sections/Docs-Dropdown')} />
         <Route path="modal" component={require('./sections/Docs-Modal')} />
         <Route path="colors" component={require('./sections/Docs-Colors')} />
+        <Route path="steps" component={require('./sections/Docs-Steps')} />
         <Route path="guidelines" component={require('./sections/Docs-Guidelines')} />
       </Route>
     </Route>

docs/sections/Docs-Steps/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default class Steps extends React.Component {
+  render() {
+    return (
+      <ul className="steps">  
+        <li className="-complete"> <a> <i className="icon icon-checkmark" /> </a> </li>
+        <li className="-active"> <a> 2 </a> </li>
+        <li> <a> 3 </a> </li>
+      </ul>
+    );
+  }
+}

docs/sections/Docs/index.jsx

@@ -27,6 +27,7 @@ export default class Docs extends React.Component {
               <Link to="/slate" activeClassName="-selected" className="menuitem">Slate</Link>
               <Link to="/dropdown" activeClassName="-selected" className="menuitem">Dropdown</Link>
               <Link to="/modal" activeClassName="-selected" className="menuitem">Modal</Link>
+              <Link to="/steps" activeClassName="-selected" className="menuitem">Steps</Link>
             </nav>
 
             <nav className="list-group _spacer-large" role="menu">

styles/_main.scss

@@ -18,6 +18,7 @@
 @import "components/badge";
 @import "components/nav";
 @import "components/breadcrumbs";
+@import "components/steps";
 @import "components/list-group";
 @import "components/panel";
 @import "components/hero";

styles/components/_steps.scss

@@ -0,0 +1,47 @@
+.steps {
+  padding: 8px 15px;
+  list-style: none;
+  color: $brand-gray;
+  font-size: $small;
+
+  li {
+    position: relative;
+    display: inline-block;
+    margin: 0 1em;
+    width: 2em;
+    height: 2em;
+    padding: 2px 10px;
+    text-align: center;
+    background: $brand-gray-lt;
+    text-decoration: none;
+    border-radius: 1em;
+    border: $border-radius-base solid $brand-gray;
+  }
+
+  li > a { color: $brand-gray-dk; }
+
+  li::before{
+    content: '';
+    position: absolute;
+    top: 0.9em;
+    left: -4em;
+    width: 4em;
+    height: 0.2em;
+    background: $brand-gray;
+    z-index: -1;
+  }
+
+ .-active::before {
+    background: $brand-sky-dk;
+  }
+
+
+  li:first-child::before { display: none; }
+
+  .-active { background: $brand-sky-dk; }
+  .-active > a { color: $brand-white; }
+
+  .-complete { background: $brand-emerald; }
+  .-complete > a { color: $brand-white; }
+
+}