From: Nicolas Coden <nicos.coden@neuf.fr>
Date: Mon, 11 Apr 2016 13:22:07 +0000 (+0200)
Subject: Add (flex-)grid-row size modifier
X-Git-Tag: v6.3-rc1~71^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=82489cd3fbc674aa1e504ce28b0fd06f07cabb3c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add (flex-)grid-row size modifier

Add a `grid-row` and `flex-grid-row` size modifier

```
@mixin grid-row-size($size) : Set a grid row size

$size [$grid-row-width] Maximum size of the row. Set to `expand`
to make the row taking the full width.
```
---

diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index abbfd4aaa..907472127 100644
--- a/scss/grid/_classes.scss
+++ b/scss/grid/_classes.scss
@@ -45,7 +45,7 @@
 
     // Expanded (full-width) row
     &.#{$expanded} {
-      max-width: none;
+      @include grid-row-size(expand);
 
       .#{$row} {
         margin-left: auto;
diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index b55d04ce4..07f79cef6 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -10,13 +10,13 @@
 ///
 /// @param {Keyword|List} $behavior [null]
 ///   Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
-/// @param {Number} $width [$grid-row-width] - Maximum width of the row.
+/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
 /// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used.
 /// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.
 /// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
 @mixin flex-grid-row(
   $behavior: null,
-  $width: $grid-row-width,
+  $size: $grid-row-width,
   $columns: null,
   $base: true,
   $gutter: $grid-column-gutter
@@ -32,7 +32,7 @@
     }
   }
   @else {
-    max-width: $width;
+    @include grid-row-size($size);
     margin-left: auto;
     margin-right: auto;
   }
@@ -172,7 +172,7 @@
 
     // Expanded row
     &.expanded {
-      max-width: none;
+      @include grid-row-size(expand);
     }
 
     &.collapse {
diff --git a/scss/grid/_row.scss b/scss/grid/_row.scss
index 9cd14883c..5227e1da8 100644
--- a/scss/grid/_row.scss
+++ b/scss/grid/_row.scss
@@ -38,13 +38,13 @@
 /// @param {Number} $columns [null] - Column count for this row. `null` will use the default column count.
 /// @param {Keywords} $behavior [null]
 ///   Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
-/// @param {Number} $width [$grid-row-width] - Maximum width of the row.
+/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
 /// @param {Boolean} $cf [true] - Whether or not to include a clearfix.
 /// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
 @mixin grid-row(
   $columns: null,
   $behavior: null,
-  $width: $grid-row-width,
+  $size: $grid-row-width,
   $cf: true,
   $gutter: $grid-column-gutter
 ) {
@@ -59,7 +59,7 @@
     }
   }
   @else {
-    max-width: $width;
+    @include grid-row-size($size);
     margin-left: auto;
     margin-right: auto;
   }
@@ -93,3 +93,14 @@
     }
   }
 }
+
+/// Set a grid row size
+///
+/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
+@mixin grid-row-size($size: $grid-row-width) {
+  @if $size == expand {
+    $size: none;
+  }
+
+  max-width: $size;
+}