foundation-rails 6.2.4.0 → 6.3.0.0

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

@@ -38,27 +38,6 @@ $header-font-style: normal !default;
 /// @type String | List
 $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;
 
-/// Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.
-/// @type Map
-$header-sizes: (
-  small: (
-    'h1': 24,
-    'h2': 20,
-    'h3': 19,
-    'h4': 18,
-    'h5': 17,
-    'h6': 16,
-  ),
-  medium: (
-    'h1': 48,
-    'h2': 40,
-    'h3': 31,
-    'h4': 25,
-    'h5': 20,
-    'h6': 16,
-  ),
-) !default;
-
 /// Color of headers.
 /// @type Color
 $header-color: inherit !default;
@@ -71,6 +50,47 @@ $header-lineheight: 1.4 !default;
 /// @type Number
 $header-margin-bottom: 0.5rem !default;
 
+/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.
+/// @type Map
+$header-styles: (
+  small: (
+    'h1': ('font-size': 24),
+    'h2': ('font-size': 20),
+    'h3': ('font-size': 19),
+    'h4': ('font-size': 18),
+    'h5': ('font-size': 17),
+    'h6': ('font-size': 16),
+  ),
+  medium: (
+    'h1': ('font-size': 48),
+    'h2': ('font-size': 40),
+    'h3': ('font-size': 31),
+    'h4': ('font-size': 25),
+    'h5': ('font-size': 20),
+    'h6': ('font-size': 16),
+  ),
+) !default;
+
+// $header-styles map is built from $header-sizes in order to ensure downward compatibility
+// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss
+@function build_from_header-sizes($header-sizes) {
+  @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';
+  $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-styles: map-merge($header-styles, ($size: $header-map));
+  }
+  @return $header-styles;
+}
+
+// If it exists $headers-sizes is used to build $header-styles. See the documentation.
+@if variable-exists(header-sizes) {
+  $header-styles: build_from_header-sizes($header-sizes);
+}
+
 /// Text rendering method of headers.
 /// @type String
 $header-text-rendering: optimizeLegibility !default;
@@ -203,6 +223,10 @@ $cite-font-size: rem-calc(13) !default;
 /// @type Color
 $cite-color: $dark-gray !default;
 
+/// Pseudo content for `<cite>` elements.
+/// @type String
+$cite-pseudo-content: '\2014 \0020' !default;
+
 /// Font family for `<kbd>` elements.
 /// @type String | List
 $keystroke-font: $font-family-monospace !default;
@@ -254,9 +278,10 @@ $abbr-underline: 1px dotted $black !default;
 
   // Paragraphs
   p {
+    margin-bottom: $paragraph-margin-bottom;
+
     font-size: inherit;
     line-height: $paragraph-lineheight;
-    margin-bottom: $paragraph-margin-bottom;
     text-rendering: $paragraph-text-rendering;
   }
 
@@ -288,26 +313,55 @@ $abbr-underline: 1px dotted $black !default;
   h5,
   h6 {
     font-family: $header-font-family;
-    font-weight: $header-font-weight;
     font-style: $header-font-style;
+    font-weight: $header-font-weight;
     color: $header-color;
     text-rendering: $header-text-rendering;
-    margin-top: 0;
-    margin-bottom: $header-margin-bottom;
-    line-height: $header-lineheight;
 
     small {
-      color: $header-small-font-color;
       line-height: 0;
+      color: $header-small-font-color;
     }
   }
 
