foundation-rails 6.4.3.0 → 6.5.1.0

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

@@ -43,11 +43,12 @@ $dropdown-sizes: (
   position: absolute;
   z-index: 10;
 
+  display: none;
+
   width: $dropdown-width;
   padding: $dropdown-padding;
 
   visibility: hidden;
-  display: none;
   border: $dropdown-border;
   border-radius: $dropdown-radius;
   background-color: $dropdown-background;
@@ -61,8 +62,8 @@ $dropdown-sizes: (
   }
 
   &.is-open {
-    visibility: visible;
     display: block;
+    visibility: visible;
   }
 }
 
@@ -72,8 +73,10 @@ $dropdown-sizes: (
   }
 
   @each $name, $size in $dropdown-sizes {
-    .dropdown-pane.#{$name} {
-      width: $size;
+    .dropdown-pane {
+      &.#{$name} {
+        width: $size;
+      }
     }
   }
 }

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

@@ -71,17 +71,19 @@ $flexbox-responsive-breakpoints: true !default;
 
 @mixin foundation-flex-classes {
   // Horizontal alignment using justify-content
-  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
+  @each $hdir, $prop in $-zf-flex-justify {
     .align-#{$hdir} {
       @include flex-align($x: $hdir);
     }
   }
   
   // Horizontal alignment Specifically for Vertical Menu
-  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') {
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {
     .align-#{$hdir} {
-      &.vertical.menu > li > a { 
-        @include flex-align($x: $hdir);
+      &.vertical {
+        &.menu > li > a {
+          @include flex-align($x: $hdir);
+        }
       }
     }
   }

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

@@ -26,6 +26,18 @@ $mediaobject-image-width-stacked: 100% !default;
   @if $global-flexbox {
     flex-wrap: nowrap;
   }
+
+  img {
+    max-width: none;
+  }
+
+  @if $global-flexbox {
+    &.stack-for-#{$-zf-zero-breakpoint} {
+      @include breakpoint($-zf-zero-breakpoint only) {
+        flex-wrap: wrap;
+      }
+    }
+  }
 }
 
 /// Adds styles for sections within a media object.
@@ -50,6 +62,27 @@ $mediaobject-image-width-stacked: 100% !default;
   > :last-child {
     margin-bottom: 0;
   }
+
+  .stack-for-#{$-zf-zero-breakpoint} & {
+    @include breakpoint($-zf-zero-breakpoint only) {
+      @include media-object-stack;
+    }
+  }
+
+  @if $global-flexbox {
+    &.main-section {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+  }
+  @else {
+    &.middle {
+      vertical-align: middle;
+    }
+
+    &.bottom {
+      vertical-align: bottom;
+    }
+  }
 }
 
 /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
@@ -73,42 +106,9 @@ $mediaobject-image-width-stacked: 100% !default;
 @mixin foundation-media-object {
   .media-object {
     @include media-object-container;
-
-    img {
-      max-width: none;
-    }
-
-    @if $global-flexbox {
-      &.stack-for-#{$-zf-zero-breakpoint} {
-        @include breakpoint($-zf-zero-breakpoint only) {
-          flex-wrap: wrap;
-        }
-      }
-    }
-
-    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
-      @include breakpoint($-zf-zero-breakpoint only) {
-        @include media-object-stack;
-      }
-    }
   }
 
   .media-object-section {
     @include media-object-section;
-
-    @if $global-flexbox {
-      &.main-section {
-        flex: 1 1 0px; // sass-lint:disable-line zero-unit
-      }
-    }
-    @else {
-      &.middle {
-        vertical-align: middle;
-      }
-
-      &.bottom {
-        vertical-align: bottom;
-      }
-    }
   }
 }

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

@@ -34,10 +34,6 @@ $menu-item-background-active: get-color(primary) !default;
 /// @type Number
 $menu-icon-spacing: 0.25rem !default;
 
-/// Background color for an hovered menu item.
-/// @type Color
-$menu-item-background-hover: $light-gray !default;
-
 /// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`. 
 /// But please note that `active` will be removed in upcoming versions.
 /// @type Boolean

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

@@ -416,10 +416,10 @@ $breakpoint: small
   visibility: visible;
   height: auto;
   position: static;
