Remove transition code for responsive grid gutters

diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index 89bf04f5ebd3fb59e471ef5e6cb9efe722df8883..745adfd3cf7e5151a6ffc0a1aed5274745d26551 100644 (file)
--- a/scss/grid/_classes.scss
+++ b/scss/grid/_classes.scss
@@ -28,21 +28,14 @@
 
     // Collapsing
     &.#{$collapse} {
-      > .#{$column} { @include grid-col-collapse; }
+      > .#{$column} {
+        @include grid-col-collapse;
+      }
     }
 
     // Nesting
     & & {
-      @if $grid-column-gutter == null {
-        @each $breakpoint, $gutter in $grid-column-responsive-gutter {
-          @include breakpoint($breakpoint) {
-            @include grid-row-nest($gutter);
-          }
-        }
-      }
-      @else {
-        @include grid-row-nest($grid-column-gutter);
-      }
+      @include grid-row-nest($grid-column-gutter);
 
       &.#{$collapse} {
         margin-left: 0;
@@ -115,17 +108,13 @@
     }
 
     // Responsive collapsing
-    &.#{$-zf-size}-#{$collapse} {
+    .#{$-zf-size}-#{$collapse} {
       > .#{$column} { @include grid-col-collapse; }
     }
 
-    &.#{$-zf-size}-#{$uncollapse} {
-      @if $grid-column-gutter {
-        $gutter: $grid-column-gutter;
-      }
-      @else {
-        $gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
-      }
+    .#{$-zf-size}-#{$uncollapse} {
+      $gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size);
+
       > .#{$column} { @include grid-col-uncollapse($gutter); }
     }
 

