foundation-rails 6.4.3.0 → 6.5.1.0

data/vendor/assets/scss/motion-ui/util/_string.scss

@@ -0,0 +1,36 @@
+/// Convert any string to a "safe" string that can be used anywhere in CSS (as class or keyframe name for example).
+/// Unsupported characters are replaced by the given `$delimiter` ("-").
+/// Several unsupported characters following each others are replaced by a single delimiter.
+///
+/// @param {*} $str - String to convert. If not a string, it will be converted to with `quote()`.
+/// @param {String} $delimiter ['-'] - Character to use instead of unsupported characters.
+/// @return {String} - Safe string usable everywhere in CSS.
+@function -mui-string-safe(
+  $str,
+  $delimiter: '-'
+) {
+  $str: quote($str);
+  $length: str_length($str);
+  $safe-chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
+
+  $ret: '';
+  $delimited: false;
+
+  @for $i from 1 through $length {
+    $c: str_slice($str, $i, $i);
+
+    @if (str_index($safe-chars, $c) != null) {
+      $ret: '#{$ret}#{$c}';
+      $delimited: false;
+    }
+    @else if (($delimited == false)
+      and (str_length($ret) > 0)
+      and ($i < $length))
+    {
+      $ret: '#{$ret}#{$delimiter}';
+      $delimited: true;
+    }
+  }
+
+  @return $ret;
+}

data/vendor/assets/scss/prototype/_relation.scss

@@ -91,7 +91,7 @@
   }
 }
 
-/// Will only select the child if it’s unique. That means that if there are at least 2 children, the style will not be applied.
+/// Will only select the child if it's unique. That means that if there are at least 2 children, the style will not be applied.
 @mixin unique {
   &:only-child {
     @content;

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

@@ -30,6 +30,9 @@ $prototype-border-radius: rem-calc(3) !default;
 @mixin foundation-prototype-rounded {
   .rounded {
     @include border-rounded;
+    &:after {
+      border-radius: 50%; // For switches
+    }
   }
 
   .radius {

data/vendor/assets/scss/prototype/_spacing.scss

@@ -64,69 +64,79 @@ $prototype-spacers-count: 3 !default;
   }
 }
 
-@mixin foundation-prototype-spacing {
-  @for $spacer from 0 through $prototype-spacers-count {
-    // All Sides
-    .margin-#{$spacer} {
-      @include margin($spacer, $spacer, $spacer, $spacer);
-    }
-
-    .padding-#{$spacer} {
-      @include padding($spacer, $spacer, $spacer, $spacer);
-    }
-
-    // Top Side
-    .margin-top-#{$spacer} {
-      @include margin($spacer, null, null, null);
-    }
-
-    .padding-top-#{$spacer} {
-      @include padding($spacer, null, null, null);
-    }
-
-    // Right Side
-    .margin-right-#{$spacer} {
-      @include margin(null, $spacer, null, null);
-    }
-
-    .padding-right-#{$spacer} {
-      @include padding(null, $spacer, null, null);
-    }
-
-    // Bottom Side
-    .margin-bottom-#{$spacer} {
-      @include margin(null, null, $spacer, null);
-    }
-
-    .padding-bottom-#{$spacer} {
-      @include padding(null, null, $spacer, null);
-    }
-
-    // Left Side
-    .margin-left-#{$spacer} {
-      @include margin(null, null, null, $spacer);
-    }
-
-    .padding-left-#{$spacer} {
-      @include padding(null, null, null, $spacer);
-    }
-
-    // Horizontal Axes
-    .margin-horizontal-#{$spacer} {
-      @include margin(null, $spacer, null, $spacer);
-    }
+/// Margin classes for specific direction properties
+/// @param {String} $dir [] Direction
+/// @param {Number} $spacer [] Spacer
+@mixin margin-direction($dir, $spacer) {
+  @if ($dir == top) { 
+    @include margin($top: $spacer); 
+  }
+  @else if ($dir == right) { 
+    @include margin($right: $spacer); 
+  }
+  @else if ($dir == bottom) { 
+    @include margin($bottom: $spacer); 
+  }
+  @else if ($dir == left) { 
+    @include margin($left: $spacer); 
+  }
+  @else if ($dir == horizontal) { 
+    @include margin($right: $spacer, $left: $spacer); 
+  }
+  @else if ($dir == vertical) { 
+    @include margin($top: $spacer, $bottom: $spacer); 
+  }
+}
 
-    .padding-horizontal-#{$spacer} {
-      @include padding(null, $spacer, null, $spacer);
-    }
+/// Padding classes for specific direction properties
+/// @param {String} $dir [] Direction
+/// @param {Number} $spacer [] Spacer
+@mixin padding-direction($dir, $spacer) {
+  @if ($dir == top) { 
+    @include padding($top: $spacer); 
+  }
+  @else if ($dir == right) { 
+    @include padding($right: $spacer); 
+  }
+  @else if ($dir == bottom) { 
+    @include padding($bottom: $spacer); 
+  }
+  @else if ($dir == left) { 
+    @include padding($left: $spacer); 
+  }
+  @else if ($dir == horizontal) { 
+    @include padding($right: $spacer, $left: $spacer); 
+  }
+  @else if ($dir == vertical) { 
+    @include padding($top: $spacer, $bottom: $spacer); 
+  }
+}
 
