From: Daniel Schuba <daniel.schuba@getit.de>
Date: Wed, 2 Mar 2016 14:40:44 +0000 (+0100)
Subject: possible solution for #8257
X-Git-Tag: v6.2.1~45^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=202e9cfe15fa3edf8507aaeaf22ec31b69cd8bb5;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

possible solution for #8257
taking first breakpoint and check if smallest and define it as zero-breakpoint
---

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 788313311..2f67fe02c 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -213,7 +213,7 @@
       }
     }
 
-    @if $-zf-size != small {
+    @if $-zf-size != $zero-breakpoint-name {
       // Sizing (expand)
       @include breakpoint($-zf-size) {
         .#{$-zf-size}-expand {
diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index cfa08d436..6c4a5ca00 100644
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -18,11 +18,12 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
-@if not map-has-key($breakpoints, small) or not map-has-key($breakpoints, medium) {
-  @error 'Your list of breakpoints (defined in $breakpoints) must include one named "small" and one named "medium".';
-}
-@else if map-get($breakpoints, small) != 0 {
-  @error 'Your "small" breakpoint (defined in $breakpoints) must be set to "0".';
+$zero-breakpoint-name: small !default;
+
+@if nth(map-values($breakpoints),1) != 0 {
+  @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+} @else {
+  $zero-breakpoint-name: nth(map-keys($breakpoints),1);
 }
 
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
@@ -32,7 +33,7 @@ $breakpoint-classes: (small medium large) !default;
 /// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
-@function breakpoint($val: small) {
+@function breakpoint($val: $zero-breakpoint-name) {
   // Size or keyword
   $bp: nth($val, 1);
   // Value for max-width media queries
diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index a984aa755..e11e51424 100644
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -220,7 +220,7 @@
   $map: $breakpoint-classes;
 
   @if not $small {
-    $map: map-remove($map, small);
+    $map: map-remove($map, $zero-breakpoint-name);
   }
 
   @each $size in $map {