diff --git a/scss/grid/_column.scss b/scss/grid/_column.scss
index ed2638988d19b8d992eb8bf39d2d1cf74f9f8d53..954e5052bfea54cd795c4dbff23923d551a58a75 100644 (file)
--- a/scss/grid/_column.scss
+++ b/scss/grid/_column.scss
@@ -57,25 +57,21 @@
   $columns: $grid-column-count,
   $gutter: $grid-column-gutter
 ) {
-  @if $gutter != null {
-    $gutter: rem-calc($gutter) / 2;
-  }
-  @else {
-    @each $breakpoint, $gutter in $grid-column-responsive-gutter {
-      $padding: rem-calc($gutter) / 2;
-      
-      @include breakpoint($breakpoint) {
-        padding-left: $padding;
-        padding-right: $padding;
-      }
-    }
-  }
-
+  // Core properties
   @include grid-column-size($columns);
   float: $global-left;
-  padding-left: $gutter;
-  padding-right: $gutter;
 
+  // Gutters
+  @each $breakpoint, $value in $gutter {
+    $padding: rem-calc($value) / 2;
+    
+    @include breakpoint($breakpoint) {
+      padding-left: $padding;
+      padding-right: $padding;
+    }
+  }
+
+  // Last column alignment
   @if $grid-column-align-edge {
     &:last-child:not(:first-child) {
       float: $global-right;

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 29c5e512271db3c78bd0d4f0622e20ef74c021c0..4931be47d4c4ee501b9af8638a5fd847d37c5066 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -76,24 +76,19 @@
   $columns: null,
   $gutter: $grid-column-gutter
 ) {
-  @if $gutter != null {
-    $gutter: rem-calc($gutter) / 2;
-  }
-  @else {
-    @each $breakpoint, $gutter in $grid-column-responsive-gutter {
-      $padding: rem-calc($gutter) / 2;
-      
-      @include breakpoint($breakpoint) {
-        padding-left: $padding;
-        padding-right: $padding;
-      }
+  // Base properties
+  flex: flex-grid-column($columns);
+
+  // Padding
+  @each $breakpoint, $value in $gutter {
+    $padding: rem-calc($value) / 2;
+    
+    @include breakpoint($breakpoint) {
+      padding-left: $padding;
+      padding-right: $padding;
     }
   }
 
-  flex: flex-grid-column($columns);
-  padding-left: $gutter;
-  padding-right: $gutter;
-
   // max-width fixes IE 10/11 not respecting the flex-basis property
   @if $columns != null and $columns != shrink {
     max-width: grid-column($columns);
@@ -201,12 +196,8 @@
     }
 
     .#{$-zf-size}-uncollapse {
-      @if $grid-column-gutter {
-        $gutter: $grid-column-gutter;
-      }
-      @else {
-        $gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
-      }
+      $gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size);
+
       > .column { @include grid-col-uncollapse($gutter); }
     }
   }

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 85131f5975ce2dd0029a7abd9122b3f8afe5b478..561060a63537b05692e3707e3c1d39de370dd39f 100644 (file)
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -14,14 +14,10 @@ $grid-row-width: $global-width !default;
 /// @type Number
 $grid-column-count: 12 !default;
 
-// The amount of space between columns. Remove this in 6.2.
-// @type Number
-$grid-column-gutter: null !default;
-
-/// The amount of space between columns at different screen sizes.
-/// @type Map
+/// The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
+/// @type Map | Length
 /// @since 6.1.0
-$grid-column-responsive-gutter: (
+$grid-column-gutter: (
   small: 20px,
   medium: 30px,
 ) !default;
@@ -30,13 +26,28 @@ $grid-column-responsive-gutter: (
 /// @type Boolean
 $grid-column-align-edge: true !default;
 
-// Internal value to store the end column float direction
-$-zf-end-float: if($grid-column-align-edge, $global-right, $global-left);
-
 /// The highest number of `.x-up` classes available when using the block grid CSS.
 /// @type Number
 $block-grid-max: 8 !default;
 
+// Internal value to store the end column float direction
+$-zf-end-float: if($grid-column-align-edge, $global-right, $global-left);
+
+// The last piece to transition the responsive gutter feature
+// Remove this in 6.3
+$grid-column-responsive-gutter: null !default;
+@if $grid-column-responsive-gutter {
+  @debug 'Rename $grid-column-responsive-gutter to $grid-column-gutter to remove this warning.';
+  $grid-column-gutter: $grid-column-responsive-gutter;
+}
+
+// If a single value is passed as a gutter, convert it to a map so the code knows what to do with it
+@if type-of($grid-column-gutter) == 'number' {
+  $grid-column-gutter: (
+    small: $grid-column-gutter,
+  );
+}
+
 @import 'row';
 @import 'column';
 @import 'size';

diff --git a/scss/grid/_row.scss b/scss/grid/_row.scss
index 27cbfade81bb501590005e6f6829d1149df3ce18..75467072c0bd3b6b703004feaa9af8bb27758b5f 100644 (file)
--- a/scss/grid/_row.scss
+++ b/scss/grid/_row.scss
@@ -79,19 +79,17 @@
 /// Inverts the margins of a row to nest it inside of a column.
 ///
 /// @param {Map|null} $gutter [null] - Gutter value to use when inverting the margins. Set to `null` to refer to the responsive gutter settings.
-@mixin grid-row-nest($gutter: null) {
-  @if $gutter != null {
-    $margin: rem-calc($gutter) / 2 * -1;
-    margin-left: $margin;
-    margin-right: $margin;
+@mixin grid-row-nest($gutter: $grid-column-gutter) {
+  @if type-of($gutter) == 'number' {
+    $gutter: (small: $gutter);
   }
-  @else {
-    @each $breakpoint, $value in $grid-column-responsive-gutter {
-      $margin: rem-calc($value) / 2 * -1;
-      @include breakpoint($breakpoint) {
-        margin-left: $margin;
-        margin-right: $margin;
-      }
+
+  @each $breakpoint, $value in $gutter {
+    $margin: rem-calc($value) / 2 * -1;
+
+    @include breakpoint($breakpoint) {
+      margin-left: $margin;
+      margin-right: $margin;
     }
   }
 }

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index b98b980f518964ef4d2c7426993c35957ace9dd0..934b482150726295db8a480e4792f35e81469ce0 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -85,7 +85,7 @@ $breakpoint-classes: (small medium large);
 
 $grid-row-width: $global-width;
 $grid-column-count: 12;
-$grid-column-responsive-gutter: (
+$grid-column-gutter: (
   small: 20px,
   medium: 30px,
 );