foundation-rails 6.3.0.0 → 6.3.1.0

data/vendor/assets/js/foundation.util.timerAndImageLoader.js.es6

@@ -67,7 +67,7 @@ function onImagesLoaded(images, callback){
     else {
       // fix for IE. See https://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
       var src = $(this).attr('src');
-      $(this).attr('src', src + '?' + (new Date().getTime()));
+      $(this).attr('src', src + (src.indexOf('?') >= 0 ? '&' : '?') + (new Date().getTime()));
       $(this).one('load', function() {
         singleImageLoaded();
       });

data/vendor/assets/js/foundation.util.triggers.js.es6

@@ -76,7 +76,6 @@ function checkListeners() {
   eventsListener();
   resizeListener();
   scrollListener();
-  mutateListener();
   closemeListener();
 }
 
@@ -156,17 +155,6 @@ function scrollListener(debounce){
   }
 }
 
-function mutateListener(debounce) {
-    let $nodes = $('[data-mutate]');
-    if ($nodes.length && MutationObserver){
-			//trigger all listening elements and signal a mutate event
-      //no IE 9 or 10
-			$nodes.each(function () {
-			  $(this).triggerHandler('mutateme.zf.trigger');
-			});
-    }
- }
-
 function eventsListener() {
   if(!MutationObserver){ return false; }
   let nodes = document.querySelectorAll('[data-resize], [data-scroll], [data-mutate]');
@@ -220,38 +208,3 @@ Foundation.IHearYou = checkListeners;
 // Foundation.IFeelYou = closemeListener;
 
 }(jQuery);
-
-// function domMutationObserver(debounce) {
-//   // !!! This is coming soon and needs more work; not active  !!! //
-//   var timer,
-//   nodes = document.querySelectorAll('[data-mutate]');
-//   //
-//   if (nodes.length) {
-//     // var MutationObserver = (function () {
-//     //   var prefixes = ['WebKit', 'Moz', 'O', 'Ms', ''];
-//     //   for (var i=0; i < prefixes.length; i++) {
-//     //     if (prefixes[i] + 'MutationObserver' in window) {
-//     //       return window[prefixes[i] + 'MutationObserver'];
-//     //     }
-//     //   }
-//     //   return false;
-//     // }());
-//
-//
-//     //for the body, we need to listen for all changes effecting the style and class attributes
-//     var bodyObserver = new MutationObserver(bodyMutation);
-//     bodyObserver.observe(document.body, { attributes: true, childList: true, characterData: false, subtree:true, attributeFilter:["style", "class"]});
-//
-//
-//     //body callback
-//     function bodyMutation(mutate) {
-//       //trigger all listening elements and signal a mutation event
-//       if (timer) { clearTimeout(timer); }
-//
-//       timer = setTimeout(function() {
-//         bodyObserver.disconnect();
-//         $('[data-mutate]').attr('data-events',"mutate");
-//       }, debounce || 150);
-//     }
-//   }
-// }

data/vendor/assets/scss/_global.scss

@@ -167,6 +167,7 @@ $alert-color: get-color(alert);
 
   // Make select elements are 100% width by default
   select {
+    box-sizing: border-box;
     width: 100%;
     border-radius: $global-radius;
   }
@@ -196,6 +197,11 @@ $alert-color: get-color(alert);
     line-height: 1;
   }
 
+  // Prevent text overflow on pre
+  pre {
+    overflow: auto;
+  }
+
   // Internal classes to show/hide elements in JavaScript
   .is-visible {
     display: block !important;

data/vendor/assets/scss/components/_accordion.scss

@@ -105,7 +105,7 @@ $accordion-content-padding: 1rem !default;
     }
 
     .is-active > &::before {
-      content: '–';
+      content: '\2013';
     }
   }
 }

data/vendor/assets/scss/components/_breadcrumbs.scss

@@ -38,6 +38,10 @@ $breadcrumbs-item-uppercase: true !default;
 /// @type Boolean
 $breadcrumbs-item-slash: true !default;
 
