Replace off-canvas shadow for push panel with inner box shadow

Using a pseudo ::after element for the off-canvas push panel shadow causes issues if the element's content height is greater than the element's height.
Therefore I've added two additional variables for the push panel and use it to create an inner box shadow.

diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md
index 7c8c23d650ae13b240218ef8f3fcf87f2a80d8c7..c3c5ad77ec5685d92f2145bf712456d6e172d205 100644 (file)
--- a/docs/pages/off-canvas.md
+++ b/docs/pages/off-canvas.md
@@ -368,6 +368,17 @@ So there are three ways to place the off-canvas element now:
 
 ---
 
+## Migrating from versions prior to v6.4
+
+If you're upgrading from v6.3 there's nothing to do unless you haven't changed the default value of `$offcanvas-shadow`. Prior to v6.4 this variable was used for both, overlap and push off-canvas elements. Now it's only used for the overlap element whereas the push element uses two new variables:
+
+- `$offcanvas-inner-shadow-size` which is a number (mostly px)
+- `$offcanvas-inner-shadow-color` which is a color (mostly rgba)
+
+So if you have changed the default off-canvas shadow you have to adjust the value of these variables in your settings.
+
+---
+
 ## Migrating from versions prior to v6.3
 
 <div class="primary callout">

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 6773bb79f31914541527108102b87795ec688ad5..58af833bd3762dc052d80b3dfab415aaf7dfcc1a 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -18,10 +18,18 @@ $offcanvas-vertical-size: 250px !default;
 /// @type Color
 $offcanvas-background: $light-gray !default;
 
-/// Box shadow for the off-canvas panel.
+/// Box shadow for the off-canvas overlap panel.
 /// @type Shadow
 $offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
 
+/// Inner box shadow size for the off-canvas push panel.
+/// @type Number
+$offcanvas-inner-shadow-size: 20px !default;
+
+/// Inner box shadow color for the off-canvas push panel.
+/// @type Color
+$offcanvas-inner-shadow-color: rgba($black, 0.25) !default;
+
 /// Z-index of an off-canvas content overlay.
 /// @type Number
 $offcanvas-overlay-zindex: 1 !default;
@@ -256,66 +264,23 @@ $maincontent-class: 'off-canvas-content' !default;
     }
   }
 
-  // If $offcanvas-shadow is set, add it as a pseudo-element.
+  // If $offcanvas-inner-shadow-size is set, add inner box-shadow.
   // This mimics the off-canvas panel having a lower z-index, without having to have one.
-  @if $offcanvas-shadow {
-    &.is-transition-push::after {
-      position: absolute;
-
+  @if $offcanvas-inner-shadow-size {
+    &.is-transition-push {
       @if $position == left {
-        top: 0;
-        right: 0;
-
-        height: 100%;
-        width: 1px;
+        @include inner-side-shadow(right, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
       }
       @else if $position == right {
-        top: 0;
-        left: 0;
-
-        height: 100%;
-        width: 1px;
+        @include inner-side-shadow(left, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
       }
       @else if $position == top {
-        bottom: 0;
-        left: 0;
-
-        height: 1px;
-        width: 100%;
+        @include inner-side-shadow(bottom, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
       }
       @else if $position == bottom {
-        top: 0;
-        left: 0;
-
-        height: 1px;
-        width: 100%;
+        @include inner-side-shadow(top, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
       }
-
-      box-shadow: $offcanvas-shadow;
-      content: " ";
-    }
-
-    // Use inner box-shadow for nested off-canvas element because ::after doesn't work if the element's height is greater than the viewport's height
-    // TODO: after cross-broswer testing, adapt this for EVERY push element no matter if nested or not
-    @at-root .#{$maincontent-class} &.is-transition-push {
-      @if $position == left {
-        @include inner-side-shadow(right);
-      }
-      @else if $position == right {
-        @include inner-side-shadow(left);
-      }
-      @else if $position == top {
-        @include inner-side-shadow(bottom);
-      }
-      @else if $position == bottom {
-        @include inner-side-shadow(top);
-      }
-
-      &::after {
-        width: 0;
-        box-shadow: none;
-      }
-    }
+    }    
   }
 
   // No transform on overlap transition

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 097bcce7aa09508ccb11b3fc5cec165aa561d7c0..c80b073025574ce46a8d2115e7d730d7a60ed3bd 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -440,6 +440,8 @@ $offcanvas-size: 250px;
 $offcanvas-vertical-size: 250px;
 $offcanvas-background: $light-gray;
 $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-inner-shadow-size: 20px;
+$offcanvas-inner-shadow-color: rgba($black, 0.25);
 $offcanvas-push-zindex: 1;
 $offcanvas-overlap-zindex: 10;
 $offcanvas-reveal-zindex: 1;

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index a0747b3bdd54192ae78ced9e1c4fcf2a445ff1d8..d7829ebbca3355d365d312f956880cc9bd30cbde 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -13,8 +13,8 @@
 /// @param {Color} $color - Color of the shadow.
 @mixin inner-side-shadow(
   $side: bottom,
-  $size: 15px,
-  $color: rgba(#000, 0.25)
+  $size: 20px,
+  $color: rgba($black, 0.25)
 ) {
 
   $helper: round($size * 0.65);