Replace off-canvas size number with map & include breakpoints for medium

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 37a9d4380e2e3a0017fce7d9667c11af9125b0a2..6f782d1ebce8716687844e3d4658f5c2be419b46 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -6,13 +6,27 @@
 /// @group off-canvas
 ////
 
-/// Width of a left/right off-canvas panel.
-/// @type Number
-$offcanvas-size: 250px !default;
+/// Deprecated settings warning
+@if variable-exists(offcanvas-size) {
+  @warn '$offcanvas-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-sizes instead';
+}
+@if variable-exists(offcanvas-vertical-size) {
+  @warn '$offcanvas-vertical-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-vertical-sizes instead';
+}
 
-/// Height of a top/bottom off-canvas panel.
-/// @type Number
-$offcanvas-vertical-size: 250px !default;
+/// Width map of a left/right off-canvas panel.
+/// @type Map
+$offcanvas-sizes: (
+  small: 250px,
+  medium: 350px,
+) !default;
+
+/// Height map of a top/bottom off-canvas panel.
+/// @type Map
+$offcanvas-vertical-sizes: (
+  small: 250px,
+  medium: 350px,
+) !default;
 
 /// Background color of an off-canvas panel.
 /// @type Color
@@ -175,20 +189,30 @@ $maincontent-class: 'off-canvas-content' !default;
 @mixin off-canvas-position(
   $position: left,
   $orientation: horizontal,
-  $size: if($orientation == horizontal, $offcanvas-size, $offcanvas-vertical-size)
+  $sizes: if($orientation == horizontal, $offcanvas-sizes, $offcanvas-vertical-sizes)
 ) {
   @if $position == left {
     top: 0;
     left: 0;
-    width: $size;
+    width: map-get($sizes, small);
     height: 100%;
 
-    transform: translateX(-$size);
+    transform: translateX(-(map-get($sizes, small)));
     overflow-y: auto;
+
+    @include breakpoint(medium) {
+      width: map-get($sizes, medium);
+      transform: translateX(-(map-get($sizes, medium)));
+    }
     
     // Sets the position for nested off-canvas element
     @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
-      transform: translateX(-$size);
+      transform: translateX(-(map-get($sizes, small)));
+
+      @include breakpoint(medium) {
+        transform: translateX(-(map-get($sizes, medium)));
+      }
+
       &.is-transition-overlap.is-open {
         transform: translate(0, 0);
       }
@@ -197,22 +221,35 @@ $maincontent-class: 'off-canvas-content' !default;
     // Sets the open position for the content
     @at-root .#{$maincontent-class}.is-open-#{$position} {
       &.has-transition-push {
-        transform: translateX($size);
+        transform: translateX(map-get($sizes, small));
+        @include breakpoint(medium) {
+          transform: translateX(map-get($sizes, medium));
+        }
       }
     }
   }
   @else if $position == right {
     top: 0;
     right: 0;
-    width: $size;
+    width: map-get($sizes, small);
     height: 100%;
 
-    transform: translateX($size);
+    transform: translateX(map-get($sizes, small));
     overflow-y: auto;
+
+    @include breakpoint(medium) {
+      width: map-get($sizes, medium);
+      transform: translateX(map-get($sizes, medium));
+    }
     
     // Sets the position for nested off-canvas element
     @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
-      transform: translateX($size);
+      transform: translateX(map-get($sizes, small));
+
+      @include breakpoint(medium) {
+        transform: translateX(map-get($sizes, medium));
+      }
+
       &.is-transition-overlap.is-open {
         transform: translate(0, 0);
       }
@@ -221,23 +258,35 @@ $maincontent-class: 'off-canvas-content' !default;
     // Sets the open position for the content
     @at-root .#{$maincontent-class}.is-open-#{$position} {
       &.has-transition-push {
-        transform: translateX(-$size);
+        transform: translateX(-(map-get($sizes, small)));
+        @include breakpoint(medium) {
+          transform: translateX(-(map-get($sizes, medium)));
+        }
       }
     }
   }
   @else if $position == top {
     top: 0;
     left: 0;
-
     width: 100%;
-    height: $size;
+    height: map-get($sizes, small);
 
-    transform: translateY(-$size);
+    transform: translateY(-(map-get($sizes, small)));
     overflow-x: auto;
+
+    @include breakpoint(medium) {
+      height: map-get($sizes, medium);
+      transform: translateY(-(map-get($sizes, medium)));
+    }
     
     // Sets the position for nested off-canvas element
     @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
-      transform: translateY(-$size);
+      transform: translateY(-(map-get($sizes, small)));
+
+      @include breakpoint(medium) {
+        transform: translateY(-(map-get($sizes, medium)));
+      }
+
       &.is-transition-overlap.is-open {
         transform: translate(0, 0);
       }
@@ -246,23 +295,35 @@ $maincontent-class: 'off-canvas-content' !default;
     // Sets the open position for the content
     @at-root .#{$maincontent-class}.is-open-#{$position} {
       &.has-transition-push {
-        transform: translateY($size);
+        transform: translateY(map-get($sizes, small));
+        @include breakpoint(medium) {
+          transform: translateY(map-get($sizes, medium));
+        }
       }
     }
   }
   @else if $position == bottom {
     bottom: 0;
     left: 0;
-
     width: 100%;
-    height: $size;
+    height: map-get($sizes, small);
 
-    transform: translateY($size);
+    transform: translateY(map-get($sizes, small));
     overflow-x: auto;
+
+    @include breakpoint(medium) {
+      height: map-get($sizes, medium);
+      transform: translateY(map-get($sizes, medium));
+    }
     
     // Sets the position for nested off-canvas element
     @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
-      transform: translateY($size);
+      transform: translateY(map-get($sizes, small));
+
+      @include breakpoint(medium) {
+        transform: translateY(map-get($sizes, medium));
+      }
+
       &.is-transition-overlap.is-open {
         transform: translate(0, 0);
       }
@@ -271,7 +332,10 @@ $maincontent-class: 'off-canvas-content' !default;
     // Sets the open position for the content
     @at-root .#{$maincontent-class}.is-open-#{$position} {
       &.has-transition-push {
-        transform: translateY(-$size);
+        transform: translateY(-(map-get($sizes, small)));
+        @include breakpoint(medium) {
+          transform: translateY(-(map-get($sizes, medium)));
+        }
       }
     }
   }
