locomotivecms_wagon 2.4.0.rc2 → 2.4.0

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

@@ -6,26 +6,77 @@
 /// @group grid
 ////
 
-/// Collapse the gutters on a column by removing the padding.
-@mixin grid-column-collapse() {
-  padding-left: 0;
-  padding-right: 0;
+/// Set the gutters on a column
+/// @param {Number|Keyword} $gutter [auto]
+///   Spacing between columns, accepts multiple values:
+///   - A single value will make the gutter that exact size.
+///   - A breakpoint name will make the gutter the corresponding size in the $gutters map.
+///   - "auto" will make the gutter responsive, using the $gutters map values.
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default.
+@mixin grid-column-gutter(
+  $gutter: auto,
+  $gutters: $grid-column-gutter
+) {
+  @include -zf-breakpoint-value($gutter, $gutters) {
+    $padding: rem-calc($-zf-bp-value) / 2;
+
+    padding-right: $padding;
+    padding-left: $padding;
+  }
+}
+
+/// Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the `$gutter` parameter of the `grid-column()` mixin instead.
+@mixin grid-column-collapse {
+  @include grid-column-gutter(0);
 }
 
 /// Un-collapse the gutters on a column by re-adding the padding.
-@mixin grid-column-uncollapse() {
-  padding-left: $grid-column-gutter;
-  padding-right: $grid-column-gutter;
+///
+/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
+@mixin grid-column-uncollapse($gutter: $grid-column-gutter) {
+  @warn 'This mixin is being replaced by grid-column-gutter(). grid-column-uncollapse() will be removed in Foundation 6.4.';
+  @include grid-column-gutter($gutters: $gutter);
+}
+
+/// Shorthand for `grid-column-gutter()`.
+/// @alias grid-column-gutter
+@mixin grid-col-gutter(
+  $gutter: auto,
+  $gutters: $grid-column-gutter
+) {
+  @include grid-column-gutter($gutter, $gutters);
 }
 
 /// Shorthand for `grid-column-collapse()`.
 /// @alias grid-column-collapse
-@mixin grid-col-collapse() {
+@mixin grid-col-collapse {
   @include grid-column-collapse;
 }
 
 /// Shorthand for `grid-column-uncollapse()`.
 /// @alias grid-column-uncollapse
-@mixin grid-col-uncollapse() {
-  @include grid-column-uncollapse;
+@mixin grid-col-uncollapse($gutter: $grid-column-gutter) {
+  @warn 'This mixin is being replaced by grid-col-gutter(). grid-col-uncollapse() will be removed in Foundation 6.4.';
+  @include grid-column-uncollapse($gutter);
+}
+
+/// Sets bottom margin on grid columns to match gutters
+/// @param {Number|Keyword} $margin [auto]
+///   The bottom margin on grid columns, accepts multiple values:
+///   - A single value will make the margin that exact size.
+///   - A breakpoint name will make the margin the corresponding size in the $margins map.
+///   - "auto" will make the margin responsive, using the $margins map values.
+/// @param {Number|Map} $margins [$grid-column-gutter] - Map or single value to use. Responsive gutter settings by default.
+@mixin grid-column-margin (
+  $margin: auto,
+  $margins: $grid-column-gutter
+) {
+  @include -zf-breakpoint-value($margin, $margins) {
+    $margin-bottom: rem-calc($-zf-bp-value);
+    margin-bottom: $margin-bottom;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
 }

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

@@ -7,15 +7,41 @@
 ////
 
 /// Sizes child elements so that `$n` number of items appear on each row.
+///
 /// @param {Number} $n - Number of elements to display per row.
-/// @param {String} $selector ['.column, .columns'] - Selector(s) to use for child elements.
+/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
+/// @param {Number|List} $gutter
+///   The gutter to apply to child elements. Accepts multiple values:
+///   - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.
+///   - A fixed numeric value will apply this gutter to all breakpoints.
 @mixin grid-layout(
   $n,
-  $selector: '.column'
+  $selector: '.column',
+  $gutter: null
 ) {
-  #{$selector} {
-    width: percentage(1/$n);
+  & > #{$selector} {
     float: $global-left;
+    width: percentage(1/$n);
+
+    // If a $gutter value is passed
+    @if($gutter) {
+      // Gutters
+      @if type-of($gutter) == 'map' {
+        @each $breakpoint, $value in $gutter {
+          $padding: rem-calc($value) / 2;
+
+          @include breakpoint($breakpoint) {
+            padding-right: $padding;
+            padding-left: $padding;
+          }
+        }
+      }
+      @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
+        $padding: rem-calc($gutter) / 2;
+        padding-right: $padding;
+        padding-left: $padding;
+      }
+    }
 
     &:nth-of-type(1n) {
       clear: none;
@@ -26,7 +52,25 @@
     }
 
     &:last-child {
-      float: left;
+      float: $global-left;
+    }
+  }
+}
+
+/// 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/generators/foundation/public/stylesheets/foundation6/grid/_position.scss

@@ -7,7 +7,8 @@
 ////
 
 /// Reposition a column.
-/// @param {Number} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left.
+///
+/// @param {Number|Keyword} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left. Set to center to center the column.
 @mixin grid-column-position($position) {
   @if type-of($position) == 'number' {
     $offset: percentage($position / $grid-column-count);
@@ -16,9 +17,12 @@
     #{$global-left}: $offset;
   }
   @else if $position == center {
-    float: none;
-    margin-left: auto;
+    &, &:last-child:not(:first-child) {
+      float: none;
+      clear: both;
+    }
     margin-right: auto;
+    margin-left: auto;
   }
   @else {
     @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.';
@@ -26,10 +30,11 @@
 }
 
 /// Reset a position definition.
-@mixin grid-column-unposition() {
+@mixin grid-column-unposition {
   position: static;
-  margin-left: 0;
+  float: $global-left;
   margin-right: 0;
+  margin-left: 0;
 }
 
 /// Offsets a column to the right by `$n` columns.
@@ -39,9 +44,9 @@
 }
 
 /// Disable the default behavior of the last column in a row aligning to the opposite edge.
-@mixin grid-column-end() {
+@mixin grid-column-end {
   // This extra specificity is required for the property to be applied
-  &:last-child {
+  &:last-child:last-child {
     float: $global-left;
   }
 }
@@ -54,7 +59,7 @@
 
 /// Shorthand for `grid-column-unposition()`.
 /// @alias grid-column-unposition
-@mixin grid-col-unpos() {
+@mixin grid-col-unpos {
   @include grid-column-unposition;
 }
 
@@ -66,6 +71,6 @@
 
 /// Shorthand for `grid-column-end()`.
 /// @alias grid-column-end
-@mixin grid-col-end() {
+@mixin grid-col-end {
   @include grid-column-end;
 }

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

@@ -8,16 +8,17 @@
 
 /// Change the behavior of columns defined inside this mixin to use a different column count.
 /// @content
+///
 /// @param {Number} $columns - Number of columns to use.
-/// @param {Booleam} $root [false]
+/// @param {Boolean} $root [false]
 ///   If `false`, selectors inside this mixin will nest inside the parent selector.
-///   If `tru`, selectors will not nest.
+///   If `true`, selectors will not nest.
 @mixin grid-context(
   $columns,
   $root: false
 ) {
   // Store the current column count so it can be re-set later
-  $old-grid-column-count: $columns;
+  $old-grid-column-count: $grid-column-count;
   $grid-column-count: $columns !global;
 
   @if $root {
@@ -33,40 +34,66 @@
 
 /// Creates a grid row.
 /// @content
+///
 /// @param {Number} $columns [null] - Column count for this row. `null` will use the default column count.
 /// @param {Keywords} $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 {Boolean} $cf [true] - Whether or not to include a clearfix.
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
 @mixin grid-row(
   $columns: null,
   $behavior: null,
-  $width: $grid-row-width,
-  $cf: true
+  $size: $grid-row-width,
+  $cf: true,
+  $gutters: $grid-column-gutter
 ) {
-  $behavior: -zf-get-options($behavior, nest collapse);
   $margin: auto;
 
-  @if map-get($behavior, nest) {
-    $margin: rem-calc($grid-column-gutter) / 2 * -1;
+  @if index($behavior, nest) != null {
+    @include grid-row-nest($gutters);
 
-    @if map-get($behavior, collapse) {
-      $margin: 0;
+    @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 $cf {
     @include clearfix;
   }
 
-  margin-left: $margin;
-  margin-right: $margin;
-
   @if $columns != null {
     @include grid-context($columns) {
       @content;
     }
   }
 }
+
+/// Inverts the margins of a row to nest it inside of a column.
+///
+/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.
+@mixin grid-row-nest($gutters: $grid-column-gutter) {
+  @include -zf-each-breakpoint {
+    $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;
+
+    margin-right: $margin;
+    margin-left: $margin;
+  }
+}
+
+/// Set a grid row size
+///
+/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.
+@mixin grid-row-size($size: $grid-row-width) {
+  @if $size == expand {
+    $size: none;
+  }
+
+  max-width: $size;
+}

data/generators/foundation/public/stylesheets/foundation6/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, bottom); }
+  .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/generators/foundation/public/stylesheets/foundation6/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/generators/foundation/public/stylesheets/foundation6/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/generators/foundation/public/stylesheets/foundation6/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/generators/foundation/public/stylesheets/foundation6/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;

data/generators/foundation/public/stylesheets/foundation6/prototype/_arrow.scss

@@ -0,0 +1,36 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-arrow
+////
+
+/// Map containing all the `arrow` direction
+/// @type Map
+$prototype-arrow-directions: (
+  down,
+  up,
+  right,
+  left
+) !default;
+
+/// Width of the Arrow, `0.4375rem` by default.
+/// @type Number
+$prototype-arrow-size: 0.4375rem;
+
+/// Color of the Arrow, `$black` by default.
+/// @type Color
+$prototype-arrow-color: $black;
+
+@mixin foundation-prototype-arrow {
+  @each $prototype-arrow-direction in $prototype-arrow-directions {
+    .arrow-#{$prototype-arrow-direction} {
+      @include css-triangle(
+        $prototype-arrow-size, 
+        $prototype-arrow-color, 
+        $prototype-arrow-direction
+      );
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/prototype/_border-box.scss

@@ -0,0 +1,35 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group prototype-border-box
+////
+
+/// Responsive breakpoints for border box.
+/// @type Boolean
+$prototype-border-box-breakpoints: $global-prototype-breakpoints !default;
+
+/// Border box utility
+@mixin border-box {
+  box-sizing: border-box !important;
+}
+
+@mixin foundation-prototype-border-box {
+  .border-box {
+    @include border-box;
+  }
+
+  @if ($prototype-border-box-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-border-box {
+            @include border-box;
+          }
+        }
+      }
+    }
+  }
+}