foundation-rails 6.1.2.0 → 6.2.0.0

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

@@ -25,19 +25,20 @@
 //  20. Label
 //  21. Media Object
 //  22. Menu
-//  23. Off-canvas
-//  24. Orbit
-//  25. Pagination
-//  26. Progress Bar
-//  27. Reveal
-//  28. Slider
-//  29. Switch
-//  30. Table
-//  31. Tabs
-//  32. Thumbnail
-//  33. Title Bar
-//  34. Tooltip
-//  35. Top Bar
+//  23. Meter
+//  24. Off-canvas
+//  25. Orbit
+//  26. Pagination
+//  27. Progress Bar
+//  28. Reveal
+//  29. Slider
+//  30. Switch
+//  31. Table
+//  32. Tabs
+//  33. Thumbnail
+//  34. Title Bar
+//  35. Tooltip
+//  36. Top Bar
 
 @import 'util/util';
 
@@ -47,11 +48,13 @@
 $global-font-size: 100%;
 $global-width: rem-calc(1200);
 $global-lineheight: 1.5;
-$primary-color: #2199e8;
-$secondary-color: #777;
-$success-color: #3adb76;
-$warning-color: #ffae00;
-$alert-color: #ec5840;
+$foundation-palette: (
+  primary: #2199e8,
+  secondary: #777,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #ec5840,
+);
 $light-gray: #e6e6e6;
 $medium-gray: #cacaca;
 $dark-gray: #8a8a8a;
@@ -67,6 +70,10 @@ $global-weight-normal: normal;
 $global-weight-bold: bold;
 $global-radius: 0;
 $global-text-direction: ltr;
+$global-flexbox: false;
+$print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
 
 // 2. Breakpoints
 // --------------
@@ -85,7 +92,7 @@ $breakpoint-classes: (small medium large);
 
 $grid-row-width: $global-width;
 $grid-column-count: 12;
