foundation-rails 6.2.0.1 → 6.2.1.0

data/vendor/assets/scss/components/_callout.scss

@@ -6,7 +6,7 @@
 /// @group callout
 ////
 
-/// Defualt background color.
+/// Default background color.
 /// @type Color
 $callout-background: $white !default;
 

data/vendor/assets/scss/components/_dropdown-menu.scss

@@ -124,7 +124,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     }
 
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
             @include dropdown-menu-direction(horizontal);
@@ -170,8 +170,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
     &.opens-left .is-dropdown-submenu {
       left: auto;
-      right: 0;
-      top: 100%;
+      right: 100%;
     }
   }
 

data/vendor/assets/scss/components/_flex.scss

@@ -20,7 +20,7 @@
   // Source ordering
   @include -zf-each-breakpoint {
     @for $i from 1 through 6 {
-      .#{$-zf-size} {
+      .#{$-zf-size}-order-#{$i} {
         @include flex-order($i);
       }
     }

data/vendor/assets/scss/components/_media-object.scss

@@ -75,13 +75,13 @@ $mediaobject-image-width-stacked: 100% !default;
     }
 
     @if $global-flexbox {
-      &.stack-for-small {
+      &.stack-for-#{$-zf-zero-breakpoint} {
         flex-wrap: wrap;
       }
     }
 
-    &.stack-for-small .media-object-section {
-      @include breakpoint(small only) {
+    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
+      @include breakpoint($-zf-zero-breakpoint only) {
         @include media-object-stack;
       }
     }
@@ -97,8 +97,13 @@ $mediaobject-image-width-stacked: 100% !default;
       }
     }
     @else {
-      &.middle { vertical-align: middle; }
-      &.bottom { vertical-align: bottom; }
+      &.middle {
+        vertical-align: middle;
+      }
+
+      &.bottom {
+        vertical-align: bottom;
+      }
     }
   }
 }

data/vendor/assets/scss/components/_menu.scss

@@ -234,7 +234,7 @@ $menu-icon-spacing: 0.25rem !default;
     }
 
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
             @include menu-direction(horizontal);

data/vendor/assets/scss/components/_off-canvas.scss

