ADD: Nav for vertical list

Author: picturepan2

dist/spectre.css

@@ -2009,7 +2009,8 @@ textarea.form-input {
 }
 .breadcrumb,
 .tab,
-.pagination {
+.pagination,
+.nav {
   list-style: none;
   margin: .5rem 0;
 }
@@ -2086,18 +2087,45 @@ textarea.form-input {
 .pagination .page-item a {
   border-radius: .2rem;
   color: #333;
-  display: inline-block;
   padding: .6rem .8rem;
   text-decoration: none;
 }
 .pagination .page-item a:focus,
 .pagination .page-item a:hover {
+  background: #eff1fa;
   color: #5764c6;
 }
 .pagination .page-item.active a {
   background: #5764c6;
   color: #fff;
 }
+.nav {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.nav .nav-item a {
+  border-radius: .2rem;
+  color: #333;
+  padding: .6rem .8rem;
+  text-decoration: none;
+}
+.nav .nav-item a:focus,
+.nav .nav-item a:hover {
+  color: #5764c6;
+}
+.nav .nav-item.active a {
+  color: #5764c6;
+}
+.nav .nav {
+  margin-left: 2rem;
+}
+.nav .nav a {
+  color: #808080;
+}
 .modal {
   -webkit-align-items: center;
   align-items: center;

dist/spectre.min.css

@@ -2241,7 +2241,7 @@ <h6>Korean</h6>
         <section id="navigation" class="container grid-960">
             <header class="text-center"><h4>navigation</h4></header>
             <section class="notes">
-                <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs and pagination.</p>
+                <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and nav.</p>
             </section>
             <header id="breadcrumbs" class="text-center"><h5>breadcrumbs</h5></header>
             <div class="columns">
@@ -2518,6 +2518,44 @@ <h6>Korean</h6>
 &lt;<span class="tag">/ul</span>&gt;
 </pre>
 
+            <header id="nav" class="text-center"><h5>nav</h5></header>
+            <div class="columns">
+                <div class="column col-6 col-xs-12">
+                    <ul class="nav">
+                        <li class="nav-item">
+                            <a href="#nav">Elements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#nav"><strong>Layout</strong></a>
+                            <ul class="nav">
+                                <li class="nav-item">
+                                    <a href="#nav">flexbox-grid</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#nav">responsive</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#nav">navbar</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#nav">empty states</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#nav">Components</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#nav">Utilities</a>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+            <section class="notes">
+                <p>Add a container element with the class <code>nav</code>. And add child elements with the classname <code>nav-item</code>. The <code>nav-item</code> with the class <code>active</code> will be highlighted.</p>
+            </section>
+
         </section>
 
         <section id="modals" class="container grid-960">

index.html

@@ -1,7 +1,8 @@
 // Navigation
 .breadcrumb,
 .tab,
-.pagination {
+.pagination,
+.nav {
   list-style: none;
   margin: .5rem 0;
 }
@@ -91,11 +92,11 @@
     a {
       border-radius: @border-radius;
       color: @body-font-color;
-      display: inline-block;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
+        background: @core-secondary-color;
         color: @core-color;
       }
     }
@@ -108,3 +109,34 @@
     }
   }
 }
+
+// Nav
+.nav {
+  display: flex;
+  flex-direction: column;
+
+  .nav-item {
+    a {
+      border-radius: @border-radius;
+      color: @body-font-color;
+      padding: .6rem .8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: @core-color;
+      }
+    }
+    &.active {
+      a {
+        color: @core-color;
+      }
+    }
+  }
+
+  & .nav {
+    margin-left: 2rem;
+    a {
+      color: lighten(@body-font-color, 30%);
+    }
+  }
+}