foundation-rails 6.5.3.0 → 6.6.1.0

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

@@ -115,29 +115,9 @@ $paragraph-margin-bottom: 1rem !default;
 /// @type String
 $paragraph-text-rendering: optimizeLegibility !default;
 
-/// Text color of code samples.
-/// @type Color
-$code-color: $black !default;
-
-/// Font family of code samples.
-/// @type String | List
-$code-font-family: $font-family-monospace !default;
-
-/// Font weight of text in code samples.
-/// @type String
-$code-font-weight: $global-weight-normal !default;
-
-/// Background color of code samples.
-/// @type Color
-$code-background: $light-gray !default;
-
-/// Border around code samples.
-/// @type List
-$code-border: 1px solid $medium-gray !default;
-
-/// Padding around text of code samples.
-/// @type Number | List
-$code-padding: rem-calc(2 5 1) !default;
+/// Use the `.code-inline` component as default for `<code>` elements.
+/// @type Boolean
+$enable-code-inline: true;
 
 /// Default color for links.
 /// @type Color
@@ -215,17 +195,9 @@ $blockquote-padding: rem-calc(9 20 0 19) !default;
 /// @type List
 $blockquote-border: 1px solid $medium-gray !default;
 
-/// Font size for `<cite>` elements.
-/// @type Number
-$cite-font-size: rem-calc(13) !default;
-
-/// Text color for `<cite>` elements.
-/// @type Color
-$cite-color: $dark-gray !default;
-
-/// Pseudo content for `<cite>` elements.
-/// @type String
-$cite-pseudo-content: '\2014 \0020' !default;
+/// Use the `.cite-block` component as default for `<cite>` elements.
+/// @type Boolean
+$enable-cite-block: true;
 
 /// Font family for `<kbd>` elements.
 /// @type String | List
@@ -457,14 +429,12 @@ $abbr-underline: 1px dotted $black !default;
     }
   }
 
-  // Citations
-  cite {
-    display: block;
-    font-size: $cite-font-size;
-    color: $cite-color;
-
-    &:before {
-      content: $cite-pseudo-content;
+  // Inline Citations
+  @if ($enable-cite-block == true) {
+    cite {
+      // Extending a class is not recommended.
+      // TODO: Break the typography-base/typography-helpers separation
+      @extend .cite-block;
     }
   }
 
@@ -481,15 +451,10 @@ $abbr-underline: 1px dotted $black !default;
   }
 
   // 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;
+  @if ($enable-code-inline == true) {
+    code {
+      @extend .code-inline;
+    }
   }
 
   // Keystrokes

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

@@ -38,6 +38,92 @@ $subheader-margin-bottom: 0.5rem !default;
 /// @type Number
 $stat-font-size: 2.5rem !default;
 
+/// Text color for `.cite-block` component.
+/// @type Color
+$cite-color: $dark-gray !default;
+
+/// Font size for `.cite-block` component.
+/// @type Number
+$cite-font-size: rem-calc(13) !default;
+
+/// Pseudo content for `.cite-block` component.
+/// @type String
+$cite-pseudo-content: '\2014 \0020' !default;
+
+/// Text color of `.code-inline` and `.code-block` components.
+/// @type Color
+$code-color: $black !default;
+
+/// Font family of `.code-inline` and `.code-block` components.
+/// @type String | List
+$code-font-family: $font-family-monospace !default;
+
+/// Font weight of text in `.code-inline` and `.code-block` components.
+/// @type String
+$code-font-weight: $global-weight-normal !default;
+
+/// Background color of `.code-inline` and `.code-block` components.
+/// @type Color
+$code-background: $light-gray !default;
+
+/// Border around `.code-inline` and `.code-block` components.
+/// @type List
+$code-border: 1px solid $medium-gray !default;
+
+/// Padding around text of the `.code-inline` component.
+/// @type Number | List
+$code-padding: rem-calc(2 5 1) !default;
+
+/// Padding around text of the `.code-block` component.
+/// @type Number | List
+$code-block-padding: 1rem !default;
+
+/// Margin under the `.code-block` component.
+/// @type Number
+$code-block-margin-bottom: 1.5rem !default;
+
+@mixin cite-block {
+  display: block;
+  color: $cite-color;
+  font-size: $cite-font-size;
+
+  &:before {
+    content: $cite-pseudo-content;
+  }
+}
+
+/// Add basic styles for a code helper.
+/// See `code-inline` and `code-block` mixins.
+@mixin code-style {
+  border: $code-border;
+  background-color: $code-background;
+
+  font-family: $code-font-family;
+  font-weight: $code-font-weight;
+  color: $code-color;
+}
+
+/// Make code helper from the `code-style` mixin inline.
+/// Used to generate `.code-inline`
+@mixin code-inline {
+  display: inline;
+  max-width: 100%;
+  word-wrap: break-word;
+
+  padding: $code-padding;
+}
+
+/// Make code helper from the `code-style` mixin a block.
+/// Used to generate `.code-block`
+@mixin code-block {
+  display: block;
+  overflow: auto;
+  white-space: pre;
+
+  padding: $code-block-padding;
+  margin-bottom: $code-block-margin-bottom;
+}
+
 @mixin foundation-typography-helpers {
   // Use to create a subheading under a main header
   // Make sure you pair the two elements in a <header> element, like this:
@@ -77,4 +163,18 @@ $stat-font-size: 2.5rem !default;
       list-style: none;
     }
   }
