From: SassNinja <kai.falkowski@gmail.com>
Date: Tue, 16 May 2017 13:35:06 +0000 (+0200)
Subject: Create inner side shadow (incl. mixin) for nested push off-canvas element
X-Git-Tag: v6.4.0-rc5~9^2~24
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=24dd7c29b482d89995fe4640f07eb2ed35cab4de;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 9ebf2c4b6..6390aa4a9 100644
--- 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 60585ca69..a0747b3bd 100644
--- 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.