-    // Vertical Axes
-    .margin-vertical-#{$spacer} {
-      @include margin($spacer, null, $spacer, null)
-    }
+@mixin foundation-prototype-spacing {
+  @for $spacer from 0 through $prototype-spacers-count {
+    
+    @each $prop in (margin, padding) {
+      // All Sides
+      .#{$prop}-#{$spacer} {
+        @if ($prop == margin) { 
+          margin: $spacer * $global-margin; 
+        }
+        @else if ($prop == padding) { 
+          padding: $spacer * $global-padding; 
+        }
+      }
 
-    .padding-vertical-#{$spacer} {
-      @include padding($spacer, null, $spacer, null)
+      @each $dir in (top, right, bottom, left, horizontal, vertical) {
+        // Top Side
+        .#{$prop}-#{$dir}-#{$spacer} {
+          @if ($prop == margin) { 
+            @include margin-direction($dir, $spacer);
+          }
+          @else if ($prop == padding) {
+            @include padding-direction($dir, $spacer);
+          }
+        }
+      }
     }
 
     @if ($prototype-spacing-breakpoints) {
@@ -134,67 +144,30 @@ $prototype-spacers-count: 3 !default;
       @each $size in $breakpoint-classes {
         @include breakpoint($size) {
           @if $size != $-zf-zero-breakpoint {
-            // All Sides
-            .#{$size}-margin-#{$spacer} {
-              @include margin($spacer, $spacer, $spacer, $spacer);
-            }
-
-            .#{$size}-padding-#{$spacer} {
-              @include padding($spacer, $spacer, $spacer, $spacer);
-            }
-
-            // Top Side
-            .#{$size}-margin-top-#{$spacer} {
-              @include margin($spacer, null, null, null);
-            }
-
-            .#{$size}-padding-top-#{$spacer} {
-              @include padding($spacer, null, null, null);
-            }
-
-            // Right Side
-            .#{$size}-margin-right-#{$spacer} {
-              @include margin(null, $spacer, null, null);
-            }
-
-            .#{$size}-padding-right-#{$spacer} {
-              @include padding(null, $spacer, null, null);
-            }
-
-            // Bottom Side
-            .#{$size}-margin-bottom-#{$spacer} {
-              @include margin(null, null, $spacer, null);
-            }
-
-            .#{$size}-padding-bottom-#{$spacer} {
-              @include padding(null, null, $spacer, null);
-            }
-
-            // Left Side
-            .#{$size}-margin-left-#{$spacer} {
-              @include margin(null, null, null, $spacer);
-            }
-
-            .#{$size}-padding-left-#{$spacer} {
-              @include padding(null, null, null, $spacer);
-            }
-
-            // Horizontal Axes
-            .#{$size}-margin-horizontal-#{$spacer} {
-              @include margin(null, $spacer, null, $spacer);
-            }
-
-            .#{$size}-padding-horizontal-#{$spacer} {
-              @include padding(null, $spacer, null, $spacer);
-            }
-
-            // Vertical Axes
-            .#{$size}-margin-vertical-#{$spacer} {
-              @include margin($spacer, null, $spacer, null)
-            }
-
-            .#{$size}-padding-vertical-#{$spacer} {
-              @include padding($spacer, null, $spacer, null)
+            .#{$size} {
+              @each $prop in (margin, padding) {
+                // All Sides
+                &-#{$prop}-#{$spacer} {
+                  @if ($prop == margin) { 
+                    margin: $spacer * $global-margin; 
+                  }
+                  @else if ($prop == padding) { 
+                    padding: $spacer * $global-padding; 
+                  }
+                }
+
+                @each $dir in (top, right, bottom, left, horizontal, vertical) {
+                  // Top Side
+                  &-#{$prop}-#{$dir}-#{$spacer} {
+                    @if ($prop == margin) { 
+                      @include margin-direction($dir, $spacer);
+                    }
+                    @else if ($prop == padding) { 
+                      @include padding-direction($dir, $spacer);
+                    }
+                  }
+                }
+              }
             }
           }
         }

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

@@ -100,6 +100,7 @@ $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 
 @include add-foundation-colors;
+$print-hrefs: true;
 
 // 2. Breakpoints
 // --------------
@@ -299,6 +300,7 @@ $button-opacity-disabled: 0.25;
 $button-background-hover-lightness: -20%;
 $button-hollow-hover-lightness: -50%;
 $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
+$button-responsive-expanded: false;
 
 // 12. Button Group
 // ----------------
@@ -390,8 +392,8 @@ $dropdownmenu-arrow-color: $anchor-color;
 $dropdownmenu-arrow-size: 6px;
 $dropdownmenu-arrow-padding: 1.5rem;
 $dropdownmenu-min-width: 200px;