+
+  .cite-block {
+    @include cite-block;
+  }
+
+  .code-inline {
+    @include code-style;
+    @include code-inline;
+  }
+
+  .code-block {
+    @include code-style;
+    @include code-block;
+  }
 }

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

@@ -19,13 +19,19 @@ $print-hrefs: true !default;
 
   @media print {
     * {
+      // Ensure a "black-on-white" print by removing backgrounds,
+      // using black text everywhere and forcing the browser to economize ink.
       @if $print-transparent-backgrounds {
         background: transparent !important;
+        color: black !important; // Black prints faster: h5bp.com/s
+        color-adjust: economy;
+      }
+      // Otherwise, prevent any economy by the browser.
+      @else {
+        color-adjust: exact;
       }
 
       box-shadow: none !important;
-
-      color: black !important; // Black prints faster: h5bp.com/s
       text-shadow: none !important;
     }
 

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

@@ -16,6 +16,17 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
+/// A list of named HiDPI breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries for resolutions.
+/// Values must represent the device pixels / web pixels ration and be unitless or in DPPX.
+/// @type Map
+$breakpoints-hidpi: (
+  hidpi-1: 1,
+  hidpi-1-5: 1.5,
+  hidpi-2: 2,
+  retina: 2,
+  hidpi-3: 3
+) !default;
+
 /// The largest named breakpoint in which to include print as a media type
 /// @type Keyword
 $print-breakpoint: large !default;
@@ -39,143 +50,143 @@ $breakpoint-classes: (small medium large) !default;
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
 @function breakpoint($val: $-zf-zero-breakpoint) {
+  // Web standard Pixels per inch. (1ddpx / $std-web-dpi) = 1dpi
+  // See https://www.w3.org/TR/css-values-3/#absolute-lengths
+  $std-web-dpi: 96;
+
   // Size or keyword
   $bp: nth($val, 1);
+  // Value of the following breakpoint
+  $bp-next: null;
   // Value for max-width media queries
-  $bp-max: 0;
+  $bp-min: null;
+  // Value for min-width media queries
+  $bp-max: null;
   // Direction of media query (up, down, or only)
   $dir: if(length($val) > 1, nth($val, 2), up);
-  // Eventual output
-  $str: '';
-  // Is it a named media query?
-  $named: false;
+  // If named, name of the breakpoint
+  $name: null;
+  // If the breakpoint is a HiDPI breakpoint
+  $hidpi: false;
 
   // Orientation media queries have a unique syntax
   @if $bp == 'landscape' or $bp == 'portrait' {
     @return '(orientation: #{$bp})';
   }
-  @else if $bp == 'retina' {
-    @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
-  }
 
-  // Try to pull a named breakpoint out of the $breakpoints map
+  // If a breakpoint name is given, get its value from the $breakpoints/$breakpoints-hidpi map.
   @if type-of($bp) == 'string' {
     @if map-has-key($breakpoints, $bp) {
-      @if $dir == 'only' or $dir == 'down' {
-        $bp-max: -zf-map-next($breakpoints, $bp);
-      }
-
-      $bp: map-get($breakpoints, $bp);
-      $named: true;
+      $name: $bp;
+      $bp: map-get($breakpoints, $name);
+      $bp-next: -zf-map-next($breakpoints, $name);
+    }
+    @else if map-has-key($breakpoints-hidpi, $bp) {
+      $name: $bp;
+      $bp: map-get($breakpoints-hidpi, $name);
+      $bp-next: -zf-map-next-number($breakpoints-hidpi, $bp);
+      $hidpi: true;
     }
     @else {
       $bp: 0;
-      @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
+      @warn 'breakpoint(): "#{$val}" is not defined in your `$breakpoints` or `$breakpoints-hidpi` setting.';
     }
   }
 
-  // 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) - .00125;
+  @if not $name and $dir == 'only' {
+    @warn 'breakpoint(): Only named media queries can have an `only` range.';
+    @return null;
   }
 
-  // Conditions to skip media query creation
-  // - It's a named breakpoint that resolved to "0 down" or "0 up"
-  // - It's a numeric breakpoint that resolved to "0 " + anything
-  @if $bp > 0em or $dir == 'only' or $dir == 'down' {
-    // `only` ranges use the format `(min-width: n) and (max-width: n)`
-    @if $dir == 'only' {
-      // Only named media queries can have an "only" range
-      @if $named == true {
-        // Only use "min-width" if the floor is greater than 0
-        @if $bp > 0em {
-          $str: $str + '(min-width: #{$bp})';
-
-          // Only add "and" to the media query if there's a ceiling
-          @if $bp-max != null {
-            $str: $str + ' and ';
-          }
-        }
-
-        // Only use "max-width" if there's a ceiling
-        @if $bp-max != null {
-          $str: $str + '(max-width: #{$bp-max})';
-        }
-      }
-      @else {
-        @warn 'breakpoint(): Only named media queries can have an `only` range.';
-      }
-    }
-
-    // `down` ranges use the format `(max-width: n)`
-    @else if $dir == 'down' {
-      $max: if($named, $bp-max, $bp);
-
-      // Skip media query creation if input value is exactly "0 down",
-      // unless the function was called as "small down", in which case it's just "small only"
-      @if $named or $bp > 0em {
-        @if $max != null {
-          $str: $str + '(max-width: #{$max})';
-        }
-      }
+  // Only 'only' and 'up' have a min limit.
+  @if $dir == 'only' or $dir == 'up' {
+    $bp-min: if($hidpi, strip-unit($bp), -zf-bp-to-em($bp));
+  }
+  // Only 'only' and 'down' have a max limit.
+  @if $dir == 'only' or $dir == 'down' {
+    // If the breakpoint is a value, use it as max limit.
+    @if not $name {
+      $bp-max: if($hidpi, strip-unit($bp), -zf-bp-to-em($bp));
     }
-
-    // `up` ranges use the format `(min-width: n)`
-    @else if $bp > 0em {
-      $str: $str + '(min-width: #{$bp})';
+    // If the breakpoint is named, the max limit is the following breakpoint - 1px.
+    @else if $bp-next {
+      // 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
+      $bp-max: if($hidpi, $bp-next - (1/$std-web-dpi), -zf-bp-to-em($bp-next) - 0.00125);
     }
   }
 
-  @return $str;
+  // Generate the media query string from min and max limits.
+  @if $hidpi {
+    // Generate values in DPI instead of DPPX for an IE9-11/Opera mini compatibility.
+    // See https://caniuse.com/#feat=css-media-resolution
+    $bp-min-dpi: if($bp-min, $bp-min * $std-web-dpi * 1dpi, $bp-min);
+    $bp-max-dpi: if($bp-max, $bp-max * $std-web-dpi * 1dpi, $bp-max);
+    @return zf-str-join(
+      -zf-bp-join($bp-min, $bp-max, '-webkit-min-device-pixel-ratio', '-webkit-max-device-pixel-ratio'),
+      -zf-bp-join($bp-min-dpi, $bp-max-dpi, 'min-resolution', 'max-resolution'),
+      ', ');
+  }
+  @else {
+    @return -zf-bp-join($bp-min, $bp-max);
+  }
 }
 
 /// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
-///  - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
+///  - If a string is passed, the mixin will look for it in the `$breakpoints` and `$breakpoints-hidpi` maps, and use a media query there.
 ///  - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
 ///  - If a rem value is passed, the unit will be changed to em.
 ///  - If an em value is passed, the value will be used as-is.
 ///
-/// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
+/// If multiple values are passed, the mixin will generate a media query for each of them as described above.
+/// Since the content is duplicated for each breakpoint, this mixin should only be used with properties that
+/// change across breakpoints.
+///
+/// @param {Keyword|Number} $values... - Breakpoint name or px/rem/em value to process.
 ///
 /// @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);
-
-  $old-zf-size: null;
-
-  // Make breakpoint size available as a variable
-  @if global-variable-exists(-zf-size) {
-    $old-zf-size: $-zf-size;
-  }
-  $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
-
-  // If $str is still an empty string, no media query is needed
-  @if $str == '' {
-    @content;
-  }
+@mixin breakpoint($values...) {
+  @for $i from 1 through length($values) {
+    $value: nth($values, $i);
+    $str: breakpoint($value);
+    $bp: index($-zf-breakpoints-keys, nth($value, 1));
+    $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
+    // Direction of media query (up, down, or only)
+    $dir: if(length($value) > 1, nth($value, 2), up);
+
+    $old-zf-size: null;
+
+    // Make breakpoint size available as a variable
+    @if global-variable-exists(-zf-size) {
+      $old-zf-size: $-zf-size;
+    }
+    $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
 
-  // Otherwise, wrap the content in a media query
-  @else {
-    // 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;
-       }
+    // If $str is still an empty string, no media query is needed
+    @if $str == '' {
+      @content;
     }
+
+    // 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
+      // generate print if the breakpoint affects the print-breakpoint (or smaller).
+      // This means the current condition only needs to be extended so 'down' always generates print.
+      @if $bp != null and ($bp <= $pbp or $dir == down) {
+        @media print, screen and #{$str} {
+          @content;
+        }
+      }
+      @else {
+        @media screen and #{$str} {
+          @content;
+        }
       }
     }
-  }
 
-  $-zf-size: $old-zf-size !global;
+    $-zf-size: $old-zf-size !global;
+  }
 }
 
 /// 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.