@@ -162,7 +162,7 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
 
   // Reveal off-canvas menu on larger screens
   @each $name, $value in $breakpoint-classes {
-    @if $name != small {
+    @if $name != $-zf-zero-breakpoint {
       @include breakpoint($name) {
         .position-left.reveal-for-#{$name} {
           @include off-canvas-reveal(left);

data/vendor/assets/scss/components/_pagination.scss

@@ -113,7 +113,7 @@ $pagination-arrows: true !default;
 @mixin pagination-item-disabled {
   padding: $pagination-item-padding;
   color: $pagination-item-color-disabled;
-  cursor: default;
+  cursor: not-allowed;
 
   &:hover {
     background: transparent;

data/vendor/assets/scss/components/_reveal.scss

@@ -104,6 +104,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   max-width: none;
   margin-left: 0;
   border: 0;
+  border-radius: 0;
 }
 
 @mixin foundation-reveal {
@@ -153,7 +154,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
       @include reveal-modal-fullscreen;
     }
 
-    @include breakpoint(small only) {
+    @include breakpoint($-zf-zero-breakpoint only) {
       @include reveal-modal-fullscreen;
     }
 

data/vendor/assets/scss/components/_switch.scss

@@ -179,7 +179,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
     height: $paddle-height;
   }
 
-  input:checked ~ .switch-paddle:after {
+  input:checked ~ .switch-paddle::after {
     #{$global-left}: $paddle-left-active;
   }
 }

data/vendor/assets/scss/components/_table.scss

@@ -40,8 +40,8 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h
 /// @type Color
 $table-striped-background: smart-scale($table-background, $table-color-scale) !default;
 
-/// Default value for showing the stripe on rows of the tables, excluding the header and footer If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or anyother value, the table rows will have no striping.
-/// @type Keyoword
+/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.
+/// @type Keyword
 $table-stripe: even !default;
 
 /// Default color for header background.

data/vendor/assets/scss/components/_top-bar.scss

@@ -22,7 +22,7 @@ $topbar-submenu-background: $topbar-background !default;
 /// @type Number
 $topbar-title-spacing: 1rem !default;
 
-/// Width of `<input>` elements inside the top bar.
+/// Maximum width of `<input>` elements inside the top bar.
 /// @type Number
 $topbar-input-width: 200px !default;
 
@@ -58,7 +58,7 @@ $topbar-unstack-breakpoint: medium !default;
 
   // Restrain width of inputs by default to make them easier to arrange
   input {
-    width: $topbar-input-width;
+    max-width: $topbar-input-width;
     margin-#{$global-right}: 1rem;
   }
 
@@ -118,22 +118,24 @@ $topbar-unstack-breakpoint: medium !default;
   // Top bar container
   .top-bar {
     @include top-bar-container;
-  }
 
-  // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
-  @each $size in $breakpoint-classes {
-    .stacked-for-#{$size} {
-      @include breakpoint($size down) {
-        @include top-bar-stacked;
-      }
-    }
-  }
+    // Stack on small screens by default
+    @include top-bar-stacked;
 
-  // Stack on small screens by default
-  @include top-bar-stacked;
+    @include breakpoint($topbar-unstack-breakpoint) {
+      @include top-bar-unstack;
+    }
 
-  @include breakpoint($topbar-unstack-breakpoint) {
-    @include top-bar-unstack;
+    // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        &.stacked-for-#{$size} {
+          @include breakpoint($size down) {
+            @include top-bar-stacked;
+          }
+        }
+      }
+    }
   }
 
   // Sub-sections
@@ -152,7 +154,7 @@ $topbar-unstack-breakpoint: medium !default;
     .top-bar-title {
       float: left;
       margin-right: $topbar-title-spacing;
-      
+
     }
 
     .top-bar-left {

data/vendor/assets/scss/components/_visibility.scss

@@ -6,7 +6,7 @@
 /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
 @mixin show-for($size) {
   $size: map-get($breakpoints, $size);
-  $size: -zf-bp-to-em($size) - (1/16);
+  $size: -zf-bp-to-em($size) - (1 / 16);
 
   @include breakpoint($size down) {
     display: none !important;
@@ -20,7 +20,7 @@
   $upper-bound-size: -zf-map-next($breakpoints, $size);
 
   // more often than not this will be correct, just one time round the loop it won't so set in scope here
-  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16);
   // test actual lower-bound-size, if 0 set it to 0em
   @if strip-unit($lower-bound-size) == 0 {
     $lower-bound: -zf-bp-to-em($lower-bound-size);
@@ -33,6 +33,7 @@
   }
   @else {
     $upper-bound: -zf-bp-to-em($upper-bound-size);
+
     @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
       display: none !important;
     }
@@ -68,7 +69,7 @@
 
   // Responsive visibility classes
   @each $size in $breakpoint-classes {
-    @if $size != small {
+    @if $size != $-zf-zero-breakpoint {
       .hide-for-#{$size} {
         @include hide-for($size);
       }

data/vendor/assets/scss/forms/_checkbox.scss

@@ -21,6 +21,10 @@
     margin-#{$global-right}: $form-spacing;
     margin-bottom: 0;
     vertical-align: baseline;
+
+    &[for] {
+      cursor: pointer;
+    }
   }
 
   // Styles for inputs inside labels

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

@@ -34,12 +34,12 @@ $input-prefix-padding: 1rem !default;
     }
 
     > :first-child {
-      border-radius: $global-radius 0 0 $global-radius;
+      border-radius: if($global-text-direction == rtl, 0 $global-radius $global-radius 0, $global-radius 0 0 $global-radius);
     }
 
     > :last-child {
       > * {
-        border-radius: 0 $global-radius $global-radius 0;
+        border-radius: if($global-text-direction == rtl, $global-radius 0 0 $global-radius, 0 $global-radius $global-radius 0);
       }
     }
   }

data/vendor/assets/scss/forms/_select.scss

@@ -55,6 +55,7 @@ $select-radius: $global-radius !default;
 
   &[multiple] {
     height: auto;
+    background-image: none;
   }
 }
 

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

@@ -52,7 +52,7 @@ $input-shadow-focus: 0 0 5px $medium-gray !default;
 
 /// Cursor to use when hovering over a disabled text input.
 /// @type Cursor
-$input-cursor-disabled: default !default;
+$input-cursor-disabled: not-allowed !default;
 
 /// Properties to transition on text inputs.
 /// @type Transition

data/vendor/assets/scss/foundation.scss

@@ -1,6 +1,6 @@
 /**
  * Foundation for Sites by ZURB
- * Version 6.2.0
+ * Version 6.2.1
  * foundation.zurb.com
  * Licensed under MIT Open Source
  */

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

@@ -96,6 +96,11 @@
     padding-right: $padding;
   }
 
