Merge pull request #287 from picturepan2/0.4.2 v0.4.2

0.4.2

1 files changed, 82 insertions, 0 deletions

diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss
new file mode 100644
index 0000000..8364bff
--- /dev/null
+++ b/src/_off-canvas.scss
@@ -0,0 +1,82 @@
+// Off canvas menus
+.off-canvas {
+  display: flex;
+  height: 100%;
+  left: 0;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  width: 100%;
+
+  .off-canvas-sidebar {
+    background: $bg-color;
+    height: 100%;
+    left: 0;
+    padding: $layout-spacing-lg;
+    position: absolute;
+    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;
+    padding: $layout-spacing-lg $layout-spacing-lg $layout-spacing-lg 4rem;
+  }
+
+  .off-canvas-checkbox {
+    &:checked ~ .off-canvas-sidebar {
+      transform: translateX(0);
+    }
+
+    &:checked ~ .off-canvas-toggle {
+      background: rgba($dark-color, .1);
+      border-color: transparent;
+      border-radius: 0;
+      bottom: 0;
+      height: 100%;
+      left: 0;
+      right: 0;
+      top: 0;
+      width: 100%;
+
+      .icon {
+        display: none;
+      }
+    }
+  }
+
+  .off-canvas-toggle {
+    display: block;
+    left: $layout-spacing-lg;
+    padding-left: 0;
+    padding-right: 0;
+    position: absolute;
+    top: $layout-spacing-lg;
+    transition: none;
+    width: $control-size-lg;
+    z-index: $zindex-2;
+  }
+}
+
+// Responsive layout
+@media (min-width: $size-lg) {
+  .off-canvas {
+    .off-canvas-sidebar {
+      flex: 0 0 auto;
+      position: static;
+      transform: translateX(0);
+    }
+
+    .off-canvas-content {
+      padding-left: $layout-spacing-lg;
+    }
+
+    .off-canvas-toggle {
+      display: none;
+    }
+  }
+}