@@ -224,6 +235,26 @@ $breakpoint-classes: (small medium large) !default;
 
 }
 
+/// Find the next number in a map.
+/// @access private
+///
+/// @param {Map} $map - Map to traverse.
+/// @param {Mixed} $number - Number to use as a starting point.
+///
+/// @returns {Mixed} The number following `$number`, if `$number` was found. If `$number` was not found, or `$number` was the biggest number in the map, returns `null`.
+@function -zf-map-next-number($map, $number) {
+
+  $next_number: null;
+
+  @each $k, $v in $map {
+    @if type-of($v) == 'number' and $v > $number and ($next_number == null or $v < $next_number) {
+      $next_number: $v;
+    }
+  }
+
+  @return $next_number;
+}
+
 /// Return a list of our named breakpoints less than $key. Useful for dealing with
 /// responsive gutters for the grid.
 /// @access private
@@ -321,6 +352,50 @@ $breakpoint-classes: (small medium large) !default;
   }
 }
 
+/// Return the best breakpoint to use according to the calling context. It returns in order:
+/// 1. the given `$value` argument if it is not null.
+/// 2. the global breakpoint context `$-zf-size` if it is not null (like if called inside then `breakpoint()` mixin)
+/// 3. the given `$default` argument.
+/// @access private
+///
+/// @param {Keyword} $value [null] - Breakpoint to use in priority if non-null.
+/// @param {Keyword} $default [null] - Breakpoint to use by default if no other value can be used.
+///
+/// @return {Keyword} The resolved breakpoint.
+@function -zf-current-breakpoint($value: null, $default: null) {
+  @if ($value != null) {
+    @return $value;
+  }
+  @else if (variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
+    @return $-zf-size;
+  }
+  @else {
+    @return $default;
+  }
+}
+
+/// Return media query string from the given min and/or max limits.
+/// If a limit is equal to `null` or `0`, it is ignored.
+/// @access private
+///
+/// @param {Number} $min [0] - Min media query limit.
+/// @param {Number} $max [0] - Max media query limit.
+/// @param {String} $min-name ['min-width'] - Name of the min media query limit.
+/// @param {String} $delimiter ['max-width'] - Name of the max media query limit.
+///
+/// @returns {String} Media Query string.
+@function -zf-bp-join(
+  $min: 0,
+  $max: 0,
+  $min-name: 'min-width',
+  $max-name: 'max-width'
+) {
+  @return zf-str-join(
+    if($min and $min > 0, '(#{$min-name}: #{$min})', null),
+    if($max and $max > 0, '(#{$max-name}: #{$max})', null),
+    ' and ');
+}
+
 $small-up: '';
 $small-only: '';