_flex-grid.scss in foundation-rails-6.3.0.0

- old
+ new

@@ -8,103 +8,90 @@
 
 /// Creates a container for a flex grid row.
 ///
 /// @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.
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins, in case the row is nested. Responsive gutter settings by default.
 @mixin flex-grid-row(
   $behavior: null,
-  $width: $grid-row-width,
+  $size: $grid-row-width,
   $columns: null,
   $base: true,
-  $gutter: $grid-column-gutter
+  $wrap: true,
+  $gutters: $grid-column-gutter
 ) {
   $margin: auto;
+  $wrap: if($wrap, wrap, nowrap);
 
   @if index($behavior, nest) != null {
-    @include grid-row-nest($gutter);
+    @include grid-row-nest($gutters);
 
     @if index($behavior, collapse) != null {
-      margin-left: 0;
       margin-right: 0;
+      margin-left: 0;
     }
   }
   @else {
-    max-width: $width;
-    margin-left: auto;
+    @include grid-row-size($size);
     margin-right: auto;
+    margin-left: auto;
   }
 
   @if $base {
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: row $wrap;
   }
 
   @if $columns != null {
     @include grid-context($columns, $base) {
       @content;
     }
   }
 }
 
 /// Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras:
-///   - `null` (the default) will make the column expand to fill space.
+///   - `expand` (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;
+/// @param {Mixed} $columns [expand] - Width of the column.
+@function flex-grid-column($columns: expand) {
+  $flex: 1 1 0px; // sass-lint:disable-line zero-unit
 
   @if $columns == shrink {
     $flex: 0 0 auto;
   }
-  @else if $columns != null {
+  @else if $columns != expand {
     $flex: 0 0 grid-column($columns);
   }
 
   @return $flex;
 }
 
 /// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row.
 ///
-/// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+/// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
 /// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.
 @mixin flex-grid-column(
-  $columns: null,
-  $gutter: $grid-column-gutter
+  $columns: expand,
+  $gutters: $grid-column-gutter
 ) {
   // Base properties
-  flex: flex-grid-column($columns);
+  @include flex-grid-size($columns);
 
   // Gutters
-  @if type-of($gutter) == 'map' {
-    @each $breakpoint, $value in $gutter {
-      $padding: rem-calc($value) / 2;
+  @include grid-column-gutter($gutters: $gutters);
 
-      @include breakpoint($breakpoint) {
-        padding-left: $padding;
-        padding-right: $padding;
-      }
-    }
-  }
-  @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
-    $padding: rem-calc($gutter) / 2;
-    padding-left: $padding;
-    padding-right: $padding;
-  }
-
   // fixes recent Chrome version not limiting child width
   // https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome
-  @if $columns == null {
+  @if $columns == expand {
     min-width: initial;
   }
   // max-width fixes IE 10/11 not respecting the flex-basis property
-  @if $columns != null and $columns != shrink {
+  @if $columns != expand and $columns != shrink {
     max-width: grid-column($columns);
   }
 }
 
 /// Creates a block grid for a flex grid row.
@@ -123,34 +110,24 @@
     flex: 0 0 $pct;
     max-width: $pct;
   }
 }
 
-/// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
-/// @param {Number} $order [0] - Order number to apply.
-@mixin flex-grid-order($order: 0) {
-  @warn 'This mixin is being replaced by flex-order(). flex-grid-order() will be removed in Foundation 6.3.';
-  @include flex-order($order);
-}
+/// Changes the width flex grid column.
+/// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+@mixin flex-grid-size($columns: null) {
+  $columns: $columns or expand;
 
-/// Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.
-///
-/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
-/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
-@mixin flex-grid-row-align($x: null, $y: null) {
-  @warn 'This mixin is being replaced by flex-align(). flex-grid-row-align() will be removed in Foundation 6.3.';
-  @include flex-align($x, $y);
-}
+  flex: flex-grid-column($columns);
 
