foundation-rails 6.2.4.0 → 6.3.0.0

data/vendor/assets/scss/forms/_text.scss

@@ -22,6 +22,10 @@ $input-font-family: inherit !default;
 /// @type Number
 $input-font-size: rem-calc(16) !default;
 
+/// Font weight of text inputs.
+/// @type Keyword
+$input-font-weight: $global-weight-normal !default;
+
 /// Background color of text inputs.
 /// @type Color
 $input-background: $white !default;
@@ -66,9 +70,9 @@ $input-number-spinners: true !default;
 /// @type Border
 $input-radius: $global-radius !default;
 
-/// Border radius for buttons, defaulted to global-radius.
+/// Border radius for form buttons, defaulted to global-radius.
 /// @type Number
-$button-radius: $global-radius !default;
+$form-button-radius: $global-radius !default;
 
 @mixin form-element {
   $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
@@ -77,16 +81,18 @@ $button-radius: $global-radius !default;
   box-sizing: border-box;
   width: 100%;
   height: $height;
+  margin: 0 0 $form-spacing;
   padding: $form-spacing / 2;
+
   border: $input-border;
-  margin: 0 0 $form-spacing;
+  border-radius: $input-radius;
+  background-color: $input-background;
+  box-shadow: $input-shadow;
 
   font-family: $input-font-family;
   font-size: $input-font-size;
+  font-weight: $input-font-weight;
   color: $input-color;
-  background-color: $input-background;
-  box-shadow: $input-shadow;
-  border-radius: $input-radius;
 
   @if has-value($input-transition) {
     transition: $input-transition;
@@ -94,9 +100,9 @@ $button-radius: $global-radius !default;
 
   // Focus state
   &:focus {
+    outline: none;
     border: $input-border-focus;
     background-color: $input-background-focus;
-    outline: none;
     box-shadow: $input-shadow-focus;
 
     @if has-value($input-transition) {
@@ -110,8 +116,7 @@ $button-radius: $global-radius !default;
   #{text-inputs()},
   textarea {
     @include form-element;
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    appearance: none;
   }
 
   // Text areas
@@ -141,25 +146,23 @@ $button-radius: $global-radius !default;
   // Reset styles on button-like inputs
   [type='submit'],
   [type='button'] {
-    border-radius: $button-radius;
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    appearance: none;
+    border-radius: $form-button-radius;
   }
 
   // Reset Normalize setting content-box to search elements
-  // scss-lint:disable QualifyingElement
-  input[type='search'] {
+  input[type='search'] { // sass-lint:disable-line no-qualifying-elements
     box-sizing: border-box;
   }
 
   // Number input styles
   [type='number'] {
     @if not $input-number-spinners {
-      -moz-appearance: textfield;
+      -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefix
 
       &::-webkit-inner-spin-button,
       &::-webkit-outer-spin-button {
-        -webkit-appearance: none;
+        -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefix
         margin: 0;
       }
     }

data/vendor/assets/scss/foundation.scss

@@ -1,10 +1,24 @@
 /**
  * Foundation for Sites by ZURB
- * Version 6.2.4
+ * Version 6.3.0
  * foundation.zurb.com
  * Licensed under MIT Open Source
  */
 
+// Dependencies
+@import "../_vendor/normalize-scss/sass/normalize";
+@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
+@import '../_vendor/sassy-lists/stylesheets/helpers/true';
+@import '../_vendor/sassy-lists/stylesheets/functions/purge';
+@import '../_vendor/sassy-lists/stylesheets/functions/remove';
+@import '../_vendor/sassy-lists/stylesheets/functions/replace';
+@import '../_vendor/sassy-lists/stylesheets/functions/to-list';
+
+// Settings
+// import your own `settings` here or
+// import and modify the default settings through
+// @import "settings/settings";
+
 // Sass utilities
 @import 'util/util';
 
@@ -24,12 +38,13 @@
 @import 'components/badge';
 @import 'components/breadcrumbs';
 @import 'components/callout';
+@import 'components/card';
 @import 'components/close-button';
 @import 'components/drilldown';
 @import 'components/dropdown-menu';
 @import 'components/dropdown';
 @import 'components/flex';
-@import 'components/flex-video';
+@import 'components/responsive-embed';
 @import 'components/label';
 @import 'components/media-object';
 @import 'components/menu';
@@ -70,13 +85,14 @@
   @include foundation-breadcrumbs;
   @include foundation-button-group;
   @include foundation-callout;
+  @include foundation-card;
   @include foundation-close-button;
   @include foundation-menu;
   @include foundation-menu-icon;
   @include foundation-drilldown-menu;
   @include foundation-dropdown;
   @include foundation-dropdown-menu;
-  @include foundation-flex-video;
+  @include foundation-responsive-embed;
   @include foundation-label;
   @include foundation-media-object;
   @include foundation-off-canvas;

data/vendor/assets/scss/grid/_classes.scss

@@ -12,6 +12,7 @@
   $row: 'row',
   $column: 'column',
   $column-row: 'column-row',
+  $gutter: 'gutter',
   $push: 'push',
   $pull: 'pull',
   $center: 'centered',
@@ -20,7 +21,8 @@
   $uncollapse: 'uncollapse',
   $offset: 'offset',
   $end: 'end',
-  $expanded: 'expanded'
+  $expanded: 'expanded',
+  $block: 'block'
 ) {
   // Row
   .#{$row} {
@@ -38,18 +40,30 @@
       @include grid-row-nest($grid-column-gutter);
 
       &.#{$collapse} {
-        margin-left: 0;
         margin-right: 0;
+        margin-left: 0;
       }
     }
 
     // Expanded (full-width) row
     &.#{$expanded} {
-      max-width: none;
+      @include grid-row-size(expand);
 
       .#{$row} {
-        margin-left: auto;
         margin-right: auto;
+        margin-left: auto;
+      }
+    }
+
+    @if type-of($grid-column-gutter) == 'map' {
+      // Static (unresponsive) row gutters
+      //
+      @each $breakpoint, $value in $grid-column-gutter {
+        &.#{$gutter}-#{$breakpoint} {
+          > .#{$column} {
+            @include grid-col-gutter($value);
+          }
+        }
       }
     }
   }
