foundation-rails 6.4.1.3 → 6.4.3.0

data/vendor/assets/scss/forms/_input-group.scss

@@ -106,6 +106,7 @@ $input-prefix-padding: 1rem !default;
     text-align: center;
 
     @if $global-flexbox {
+      display: flex;
       flex: 0 0 auto;
     }
     @else {
@@ -118,10 +119,16 @@ $input-prefix-padding: 1rem !default;
     button,
     label {
       @extend %input-group-child;
-      height: $height;
+
+      @if $global-flexbox {
+        height: auto;
+        align-self: stretch;
+      }
+      @else {
+        height: $height;
+      }
       padding-top: 0;
       padding-bottom: 0;
-
       font-size: $input-font-size;
     }
   }

data/vendor/assets/scss/foundation.scss

@@ -1,6 +1,6 @@
 /**
  * Foundation for Sites by ZURB
- * Version 6.4.1
+ * Version 6.4.3
  * foundation.zurb.com
  * Licensed under MIT Open Source
  */
@@ -9,6 +9,7 @@
 @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/contain';
 @import '../_vendor/sassy-lists/stylesheets/functions/purge';
 @import '../_vendor/sassy-lists/stylesheets/functions/remove';
 @import '../_vendor/sassy-lists/stylesheets/functions/replace';

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

@@ -88,10 +88,6 @@
   @if $columns == expand {
     min-width: 0;
   }
-  // max-width fixes IE 10/11 not respecting the flex-basis property
-  @if $columns != expand and $columns != shrink {
-    max-width: grid-column($columns);
-  }
 }
 
 /// Creates a block grid for a flex grid row.

data/vendor/assets/scss/grid/_position.scss

@@ -32,7 +32,7 @@
 /// Reset a position definition.
 @mixin grid-column-unposition {
   position: static;
-  float: left;
+  float: $global-left;
   margin-right: 0;
   margin-left: 0;
 }

data/vendor/assets/scss/prototype/_prototype.scss

@@ -15,9 +15,6 @@
 // Rotate Mixin
 @import 'rotate';
 
-// Typescale
-@import 'typescale';
-
 // Text utilities
 @import 'text-utilities';
 
@@ -70,7 +67,6 @@
 @import 'spacing';
 
 @mixin foundation-prototype-classes {
-  @include foundation-prototype-typescale;
   @include foundation-prototype-text-utilities;
   @include foundation-prototype-text-transformation;
   @include foundation-prototype-text-decoration;

data/vendor/assets/scss/prototype/_rounded.scss

@@ -45,7 +45,7 @@ $prototype-border-radius: rem-calc(3) !default;
             @include border-rounded;
           }
           .#{$size}-radius {
-            @include rounded-radius;
+            @include border-radius;
           }
         }
       }

data/vendor/assets/scss/settings/_settings.scss

@@ -95,6 +95,7 @@ $global-menu-nested-margin: 1rem;
 $global-text-direction: ltr;
 $global-flexbox: true;
 $global-prototype-breakpoints: false;
+$global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 
@@ -477,6 +478,7 @@ $menu-icon-spacing: 0.25rem;
 $menu-item-background-hover: $light-gray;
 $menu-state-back-compat: true;
 $menu-centered-back-compat: true;
+$menu-icons-back-compat: true;
 
 // 24. Meter
 // ---------
@@ -491,8 +493,12 @@ $meter-fill-bad: $alert-color;
 // 25. Off-canvas
 // --------------
 
-$offcanvas-size: 250px;
-$offcanvas-vertical-size: 250px;
+$offcanvas-sizes: (
+  small: 250px,
+);
+$offcanvas-vertical-sizes: (
+  small: 250px,
+);
 $offcanvas-background: $light-gray;
 $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
 $offcanvas-inner-shadow-size: 20px;
@@ -859,5 +865,5 @@ $grid-margin-gutters: (
 $grid-padding-gutters: $grid-margin-gutters;
 $grid-container-padding: $grid-padding-gutters;
 $grid-container-max: $global-width;
-$block-grid-max: 8;
+$xy-block-grid-max: 8;
 

data/vendor/assets/scss/typography/_base.scss

@@ -147,7 +147,7 @@ $anchor-color: $primary-color !default;
 /// @type Color
 $anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;
 
-/// Default text deocration for links.
+/// Default text decoration for links.
 /// @type String
 $anchor-text-decoration: none !default;
 
@@ -306,12 +306,12 @@ $abbr-underline: 1px dotted $black !default;
   }
 
   // Headings
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
     font-family: $header-font-family;
     font-style: $header-font-style;
     font-weight: $header-font-weight;