-  background: inherit;
-  width: inherit;
-  overflow: inherit;
-  transition: inherit;
+  background: none;
+  width: auto;
+  overflow: visible;
+  transition: none;
 
   // Increase CSS specificity
   &.position-left,

data/vendor/assets/scss/components/_orbit.scss

@@ -67,6 +67,7 @@ $orbit-control-zindex: 10 !default;
 /// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
 @mixin orbit-slide {
   width: 100%;
+  position: absolute;
 
   &.no-motionui {
     &.is-active {

data/vendor/assets/scss/components/_responsive-embed.scss

@@ -17,9 +17,6 @@ $responsive-embed-ratios: (
   widescreen: 16 by 9,
 ) !default;
 
-// WARNING: Will be removed in version 6.4
-$responsive-embed-ratio: default;
-
 /// Creates a responsive embed container.
 /// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
 @mixin responsive-embed($ratio: default) {
@@ -58,13 +55,3 @@ $responsive-embed-ratio: default;
     }
   }
 }
-
-@mixin foundation-flex-video {
-  @warn 'This mixin is being replaced by foundation-responsive-embed(). foundation-flex-video() will be removed in Foundation 6.4.';
-  @include foundation-responsive-embed;
-}
-
-@mixin flex-video($ratio: $responsive-embed-ratio) {
-  @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
-  @include responsive-embed($ratio);
-}

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

@@ -41,6 +41,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
 // Placeholder selector for medium-and-up modals
 // Prevents duplicate CSS when defining multiple Reveal sizes
+// This should be in the same breakpoint then `@mixin reveal-modal-width`
 @include breakpoint(medium) {
   %reveal-centered {
     right: auto;
@@ -62,7 +63,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
   display: none;
   background-color: $background;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 /// Adds base styles for a modal.
@@ -101,8 +102,9 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   $width: $reveal-width,
   $max-width: $reveal-max-width
 ) {
+  // Extends must be made outside of breakpoints for compatibility with newer Sass versions (libsass v3.5)
+  @extend %reveal-centered;
   @include breakpoint(medium) {
-    @extend %reveal-centered;
     width: $width;
     max-width: $max-width;
   }
@@ -111,13 +113,14 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 /// Creates a full-screen modal, which stretches the full width and height of the window.
 @mixin reveal-modal-fullscreen {
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
 
   width: 100%;
   max-width: none;
   height: 100%;
-  height: 100vh; // sass-lint:disable-line no-duplicate-properties
-  min-height: 100vh;
+  min-height: 100%;
   margin-left: 0;
 
   border: 0;
@@ -125,18 +128,20 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 }
 
 @mixin foundation-reveal {
-  // [TODO] Is this necessary?
-  body.is-reveal-open { // sass-lint:disable-line no-qualifying-elements
-    overflow: hidden;
-  }
 
-  // html gets this class only in iOS
-  html.is-reveal-open,
-  html.is-reveal-open body {
-    min-height: 100%;
-    overflow: hidden;
+  /// Disables the scroll when Reveal is shown to prevent the background from shifting
+  html.is-reveal-open {
     position: fixed;
-    user-select: none;
+    width: 100%;
+    overflow-y: hidden;
+
+    &.zf-has-scroll {
+      overflow-y: scroll;
+    }
+
+    body { // sass-lint:disable-line no-qualifying-elements
+      overflow-y: hidden;
+    }
   }
 
   // Overlay

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-// sass-lint:disable force-element-nesting, no-qualifying-elements
+// sass-lint:disable no-qualifying-elements
 
 ////
 /// @group table
@@ -246,7 +246,7 @@ $table-stack-breakpoint: medium !default;
     }
 
     // Darkens the odd striped table rows.
-    @elseif($table-stripe == odd) {
+    @else if($table-stripe == odd) {
       &:not(.unstriped) tr:nth-of-type(odd):hover {
         background-color: $table-row-stripe-hover;
       }
@@ -262,7 +262,7 @@ $table-stack-breakpoint: medium !default;
     }
 
     // Darkens the odd striped table rows.
-    @elseif($table-stripe == odd) {
+    @else if($table-stripe == odd) {
       &.striped tr:nth-of-type(odd):hover {
         background-color: $table-row-stripe-hover;
       }
@@ -323,8 +323,5 @@ $table-stack-breakpoint: medium !default;
   .table-scroll {
     overflow-x: auto;
 
-    table {
-      width: auto;
-    }
   }
 }

data/vendor/assets/scss/components/_tabs.scss

@@ -37,10 +37,6 @@ $tab-item-background-hover: $white !default;
 /// @type Number
 $tab-item-padding: 1.25rem 1.5rem !default;
 
-/// Maximum number of `expand-n` classes to include in the CSS.
-/// @type Number
-$tab-expand-max: 6 !default;
-
 /// Default background color of tab content.
 /// @type Color
 $tab-content-background: $white !default;
@@ -91,6 +87,7 @@ $tab-content-padding: 1rem !default;
   float: #{$global-left};
 
   > a {
+    @include disable-mouse-outline;
     display: block;
     padding: $padding;
     font-size: $font-size;

data/vendor/assets/scss/components/_thumbnail.scss

@@ -8,7 +8,7 @@
 
 /// Border around thumbnail images.
 /// @type Border
-$thumbnail-border: solid 4px $white !default;
+$thumbnail-border: 4px solid $white !default;
 
 /// Bottom margin for thumbnail images.
 /// @type Length

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

@@ -6,7 +6,10 @@
 /// @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);
+  // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
+  // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
+  // See https://github.com/zurb/foundation-sites/issues/11313
+  $size: -zf-bp-to-em($size) - .00125;
 
   @include breakpoint($size down) {
     display: none !important;
@@ -20,7 +23,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) - .00125;
   // 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);

data/vendor/assets/scss/forms/_error.scss

@@ -45,6 +45,7 @@ $input-error-font-weight: $global-weight-bold !default;
   &:not(:focus) {
     border-color: $background;
     background-color: mix($background, $white, $background-lighten);
+
     &::placeholder {
       color: $background;
     }

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

@@ -22,7 +22,7 @@ $input-prefix-border: 1px solid $medium-gray !default;
 $input-prefix-padding: 1rem !default;
 
 @mixin foundation-form-prepostfix {
-  $height: ($input-font-size + $form-spacing * 1.5);
+  $height: ($input-font-size * $input-line-height) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);
 
   .input-group {
     display: if($global-flexbox, flex, table);
@@ -34,11 +34,13 @@ $input-prefix-padding: 1rem !default;
     }
 
     > :first-child {
-      border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
+      &, &.input-group-button > * {
+        border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
+      }
     }
 
     > :last-child {
-      > * {
+      &, &.input-group-button > * {
         border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
       }
     }
@@ -91,12 +93,8 @@ $input-prefix-padding: 1rem !default;
 
     @if $global-flexbox {
       flex: 1 1 0px; // sass-lint:disable-line zero-unit
-      height: auto;
       min-width: 0;
     }
-    @else {
-      height: $height;
-    }
   }
 
   .input-group-button {
@@ -121,8 +119,8 @@ $input-prefix-padding: 1rem !default;
       @extend %input-group-child;
 
       @if $global-flexbox {
-        height: auto;
         align-self: stretch;
+        height: auto;
       }
       @else {
         height: $height;
@@ -135,8 +133,10 @@ $input-prefix-padding: 1rem !default;
 
   // Specificity bump needed to prevent override by buttons
   @if not $global-flexbox {
-      .input-group .input-group-button {
-          display: table-cell;
+    .input-group {
+      .input-group-button {
+        display: table-cell;
       }
+    }
   }
 }

data/vendor/assets/scss/forms/_meter.scss

@@ -42,8 +42,8 @@ $meter-fill-bad: $alert-color !default;
     // `-moz-appearance: none` as a prefix and neglecting the webkit.
     
     /*! autoprefixer: off */
-    -moz-appearance: none;
-         appearance: none;
+    -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+    appearance: none;
 
     @if has-value($meter-radius) {
       border-radius: $meter-radius;
@@ -101,15 +101,15 @@ $meter-fill-bad: $alert-color !default;
       }
     }
 
-    &:-moz-meter-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+    &:-moz-meter-optimum::-moz-meter-bar {
       background: $meter-fill-good;
     }
 
-    &:-moz-meter-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
       background: $meter-fill-medium;
     }
 
-    &:-moz-meter-sub-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
       background: $meter-fill-bad;
     }
   }