Fix incorrect fallback reveal position. Add box shadow as a pseudo-element (thanks...

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 3be68720826bcddaf09c5bc692c620fedb94e2f7..c61cc4887ddb1dd57a7e1a92688f26d6d2eeb293 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -52,13 +52,13 @@ class OffCanvas {
       .attr('aria-expanded', 'false')
       .attr('aria-controls', id);
 
-    // Add a close trigger over the body if necessary
+    // Add an overlay over the content if necessary
     if (this.options.contentOverlay) {
-      if ($('.js-off-canvas-exit').length) {
-        this.$overlay = $('.js-off-canvas-exit');
+      if ($('.js-off-canvas-overlay').length) {
+        this.$overlay = $('.js-off-canvas-overlay');
       } else {
         var overlay = document.createElement('div');
-        overlay.setAttribute('class', 'js-off-canvas-exit');
+        overlay.setAttribute('class', 'js-off-canvas-overlay');
         $('[data-off-canvas-content]').append(overlay);
 
         this.$overlay = $(overlay);

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index c9cb7b75c8c5e04ee39b036945d5a4819dad597e..27115e83867882ba9b8312782398249e90081d2c 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -20,7 +20,7 @@ $offcanvas-background: $light-gray !default;
 
 /// Box shadow for the off-canvas panel.
 /// @type Shadow
-$offcanvas-shadow: 0 0 10px rgba($black, 0.5) !default;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
 
 /// If `true`, an off-canvas panel will be fixed-position, and scroll with the screen. Otherwise it will be absolute positioned.
 /// @type Bool
@@ -78,8 +78,8 @@ $maincontent-background: $body-background !default;
     overflow: hidden;
   }
 
-  // Click-to-exit overlay (generated by JavaScript)
-  .js-off-canvas-exit {
+  // Off-canvas overlay (generated by JavaScript)
+  .js-off-canvas-overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -129,11 +129,6 @@ $maincontent-background: $body-background !default;
 
   background: $background;
 
-  // Push only styles.
-  &.is-transition-push {
-    box-shadow: inset $offcanvas-shadow;
-  }
-
   // Overlap only styles.
   &.is-transition-overlap {
     z-index: $offcanvas-overlap-zindex;
@@ -216,6 +211,46 @@ $maincontent-background: $body-background !default;
     }
   }
 
+  // If $offcanvas-shadow is set, add it as a pseudo-element.
+  // 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 $position == left {
+        top: 0;
+        right: 0;
+
+        height: 100%;
+        width: 1px;
+      }
+      @else if $position == right {
+        top: 0;
+        left: 0;
+
+        height: 100%;
+        width: 1px;
+      }
+      @else if $position == top {
+        bottom: 0;
+        left: 0;
+
+        height: 1px;
+        width: 100%;
+      }
+      @else if $position == bottom {
+        top: 0;
+        left: 0;
+
+        height: 1px;
+        width: 100%;
+      }
+
+      box-shadow: $offcanvas-shadow;
+      content: " ";
+    }
+  }
+
   // No transform on overlap transition
   &.is-transition-overlap.is-open ~ .#{$maincontent-class} {
     transform: none;
@@ -240,10 +275,9 @@ $content: $maincontent-class
 ) {
   transform: none;
   z-index: $zindex;
-  visibility: visible;
 
   @if not $offcanvas-fixed-reveal {
-    position: relative;
+    position: absolute;
   }
 
   & ~ .#{$content} {