@@ -73,10 +87,10 @@
 
   // 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;
   }
 
   @include -zf-each-breakpoint {
@@ -108,7 +122,7 @@
     // Block grid
     @for $i from 1 through $block-grid-max {
       .#{$-zf-size}-up-#{$i} {
-        @include grid-layout($i, ".#{$column}");
+        @include grid-layout($i, '.#{$column}');
       }
     }
 
@@ -117,20 +131,18 @@
       > .#{$column} { @include grid-col-collapse; }
 
       .#{$row} {
-        margin-left: 0;
         margin-right: 0;
+        margin-left: 0;
       }
     }
 
     .#{$expanded}.#{$row} .#{$-zf-size}-#{$collapse}.#{$row} {
-      margin-left: 0;
       margin-right: 0;
+      margin-left: 0;
     }
 
     .#{$-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); }
     }
 
     // Positioning
@@ -146,9 +158,14 @@
     }
   }
 
+  // Block grid columns
+  .#{$column}-#{$block} {
+    @include grid-column-margin;
+  }
+
   @if $column == 'column' {
     .columns {
-      // scss-lint:disable PlaceholderInExtend
+      // sass-lint:disable-block placeholder-in-extend
       @extend .column;
     }
   }

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

@@ -52,30 +52,16 @@
 /// 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
 ) {
   @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;
-        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;
-  }
+  @include grid-column-gutter($gutters: $gutters);
 
   // Last column alignment
   @if $grid-column-align-edge {
@@ -87,12 +73,12 @@
 
 /// 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 {
@@ -112,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/vendor/assets/scss/grid/_flex-grid.scss

@@ -10,36 +10,38 @@
 ///
 /// @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 {
@@ -50,18 +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) {
-  // 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);
   }
 
@@ -70,39 +71,25 @@
 
 /// 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 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;
-  }
+  @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 == 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);
   }
 }
@@ -125,30 +112,20 @@
   }
 }
 
-/// 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 {
@@ -161,7 +138,7 @@
 
     // Expanded row
     &.expanded {
-      max-width: none;
+      @include grid-row-size(expand);
     }
 
     &.collapse {
@@ -174,8 +151,8 @@
     // From collapsed child
     &.is-collapse-child,
     &.collapse > .column > .row {
-      margin-left: 0;
       margin-right: 0;
+      margin-left: 0;
     }
   }
 
@@ -187,16 +164,38 @@
   // 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 {
@@ -237,6 +236,25 @@
         }
       }
 
+      // 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 {
@@ -257,9 +275,7 @@
     }
 
     .#{$-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); }
     }
   }
 
@@ -269,16 +285,8 @@
     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
+
   }
 }