Rewrite Off-canvas component and update the Docs

1 files changed, 85 insertions, 137 deletions

diff --git a/docs/src/docs.scss b/docs/src/docs.scss
index 6a19281..64f2e95 100644
--- a/docs/src/docs.scss
+++ b/docs/src/docs.scss
@@ -7,36 +7,54 @@
   content: "#{$version}";
 }
 
-/* Spectre New Docs */
-.s-container {
-  & > .columns {
-    flex-flow: nowrap;
-    min-height: 100vh;
+.off-canvas {
+  .off-canvas-toggle {
+    font-size: 1rem;
+    left: 1.5rem;
+    position: fixed;
+    top: 1rem;
+  }
+
+  .off-canvas-sidebar {
+    width: 12rem;
+  }
+
+  .off-canvas-content {
+    padding: 0 4rem;
   }
 }
 
-.s-sidebar {
-  background: $bg-color;
-  flex: 0 0 auto;
-  padding: 1.5rem 0 1.5rem 1.5rem;
-  width: 12rem;
+.docs-navbar {
+  height: 3.8rem;
+  right: 0;
+  position: fixed;
+  top: 0;
+  z-index: $zindex-2;
+
+  .btn {
+    position: absolute;
+    right: 1.5rem;
+    top: 1rem;
+  }
+}
 
-  .s-nav {
+.docs-sidebar {
+  .docs-nav {
     bottom: 1.5rem;
-    overflow-y: auto; 
+    overflow-y: auto;
+    padding: .5rem 1.5rem;
     position: fixed;
-    top: 5rem;
-    width: 10.5rem;
+    top: 3.5rem;
+    width: 12rem;
   }
 
   .accordion {
-    font-size: .7rem;
     margin-bottom: .75rem;
 
     input {
       & ~ .accordion-header {
         color: lighten($dark-color, 10%);
-        font-size: .6rem;
+        font-size: .65rem;
         font-weight: 600;
         text-transform: uppercase;
       }
@@ -50,6 +68,7 @@
 
     .menu {
       .menu-item {
+        font-size: .7rem;
         padding-left: 1rem;
         
         & > a {
@@ -62,13 +81,13 @@
   }
 }
 
-.s-content {
+.docs-content {
   flex: 1 1 auto;
-  max-width: 960px;
-  padding: 0 4rem;
   width: calc(100vw - 12rem);
 
   & > .container {
+    margin-left: 0;
+    max-width: 800px;
     padding-bottom: 1.5rem;
   }
 
@@ -93,16 +112,17 @@
   
   .s-title,
   .s-subtitle {
-    line-height: 1.6rem;
+    color: darken($dark-color, 2%);
+    line-height: 1.8rem;
     margin-bottom: 0;
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     position: static;
 
     @supports (position: sticky) {
       position: sticky;
       top: 0;
-      z-index: $zindex-2;
+      z-index: $zindex-1;
 
       &::before {
         background: $light-color;      
@@ -267,14 +287,13 @@
   }
 }
 
-.s-brand {
+.docs-brand {
   color: $primary-color;
-  left: 0;
-  padding: 0 1.5rem;
+  left: 1.5rem;
   position: fixed;
-  top: 1.3rem;
+  top: .85rem;
 
-  .s-logo {
+  .docs-logo {
     align-items: center;
     border-radius: $border-radius;
     display: inline-flex;
@@ -295,7 +314,7 @@
   
     h2 {
       display: inline;
-      font-size: .8rem;
+      font-size: .9rem;
       font-weight: 500;
       margin-bottom: 0;
       margin-left: .5rem;
@@ -304,7 +323,7 @@
   }
 }
 
-.s-footer {
+.docs-footer {
   color: $gray-color;
   padding: .5rem .5rem 1.5rem .5rem;
 
@@ -406,60 +425,22 @@
   }
 }
 
-.docs-nav-clear {
-  display: none;
-}
-
-.s-navbar {
-  height: 3.5rem;
-  left: 0;
-  padding: .85rem 1.5rem;
-  position: fixed;
-  text-align: center;
-  z-index: $zindex-4;
-
-  .s-logo,
-  .menu-btn {
-    display: none;
-  }
-
-  .float-btn {
-    position: fixed;
-    right: 4rem;
-    top: 1.4rem;
-  }
-}
-
-@media (max-width: 880px) {
-  .s-sidebar {
-    background: $bg-color;
-    bottom: 0;
-    overflow-y: auto;
-    padding: 3rem 1.5rem;
-    position: fixed;
-    left: 0;
-    top: 0;
-    transform: translateX(-100%);
-    transition: transform .2s ease;
-    z-index: 400;
-
-    &:target {
-      transform: translateX(0);
-      transition: transform .2s ease;
-
-      & + .docs-nav-clear {
-        display: block;
-      }
+@media (max-width: 960px) {
+  .off-canvas {
+    .off-canvas-toggle {
+      z-index: $zindex-3; 
     }
+  }
 
-    .s-brand {
-      margin-top: -1.7rem;
+  .docs-sidebar {
+    .docs-brand {
+      margin: .85rem 1.5rem;
       padding: 0;
       position: static;
     }
 
-    .s-nav {
-      margin-top: 2rem;
+    .docs-nav {
+      margin-top: 1rem;
       position: static;
     }
 
@@ -468,59 +449,22 @@
     }
   }
 
-  .s-navbar {
-    backdrop-filter: blur(10px);
-    background: rgba($bg-color-light, .65);
-    right: 0;
-    top: 0;
-    z-index: $zindex-2;
-
-    .menu-btn {
-      display: block;
-      left: 2.6rem;
-      position: fixed;
-      top: .85rem;
-
-      .btn {
-        font-size: 1rem;
-      }
-    }
-
-    .s-logo {
-      align-items: center;
-      border-radius: $border-radius;
-      display: inline-flex;
-      height: 2rem;
-      padding: .2rem;
-      width: auto;
-    }
-
-    .float-btn {
-      right: 2.9rem;
-      top: .85rem;
-    }
-  }
-
-  .docs-nav-clear {
-    background: rgba(0, 0, 0, .15);
-    display: none;
-    height: 100%;
+  .docs-navbar {
+    backdrop-filter: blur(5px);
+    background: rgba($bg-color, .65);
     left: 0;
-    right: 0;
-    top: 0;
-    position: fixed;
-    width: 100%;
-    z-index: $zindex-3;
   }
 
-  .s-content {
-    min-width: auto;
-    padding: 0 2.5rem;
-    width: 100%;
+  .docs-content {
+    &.off-canvas-content {
+      min-width: auto;
+      padding: 0 1.5rem;
+      width: 100%;
+    }
 
     .s-title,
     .s-subtitle {
-      padding-top: 4rem;
+      padding-top: 5rem;
       position: static;
 
       &::before {
@@ -561,9 +505,23 @@
       padding: 0;
     }
   }
+  
+  .off-canvas {
+    .off-canvas-toggle {
+      left: .5rem;
+    }
+  }
 
-  .s-content {
-    padding: 3.5rem .5rem 0 .5rem;
+  .docs-navbar {
+    .btn {
+      right: 1rem;
+    }
+  }
+
+  .docs-content {
+    &.off-canvas-content {
+      padding: 0 .5rem;
+    }
 
     .docs-block {
       padding: $unit-2 $unit-h;
@@ -573,14 +531,4 @@
       display: none;
     }
   }
-
-  .s-navbar {
-    .menu-btn {
-      left: .65rem;
-    }
-
-    .float-btn {
-      right: 1rem;
-    }
-  }
 }
\ No newline at end of file