Rewrite Off-canvas component and update the Docs

2 files changed, 20 insertions, 20 deletions

diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss
index 8364bff..52c4e55 100644
--- a/src/_off-canvas.scss
+++ b/src/_off-canvas.scss
@@ -1,51 +1,51 @@
 // Off canvas menus
+$off-canvas-breakpoint: 960px;
+
 .off-canvas {
   display: flex;
+  flex-flow: nowrap;
   height: 100%;
-  left: 0;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
+  min-height: 100vh;
+  position: relative;
   width: 100%;
 
   .off-canvas-sidebar {
     background: $bg-color;
-    height: 100%;
+    bottom: 0;
     left: 0;
-    padding: $layout-spacing-lg;
-    position: absolute;
+    min-width: 10rem;
+    overflow-y: auto;
+    position: fixed;
     top: 0;
     transform: translateX(-100%);
     transition: transform .25s ease;
-    width: 10rem;
     z-index: $zindex-3;
   }
 
   .off-canvas-content {
     flex: 1 1 auto;
-    overflow-y: auto;
+    height: 100%;
     padding: $layout-spacing-lg $layout-spacing-lg $layout-spacing-lg 4rem;
   }
 
-  .off-canvas-checkbox {
-    &:checked ~ .off-canvas-sidebar {
+  .off-canvas-sidebar {
+    &:target {
       transform: translateX(0);
     }
 
-    &:checked ~ .off-canvas-toggle {
+    &:target ~ .off-canvas-overlay {
       background: rgba($dark-color, .1);
       border-color: transparent;
       border-radius: 0;
       bottom: 0;
+      display: block;
       height: 100%;
       left: 0;
+      position: fixed;
       right: 0;
       top: 0;
       width: 100%;
-
-      .icon {
-        display: none;
-      }
+      z-index: $zindex-2;
     }
   }
 
@@ -63,12 +63,12 @@
 }
 
 // Responsive layout
-@media (min-width: $size-lg) {
+@media (min-width: $off-canvas-breakpoint) {
   .off-canvas {
     .off-canvas-sidebar {
       flex: 0 0 auto;
-      position: static;
-      transform: translateX(0);
+      position: relative;
+      transform: none;
     }
 
     .off-canvas-content {
diff --git a/src/_variables.scss b/src/_variables.scss
index be56711..f7fa86a 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,5 +1,5 @@
 // Core variables
-$version: "0.4.4";
+$version: "0.4.5";
 
 // Core colors
 $primary-color: #5755d9 !default;