Create inner side shadow (incl. mixin) for nested push off-canvas element

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 9ebf2c4b6353c258489e6c3969999ce91025f20b..6390aa4a9c7b903a7043b365a8d30aabfc4699aa 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -294,6 +294,28 @@ $maincontent-class: 'off-canvas-content' !default;
       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
@@ -339,6 +361,7 @@ $content: $maincontent-class
   transform: none !important;
   visibility: visible !important;
   height: auto !important;
+  box-shadow: none !important;
   position: static;
   background: inherit;
   width: inherit;

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index 60585ca693a702edf0eb214303df84a8956a52e8..a0747b3bdd54192ae78ced9e1c4fcf2a445ff1d8 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -6,6 +6,33 @@
 /// @group functions
 ////
 
+/// Creates an inner box-shadow for only one side
+/// 
+/// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.
+/// @param {Number} $size - Width for the target side.
+/// @param {Color} $color - Color of the shadow.
+@mixin inner-side-shadow(
+  $side: bottom,
+  $size: 15px,
+  $color: rgba(#000, 0.25)
+) {
+
+  $helper: round($size * 0.65);
+
+  @if ($side == top) {
+    box-shadow: inset 0 $helper $size (-1)*$helper $color;
+  }
+  @elseif ($side == left) {
+    box-shadow: inset $helper 0 $size (-1)*$helper $color;
+  }
+  @elseif ($side == right) {
+    box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;
+  }
+  @elseif ($side == bottom) {
+    box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;
+  }
+}
+
 /// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
 ///
 /// @param {Number} $triangle-size - Width of the triangle.