From: James Homer <jameshomer85@gmail.com>
Date: Wed, 14 Feb 2018 12:22:36 +0000 (+0000)
Subject: Allow breakpoint mixin to accept a list
X-Git-Tag: v6.6.0~3^2~297^2~4
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c802cde8393b2fde58f70d0c3771470d0d00ff67;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Allow breakpoint mixin to accept a list

This fixes the following issue whereby gutters aren't set as expected for larger sizes:
```
.my-cell {
      @include xy-cell(12);

      @include breakpoint(medium) {
        @include xy-cell(6/12);
      }
}
```

by allowing the following:
```
.my-cell {
      @include xy-cell(12);

      @include breakpoint(medium, large, xlarge, xxlarge) {
        @include xy-cell(6/12);
      }
}
```
---

diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index 59782acf0..7ba7e8dd7 100644
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -139,40 +139,43 @@ $breakpoint-classes: (small medium large) !default;
 /// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
 ///
 /// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
-@mixin breakpoint($value) {
-  $str: breakpoint($value);
-  $bp: index($-zf-breakpoints-keys, $value);
-  $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
-
-  $old-zf-size: null;
-
-  // Make breakpoint size available as a variable
-  @if global-variable-exists(-zf-size) {
-    $old-zf-size: $-zf-size;
-  }
-  $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
-
-  // If $str is still an empty string, no media query is needed
-  @if $str == '' {
-    @content;
-  }
+@mixin breakpoint($value-list...) {
+  @for $i from 1 through length($value-list) {
+    $value: nth($value-list, $i);
+    $str: breakpoint($value);
+    $bp: index($-zf-breakpoints-keys, $value);
+    $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
+
+    $old-zf-size: null;
+
+    // Make breakpoint size available as a variable
+    @if global-variable-exists(-zf-size) {
+      $old-zf-size: $-zf-size;
+    }
+    $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
 
-  // Otherwise, wrap the content in a media query
-  @else {
-    // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
-    @if $bp != null and $bp <= $pbp {
-      @media print, screen and #{$str} {
-        @content;
-       }
+    // If $str is still an empty string, no media query is needed
+    @if $str == '' {
+      @content;
     }
+
+    // Otherwise, wrap the content in a media query
     @else {
-      @media screen and #{$str} {
-        @content;
+      // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
+      @if $bp != null and $bp <= $pbp {
+        @media print, screen and #{$str} {
+          @content;
+        }
+      }
+      @else {
+        @media screen and #{$str} {
+          @content;
+        }
       }
     }
-  }
 
-  $-zf-size: $old-zf-size !global;
+    $-zf-size: $old-zf-size !global;
+  }
 }
 
 /// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.