locomotivecms_wagon 2.4.0.rc2 → 2.4.0

data/generators/foundation/public/stylesheets/foundation6/grid/_column.scss

@@ -12,9 +12,9 @@
 ///   Width of the column. Accepts multiple values:
 ///   - A percentage value will make the column that exact size.
 ///   - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
-///   - A string of the format "x of y" will make a column that is *x* columns wide, assuming *y* total columns for the parent.
+///   - A list of the format "x of y" (without quotes) will make a column that is *x* columns wide, assuming *y* total columns for the parent.
 ///
-/// @return {Number} A calculated percentage value.
+/// @returns {Number} A calculated percentage value.
 @function grid-column($columns) {
   $width: 0%;
 
@@ -52,34 +52,34 @@
 /// Creates a grid column.
 ///
 /// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values.
-/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
+/// @param {Mixed} $gutters [$grid-column-gutter] - Spacing between columns. Refer to the `grid-column-gutter()` function to see possible values.
 @mixin grid-column(
   $columns: $grid-column-count,
-  $gutter: $grid-column-gutter
+  $gutters: $grid-column-gutter
 ) {
-  @if ($columns <= $grid-column-count) {
-    @include grid-column-size($columns);
-  }
-
-  $gutter: rem-calc($gutter) / 2;
-
+  @include grid-column-size($columns);
   float: $global-left;
-  padding-left: $gutter;
-  padding-right: $gutter;
 
-  &:last-child:not(:first-child) {
-    float: $global-right;
+  // Gutters
+  @include grid-column-gutter($gutters: $gutters);
+
+  // Last column alignment
+  @if $grid-column-align-edge {
+    &:last-child:not(:first-child) {
+      float: $global-right;
+    }
   }
 }
 
 /// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
-/// @param {Number} $gutter [$grid-column-gutter] - Width of the gutters on either side of the column row.
+///
+/// @param {Mixed} $gutters [$grid-column-gutter] - Width of the gutters on either side of the column row. Refer to the `grid-column-gutter()` function to see possible values.
 @mixin grid-column-row(
-  $gutter: $grid-column-gutter
+  $gutters: $grid-column-gutter
 ) {
   @include grid-row;
-  @include grid-column($gutter: $gutter);
-  
+  @include grid-column($gutters: $gutters);
+
   &,
   &:last-child {
     float: none;
@@ -98,15 +98,15 @@
 /// @alias grid-column
 @mixin grid-col(
   $columns: $grid-column-count,
-  $gutter: $grid-column-gutter
+  $gutters: $grid-column-gutter
 ) {
-  @include grid-column($columns, $gutter);
+  @include grid-column($columns, $gutters);
 }
 
 /// Shorthand for `grid-column-row()`.
 /// @alias grid-column-row
 @mixin grid-col-row(
-  $gutter: $grid-column-gutter
+  $gutters: $grid-column-gutter
 ) {
-  @include grid-column-row($gutter);
+  @include grid-column-row($gutters);
 }

data/generators/foundation/public/stylesheets/foundation6/grid/_flex-grid.scss

@@ -7,35 +7,43 @@
 ////
 
 /// 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|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
+  $base: true,
+  $wrap: true,
+  $gutters: $grid-column-gutter
 ) {
-  $behavior: -zf-get-options($behavior, nest collapse);
   $margin: auto;
+  $wrap: if($wrap, wrap, nowrap);
 
-  @if map-get($behavior, nest) {
-    $margin: rem-calc($grid-column-gutter) / 2 * -1;
+  @if index($behavior, nest) != null {
+    @include grid-row-nest($gutters);
+
+    @if index($behavior, collapse) != null {
+      margin-right: 0;
+      margin-left: 0;
+    }
   }
   @else {
-    max-width: $width;
+    @include grid-row-size($size);
+    margin-right: auto;
+    margin-left: auto;
   }
 
   @if $base {
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: row $wrap;
   }
 
-  margin-left: $margin;
-  margin-right: $margin;
-
   @if $columns != null {
     @include grid-context($columns, $base) {
       @content;
@@ -44,16 +52,17 @@
 }
 
 /// 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) {
-  $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);
   }
 
@@ -61,29 +70,57 @@
 }
 
 /// 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 {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.
+///
+/// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Map or single value for gutters width. See the `grid-column-gutter` mixin.
 @mixin flex-grid-column(
-  $columns: null,
-  $gutter: $grid-column-gutter
+  $columns: expand,
+  $gutters: $grid-column-gutter
+) {
+  // Base properties
+  @include flex-grid-size($columns);
+
+  // Gutters
+  @include grid-column-gutter($gutters: $gutters);
+
+  // 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 == expand {
+    min-width: 0;
+  }
+}
+
+/// Creates a block grid for a flex grid row.
+///
+/// @param {Number} $n - Number of columns to display on each row.
+/// @param {String} $selector - Selector to use to target columns within the row.
+@mixin flex-grid-layout(
+  $n,
+  $selector: '.column'
 ) {
-  $gutter: rem-calc($gutter) / 2;
+  flex-wrap: wrap;
+
+  > #{$selector} {
+    $pct: percentage(1/$n);
+
+    flex: 0 0 $pct;
+    max-width: $pct;
+  }
+}
+
+/// 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;
 
   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 {
+  @if $columns != expand and $columns != shrink {
     max-width: grid-column($columns);
   }
 }
 
-/// 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) {
-  order: $order;
-}
 
 @mixin foundation-flex-grid {
   // Row
@@ -91,101 +128,132 @@
     @include flex-grid-row;
 
     // Nesting behavior
-    & &,
-    .column-row & {
+    & .row {
       @include flex-grid-row(nest, $base: false);
+
+      &.collapse {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+
+    // Expanded row
+    &.expanded {
+      @include grid-row-size(expand);
+
+      .row {
+        margin-right: auto;
+        margin-left: auto;
+      }
+    }
+
+    &:not(.expanded) .row {
+      @include grid-row-size(expand);
+    }
+
+    &.collapse {
+      > .column {
+        @include grid-col-collapse;
+      }
+    }
+
+    // Undo negative margins
+    // From collapsed child
+    &.is-collapse-child,
+    &.collapse > .column > .row {
+      margin-right: 0;
+      margin-left: 0;
     }
   }
 
   // Column
-  %flex-column {
+  .column {
     @include flex-grid-column;
   }
 
-  .column,
-  .columns {
-    @extend %flex-column;
+  // Column row
+  // The double .row class is needed to bump up the specificity
+  .column.row.row {
+    float: none;
+    display: block;
   }
 
-  // Sizing (percentage)
-  @each $size in $breakpoint-classes {
-    @include breakpoint($size) {
-      @for $i from 1 through $grid-column-count {
-        .#{$size}-#{$i} {
-          flex: flex-grid-column($i);
-          max-width: grid-column($i);
-        }
+  // To properly nest a column row, padding and margin is removed
+  .row .column.row.row {
+    margin-right: 0;
+    margin-left: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $grid-column-count {
+      // Sizing (percentage)
+      .#{$-zf-size}-#{$i} {
+        flex: flex-grid-column($i);
+        max-width: grid-column($i);
+      }
+
+      // Offsets
+      $o: $i - 1;
+
+      .#{$-zf-size}-offset-#{$o} {
+        @include grid-column-offset($o);
       }
     }
-  }
 
-  // Sizing (expand)
-  @each $size in $breakpoint-classes {
-    @if $size != small {
-      @include breakpoint($size) {
-        .#{$size}-expand {
-          flex: flex-grid-column();
-        }
+    // Block grid
+    @for $i from 1 through $block-grid-max {
+      .#{$-zf-size}-up-#{$i} {
+        @include flex-grid-layout($i);
       }
     }
-  }
 
-  // Sizing (shrink)
-  .shrink {
-    flex: flex-grid-column(shrink);
-  }
+    @if $-zf-size != $-zf-zero-breakpoint {
+      // Sizing (expand)
+      @include breakpoint($-zf-size) {
+        .#{$-zf-size}-expand {
+          flex: flex-grid-column();
+        }
+      }
 
-  // Auto-stacking/unstacking
-  @each $size in $breakpoint-classes {
-    @if $size != small {
-      .row.#{$size}-unstack {
-        .column {
-          flex: flex-grid-column(100%);
+      // Auto-stacking/unstacking
+      @at-root (without: media) {
+        .row.#{$-zf-size}-unstack {
+          > .column {
+            flex: flex-grid-column(100%);
 
-          @include breakpoint($size) {
-            flex: flex-grid-column();
+            @include breakpoint($-zf-size) {
+              flex: flex-grid-column();
+            }
           }
         }
       }
     }
-  }
 
-  // Source ordering
-  @each $size in $breakpoint-classes {
-    @include breakpoint($size) {
-      @for $i from 1 through 6 {
-        .#{$size}-order-#{$i} {
-          @include flex-grid-order($i);
-        }
-      }
+    // Responsive collapsing
+    .#{$-zf-size}-collapse {
+      > .column { @include grid-col-collapse; }
     }
-  }
 
-  // Horizontal alignment using justify-content
-  @each $hdir, $prop in (
-    'right': flex-end,
-    'center': center,
-    'justify': space-between,
-    'spaced': space-around,
-  ) {
-    .row.align-#{$hdir} {
-      justify-content: $prop;
+    .#{$-zf-size}-uncollapse {
+      > .column { @include grid-col-gutter($-zf-size); }
     }
   }
 
-  // Horizontal alignment using align-items and align-self
-  @each $vdir, $prop in (
-    'top': flex-start,
-    'bottom': flex-end,
-    'middle': center,
-    'stretch': stretch,
-  ) {
-    .row.align-#{$vdir} {
-      align-items: $prop;
-    }
+  // Sizing (shrink)
+  .shrink {
+    flex: flex-grid-column(shrink);
+    max-width: 100%;
+  }
+
+  // Block grid columns
+  .column-block {
+    @include grid-column-margin;
+  }
+
+  .columns {
+    @extend .column; // sass-lint:disable-line placeholder-in-extend
 
-    .column.align-#{$vdir} {
-      align-self: $prop;
-    }
   }
 }

data/generators/foundation/public/stylesheets/foundation6/grid/_grid.scss

@@ -14,13 +14,28 @@ $grid-row-width: $global-width !default;
 /// @type Number
 $grid-column-count: 12 !default;
 
-/// The amount of space between columns.
-/// @type Number
-$grid-column-gutter: 30px !default;
+/// 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-gutter: (
+  small: 20px,
+  medium: 30px,
+) !default;
+
+/// If `true`, the last column in a row will align to the opposite edge of the row.
+/// @type Boolean
+$grid-column-align-edge: true !default;
+
+/// Selector used for an alias of column (with @extend). If `false`, no alias is created.
+/// @type String
+$grid-column-alias: 'columns' !default;
 
 /// The highest number of `.x-up` classes available when using the block grid CSS.
 /// @type Number
-$block-grid-max: 6 !default;
+$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);
 
 @import 'row';
 @import 'column';