@@ -329,7 +329,7 @@ $abbr-underline: 1px dotted $black !default;
     @include breakpoint($size) {
       @each $header, $header-defs in $headers {
         $font-size-temp: 1rem;
-        #{$header} {
+        #{$header}, .#{$header} {
 
           @if map-has-key($header-defs, font-size) {
             $font-size-temp: rem-calc(map-get($header-defs, font-size));

data/vendor/assets/scss/util/_breakpoint.scss

@@ -144,8 +144,12 @@ $breakpoint-classes: (small medium large) !default;
   $bp: index($-zf-breakpoints-keys, $value);
   $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
 
+  $old-zf-size: null;
+
   // Make breakpoint size available as a variable
-  $old-zf-size: $-zf-zero-breakpoint;
+  @if global-variable-exists(-zf-size) {
+    $old-zf-size: $-zf-size;
+  }
   $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
 
   // If $str is still an empty string, no media query is needed
@@ -168,8 +172,12 @@ $breakpoint-classes: (small medium large) !default;
     }
   }
 
-  // Restore the old breakpoint size
-  $-zf-size: $old-zf-size !global;
+  @if $old-zf-size != null {
+    // Restore the old breakpoint size
+    $-zf-size: $old-zf-size !global;
+  } @else {
+    $-zf-size: null !global;
+  }
 }
 
 /// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.

data/vendor/assets/scss/util/_mixins.scss

@@ -21,14 +21,11 @@
 
   @if ($side == top) {
     box-shadow: inset 0 $helper $size (-1)*$helper $color;
-  }
-  @elseif ($side == left) {
+  } @else if ($side == left) {
     box-shadow: inset $helper 0 $size (-1)*$helper $color;
-  }
-  @elseif ($side == right) {
+  } @else if ($side == right) {
     box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;
-  }
-  @elseif ($side == bottom) {
+  } @else if ($side == bottom) {
     box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;
   }
 }

data/vendor/assets/scss/xy-grid/_cell.scss

@@ -108,7 +108,7 @@
 ) {
   @if($breakpoint == null) {
     // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
-    @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') {
+    @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
       $breakpoint: $-zf-size;
     }
     @else {
@@ -130,17 +130,7 @@
   }
 
   @if $gutter-output {
-    // If gutters = map
-    @if(type-of($gutters) == 'map') {
-      // If $gutters map has a key = $breakpoint, output the value
-      @if (map-has-key($gutters, $breakpoint)) {
-        @include xy-gutters($gutter, $gutter-type, $gutter-position);
-      }
-    }
-    // If not a map
-    @else {
-      @include xy-gutters($gutter, $gutter-type, $gutter-position);
-    }
+    @include xy-gutters($gutter, $gutter-type, $gutter-position);
   }
 }
 

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

@@ -12,10 +12,14 @@
   // Grid Container
   .grid-container {
     @include xy-grid-container;
-  }
 
-  .grid-container-padded {
-    @include xy-grid-container-padding;
+    &.fluid {
+      @include xy-grid-container(100%);
+    }
+
+    &.full {
+      @include xy-grid-container(100%, 0);
+    }
   }
 
   // Base grid styles
@@ -53,9 +57,9 @@
     // https://github.com/zurb/foundation-sites/pull/10222 and
     // https://github.com/zurb/foundation-sites/pull/10164
     .grid-x {
-      $str: "> #{$-zf-size}-shrink, > #{$-zf-size}-full";
+      $str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
       @for $i from 1 through $grid-columns {
-        $str: $str + ", > #{$-zf-size}-#{$i}"
+        $str: $str + ", > .#{$-zf-size}-#{$i}"
       }
       #{$str} {
         flex-basis: auto;
@@ -164,6 +168,12 @@
       @include xy-gutters($negative: true);
     }
 
