foundation-rails 6.1.2.0 → 6.2.0.0

data/vendor/assets/scss/grid/_column.scss

@@ -57,12 +57,13 @@
   $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 grid-column-size($columns);
+  float: $global-left;
+
+  // Gutters
+  @if type-of($gutter) == 'map' {
+    @each $breakpoint, $value in $gutter {
+      $padding: rem-calc($value) / 2;
 
       @include breakpoint($breakpoint) {
         padding-left: $padding;
@@ -70,12 +71,13 @@
       }
     }
   }
+  @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+    $padding: rem-calc($gutter) / 2;
+    padding-left: $padding;
+    padding-right: $padding;
+  }
 
-  @include grid-column-size($columns);
-  float: $global-left;
-  padding-left: $gutter;
-  padding-right: $gutter;
-
+  // Last column alignment
   @if $grid-column-align-edge {
     &:last-child:not(:first-child) {
       float: $global-right;

data/vendor/assets/scss/grid/_flex-grid.scss

@@ -6,21 +6,6 @@
 /// @group flex-grid
 ////
 
-$-zf-flex-justify: (
-  'left': flex-start,
-  'right': flex-end,
-  'center': center,
-  'justify': space-between,
-  'spaced': space-around,
-);
-
-$-zf-flex-align: (
-  'top': flex-start,
-  'bottom': flex-end,
-  'middle': center,
-  'stretch': stretch,
-);
-
 /// Creates a container for a flex grid row.
 ///
 /// @param {Keyword|List} $behavior [null]
@@ -36,13 +21,12 @@ $-zf-flex-align: (
   $base: true,
   $gutter: $grid-column-gutter
 ) {
-  $behavior: -zf-get-options($behavior, nest collapse);
   $margin: auto;
 
-  @if map-get($behavior, nest) {
+  @if index($behavior, nest) != null {
     @include grid-row-nest($gutter);
 
-    @if map-get($behavior, collapse) {
+    @if index($behavior, collapse) != null {
       margin-left: 0;
       margin-right: 0;
     }
@@ -92,12 +76,13 @@ $-zf-flex-align: (
   $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;
+  // Base properties
+  flex: flex-grid-column($columns);
+
+  // Gutters
+  @if type-of($gutter) == 'map' {
+    @each $breakpoint, $value in $gutter {
+      $padding: rem-calc($value) / 2;
 
       @include breakpoint($breakpoint) {
         padding-left: $padding;
@@ -105,10 +90,11 @@ $-zf-flex-align: (
       }
     }
   }
-
-  flex: flex-grid-column($columns);
-  padding-left: $gutter;
-  padding-right: $gutter;
+  @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+    $padding: rem-calc($gutter) / 2;
+    padding-left: $padding;
+    padding-right: $padding;
+  }
 
   // max-width fixes IE 10/11 not respecting the flex-basis property
   @if $columns != null and $columns != shrink {
@@ -116,10 +102,29 @@ $-zf-flex-align: (
   }
 }
 
+/// 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'
+) {
+  flex-wrap: wrap;
+
+  > #{$selector} {
+    $pct: percentage(1/$n);
+
+    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) {
-  order: $order;
+  @warn 'This mixin is being replaced by flex-order(). flex-grid-order() will be removed in Foundation 6.3.';
+  @include flex-order($order);
 }
 
 /// Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.
@@ -127,42 +132,16 @@ $-zf-flex-align: (
 /// @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) {
-  @if $x {
-    @if map-has-key($-zf-flex-justify, $x) {
-      $x: map-get($-zf-flex-justify, $x);
-    }
-    @else {
-      @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
-    }
-  }
-
-  @if $y {
-    @if map-has-key($-zf-flex-align, $y) {
-      $y: map-get($-zf-flex-align, $y);
-    }
-    @else {
-      @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
-    }
-  }
-
-  justify-content: $x;
-  align-items: $y;
+  @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);
 }
 
 /// 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) {
-  @if $y {
-    @if map-has-key($-zf-flex-align, $y) {
-      $y: map-get($-zf-flex-align, $y);
-    }
-    @else {
-      @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
-    }
-  }
-
-  align-self: $y;
+  @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);
 }
 
 @mixin foundation-flex-grid {
@@ -220,10 +199,21 @@ $-zf-flex-align: (
       }
     }
 
+    // Source ordering
     @for $i from 1 through 6 {
-      // Source ordering
       .#{$-zf-size}-order-#{$i} {
-        @include flex-grid-order($i);
+        @include flex-order($i);
+      }
+
+      .#{$-zf-size}-up-#{$i} {
+        @include flex-grid-layout($i);
+      }
+    }
+
+    // Block grid
+    @for $i from 1 through $block-grid-max {
+      .#{$-zf-size}-up-#{$i} {
+        @include grid-layout($i);
       }
     }
 
@@ -255,14 +245,8 @@ $-zf-flex-align: (
     }
 
     .#{$-zf-size}-uncollapse {
-      $gutter: null;
+      $gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size);
 
