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 abbfd4aaa3e6e643847014b034d09a7a33938606..907472127835290678bcf462b60374df866330bf 100644 (file)
--- 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 b55d04ce4a70a062f7325403bc7632b13fd2ccf5..07f79cef6038cf14b778737f4521b04dcb8c7883 100644 (file)
--- 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 9cd14883c1ba48d4431100dd7b7b05a0742a65c8..5227e1da8340d63f4b149022190803af486e984d 100644 (file)
--- 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;
+}