-/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
-///
-/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
-@mixin flex-grid-column-align($y: null) {
-  @warn 'This mixin is being replaced by flex-align-self(). flex-grid-column-align() will be removed in Foundation 6.3.';
-  @include flex-align-self($y);
+  // max-width fixes IE 10/11 not respecting the flex-basis property
+  @if $columns != expand and $columns != shrink {
+    max-width: grid-column($columns);
+  }
 }
 
+
 @mixin foundation-flex-grid {
   // Row
   .row {
     @include flex-grid-row;
 
@@ -159,11 +136,11 @@
       @include flex-grid-row(nest, $base: false);
     }
 
     // Expanded row
     &.expanded {
-      max-width: none;
+      @include grid-row-size(expand);
     }
 
     &.collapse {
       > .column {
         @include grid-col-collapse;
@@ -172,12 +149,12 @@
 
     // Undo negative margins
     // From collapsed child
     &.is-collapse-child,
     &.collapse > .column > .row {
-      margin-left: 0;
       margin-right: 0;
+      margin-left: 0;
     }
   }
 
   // Column
   .column {
@@ -185,22 +162,44 @@
   }
 
   // Column row
   // The double .row class is needed to bump up the specificity
   .column.row.row {
-    float: none;
-    display: block;
+    display: flex;
   }
 
   // To properly nest a column row, padding and margin is removed
   .row .column.row.row {
-    padding-left: 0;
-    padding-right: 0;
-    margin-left: 0;
     margin-right: 0;
+    margin-left: 0;
+    padding-right: 0;
+    padding-left: 0;
   }
 
+
+  .flex-container {
+    @include flex;
+  }
+
+  .flex-child-auto {
+    flex: 1 1 auto;
+  }
+
+  .flex-child-grow {
+    flex: 1 0 auto;
+  }
+
+  .flex-child-shrink {
+    flex: 0 1 auto;
+  }
+
+  @each $dir, $prop in $-zf-flex-direction {
+    .flex-dir-#{$dir} {
+      @include flex-direction($prop);
+    }
+  }
+
   @include -zf-each-breakpoint {
     @for $i from 1 through $grid-column-count {
       // Sizing (percentage)
       .#{$-zf-size}-#{$i} {
         flex: flex-grid-column($i);
@@ -235,10 +234,29 @@
         .#{$-zf-size}-expand {
           flex: flex-grid-column();
         }
       }
 
+      // direction helper classes
+      @each $dir, $prop in $-zf-flex-direction {
+        .#{$-zf-size}-flex-dir-#{$dir} {
+          @include flex-direction($prop);
+        }
+      }
+      // child helper classes
+      .#{$-zf-size}-flex-child-auto {
+        flex: 1 1 auto;
+      }
+
+      .#{$-zf-size}-flex-child-grow {
+        flex: 1 0 auto;
+      }
+
+      .#{$-zf-size}-flex-child-shrink {
+        flex: 0 1 auto;
+      }
+
       // Auto-stacking/unstacking
       @at-root (without: media) {
         .row.#{$-zf-size}-unstack {
           > .column {
             flex: flex-grid-column(100%);
@@ -255,30 +273,20 @@
     .#{$-zf-size}-collapse {
       > .column { @include grid-col-collapse; }
     }
 
     .#{$-zf-size}-uncollapse {
-      $gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size);
-
-      > .column { @include grid-col-uncollapse($gutter); }
+      > .column { @include grid-col-gutter($-zf-size); }
     }
   }
 
   // Sizing (shrink)
   .shrink {
     flex: flex-grid-column(shrink);
     max-width: 100%;
   }
 
-  // Vertical alignment using align-items and align-self
-  // Remove these in 6.3
-  @each $vdir, $prop in $-zf-flex-align {
-    .column.align-#{$vdir} {
-      @include flex-align-self($vdir);
-    }
-  }
-
   .columns {
-    // scss-lint:disable PlaceholderInExtend
-    @extend .column;
+    @extend .column; // sass-lint:disable-line placeholder-in-extend
+
   }
 }