-  // Heading sizes
-  @each $size, $headers in $header-sizes {
+  // Heading styles
+  @each $size, $headers in $header-styles {
     @include breakpoint($size) {
-      @each $header, $font-size in $headers {
+      @each $header, $header-defs in $headers {
+        $font-size-temp: 1rem;
         #{$header} {
-          font-size: rem-calc($font-size);
+
+          @if map-has-key($header-defs, font-size) {
+            $font-size-temp: rem-calc(map-get($header-defs, font-size));
+            font-size: $font-size-temp;
+          } @else if map-has-key($header-defs, fs) {
+            $font-size-temp: rem-calc(map-get($header-defs, fs));
+            font-size: $font-size-temp;
+          } @else if $size == $-zf-zero-breakpoint {
+            font-size: $font-size-temp;
+          }
+          @if map-has-key($header-defs, line-height) {
+            line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);
+          } @else if map-has-key($header-defs, lh) {
+            line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);
+          } @else if $size == $-zf-zero-breakpoint {
+            line-height: unitless-calc($header-lineheight, $font-size-temp);
+          }
+
+          @if map-has-key($header-defs, margin-top) {
+            margin-top: rem-calc(map-get($header-defs, margin-top));
+          } @else if map-has-key($header-defs, mt) {
+            margin-top: rem-calc(map-get($header-defs, mt));
+          } @else if $size == $-zf-zero-breakpoint {
+            margin-top: 0;
+          }
+          @if map-has-key($header-defs, margin-bottom) {
+            margin-bottom: rem-calc(map-get($header-defs, margin-bottom));
+          } @else if map-has-key($header-defs, mb) {
+            margin-bottom: rem-calc(map-get($header-defs, mb));
+          } @else if $size == $-zf-zero-breakpoint {
+            margin-bottom: rem-calc($header-margin-bottom);
+          }
         }
       }
     }
@@ -315,9 +369,10 @@ $abbr-underline: 1px dotted $black !default;
 
   // Links
   a {
+    line-height: inherit;
     color: $anchor-color;
     text-decoration: $anchor-text-decoration;
-    line-height: inherit;
+
     cursor: pointer;
 
     &:hover,
@@ -335,23 +390,25 @@ $abbr-underline: 1px dotted $black !default;
 
   // Horizontal rule
   hr {
+    clear: both;
+
     max-width: $hr-width;
     height: 0;
-    border-right: 0;
+    margin: $hr-margin;
+
     border-top: 0;
+    border-right: 0;
     border-bottom: $hr-border;
     border-left: 0;
-    margin: $hr-margin;
-    clear: both;
   }
 
   // Lists
   ul,
   ol,
   dl {
-    line-height: $list-lineheight;
     margin-bottom: $list-margin-bottom;
     list-style-position: $list-style-position;
+    line-height: $list-lineheight;
   }
 
   // List items
@@ -361,8 +418,8 @@ $abbr-underline: 1px dotted $black !default;
 
   // Unordered lists
   ul {
-    list-style-type: $list-style-type;
     margin-#{$global-left}: $list-side-margin;
+    list-style-type: $list-style-type;
   }
 
   // Ordered lists
@@ -407,34 +464,43 @@ $abbr-underline: 1px dotted $black !default;
     color: $cite-color;
 
     &:before {
-      content: '\2014 \0020';
+      content: $cite-pseudo-content;
     }
   }
 
   // Abbreviations
   abbr {
+    border-bottom: $abbr-underline;
     color: $body-font-color;
     cursor: help;
-    border-bottom: $abbr-underline;
   }
 
