CHG: Split navigation.less

8 files changed, 145 insertions, 162 deletions

diff --git a/docs/components.html b/docs/components.html
index 994082c..4a18277 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1206,22 +1206,6 @@
                 </li>
               </ul>
             </div>
-            <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>
-                </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>
diff --git a/docs/css/docs.less b/docs/css/docs.less
index c167833..e5d0f12 100644
--- a/docs/css/docs.less
+++ b/docs/css/docs.less
@@ -124,21 +124,18 @@
   }
 
 }
+
 header {
   padding-top: 3rem;
 }
+
 .docs-content header > h3,
 .docs-content header > h4,
 .docs-content header > h5 {
   margin-top: 4rem;
   margin-bottom: 2rem;
 }
-.docs-content {
-  order: 2;
-}
-.docs-sidebar {
-  order: 1;
-}
+
 @media screen and (min-width: 480px) {
   .docs-sidebar {
     padding: 7rem 0;
diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css
index 97d1426..781227b 100644
--- a/docs/css/docs.min.css
+++ b/docs/css/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand{font-size:1.6rem;font-weight:500;padding-right:2rem;text-decoration:none;vertical-align:middle}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;margin-right:.2rem;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.notes{color:#666;margin:4rem 0}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}header{padding-top:3rem}.docs-content header>h3,.docs-content header>h4,.docs-content header>h5{margin-bottom:2rem;margin-top:4rem}.docs-content{-ms-flex-order:2;-webkit-order:2;order:2}.docs-sidebar{-ms-flex-order:1;-webkit-order:1;order:1}@media screen and (min-width:480px){.docs-sidebar{padding:7rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:5rem}}.docs-sidebar .docs-backtotop{bottom:5rem;display:none;padding:0 1rem;position:fixed;z-index:49}.docs-sidebar .docs-backtotop a{color:#666}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.1"}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#555;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#666;font-size:1.8rem;font-weight:400;margin-bottom:5rem}.grid-hero h2 u{border-bottom:.2rem solid #666;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#666;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.bg-grey{background-color:#f6f6f6;border-radius:.2rem;padding:1rem .5rem}.bg-dark{background:#2d3354;color:#fff;padding:1rem .5rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem .5rem}.navbar-brand{font-size:1.6rem;font-weight:500;padding-right:2rem;text-decoration:none;vertical-align:middle}.navbar-brand .icon{font-size:1.3333em;line-height:.8em;margin-right:.2rem;vertical-align:-20%}.grid-header .btn{color:#666}.grid-header .btn:active,.grid-header .btn:focus,.grid-header .btn:hover{color:#444;opacity:.75}.grid-header .navbar-brand{color:#444}.grid-footer{color:#888;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#666}.notes{color:#666;margin:4rem 0}.empty .icon{font-size:4rem}.code{color:#666}.code .com{color:#adadad}.code .tag{color:#4452c0}.code .atn{color:#666}.code .atv{color:#e06870}header{padding-top:3rem}.docs-content header>h3,.docs-content header>h4,.docs-content header>h5{margin-bottom:2rem;margin-top:4rem}@media screen and (min-width:480px){.docs-sidebar{padding:7rem 0}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:5rem}}.docs-sidebar .docs-backtotop{bottom:5rem;display:none;padding:0 1rem;position:fixed;z-index:49}.docs-sidebar .docs-backtotop a{color:#666}}
\ No newline at end of file
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
new file mode 100644
index 0000000..dc68e13
--- /dev/null
+++ b/src/breadcrumbs.less
@@ -0,0 +1,27 @@
+// Breadcrumbs
+.breadcrumb {
+  padding: 1.2rem;
+
+  .breadcrumb-item {
+    display: inline-block;
+    margin: 0;
+
+    a {
+      border: none;
+      text-decoration: none;
+    }
+    &:last-child {
+      &,
+      a {
+        color: lighten(@body-font-color, 30%);
+      }
+    }
+    &:not(:last-child) {
+      &::after {
+        color: @control-color;
+        content: "/";
+        padding: 0 .4rem;
+      }
+    }
+  }
+}
diff --git a/src/navigation.less b/src/navigation.less
index d4a815a..2115811 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -6,143 +6,8 @@
   list-style: none;
   margin: .5rem 0;
 }
-// Breadcrumbs
-.breadcrumb {
-  padding: 1.2rem;
 
-  .breadcrumb-item {
-    display: inline-block;
-    margin: 0;
-
-    a {
-      border: none;
-      text-decoration: none;
-    }
-    &:last-child {
-      &,
-      a {
-        color: lighten(@body-font-color, 30%);
-      }
-    }
-    &:not(:last-child) {
-      &::after {
-        color: @control-color;
-        content: "/";
-        padding: 0 .4rem;
-      }
-    }
-  }
-}
-
-// Tabs
-.tab {
-  border-bottom: .1rem solid @core-border-color;
-  display: flex;
-  flex-wrap: wrap;
-
-  .tab-item {
-    margin-top: 0;
-
-    a {
-      border-bottom: .2rem solid transparent;
-      color: @body-font-color;
-      display: block;
-      margin-bottom: -.1rem;
-      margin-top: 0;
-      padding: .8rem 1rem;
-      text-decoration: none;
-      &:focus,
-      &:hover {
-        color: @core-link-color;
-      }
-    }
-    &.active a,
-    a.active {
-      border-bottom-color: @core-color;
-      color: @core-link-color;
-    }
-  }
-
-  &.tab-block {
-    .tab-item {
-      flex: 1 0 auto;
-      text-align: center;
-
-      .badge {
-        &[data-badge]::after {
-          position: absolute;
-          right: -1.4rem;
-          top: 1rem;
-          transform: translate(-50%, -1rem);
-        }
-      }
-    }
-  }
-}
-
-// Pagination
-.pagination {
-  .page-item {
-    display: inline-block;
-
-    span {
-      display: inline-block;
-      padding: .6rem;
-    }
-
-    a {
-      border-radius: @border-radius;
-      color: lighten(@body-font-color, 20%);
-      padding: .6rem .8rem;
-      text-decoration: none;
-      &:focus,
-      &:hover {
-        color: @core-color;
-      }
-    }
-
-    &.active {
-      a {
-        background: @core-color;
-        color: @core-light-color;
-      }
-    }
-  }
-}
-
-// Nav
-.nav {
-  display: flex;
-  flex-direction: column;
-  
-  .nav-item {
-    a {
-      color: lighten(@body-font-color, 20%);
-      padding: .6rem .8rem;
-      text-decoration: none;
-      &:focus,
-      &:hover {
-        color: @core-color;
-      }
-    }
-    &.active {
-      & > a {
-        color: @body-font-color;
-        font-weight: bold;
-        &:focus,
-        &:hover {
-          color: @core-color;
-        }
-      }
-    }
-  }
-
-  & .nav {
-    margin-bottom: 1rem;
-    margin-left: 2rem;
-
-    a {
-      color: lighten(@body-font-color, 30%);
-    }
-  }
-}
+@import 'src/breadcrumbs.less';
+@import 'src/tabs.less';
+@import 'src/pagination.less';
+@import 'src/navs.less';
diff --git a/src/navs.less b/src/navs.less
new file mode 100644
index 0000000..6f3d099
--- /dev/null
+++ b/src/navs.less
@@ -0,0 +1,36 @@
+// Navs
+.nav {
+  display: flex;
+  flex-direction: column;
+
+  .nav-item {
+    a {
+      color: lighten(@body-font-color, 20%);
+      padding: .6rem .8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: @core-color;
+      }
+    }
+    &.active {
+      & > a {
+        color: @body-font-color;
+        font-weight: bold;
+        &:focus,
+        &:hover {
+          color: @core-color;
+        }
+      }
+    }
+  }
+
+  & .nav {
+    margin-bottom: 1rem;
+    margin-left: 2rem;
+
+    a {
+      color: lighten(@body-font-color, 30%);
+    }
+  }
+}
diff --git a/src/pagination.less b/src/pagination.less
new file mode 100644
index 0000000..3a21a82
--- /dev/null
+++ b/src/pagination.less
@@ -0,0 +1,29 @@
+// Pagination
+.pagination {
+  .page-item {
+    display: inline-block;
+
+    span {
+      display: inline-block;
+      padding: .6rem;
+    }
+
+    a {
+      border-radius: @border-radius;
+      color: lighten(@body-font-color, 20%);
+      padding: .6rem .8rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: @core-color;
+      }
+    }
+
+    &.active {
+      a {
+        background: @core-color;
+        color: @core-light-color;
+      }
+    }
+  }
+}
diff --git a/src/tabs.less b/src/tabs.less
new file mode 100644
index 0000000..ea005bb
--- /dev/null
+++ b/src/tabs.less
@@ -0,0 +1,45 @@
+// Tabs
+.tab {
+  border-bottom: .1rem solid @core-border-color;
+  display: flex;
+  flex-wrap: wrap;
+
+  .tab-item {
+    margin-top: 0;
+
+    a {
+      border-bottom: .2rem solid transparent;
+      color: @body-font-color;
+      display: block;
+      margin-bottom: -.1rem;
+      margin-top: 0;
+      padding: .8rem 1rem;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: @core-link-color;
+      }
+    }
+    &.active a,
+    a.active {
+      border-bottom-color: @core-color;
+      color: @core-link-color;
+    }
+  }
+
+  &.tab-block {
+    .tab-item {
+      flex: 1 0 auto;
+      text-align: center;
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: -1.4rem;
+          top: 1rem;
+          transform: translate(-50%, -1rem);
+        }
+      }
+    }
+  }
+}