+/// Color of breadcrumb slash.
+/// @type Color
+$breadcrumbs-item-slash-color: $medium-gray !default;
+
 /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
 @mixin breadcrumbs-container {
   @include clearfix;
@@ -64,10 +68,9 @@ $breadcrumbs-item-slash: true !default;
         position: relative;
         top: 1px;
         margin: 0 $breadcrumbs-item-margin;
-
         opacity: 1;
         content: $slash;
-        color: $medium-gray;
+        color: $breadcrumbs-item-slash-color;
       }
     }
     @else {

data/vendor/assets/scss/components/_button-group.scss

@@ -11,7 +11,7 @@
 $buttongroup-margin: 1rem !default;
 
 /// Margin between buttons in a button group.
-/// @type Border
+/// @type Number
 $buttongroup-spacing: 1px !default;
 
 /// Selector for the buttons inside a button group.
@@ -28,8 +28,10 @@ $buttongroup-radius-on-each: true !default;
 
 /// Add styles for a button group container.
 /// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
 @mixin button-group(
-  $child-selector: $buttongroup-child-selector
+  $child-selector: $buttongroup-child-selector,
+  $spacing: $buttongroup-spacing
 ) {
   @include clearfix;
   margin-bottom: $buttongroup-margin;
@@ -45,8 +47,8 @@ $buttongroup-radius-on-each: true !default;
 
   #{$child-selector} {
     margin: 0;
-    margin-#{$global-right}: $buttongroup-spacing;
-    margin-bottom: $buttongroup-spacing;
+    margin-#{$global-right}: $spacing;
+    margin-bottom: $spacing;
     font-size: map-get($button-sizes, default);
 
     @if $global-flexbox {
@@ -76,12 +78,14 @@ $buttongroup-radius-on-each: true !default;
 
 /// Creates a full-width button group, making each button equal width.
 /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
 @mixin button-group-expand(
   $selector: $buttongroup-child-selector,
+  $spacing: $buttongroup-spacing,
   $count: null
 ) {
   @if not $global-flexbox {
-    margin-#{$global-right}: -$buttongroup-spacing;
+    margin-#{$global-right}: -$spacing;
 
     &::before,
     &::after {
@@ -94,15 +98,21 @@ $buttongroup-radius-on-each: true !default;
       flex: 1 1 0px; // sass-lint:disable-line zero-unit
     }
     @else {
+      // One child
+      &:first-child:last-child {
+        width: 100%
+      }
+
+      // Two or more childreen
       @for $i from 2 through $buttongroup-expand-max {
         &:first-child:nth-last-child(#{$i}) {
           &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
             display: inline-block;
-            width: calc(#{percentage(1 / $i)} - #{$buttongroup-spacing});
-            margin-#{$global-right}: $buttongroup-spacing;
+            width: calc(#{percentage(1 / $i)} - #{$spacing});
+            margin-#{$global-right}: $spacing;
 
             &:last-child {
-              margin-#{$global-right}: $buttongroup-spacing * -$buttongroup-expand-max;
+              margin-#{$global-right}: $spacing * -$buttongroup-expand-max;
             }
           }
         }

data/vendor/assets/scss/components/_button.scss

@@ -38,6 +38,10 @@ $button-color-alt: $black !default;
 /// @type Number
 $button-radius: $global-radius !default;
 
+/// Border width for hollow outline buttons
+/// @type Number
+$button-hollow-border-width: 1px !default;
+
 /// Sizes for buttons.
 /// @type Map
 $button-sizes: (
@@ -78,7 +82,17 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   display: inline-block;
   vertical-align: middle;
   margin: $button-margin;
-  padding: $button-padding;
+
+  @if (type-of($button-padding) == 'map') {
+    @each $size, $padding in $button-padding {
+      @include breakpoint($size) {
+        padding: $padding;
+      }
+    }
+  }
+  @else {
+    padding: $button-padding;
+  }
 
   -webkit-appearance: none;
   border: 1px solid transparent;
@@ -144,11 +158,12 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
 @mixin button-hollow-style(
   $color: $primary-color,
-  $hover-lightness: $button-hollow-hover-lightness
+  $hover-lightness: $button-hollow-hover-lightness, 
+  $border-width: $button-hollow-border-width
 ) {
   $color-hover: scale-color($color, $lightness: $hover-lightness);
 
-  border: 1px solid $color;
+  border: $border-width solid $color;
   color: $color;
 
   &:hover, &:focus {
@@ -158,13 +173,22 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 }
 
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-@mixin button-disabled($color: $primary-color) {
+/// @param [Color] $background [$primary-color] - Background color of the disabled button.
+/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
+@mixin button-disabled(
+  $background: $primary-color,
+  $color: $button-color
+) {
+  @if $color == auto {
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+  }
+
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
 
-  &:hover, &:focus {
-    background-color: $color;
-    color: $button-color;
+  &, &:hover, &:focus {
+    background-color: $background;
+    color: $color;
   }
 }
 
@@ -268,7 +292,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
       @each $name, $color in $button-palette {
         &.#{$name} {
-          @include button-disabled($color);
+          @include button-disabled($color, auto);
         }
       }
     }
@@ -282,6 +306,20 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
           border-top-color: $button-background;
         }
       }
+
+      &.hollow {
+        &::after {
+          border-top-color: $button-background;
+        }
+
+        @each $name, $color in $button-palette {
+          &.#{$name} {
+            &::after {
+              border-top-color: $color;
+            }
+          }
+        }
+      }
     }
 
     // Button with dropdown arrow only

data/vendor/assets/scss/components/_card.scss

@@ -67,7 +67,7 @@ $card-margin: $global-margin !default;
   box-shadow: $shadow;
 
   overflow: hidden;
-  color: $card-font-color;
+  color: $color;
 
   & > :last-child {
     margin-bottom: 0;

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

@@ -17,6 +17,12 @@
     }
   }
 
+  // Central alignment of content
+  .align-center-middle {
+    @include flex-align($x: center, $y: middle);
+    align-content: center;
+  }
+
   // Source ordering
   @include -zf-each-breakpoint {
     @for $i from 1 through 6 {

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

@@ -140,16 +140,33 @@ $menu-border: $light-gray !default;
 }
 
 /// Creates a simple Menu, which has no padding or hover state.
-@mixin menu-simple {
+/// @param {Keyword} $dir [$global-left] - Direction of the menu. Set to `null` to do not generate styles for direction.
+@mixin menu-simple($dir: $global-left) {
   li {
     display: inline-block;
-    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
+    vertical-align: top;
     line-height: 1;
   }
 
   a {
     padding: 0;
   }
+
+  @if $dir != null {
+    @include menu-simple-direction($dir);
+  }
+}
+
+/// Direction modifier for a simple Menu
+/// @param {Keyword} $dir [$global-left] - Direction of the menu
+@mixin menu-simple-direction($dir: $global-left) {
+  $no-margin-dir: $dir;
+  $margin-dir: direction-opposite($dir);
+
+  li {
+    margin-#{$no-margin-dir}: 0;
+    margin-#{$margin-dir}: get-side($menu-item-padding, $margin-dir);
+  }
 }
 
 /// Adds styles for a nested Menu, by adding `margin-left` to the menu.
@@ -273,6 +290,10 @@ $menu-border: $light-gray !default;
     // Simple
     &.simple {
       @include menu-simple;
+
+      &.align-#{$global-right} {
+        @include menu-simple-direction($global-right);
+      }
     }
 
     // Align right
@@ -338,7 +359,13 @@ $menu-border: $light-gray !default;
     text-align: center;
 
     > .menu {
-      display: inline-block;
+      @if $global-flexbox {
+        @include flex-align($x: center, $y: top);
+      }
+      @else {
+        display: inline-block;
+        vertical-align: top;
+      }
     }
   }
 

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

@@ -17,6 +17,9 @@ $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) {
@@ -42,7 +45,8 @@ $responsive-embed-ratios: (
 }
 
 @mixin foundation-responsive-embed {
-  .responsive-embed, .flex-video {
+  .responsive-embed,
+  .flex-video {
     @include responsive-embed($ratio: default);
 
     $ratios: map-remove($responsive-embed-ratios,default);
@@ -62,5 +66,5 @@ $responsive-embed-ratios: (
 
 @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;
+  @include responsive-embed($ratio);
 }

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

@@ -72,8 +72,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   }
 
   // Make sure rows don't have a min-width on them
-  .column,
-  .columns {
+  .column {
     min-width: 0;
   }
 
@@ -124,6 +123,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   html.is-reveal-open body {
     min-height: 100%;
     overflow: hidden;
+    position: fixed;
     user-select: none;
   }
 

data/vendor/assets/scss/foundation.scss

@@ -1,12 +1,12 @@
 /**
  * Foundation for Sites by ZURB
- * Version 6.3.0
+ * Version 6.3.1
  * foundation.zurb.com
  * Licensed under MIT Open Source
  */
 
 // Dependencies
-@import "../_vendor/normalize-scss/sass/normalize";
+@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';
@@ -17,7 +17,7 @@
 // Settings
 // import your own `settings` here or
 // import and modify the default settings through
-// @import "settings/settings";
+// @import 'settings/settings';
 
 // Sass utilities
 @import 'util/util';