+  // Figures
+  figure {
+    margin: 0;
+  }
+  
   // Code
   code {
+    padding: $code-padding;
+
+    border: $code-border;
+    background-color: $code-background;
+
     font-family: $code-font-family;
     font-weight: $code-font-weight;
     color: $code-color;
-    background-color: $code-background;
-    border: $code-border;
-    padding: $code-padding;
   }
 
   // Keystrokes
   kbd {
-    padding: $keystroke-padding;
     margin: 0;
+    padding: $keystroke-padding;
+
     background-color: $keystroke-background;
-    color: $keystroke-color;
+
     font-family: $keystroke-font;
+    color: $keystroke-color;
 
     @if has-value($keystroke-radius) {
       border-radius: $keystroke-radius;

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

@@ -48,6 +48,7 @@ $stat-font-size: 2.5rem !default;
   .subheader {
     margin-top: $subheader-margin-top;
     margin-bottom: $subheader-margin-bottom;
+
     font-weight: $subheader-font-weight;
     line-height: $subheader-lineheight;
     color: $subheader-color;

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

@@ -6,8 +6,9 @@
 /// @type Boolean
 /// @group global
 $print-transparent-backgrounds: true !default;
+$print-hrefs: true !default;
 
-// scss-lint:disable all
+// sass-lint:disable-all
 
 @mixin foundation-print-styles {
   .show-for-print { display: none !important; }
@@ -18,8 +19,9 @@ $print-transparent-backgrounds: true !default;
         background: transparent !important;
       }
 
-      color: black !important; // Black prints faster: h5bp.com/s
       box-shadow: none !important;
+
+      color: black !important; // Black prints faster: h5bp.com/s
       text-shadow: none !important;
     }
 
@@ -36,7 +38,9 @@ $print-transparent-backgrounds: true !default;
     // Display the URL of a link after the text
     a,
     a:visited { text-decoration: underline;}
-    a[href]:after { content: ' (' attr(href) ')'; }
+    @if $print-hrefs {
+      a[href]:after { content: ' (' attr(href) ')'; }
+    }
 
     // Don't display the URL for images or JavaScript/internal links
     .ir a:after,

data/vendor/assets/scss/typography/_typography.scss

@@ -6,8 +6,6 @@
 /// @group typography
 ////
 
-// scss-lint:disable DeclarationOrder
-
 // Base typography styles (tags only)
 @import 'base';
 

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

@@ -6,8 +6,6 @@
 /// @group breakpoints
 ////
 
-// scss-lint:disable ZeroUnit
-
 /// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
 /// @type Map
 $breakpoints: (
@@ -18,8 +16,14 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
+/// The largest named breakpoint in which to include print as a media type
+/// @type Keyword
+$print-breakpoint: large !default;
+
 $-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".';
 }
@@ -137,6 +141,8 @@ $breakpoint-classes: (small medium large) !default;
 /// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
 @mixin breakpoint($value) {
   $str: breakpoint($value);
+  $bp: index($-zf-breakpoints-keys, $value);
+  $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
 
   // If $str is still an empty string, no media query is needed
   @if $str == '' {
@@ -145,8 +151,16 @@ $breakpoint-classes: (small medium large) !default;
 
   // Otherwise, wrap the content in a media query
   @else {
-    @media screen and #{$str} {
-      @content;
+    // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
+    @if $bp != null and $bp <= $pbp {
+      @media print, screen and #{$str} {
+        @content;
+       }
+    }
+    @else {
+      @media screen and #{$str} {
+        @content;
+      }
     }
   }
 }
@@ -197,14 +211,22 @@ $breakpoint-classes: (small medium large) !default;
 
 }
 
-/// Get a value for a breakpoint from a responsive config map. If the config map has the key `$value`, the exact breakpoint value is returned. If the config map does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
+/// Get a value for a breakpoint from a responsive config map or single value.
+/// - If the config is a single value, return it regardless of `$value`.
+/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.
+/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
 /// @access private
 ///
-/// @param {Map} $map - Input config map.
+/// @param {Number|Map} $map - Responsive config map or single value.
 /// @param {Keyword} $value - Breakpoint name to use.
 ///
 /// @return {Mixed} The corresponding breakpoint value.
 @function -zf-get-bp-val($map, $value) {
+  // If the given map is a single value, return it
+  @if type-of($map) == 'number' {
+    @return $map;
+  }
+
   // Check if the breakpoint name exists globally
   @if not map-has-key($breakpoints, $value) {
     @return null;
@@ -234,19 +256,6 @@ $breakpoint-classes: (small medium large) !default;
   }
 }
 
