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 78f2d71e4131cee6d9a08f31a5640a4450ac2efd..2f91f2265f22697b1002f165cd8d3def268c9aa0 100644 (file)
--- 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;
   }