Add utilities to manually iterate through breakpoints, and use this to generate respo...

diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index a759015aa8603976f3d5fb29bef79a363bfd9672..166d973e0d2655bdb2ce567712e8a6a805831921 100644 (file)
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -211,6 +211,32 @@ $breakpoint-classes: (small medium large) !default;
 
 }
 
+/// Return a list of our named breakpoints starting from one in particular
+/// @access private
+///
+/// @param {String} $key - Key to use as a starting point.
+///
+/// @returns {Array} The list of breakpoints greater or equal to $key. If $key is auto, returns entire list
+@function -zf-breakpoints-up-from($key) {
+  $list: ();
+  $found_key: false;
+
+  @if ($key == 'auto') {
+    $list: $-zf-breakpoints-keys;
+  }
+  @else {
+    @each $name in $-zf-breakpoints-keys {
+      @if ($name == $key) {
+        $found_key: true;
+      }
+      @if ($found_key) {
+        $list: append($list, $name);
+      }
+    }
+  }
+  @return $list;
+}
+
 /// Get a value for a breakpoint from a responsive config map or single value.
 /// - If the config is a single value, return it regardless of `$value`.
 /// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index b39c9022853af81ca841048167b32b3a39917244..98f2b2219780dd9924c30c6603c322bcd3142f1d 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -259,7 +259,7 @@
 /// - For a single value, `$-zf-bp-value` is this value.
 /// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`.
 /// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
-/// @param {Number|Keyword} $name [auto] - Single value or breakpoint name to use. "auto" by default.
+/// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. "auto" by default.
 /// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
 @mixin -zf-breakpoint-value(
   $name: auto,

diff --git a/scss/zf-grid/_cell.scss b/scss/zf-grid/_cell.scss
index 1ed24295f69528e45307495bda3e1a84caa12594..049f83d67019f350b6c203bcc8329ea9dff69add 100644 (file)
--- a/scss/zf-grid/_cell.scss
+++ b/scss/zf-grid/_cell.scss
@@ -42,20 +42,31 @@
   @return $size;
 }
 
-@mixin -zf-cell-margin($size, $gutters, $gutter-position, $vertical) {
+@mixin -zf-cell-margin($size, $gutters, $gutter-position, $vertical, $breakpoint) {
   $direction: if($vertical == true, height, width);
   @if($size == 'auto') {
-    flex: 1 1 0px; // sass-lint:disable-line zero-unit - https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
+    @if($breakpoint == auto) {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit - https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
+    } @else {
+      @include breakpoint($breakpoint) {
+        flex: 1 1 0px; // sass-lint:disable-line zero-unit
+      }
+    }
   } @else {
-    @include -zf-breakpoint-value(auto, $gutters) {
-      $gutter: rem-calc($-zf-bp-value);
-      @if($size == 'shrink'){
-        max-#{$direction}: calc(100% - #{$gutter});
-      } @elseif($size == 'full') {
-        flex: 1 1 calc(100% - #{$gutter});
-      } @else {
-        flex: 0 0 calc(#{zf-cell-size($size)} - #{$gutter});
-        max-#{$direction}: calc(#{zf-cell-size($size)} - #{$gutter});
+    @each $bp in -zf-breakpoints-up-from($breakpoint) {
+      @include breakpoint($bp) {
+        @include -zf-breakpoint-value($bp, $gutters) {
+          $gutter: rem-calc($-zf-bp-value);
+          @if($size == 'shrink'){
+            flex: 0 0 auto;
+            max-#{$direction}: calc(100% - #{$gutter});
+          } @elseif($size == 'full') {
+            flex: 1 1 calc(100% - #{$gutter});
+          } @else {
+            flex: 0 0 calc(#{zf-cell-size($size)} - #{$gutter});
+            max-#{$direction}: calc(#{zf-cell-size($size)} - #{$gutter});
+          }
+        }
       }
     }
   }
@@ -90,17 +101,19 @@
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
   $gutter-position: right left,
-  $vertical: false
+  $vertical: false,
+  $breakpoint: auto
 ) {
 
   @if($gutter-type == 'margin') {
-    @include -zf-cell-margin($size, $gutters, $gutter-position, $vertical);
+    @include -zf-cell-margin($size, $gutters, $gutter-position, $vertical, $breakpoint);
   } @else {
     @include -zf-cell-padding($size, $gutters, $gutter-position, $vertical);
   }
 
   // If we want to output the gutters
   @if($gutter-output) {
+    // TODO: Figure out if we need to pass breakpoint in here too.
     @include zf-gutters($gutters, $gutter-type, $gutter-position);
   }
 }

diff --git a/scss/zf-grid/_classes.scss b/scss/zf-grid/_classes.scss
index 19e5696ca417ddc362b96d0afe7560ea5b083db4..6a338c18c3c4b8f003ea4cca5f5474fdecb16cc6 100644 (file)
--- a/scss/zf-grid/_classes.scss
+++ b/scss/zf-grid/_classes.scss
@@ -60,25 +60,25 @@
     }
 
     // Auto width
-    @include -zf-each-breakpoint() {
+    @include -zf-each-breakpoint($auto-insert-breakpoints: false) {
       > .#{$-zf-size}-auto {
-        @include zf-cell(auto, false);
+        @include zf-cell(auto, false, $breakpoint: $-zf-size);
       }
     }
 
     // Shrink
-    @include -zf-each-breakpoint() {
+    @include -zf-each-breakpoint($auto-insert-breakpoints: false) {
       > .#{$-zf-size}-shrink {
-        @include zf-cell(shrink, false);
+        @include zf-cell(shrink, false, $breakpoint: $-zf-size);
       }
     }
 
     // Sizing classes
-    @include -zf-each-breakpoint {
+    @include -zf-each-breakpoint($auto-insert-breakpoints: false) {
       @for $i from 1 through $grid-columns {
         // Sizing (percentage)
         > .#{$-zf-size}-#{$i} {
-          @include zf-cell($i, false);
+          @include zf-cell($i, false, $breakpoint: $-zf-size);
         }
       }
     }