@@ -339,12 +403,18 @@ $content: $maincontent-class
   }
 
   @at-root .#{$content}.has-reveal-#{$position} {
-    margin-#{$position}: $offcanvas-size;
+    margin-#{$position}: map-get($offcanvas-sizes, small);
+    @include breakpoint(medium) {
+      margin-#{$position}: map-get($offcanvas-sizes, medium);
+    }
   }
 
   // backwards compatibility (prior to v6.4)
   & ~ .#{$content} {
-    margin-#{$position}: $offcanvas-size;
+    margin-#{$position}: map-get($offcanvas-sizes, small);
+    @include breakpoint(medium) {
+      margin-#{$position}: map-get($offcanvas-sizes, medium);
+    }
   }
 }
 

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index b67ff00cdc93635b2e0f23fdb17d6ee1d7751004..cc464165497fad34b613a44716289dea6c6a128e 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -491,8 +491,14 @@ $meter-fill-bad: $alert-color;
 // 25. Off-canvas
 // --------------
 
-$offcanvas-size: 250px;
-$offcanvas-vertical-size: 250px;
+$offcanvas-sizes: (
+  small: 250px,
+  medium: 350px,
+);
+$offcanvas-vertical-sizes: (
+  small: 250px,
+  medium: 350px,
+);
 $offcanvas-background: $light-gray;
 $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
 $offcanvas-inner-shadow-size: 20px;