From: Nicolas Coden <nicolas@ncoden.fr>
Date: Thu, 29 Mar 2018 17:30:58 +0000 (+0200)
Subject: fix: move extend outside of mediaquery for sass compatibility
X-Git-Tag: v6.6.0~3^2~249^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=eb24e7cfd;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

fix: move extend outside of mediaquery for sass compatibility

Libsass 3.5 does not support using `@extend` inside the same mediaquery as the placeholder. `@extend` must be used outside of any mediequery.

See https://github.com/zurb/foundation-sites/pull/11094
---

diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss
index 78f2d71e4..2f91f2265 100644
--- a/scss/components/_reveal.scss
+++ b/scss/components/_reveal.scss
@@ -41,6 +41,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
 // Placeholder selector for medium-and-up modals
 // Prevents duplicate CSS when defining multiple Reveal sizes
+// This should be in the same breakpoint then `@mixin reveal-modal-width`
 @include breakpoint(medium) {
   %reveal-centered {
     right: auto;
@@ -101,8 +102,9 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   $width: $reveal-width,
   $max-width: $reveal-max-width
 ) {
+  // Extends must be made outside of breakpoints for compatibility with newer Sass versions (libsass v3.5)
+  @extend %reveal-centered;
   @include breakpoint(medium) {
-    @extend %reveal-centered;
     width: $width;
     max-width: $max-width;
   }