Add Off-screen experimental code

5 files changed, 95 insertions, 7 deletions

diff --git a/src/_buttons.scss b/src/_buttons.scss
index 0c9540d..1860ed8 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -96,7 +96,7 @@
   &.btn-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg $control-padding-h * 1.5;
+    padding: $control-padding-v-lg $control-padding-h * 1.25;
   }
 
   // Button Block
diff --git a/src/_off-canvas.scss b/src/_off-canvas.scss
new file mode 100644
index 0000000..ef8603e
--- /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-btn {
+      background: rgba($dark-color, .1);
+      border-color: transparent;
+      bottom: 0;
+      border-radius: 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-md) {
+  .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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/_parallax.scss b/src/_parallax.scss
index fcde262..da101bf 100644
--- a/src/_parallax.scss
+++ b/src/_parallax.scss
@@ -1,9 +1,9 @@
 // Parallax
-$parallax-deg: 3deg;
-$parallax-offset: 4.5px;
-$parallax-offset-z: 50px;
-$parallax-perspective: 1000px;
-$parallax-scale: .95;
+$parallax-deg: 3deg !default;
+$parallax-offset: 4.5px !default;
+$parallax-offset-z: 50px !default;
+$parallax-perspective: 1000px !default;
+$parallax-scale: .95 !default;
 
 // Mixin: Parallax direction
 @mixin parallax-dir() {
diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss
index c83b1a3..e0de331 100644
--- a/src/spectre-exp.scss
+++ b/src/spectre-exp.scss
@@ -1,5 +1,4 @@
 /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
-
 // Core variables and mixins
 @import "variables";
 @import "mixins";
@@ -10,6 +9,7 @@
 @import "comparison-sliders";
 @import "filters";
 @import "meters";
+@import "off-canvas";
 @import "parallax";
 @import "progress";
 @import "sliders";
diff --git a/src/utilities/_position.scss b/src/utilities/_position.scss
index 1f4c5e8..97407d8 100644
--- a/src/utilities/_position.scss
+++ b/src/utilities/_position.scss
@@ -30,6 +30,12 @@
   margin-right: auto;
 }
 
+.flex-centered {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
 // Spacing
 @include margin-variant(0, 0);