-      @if $grid-column-gutter {
-        $gutter: $grid-column-gutter;
-      }
-      @else {
-        $gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
-      }
       > .column { @include grid-col-uncollapse($gutter); }
     }
   }
@@ -273,21 +257,11 @@ $-zf-flex-align: (
     max-width: 100%;
   }
 
-  // Horizontal alignment using justify-content
-  @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
-    .row.align-#{$hdir} {
-      @include flex-grid-row-align($x: $hdir);
-    }
-  }
-
   // Vertical alignment using align-items and align-self
+  // Remove these in 6.3
   @each $vdir, $prop in $-zf-flex-align {
-    .row.align-#{$vdir} {
-      @include flex-grid-row-align($y: $vdir);
-    }
-
     .column.align-#{$vdir} {
-      @include flex-grid-column-align($vdir);
+      @include flex-align-self($vdir);
     }
   }
 

data/vendor/assets/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,29 @@ $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 {
+  // scss-lint:disable DebugStatement
+  @warn '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';

data/vendor/assets/scss/grid/_layout.scss

@@ -31,3 +31,21 @@
     }
   }
 }
+
+/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
+///
+/// @param {Number} $n - Number of items that appear in each row.
+@mixin grid-layout-center-last($n) {
+  @for $i from 1 to $n {
+    @if $i == 1 {
+      &:nth-child(#{$n}n+1):last-child {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+    @else {
+      &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+  }
+}

data/vendor/assets/scss/grid/_row.scss

@@ -48,13 +48,12 @@
   $cf: true,
   $gutter: $grid-column-gutter
 ) {
-  $behavior: -zf-get-options($behavior, nest collapse);
   $margin: auto;
 
-  @if map-get($behavior, nest) {
+  @if index($behavior, nest) != null {
     @include grid-row-nest($gutter);
 
-    @if map-get($behavior, collapse) {
+    @if index($behavior, collapse) != null {
       margin-left: 0;
       margin-right: 0;
     }
@@ -79,20 +78,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;
     }
   }
 }

data/vendor/assets/scss/motion-ui/_classes.scss

@@ -1,6 +1,6 @@
 // scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty
 
-%mui-defaults {
+@mixin -motion-ui-defaults {
   transition-duration: map-get($motion-ui-speeds, default);
   transition-timing-function: map-get($motion-ui-easings, default);
 }
@@ -11,11 +11,11 @@
   // Slide
   .slide-in-down    { @include mui-slide(in,  down); }
   .slide-in-left    { @include mui-slide(in,  right); }
-  .slide-in-up      { @include mui-slide(in,  bottom); }
+  .slide-in-up      { @include mui-slide(in,  up); }
   .slide-in-right   { @include mui-slide(in,  left); }
   .slide-out-down   { @include mui-slide(out, down); }
   .slide-out-right  { @include mui-slide(out, right); }
-  .slide-out-up     { @include mui-slide(out, top); }
+  .slide-out-up     { @include mui-slide(out, up); }
   .slide-out-left   { @include mui-slide(out, left); }
 
   // Fade
@@ -78,6 +78,13 @@
   .spin-ccw { @include mui-animation(spin(ccw)); }
   .wiggle   { @include mui-animation(wiggle); }
 
+  .shake,
+  .spin-cw,
+  .spin-ccw,
+  .wiggle {
+    animation-duration: map-get($motion-ui-speeds, default);
+  }
+
   // Animation Modifiers
   // - - - - - - - - - - - - - - -
   .infinite { animation-iteration-count: infinite; }

data/vendor/assets/scss/motion-ui/effects/_fade.scss

@@ -19,8 +19,11 @@
     }
   }
 
+  $fromName: $from * 100;
+  $toName:   $to   * 100;
+
   $keyframes: (
-    name: 'fade-#{$from}-to-#{$to}',
+    name: 'fade-#{$fromName}-to-#{$toName}',
     0: (opacity: $from),
     100: (opacity: $to),
   );

data/vendor/assets/scss/motion-ui/effects/_zoom.scss

@@ -1,6 +1,6 @@
 /// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
 /// @param {Number} $from [1.5] - Size to start at.
-/// @param {Number} $from [1] - Size to end at.
+/// @param {Number} $to [1] - Size to end at.
 @function zoom(
   $from: 0,
   $to: 1

data/vendor/assets/scss/motion-ui/transitions/_slide.scss

@@ -1,6 +1,6 @@
 /// Creates a sliding transition by translating the element horizontally or vertically.
 /// @param {Keyword} $state [in] - State to transition to.
-/// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`.
+/// @param {Keyword} $direction [left] - Direction to slide to. Can be `up`, `right`, `down`, or `left`.
 /// @param {Length} $amount [100%] - Length of the slide as a percentage value.
 /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
 /// @param {Duration} $duration [null] - Length (speed) of the transition.

data/vendor/assets/scss/motion-ui/util/_transition.scss

@@ -7,7 +7,7 @@
   $timing: null,
   $delay: null
 ) {
-  @extend %mui-defaults;
+  @include -motion-ui-defaults;
   transition-duration: $duration;
   transition-timing-function: $timing;
   transition-delay: $delay;