-$dropdownmenu-background: $white;
-$dropdownmenu-submenu-background: $dropdownmenu-background;
+$dropdownmenu-background: null;
+$dropdownmenu-submenu-background: $white;
 $dropdownmenu-padding: $global-menu-padding;
 $dropdownmenu-nested-margin: 0;
 $dropdownmenu-submenu-padding: $dropdownmenu-padding;
@@ -475,7 +477,6 @@ $menu-simple-margin: 1rem;
 $menu-item-color-active: $white;
 $menu-item-background-active: get-color(primary);
 $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;
@@ -800,7 +801,6 @@ $tab-active-color: $primary-color;
 $tab-item-font-size: rem-calc(12);
 $tab-item-background-hover: $white;
 $tab-item-padding: 1.25rem 1.5rem;
-$tab-expand-max: 6;
 $tab-content-background: $white;
 $tab-content-border: $light-gray;
 $tab-content-color: $body-font-color;
@@ -809,7 +809,7 @@ $tab-content-padding: 1rem;
 // 52. Thumbnail
 // -------------
 
-$thumbnail-border: solid 4px $white;
+$thumbnail-border: 4px solid $white;
 $thumbnail-margin-bottom: $global-margin;
 $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
 $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);

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

@@ -79,7 +79,7 @@ $header-styles: (
   @each $size, $headers in $header-sizes {
     $header-map: ();
     @each $header, $font-size in $headers {
-      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));  
+      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));
     }
     $header-styles: map-merge($header-styles, ($size: $header-map));
   }
@@ -479,7 +479,7 @@ $abbr-underline: 1px dotted $black !default;
   figure {
     margin: 0;
   }
-  
+
   // Code
   code {
     padding: $code-padding;

data/vendor/assets/scss/typography/_helpers.scss

@@ -26,7 +26,7 @@ $subheader-color: $dark-gray !default;
 /// @type String
 $subheader-font-weight: $global-weight-normal !default;
 
-/// Default top margin for subhheaders.
+/// Default top margin for subheaders.
 /// @type Number
 $subheader-margin-top: 0.2rem !default;
 

data/vendor/assets/scss/typography/_print.scss

@@ -6,6 +6,10 @@
 /// @type Boolean
 /// @group global
 $print-transparent-backgrounds: true !default;
+
+/// If `true`, displays next to all links their "href" when printed.
+/// @type Boolean
+/// @group global
 $print-hrefs: true !default;
 
 // sass-lint:disable-all

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

@@ -25,7 +25,7 @@ $-zf-zero-breakpoint: small !default;
 $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
 
 @if nth(map-values($breakpoints), 1) != 0 {
-  @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+  @error 'The first key in the $breakpoints map must have a value of "0".';
 }
 @else {
   $-zf-zero-breakpoint: nth(map-keys($breakpoints), 1);
@@ -76,8 +76,11 @@ $breakpoint-classes: (small medium large) !default;
 
   // Convert any pixel, rem, or unitless value to em
   $bp: -zf-bp-to-em($bp);
+  // 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
   @if $bp-max {
-    $bp-max: -zf-bp-to-em($bp-max) - (1/16);
+    $bp-max: -zf-bp-to-em($bp-max) - .00125;
   }
 
   // Conditions to skip media query creation
@@ -172,15 +175,10 @@ $breakpoint-classes: (small medium large) !default;
     }
   }
 
-  @if $old-zf-size != null {
-    // Restore the old breakpoint size
-    $-zf-size: $old-zf-size !global;
-  } @else {
-    $-zf-size: null !global;
-  }
+  $-zf-size: $old-zf-size !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.
+/// Converts 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.
 /// @access private
 ///
 /// @param {Map} $map - Map to convert.
@@ -252,7 +250,7 @@ $breakpoint-classes: (small medium large) !default;
 /// responsive gutters for the grid.
 /// @access private
 ///
-/// @param {String} $breakpoing - a named or non-named breakpoing.
+/// @param {String} $breakpoint - a named or non-named breakpoint.
 ///
 /// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
 @function -zf-closest-named-breakpoint($breakpoint) {
@@ -323,26 +321,40 @@ $breakpoint-classes: (small medium large) !default;
   }
 }
 
+$small-up: '';
+$small-only: '';
+
 @if map-has-key($breakpoints, small) {
   $small-up: screen;
   $small-only: unquote('screen and #{breakpoint(small only)}');
 }
 
+$medium-up: '';
+$medium-only: '';
+
 @if map-has-key($breakpoints, medium) {
   $medium-up: unquote('screen and #{breakpoint(medium)}');
   $medium-only: unquote('screen and #{breakpoint(medium only)}');
 }
 
+$large-up: '';
+$large-only: '';
+
 @if map-has-key($breakpoints, large) {
   $large-up: unquote('screen and #{breakpoint(large)}');
   $large-only: unquote('screen and #{breakpoint(large only)}');
 }
 
+$xlarge-up: '';
+$xlarge-only: '';
+
 @if map-has-key($breakpoints, xlarge) {
   $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
   $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
 }
 
+$xxlarge-up: '';
+
 @if map-has-key($breakpoints, xxlarge) {
   $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
 }