-$grid-column-responsive-gutter: (
+$grid-column-gutter: (
   small: 20px,
   medium: 30px,
 );
@@ -177,9 +184,9 @@ $stat-font-size: 2.5rem;
 
 $abide-inputs: true;
 $abide-labels: true;
-$input-background-invalid: $alert-color;
-$form-label-color-invalid: $alert-color;
-$input-error-color: $alert-color;
+$input-background-invalid: map-get($foundation-palette, alert);
+$form-label-color-invalid: map-get($foundation-palette, alert);
+$input-error-color: map-get($foundation-palette, alert);
 $input-error-font-size: rem-calc(12);
 $input-error-font-weight: $global-weight-bold;
 
@@ -231,8 +238,8 @@ $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: #fff;
-$button-color-alt: #000;
+$button-color: $white;
+$button-color-alt: $black;
 $button-radius: $global-radius;
 $button-sizes: (
   tiny: 0.6rem,
@@ -320,7 +327,7 @@ $fieldset-padding: rem-calc(20);
 $fieldset-margin: rem-calc(18 0);
 $legend-padding: rem-calc(0 3);
 $form-spacing: rem-calc(16);
-$helptext-color: #333;
+$helptext-color: $black;
 $helptext-font-size: rem-calc(13);
 $helptext-font-style: italic;
 $input-prefix-color: $black;
@@ -332,9 +339,10 @@ $form-label-font-size: rem-calc(14);
 $form-label-font-weight: $global-weight-normal;
 $form-label-line-height: 1.8;
 $select-background: $white;
-$select-triangle-color: #333;
+$select-triangle-color: $dark-gray;
 $select-radius: $global-radius;
 $input-color: $black;
+$input-placeholder-color: $medium-gray;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-background: $white;
@@ -371,10 +379,21 @@ $mediaobject-image-width-stacked: 100%;
 $menu-margin: 0;
 $menu-margin-nested: 1rem;
 $menu-item-padding: 0.7rem 1rem;
+$menu-item-color-active: $white;
+$menu-item-background-active: map-get($foundation-palette, primary);
 $menu-icon-spacing: 0.25rem;
-$menu-expand-max: 6;
 
-// 23. Off-canvas
+// 23. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
 // --------------
 
 $offcanvas-size: 250px;
@@ -387,7 +406,7 @@ $offcanvas-exit-background: rgba($white, 0.25);
 $maincontent-class: 'off-canvas-content';
 $maincontent-shadow: 0 0 10px rgba($black, 0.5);
 
-// 24. Orbit
+// 25. Orbit
 // ---------
 
 $orbit-bullet-background: $medium-gray;
@@ -402,7 +421,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
 $orbit-control-padding: 1rem;
 $orbit-control-zindex: 10;
 
-// 25. Pagination
+// 26. Pagination
 // --------------
 
 $pagination-font-size: rem-calc(14);
@@ -419,7 +438,7 @@ $pagination-ellipsis-color: $black;
 $pagination-mobile-items: false;
 $pagination-arrows: true;
 
-// 26. Progress Bar
+// 27. Progress Bar
 // ----------------
 
 $progress-height: 1rem;
@@ -428,24 +447,24 @@ $progress-margin-bottom: $global-margin;
 $progress-meter-background: $primary-color;
 $progress-radius: $global-radius;
 
-// 27. Reveal
+// 28. Reveal
 // ----------
 
 $reveal-background: $white;
 $reveal-width: 600px;
 $reveal-max-width: $global-width;
-$reveal-offset: rem-calc(100);
 $reveal-padding: $global-padding;
 $reveal-border: 1px solid $medium-gray;
 $reveal-radius: $global-radius;
 $reveal-zindex: 1005;
 $reveal-overlay-background: rgba($black, 0.45);
 
-// 28. Slider
+// 29. Slider
 // ----------
 
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
 $slider-height: 0.5rem;
-$slider-width-vertical: $slider-height;
 $slider-background: $light-gray;
 $slider-fill-background: $medium-gray;
 $slider-handle-height: 1.4rem;
@@ -453,9 +472,8 @@ $slider-handle-width: 1.4rem;
 $slider-handle-background: $primary-color;
 $slider-opacity-disabled: 0.25;
 $slider-radius: $global-radius;
-$slider-transition: all 0.2s ease-in-out;
 
-// 29. Switch
+// 30. Switch
 // ----------
 
 $switch-background: $medium-gray;
@@ -471,7 +489,7 @@ $switch-paddle-offset: 0.25rem;
 $switch-paddle-radius: $global-radius;
 $switch-paddle-transition: all 0.25s ease-out;
 
-// 30. Table
+// 31. Table
 // ---------
 
 $table-background: $white;
@@ -488,14 +506,13 @@ $table-foot-background: smart-scale($table-background, $table-color-scale);
 $table-head-font-color: $body-font-color;
 $show-header-for-stacked: false;
 
-// 31. Tabs
+// 32. Tabs
 // --------
 
 $tab-margin: 0;
 $tab-background: $white;
 $tab-background-active: $light-gray;
-$tab-border: $light-gray;
-$tab-item-color: foreground($tab-background, $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;
@@ -504,7 +521,7 @@ $tab-content-border: $light-gray;
 $tab-content-color: foreground($tab-background, $primary-color);
 $tab-content-padding: 1rem;
 
-// 32. Thumbnail
+// 33. Thumbnail
 // -------------
 
 $thumbnail-border: solid 4px $white;
@@ -514,7 +531,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
 $thumbnail-transition: box-shadow 200ms ease-out;
 $thumbnail-radius: $global-radius;
 
-// 33. Title Bar
+// 34. Title Bar
 // -------------
 
 $titlebar-background: $black;
@@ -525,7 +542,7 @@ $titlebar-icon-color: $white;
 $titlebar-icon-color-hover: $medium-gray;
 $titlebar-icon-spacing: 0.25rem;
 
-// 34. Tooltip
+// 35. Tooltip
 // -----------
 
 $has-tip-font-weight: $global-weight-bold;
@@ -536,14 +553,14 @@ $tooltip-padding: 0.75rem;
 $tooltip-font-size: $small-font-size;
 $tooltip-pip-width: 0.75rem;
 $tooltip-pip-height: $tooltip-pip-width * 0.866;
-$tooltip-pip-offset: 1.25rem;
 $tooltip-radius: $global-radius;
 
-// 35. Top Bar
+// 36. Top Bar
 // -----------
 
 $topbar-padding: 0.5rem;
 $topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;
-
+$topbar-unstack-breakpoint: medium;

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

@@ -435,5 +435,9 @@ $abbr-underline: 1px dotted $black !default;
     background-color: $keystroke-background;
     color: $keystroke-color;
     font-family: $keystroke-font;
+
+    @if has-value($keystroke-radius) {
+      border-radius: $keystroke-radius;
+    }
   }
 }

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

@@ -2,9 +2,10 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-////
-/// @group typography
-////
+/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.
+/// @type Boolean
+/// @group global
+$print-transparent-backgrounds: true !default;
 
 // scss-lint:disable all
 
@@ -13,7 +14,10 @@
 
   @media print {
     * {
-      background: transparent !important;
+      @if $print-transparent-backgrounds {
+        background: transparent !important;
+      }
+
       color: black !important; // Black prints faster: h5bp.com/s
       box-shadow: none !important;
       text-shadow: none !important;
@@ -45,7 +49,7 @@
     // Prevent page breaks in the middle of a blockquote or preformatted text block
     pre,
     blockquote {
-      border: 1px solid #999;
+      border: 1px solid $dark-gray;
       page-break-inside: avoid;
     }
 

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

@@ -18,6 +18,13 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
+@if not map-has-key($breakpoints, small) or not map-has-key($breakpoints, medium) {
+  @error 'Your list of breakpoints (defined in $breakpoints) must include one named "small" and one named "medium".';
+}
+@else if map-get($breakpoints, small) != 0 {
+  @error 'Your "small" breakpoint (defined in $breakpoints) must be set to "0".';
+}
+
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
 /// @type List
 $breakpoint-classes: (small medium large) !default;
@@ -49,15 +56,7 @@ $breakpoint-classes: (small medium large) !default;
   @if type-of($bp) == 'string' {
     @if map-has-key($breakpoints, $bp) {
       @if $dir == 'only' or $dir == 'down' {
-        $next-bp: -zf-map-next($breakpoints, $bp);
-
-        @if $next-bp == null {
-          $bp-max: null;
-          @warn 'breakpoint(): the media query "#{$val}" cannot be used because #{$bp} is the largest breakpoint.';
-        }
-        @else {
-          $bp-max: $next-bp;
-        }
+        $bp-max: -zf-map-next($breakpoints, $bp);
       }
 
       $bp: map-get($breakpoints, $bp);
@@ -74,37 +73,44 @@ $breakpoint-classes: (small medium large) !default;
     $bp-max: -zf-bp-to-em($bp-max) - (1/16);
   }
 
-  // Skip media query creation if the input is "0 up"
+  // 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 {
-        $str: $str + '(min-width: #{$bp})';
+        // 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 + ' and (max-width: #{$bp-max})';
+          $str: $str + '(max-width: #{$bp-max})';
         }
       }
       @else {
-        @warn 'Only named media queries can have an `only` range.';
+        @warn 'breakpoint(): Only named media queries can have an `only` range.';
       }
     }
 
     // `down` ranges use the format `(max-width: n)`
     @else if $dir == 'down' {
-      $max: 0;
-
-      // For named breakpoints, subtract the breakpoint value by one "pixel", or 1/16em.
-      @if $named {
-        $max: $bp-max;
-      }
-      @else {
-        $max: $bp;
-      }
+      $max: if($named, $bp-max, $bp);
 
-      // Skip media query creation if input value is exactly "0 down" but don't "small down"
+      // 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 {
-        $str: $str + '(max-width: #{$max})';
+        @if $max != null {
+          $str: $str + '(max-width: #{$max})';
+        }
       }
     }
 