+  // 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 {
+    min-width: 0;
+  }
   // max-width fixes IE 10/11 not respecting the flex-basis property
   @if $columns != null and $columns != shrink {
     max-width: grid-column($columns);
@@ -173,6 +178,7 @@
   // The double .row class is needed to bump up the specificity
   .column.row.row {
     float: none;
+    display: block;
 
     // To properly nest a column row, padding and margin is removed
     .row & {
@@ -204,20 +210,16 @@
       .#{$-zf-size}-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);
+        @include flex-grid-layout($i);
       }
     }
 
-    @if $-zf-size != small {
+    @if $-zf-size != $-zf-zero-breakpoint {
       // Sizing (expand)
       @include breakpoint($-zf-size) {
         .#{$-zf-size}-expand {
@@ -228,7 +230,7 @@
       // Auto-stacking/unstacking
       @at-root (without: media) {
         .row.#{$-zf-size}-unstack {
-          .column {
+          > .column {
             flex: flex-grid-column(100%);
 
             @include breakpoint($-zf-size) {

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

@@ -80,11 +80,12 @@
 /// @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: $grid-column-gutter) {
   @if type-of($gutter) == 'number' {
-    $gutter: (small: $gutter);
+    $gutter: ($-zf-zero-breakpoint: $gutter);
   }
 
   @each $breakpoint, $value in $gutter {
     $margin: rem-calc($value) / 2 * -1;
+    max-width: none;
 
     @include breakpoint($breakpoint) {
       margin-left: $margin;

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

@@ -352,7 +352,7 @@ $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1);
 $input-shadow-focus: 0 0 5px $medium-gray;
-$input-cursor-disabled: default;
+$input-cursor-disabled: not-allowed;
 $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
@@ -564,3 +564,4 @@ $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
+

data/vendor/assets/scss/typography/_alignment.scss

@@ -6,7 +6,7 @@
   @each $size in $breakpoint-classes {
     @include breakpoint($size) {
       @each $align in (left, right, center, justify) {
-        @if $size != 'small' {
+        @if $size != $-zf-zero-breakpoint {
           .#{$size}-text-#{$align} {
             text-align: $align;
           }

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

@@ -18,11 +18,12 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
-@if not map-has-key($breakpoints, small) or not map-has-key($breakpoints, medium) {
-  @error 'Your list of breakpoints (defined in $breakpoints) must include one named "small" and one named "medium".';
-}
-@else if map-get($breakpoints, small) != 0 {
-  @error 'Your "small" breakpoint (defined in $breakpoints) must be set to "0".';
+$-zf-zero-breakpoint: small !default;
+
+@if nth(map-values($breakpoints),1) != 0 {
+  @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+} @else {
+  $-zf-zero-breakpoint: nth(map-keys($breakpoints),1);
 }
 
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
@@ -32,7 +33,7 @@ $breakpoint-classes: (small medium large) !default;
 /// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
-@function breakpoint($val: small) {
+@function breakpoint($val: $-zf-zero-breakpoint) {
   // Size or keyword
   $bp: nth($val, 1);
   // Value for max-width media queries
@@ -64,6 +65,7 @@ $breakpoint-classes: (small medium large) !default;
     }
     @else {
       $bp: 0;
+      @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
     }
   }
 

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

@@ -139,8 +139,10 @@
   &::after {
     content: ' ';
     display: table;
-    flex-basis: 0;
-    order: 1;
+    @if $global-flexbox {
+      flex-basis: 0;
+      order: 1;
+    }
   }
 
   &::after {
@@ -220,7 +222,7 @@
   $map: $breakpoint-classes;
 
   @if not $small {
-    $map: map-remove($map, small);
+    $map: map-remove($map, $-zf-zero-breakpoint);
   }
 
   @each $size in $map {

data/vendor/assets/scss/util/_value.scss

@@ -98,7 +98,7 @@
 ///
 /// @param {Map} $map - Map to pull a value from.
 /// @param {String} $keys... - Keys to use when looking for a value.
-/// @return The value found in the map.
+/// @returns {Mixed} The value found in the map.
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
     $map: map-get($map, $key);