From: SassNinja <kai.falkowski@gmail.com>
Date: Wed, 24 May 2017 09:59:30 +0000 (+0200)
Subject: Replace off-canvas shadow for push panel with inner box shadow
X-Git-Tag: v6.4.0-rc5~9^2~18
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0130a3fdec4cc08f1bb236e05386790b157a697f;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 7c8c23d65..c3c5ad77e 100644
--- 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 6773bb79f..58af833bd 100644
--- 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 097bcce7a..c80b07302 100644
--- 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 a0747b3bd..d7829ebbc 100644
--- 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);