_flex-grid.scss in foundation-rails-6.1.2.0

- old
+ new

@@ -69,10 +69,11 @@
 ///   - `null` (the default) will make the column expand to fill space.
 ///   - `shrink` will make the column contract, so it only takes up the horizontal space it needs.
 ///
 /// @param {Mixed} $columns [null] - Width of the column.
 @function flex-grid-column($columns: null) {
+  // scss-lint:disable ZeroUnit
   $flex: 1 1 0px;
 
   @if $columns == shrink {
     $flex: 0 0 auto;
   }
@@ -95,11 +96,11 @@
     $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;
       }
     }
@@ -168,12 +169,11 @@
   // Row
   .row {
     @include flex-grid-row;
 
     // Nesting behavior
-    & &,
-    .column-row & {
+    & & {
       @include flex-grid-row(nest, $base: false);
     }
 
     // Expanded row
     &.expanded {
@@ -188,10 +188,24 @@
   // Column
   .column {
     @include flex-grid-column;
   }
 
+  // Column row
+  // The double .row class is needed to bump up the specificity
+  .column.row.row {
+    float: none;
+
+    // To properly nest a column row, padding and margin is removed
+    .row & {
+      padding-left: 0;
+      padding-right: 0;
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
   @include -zf-each-breakpoint {
     @for $i from 1 through $grid-column-count {
       // Sizing (percentage)
       .#{$-zf-size}-#{$i} {
         flex: flex-grid-column($i);
@@ -239,10 +253,12 @@
     .#{$-zf-size}-collapse {
       > .column { @include grid-col-collapse; }
     }
 
     .#{$-zf-size}-uncollapse {
+      $gutter: null;
+
       @if $grid-column-gutter {
         $gutter: $grid-column-gutter;
       }
       @else {
         $gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
@@ -252,9 +268,10 @@
   }
 
   // Sizing (shrink)
   .shrink {
     flex: flex-grid-column(shrink);
+    max-width: 100%;
   }
 
   // Horizontal alignment using justify-content
   @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
     .row.align-#{$hdir} {