-// Legacy breakpoint variables
-// These will be removed in 6.3
-$small-up: null;
-$small-only: null;
-$medium-up: null;
-$medium-only: null;
-$large-up: null;
-$large-only: null;
-$xlarge-up: null;
-$xlarge-only: null;
-$xxlarge-up: null;
-$xxlarge-only: null;
-
 @if map-has-key($breakpoints, small) {
   $small-up: screen;
   $small-only: unquote('screen and #{breakpoint(small only)}');

data/vendor/assets/scss/util/_color.scss

@@ -2,31 +2,83 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
+@import 'math';
+
 ////
 /// @group functions
 ////
 
-/// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color.
+/// Checks the luminance of `$color`.
 ///
-/// @param {Color} $color - Color to check the lightness of.
-/// @param {Color} $yes [$black] - Color to return if `$color` is light.
-/// @param {Color} $no [$white] - Color to return if `$color` is dark.
-/// @param {Percentage} $threshold [60%] - Threshold of lightness to check against.
+/// @param {Color} $color - Color to check the luminance of.
 ///
-/// @returns {Color} The $yes color or $no color.
-@function foreground($color, $yes: $black, $no: $white, $threshold: 60%) {
-  @if $color == transparent {
-    $color: $body-background;
+/// @returns {Number} The luminance of `$color`.
+@function color-luminance($color) {
+  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+  $rgba: red($color), green($color), blue($color);
+  $rgba2: ();
+
+  @for $i from 1 through 3 {
+    $rgb: nth($rgba, $i);
+    $rgb: $rgb / 255;
+
+    $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
+
+    $rgba2: append($rgba2, $rgb);
   }
-  @if (lightness($color) > $threshold) {
-    @return $yes;
+
+  @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
+}
+
+/// Checks the contrast ratio of two colors.
+///
+/// @param {Color} $color1 - First color to compare.
+/// @param {Color} $color2 - Second color to compare.
+///
+/// @returns {Number} The contrast ratio of the compared colors.
+@function color-contrast($color1, $color2) {
+  // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  $luminance1: color-luminance($color1) + 0.05;
+  $luminance2: color-luminance($color2) + 0.05;
+  $ratio: $luminance1 / $luminance2;
+
+  @if $luminance2 > $luminance1 {
+    $ratio: 1 / $ratio;
   }
-  @else {
-    @return $no;
+
+  $ratio: round($ratio * 10) / 10;
+
+  @return $ratio;
+}
+
+/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
+///
+/// @param {Color} $color1 - First color to compare.
+/// @param {Color} $color2 - Second color to compare.
+///
+/// @returns {Number} The contrast ratio of the compared colors.
+@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: 0) {
+  $contrast: color-contrast($base, nth($colors, 1));
+  $best: nth($colors, 1);
+
+  @for $i from 2 through length($colors) {
+    $current-contrast: color-contrast($base, nth($colors, $i));
+    @if ($current-contrast - $contrast > $tolerance) {
+      $contrast: color-contrast($base, nth($colors, $i));
+      $best: nth($colors, $i);
+    }
   }
+
+  @if ($contrast < 3) {
+    @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
+  }
+
+  @return $best;
 }
 
-/// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness.
+/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.
 ///
 /// @param {Color} $color - Color to scale.
 /// @param {Percentage} $scale [5%] - Amount to scale up or down.
@@ -48,12 +100,13 @@
 @function get-color($key) {
   @if map-has-key($foundation-palette, $key) {
     @return map-get($foundation-palette, $key);
-  } @else {
+  }
+  @else {
     @error 'given $key is not available in $foundation-palette';
   }
 }
 
-/// Transfers the colors in the `$foundation-palette` variable into the legacy color variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
+/// Transfers the colors in the `$foundation-palette`map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
 @mixin add-foundation-colors() {
   @if map-has-key($foundation-palette, primary) {
     $primary-color: map-get($foundation-palette, primary) !global;