Add $wrapperInner (prior v6.3) detection + a CSS fix

Regarding the off-canvas docs setup, a detection of the prior off-canvas wrapper inner is necessary.
Besides I'm fixing some specificity issue caused by _page.scss (foundation-docs)

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 77cdc4ec50e28039f0d7f78bbb6656899e7c1f01..5586436ad9db557078f6d0cb69be59137abd507d 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -30,6 +30,7 @@ class OffCanvas extends Plugin {
     this.$lastTrigger = $();
     this.$triggers = $();
     this.position = 'left';
+    this.$wrapperInner = $(); // prior v6.3
     this.$content = $();
     this.nested = !!(this.options.nested);
 
@@ -54,19 +55,31 @@ class OffCanvas extends Plugin {
     var id = this.$element.attr('id');
 
     this.$element.attr('aria-hidden', 'true');
+      
+    this.$wrapperInner = this.$element.parent('[data-off-canvas-wrapper]'); // prior v6.3
 
     // Find off-canvas content, either by ID (if specified), by siblings or by closest selector (fallback)
     if (this.options.contentId) {
       this.$content = $('#'+this.options.contentId);
     } else if (this.$element.siblings('[data-off-canvas-content]').length) {
       this.$content = this.$element.siblings('[data-off-canvas-content]').first();
+    } else if (this.$wrapperInner.length && this.$wrapperInner.siblings('[data-off-canvas-content]').length) {
+      this.$content = this.$wrapperInner.siblings('[data-off-canvas-content]').first();
     } else {
       this.$content = this.$element.closest('[data-off-canvas-content]').first();
     }
 
     if (!this.options.contentId) {
-      // Assume that the off-canvas element is nested if it isn't a sibling of the content
-      this.nested = this.$element.siblings('[data-off-canvas-content]').length === 0;
+
+
+      if (this.$wrapperInner.length && this.$wrapperInner.siblings('[data-off-canvas-content]').length) {
+        // If using off-canvas wrapper inner (prior v6.3), assume that the off-canvas element is not nested if the wrapper is a sibling of the content
+        this.nested = false;
+      } else {
+        // Assume that the off-canvas element is nested if it isn't a sibling of the content
+        this.nested = this.$element.siblings('[data-off-canvas-content]').length === 0;
+      }
+
     } else if (this.options.contentId && this.options.nested === null) {
       // Warning if using content ID without setting the nested option
       // Once the element is nested it is required to work properly in this case

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 90498b5fda2159bca7e00ae5e5d90103d26a1851..68cae8037bcb935860cbaeaacd75ec9c283f66fe 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -139,9 +139,13 @@ $maincontent-class: 'off-canvas-content' !default;
   }
 
   // Set the off-canvas z-index.
-  // Since the push z-index may be set by custom settings, a condition makes sure it is greater than the overlay's z-index (backwards compatibility).
   z-index: $offcanvas-push-zindex;
 
+  // Increase CSS specificity
+  &.is-transition-push {
+    z-index: $offcanvas-push-zindex;
+  }
+
   transition: transform $transition;
   backface-visibility: hidden;