+    // Negative margin for grids within `grid-container/grid-container.fluid`
+    // This allows margin and padding grids to line up with eachother
+    .grid-container:not(.full) > & {
+      @include xy-gutters($negative: true);
+    }
+
     // Base cell styles
     > .cell {
       @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
@@ -175,7 +185,7 @@
 @mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {
   @if $padding-grid {
     @include -zf-each-breakpoint {
-      @for $i from 1 through $block-grid-max {
+      @for $i from 1 through $xy-block-grid-max {
         .#{$-zf-size}-up-#{$i} {
           @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
         }
@@ -185,7 +195,7 @@
 
   @if $margin-grid {
     @include -zf-each-breakpoint {
-      @for $i from 1 through $block-grid-max {
+      @for $i from 1 through $xy-block-grid-max {
         // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
         // for prior breakpoints based on the responsive gutter.
         @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
@@ -198,7 +208,7 @@
           }
         }
       }
-      @for $i from 1 through $block-grid-max {
+      @for $i from 1 through $xy-block-grid-max {
         .grid-margin-x.#{$-zf-size}-up-#{$i} {
           @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
         }
@@ -209,16 +219,16 @@
 
 // Collapse classes
 @mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
-  @include -zf-each-breakpoint {
+  @each $bp in $breakpoint-classes {
     @if $margin-grid {
-      .#{$-zf-size}-margin-collapse {
-        @include xy-grid-collapse($gutter-type: margin);
+      .#{$bp}-margin-collapse {
+        @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);
       }
     }
 
     @if $padding-grid {
-      .#{$-zf-size}-padding-collapse {
-        @include xy-grid-collapse($gutter-type: padding);
+      .#{$bp}-padding-collapse {
+        @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);
       }
     }
   }
@@ -275,9 +285,9 @@
       // https://github.com/zurb/foundation-sites/issues/10244
       // https://github.com/zurb/foundation-sites/pull/10222 and
       // https://github.com/zurb/foundation-sites/pull/10164
-      $str: "> #{$-zf-size}-shrink, > #{$-zf-size}-full";
+      $str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
       @for $i from 1 through $grid-columns {
-        $str: $str + ", > #{$-zf-size}-#{$i}"
+        $str: $str + ", > .#{$-zf-size}-#{$i}"
       }
       #{$str} {
         flex-basis: auto;
@@ -322,11 +332,12 @@
   }
 
   @if $margin-grid {
-    @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y')
+    @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');
   }
+
 }
 
-@mixin xy-frame-grid-classes($vertical-grid: true) {
+@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {
   // Framed grid styles
   .grid-frame {
     @include xy-grid-frame;
@@ -374,7 +385,6 @@
   }
 
   @if $vertical-grid {
-
     .grid-y {
       &.grid-frame {
         width: auto;
@@ -400,6 +410,17 @@
       }
     }
   }
+  @if $margin-grid {
+    @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');
+    .grid-frame.grid-margin-y {
+      @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);
+    }
+    @include -zf-each-breakpoint(false) {
+      .grid-margin-y.#{$-zf-size}-grid-frame {
+        @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);
+      }
+    }
+  }
 }
 
 // Final classes
@@ -450,6 +471,6 @@
   }
 
   @if ($frame-grid) {
-    @include xy-frame-grid-classes($vertical-grid)
+    @include xy-frame-grid-classes($vertical-grid, $margin-grid)
   }
 }

data/vendor/assets/scss/xy-grid/_collapse.scss

@@ -14,40 +14,60 @@
 @mixin xy-grid-collapse(
   $selector: '.cell',
   $gutter-type: margin,
-  $gutter-position: right left
+  $gutter-position: right left,
+  $min-breakpoint: $-zf-zero-breakpoint
 ) {
   // First, lets negate any margins on the top level
   @if ($gutter-type == 'margin') {
 
-    @each $value in $gutter-position {
-      margin-#{$value}: 0;
-    }
+    @include breakpoint($min-breakpoint) {
+      @each $value in $gutter-position {
+        margin-#{$value}: 0;
+      }
 
       > #{$selector} {
         @each $value in $gutter-position {
           margin-#{$value}: 0;
         }
       }
+    }
+
+    $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);
 
     // Output new widths to not include gutters
     @each $bp in $breakpoint-classes {
-      @for $i from 1 through $grid-columns {
-        // Sizing (percentage)
-        > .#{$bp}-#{$i} {
-          @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+      @if(sl-contain($excluded-bps, $bp)) {
+        @include breakpoint($min-breakpoint) {
+          @for $i from 1 through $grid-columns {
+            // Sizing (percentage)
+            > .#{$bp}-#{$i} {
+              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+            }
+          }
         }
-      }
+      } @else {
+        @include breakpoint($bp) {
+          @for $i from 1 through $grid-columns {
+            // Sizing (percentage)
+            > .#{$bp}-#{$i} {
+              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+            }
+          }
+        }
+      } 
     }
   }
   @else {
 
-    @each $value in $gutter-position {
-      margin-#{$value}: 0;
-    }
-
-    > #{$selector} {
+    @include breakpoint($min-breakpoint) {
       @each $value in $gutter-position {
-        padding-#{$value}: 0;
+        margin-#{$value}: 0;
+      }
+
+      > #{$selector} {
+        @each $value in $gutter-position {
+          padding-#{$value}: 0;
+        }
       }
     }
   }