@@ -229,7 +235,7 @@ $breakpoint-classes: (small medium large) !default;
 }
 
 // Legacy breakpoint variables
-// These will be removed in 6.2
+// These will be removed in 6.3
 $small-up: null;
 $small-only: null;
 $medium-up: null;

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

@@ -39,3 +39,22 @@
   }
   @return scale-color($color, $lightness: $scale);
 }
+
+/// 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.
+@mixin add-foundation-colors() {
+  @if map-has-key($foundation-palette, primary) {
+    $primary-color: map-get($foundation-palette, primary) !global;
+  }
+  @if map-has-key($foundation-palette, secondary) {
+    $secondary-color: map-get($foundation-palette, secondary) !global;
+  }
+  @if map-has-key($foundation-palette, success) {
+    $success-color: map-get($foundation-palette, success) !global;
+  }
+  @if map-has-key($foundation-palette, warning) {
+    $warning-color: map-get($foundation-palette, warning) !global;
+  }
+  @if map-has-key($foundation-palette, alert) {
+    $alert-color: map-get($foundation-palette, alert) !global;
+  }
+}

data/vendor/assets/scss/util/_flex.scss

@@ -0,0 +1,68 @@
+$-zf-flex-justify: (
+  'left': flex-start,
+  'right': flex-end,
+  'center': center,
+  'justify': space-between,
+  'spaced': space-around,
+);
+
+$-zf-flex-align: (
+  'top': flex-start,
+  'bottom': flex-end,
+  'middle': center,
+  'stretch': stretch,
+);
+
+/// Enables flexbox by adding `display: flex` to the element.
+@mixin flex {
+  display: flex;
+}
+
+/// Horizontally or vertically aligns the items within a flex container.
+///
+/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
+/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+@mixin flex-align($x: null, $y: null) {
+  @if $x {
+    @if map-has-key($-zf-flex-justify, $x) {
+      $x: map-get($-zf-flex-justify, $x);
+    }
+    @else {
+      @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
+    }
+  }
+
+  @if $y {
+    @if map-has-key($-zf-flex-align, $y) {
+      $y: map-get($-zf-flex-align, $y);
+    }
+    @else {
+      @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
+    }
+  }
+
+  justify-content: $x;
+  align-items: $y;
+}
+
+/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
+///
+/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
+@mixin flex-align-self($y: null) {
+  @if $y {
+    @if map-has-key($-zf-flex-align, $y) {
+      $y: map-get($-zf-flex-align, $y);
+    }
+    @else {
+      @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
+    }
+  }
+
+  align-self: $y;
+}
+
+/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.
+/// @param {Number} $order [0] - Order number to apply.
+@mixin flex-order($order: 0) {
+  order: $order;
+}