foundation-rails 5.5.1.2 → 5.5.2.0

data/vendor/assets/stylesheets/foundation/_settings.scss

@@ -55,7 +55,7 @@
 // $rem-base: 16px;
 
 // Allows the use of rem-calc() or lower-bound() in your settings
-@import "foundation/functions";
+@import 'foundation/functions';
 
 // The default font-size is set to 100% of the browser style sheet (usually 16px)
 // for compatibility with browser-based text zoom or user-set defaults.
@@ -83,8 +83,6 @@ $include-html-global-classes: $include-html-classes;
 // $total-columns: 12;
 // $column-gutter: rem-calc(30);
 
-// $last-child-float: $opposite-direction;
-
 // c. Global
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -153,11 +151,16 @@ $include-html-global-classes: $include-html-classes;
 // d. Media Query Ranges
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-// $small-range: (0em, 40em);
-// $medium-range: (40.063em, 64em);
-// $large-range: (64.063em, 90em);
-// $xlarge-range: (90.063em, 120em);
-// $xxlarge-range: (120.063em, 99999999em);
+// $small-breakpoint:  em-calc(640);
+// $medium-breakpoint: em-calc(1024);
+// $large-breakpoint:  em-calc(1440);
+// $xlarge-breakpoint: em-calc(1920);
+
+// $small-range:   (0, $small-breakpoint);
+// $medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint);
+// $large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint);
+// $xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint);
+// $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
 
 // $screen: "only screen";
 
@@ -179,6 +182,15 @@ $include-html-global-classes: $include-html-classes;
 // $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
 // $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
 
+// $retina: (
+//  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
+//  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
+//  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
+//  "#{$screen} and (min-device-pixel-ratio: 2)",
+//  "#{$screen} and (min-resolution: 192dpi)",
+//  "#{$screen} and (min-resolution: 2dppx)"
+// );
+
 // Legacy
 // $small: $medium-up;
 // $medium: $medium-up;
@@ -362,8 +374,8 @@ $include-html-global-classes: $include-html-classes;
 // $alert-close-top: 50%;
 // $alert-close-position: rem-calc(4);
 // $alert-close-font-size: rem-calc(22);
-// $alert-close-opacity: 0.3;
-// $alert-close-opacity-hover: 0.5;
+// $alert-close-opacity: .3;
+// $alert-close-opacity-hover: .5;
 // $alert-close-padding: 9px 6px 4px;
 // $alert-close-background: inherit;
 
@@ -471,7 +483,7 @@ $include-html-global-classes: $include-html-classes;
 // $button-round: $global-rounded;
 
 // We use this to set default opacity and cursor for disabled buttons.
-// $button-disabled-opacity: 0.7;
+// $button-disabled-opacity: .7;
 // $button-disabled-cursor: $cursor-default-value;
 
 // 06. Button Groups
@@ -504,7 +516,7 @@ $include-html-global-classes: $include-html-classes;
 
 // We use these to style captions
 // $clearing-caption-font-color: $iron;
-// $clearing-caption-font-size: 0.875em;
+// $clearing-caption-font-size: .875em;
 // $clearing-caption-padding: 10px 30px 20px;
 
 // We use these to make the image and carousel height and style
@@ -645,7 +657,7 @@ $include-html-global-classes: $include-html-classes;
 // $input-disabled-bg: $gainsboro;
 // $input-disabled-cursor: $cursor-default-value;
 // $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-// $input-include-glowing-effect: true;
+// $input-include-glowing-effect: false;
 
 // We use these to style the fieldset border and spacing.
 // $fieldset-border-style: solid;
@@ -682,9 +694,13 @@ $include-html-global-classes: $include-html-classes;
 // $input-error-message-font-color-alt: $oil;
 
 // We use this to style the glowing effect of inputs when focused
-// $glowing-effect-fade-time: 0.45s;
+// $glowing-effect-fade-time: .45s;
 // $glowing-effect-color: $input-focus-border-color;
 
+// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
+// $input-transition-fade-time: 0.15s;
+// $input-transition-fade-timing-function: linear;
+
 // Select variables
 // $select-bg-color: $ghost;
 // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
@@ -708,7 +724,7 @@ $include-html-global-classes: $include-html-classes;
 // $icon-bar-item-padding: 1.25rem;
 
 // We use this to set default opacity and cursor for disabled icons.
-// $icon-bar-disabled-opacity: 0.7;
+// $icon-bar-disabled-opacity: .7;
 
 // 13. Inline Lists
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -840,9 +856,11 @@ $include-html-global-classes: $include-html-classes;
 // Off Canvas Menu Variables
 // $off-canvas-width: rem-calc(250);
 // $off-canvas-bg: $oil;
+// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
+// $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%);
 
 // Off Canvas Menu List Variables
-// $off-canvas-label-padding: 0.3rem rem-calc(15);
+// $off-canvas-label-padding: .3rem rem-calc(15);
 // $off-canvas-label-color: $aluminum;
 // $off-canvas-label-text-transform: uppercase;
 // $off-canvas-label-font-size: rem-calc(12);
@@ -852,7 +870,7 @@ $include-html-global-classes: $include-html-classes;
 // $off-canvas-label-border-bottom: none;
 // $off-canvas-label-margin:0;
 // $off-canvas-link-padding: rem-calc(10, 15);
-// $off-canvas-link-color: rgba($white, 0.7);
+// $off-canvas-link-color: rgba($white, .7);
 // $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
 // $off-canvas-back-bg: #444;
 // $off-canvas-back-border-top: $off-canvas-label-border-top;
@@ -879,9 +897,9 @@ $include-html-global-classes: $include-html-classes;
 // Off Canvas Back-Link Overlay
 // $off-canvas-overlay-transition: background 300ms ease;
 // $off-canvas-overlay-cursor: pointer;
-// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5);
-// $off-canvas-overlay-background: rgba($white, 0.2);
-// $off-canvas-overlay-background-hover: rgba($white, 0.05);
+// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5);
+// $off-canvas-overlay-background: rgba($white, .2);
+// $off-canvas-overlay-background-hover: rgba($white, .05);
 
 // Transition Variables
 // $menu-slide: "transform 500ms ease";
@@ -893,7 +911,7 @@ $include-html-global-classes: $include-html-classes;
 
 // We use these to control the caption styles
 // $orbit-container-bg: none;
-// $orbit-caption-bg: rgba(51,51,51, 0.8);
+// $orbit-caption-bg: rgba(51,51,51, .8);
 // $orbit-caption-font-color: $white;
 // $orbit-caption-font-size: rem-calc(14);
 // $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
@@ -927,7 +945,7 @@ $include-html-global-classes: $include-html-classes;
 // Hide controls on small
 // $orbit-nav-hide-for-small: true;
 // $orbit-bullet-hide-for-small: true;
-// $orbit-timer-hide-for-small: true; 
+// $orbit-timer-hide-for-small: true;
 
 // 20. Pagination
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -971,10 +989,10 @@ $include-html-global-classes: $include-html-classes;
 // $panel-bg: scale-color($white, $lightness: -5%);
 // $panel-border-style: solid;
 // $panel-border-size: 1px;
+// $callout-panel-bg: scale-color($primary-color, $lightness: 94%);
 
 // We use this % to control how much we darken things on hover
-// $panel-function-factor: -11%;
-// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor);
+// $panel-border-color: scale-color($panel-bg, $lightness: -11%);
 
 // We use these to set default inner padding and bottom margin
 // $panel-margin-bottom: rem-calc(20);
@@ -1070,7 +1088,7 @@ $include-html-global-classes: $include-html-classes;
 
 // $include-html-range-slider-classes: $include-html-classes;
 
-// These variabels define the slider bar styles
+// These variables define the slider bar styles
 // $range-slider-bar-width: 100%;
 // $range-slider-bar-height: rem-calc(16);
 
@@ -1099,7 +1117,7 @@ $include-html-global-classes: $include-html-classes;
 // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
 // $range-slider-handle-cursor: pointer;
 
-// $range-slider-disabled-opacity: 0.7;
+// $range-slider-disabled-opacity: .7;
 // $range-slider-disabled-cursor: $cursor-disabled-value;
 
 // 25. Reveal
@@ -1155,7 +1173,7 @@ $include-html-global-classes: $include-html-classes;
 // $side-nav-link-color: $primary-color;
 // $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
 // $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
-// $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025);
+// $side-nav-link-bg-hover: hsla(0, 0, 0, .025);
 // $side-nav-link-margin: 0;
 // $side-nav-link-padding: rem-calc(7 14);
 // $side-nav-font-size: rem-calc(14);
@@ -1183,6 +1201,7 @@ $include-html-global-classes: $include-html-classes;
 // We use these to control different shared styles for Split Buttons
 // $split-button-function-factor: 10%;
 // $split-button-pip-color: $white;
+// $split-button-span-border-color: rgba(255,255,255,0.5);
 // $split-button-pip-color-alt: $oil;
 // $split-button-active-bg-tint: rgba(0,0,0,0.1);
 
@@ -1265,7 +1284,7 @@ $include-html-global-classes: $include-html-classes;
 // $switch-paddle-bg: $white;
 // $switch-paddle-transition-speed: .15s;
 // $switch-paddle-transition-ease: ease-out;
-// $switch-active-color: $primary-color; 
+// $switch-active-color: $primary-color;
 
 // 30. Tables
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -1401,7 +1420,7 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-link-font-size: rem-calc(13);
 // $topbar-link-hover-lightness: -10%; // Darken by 10%
 // $topbar-link-bg: $topbar-bg;
-// $topbar-link-bg-hover: $oil;
+// $topbar-link-bg-hover: $jet;
 // $topbar-link-bg-color-hover: $charcoal;
 // $topbar-link-bg-active: $primary-color;
 // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
@@ -1410,7 +1429,7 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-link-padding: ($topbar-height / 3);
 // $topbar-back-link-size: rem-calc(18);
 // $topbar-link-dropdown-padding: rem-calc(20);
-// $topbar-button-font-size: 0.75rem;
+// $topbar-button-font-size: .75rem;
 // $topbar-button-top: 7px;
 
 // Style the top bar dropdown elements
@@ -1418,11 +1437,11 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-dropdown-link-color: $white;
 // $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
 // $topbar-dropdown-link-bg: $oil;
-// $topbar-dropdown-link-bg-hover: $oil;
+// $topbar-dropdown-link-bg-hover: $jet;
 // $topbar-dropdown-link-weight: $font-weight-normal;
 // $topbar-dropdown-toggle-size: 5px;
 // $topbar-dropdown-toggle-color: $white;
-// $topbar-dropdown-toggle-alpha: 0.4;
+// $topbar-dropdown-toggle-alpha: .4;
 
 // $topbar-dropdown-label-color: $monsoon;
 // $topbar-dropdown-label-text-transform: uppercase;
@@ -1444,7 +1463,7 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-transition-speed: 300ms;
 // Using rem-calc for the below breakpoint causes issues with top bar
 // $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
-// $topbar-media-query: $medium-up;
+// $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
 
 // Top-bar input styles
 // $topbar-input-height: rem-calc(28);
@@ -1456,7 +1475,7 @@ $include-html-global-classes: $include-html-classes;
 // Sticky Class
 // $topbar-sticky-class: ".sticky";
 // $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
-// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li// 
+// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
 
 // 36. Visibility Classes
 // - - - - - - - - - - - - - - - - - - - - - - - - -

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -32,7 +32,7 @@ $accordion-content-active-bg-color: $white !default;
   margin-bottom: 0;
 }
 
-//  Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class,  $font-color, $font-size, $font-family){
+//  Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class,  $font-color, $font-size, $font-family) {
 //    @params $bg-color: [ color or string ]: Specify the background color for the navigation element
 //    @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
 //    @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
@@ -41,7 +41,7 @@ $accordion-content-active-bg-color: $white !default;
 //    @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
 //    @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
 
-@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){
+@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ) {
   display: block;
   margin-bottom: 0 !important;
   @if type-of($active_class) != "string" {
@@ -98,7 +98,7 @@ $accordion-content-active-bg-color: $white !default;
 //    @params $bg [ color  ]: Background color for the content when it's visible
 //    @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
 
-@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){
+@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') {
   display: none;
   @if type-of($padding) != "number" {
     @warn "#{$padding} was read as a #{type-of($padding)}";
@@ -118,8 +118,8 @@ $accordion-content-active-bg-color: $white !default;
   }
   @else {
     &.#{$active_class} {
-      display: block;
       background: $bg;
+      display: block;
     }
   }
 }
@@ -136,10 +136,10 @@ $accordion-content-active-bg-color: $white !default;
         > a {
           background: $accordion-navigation-bg-color;
           color: $accordion-navigation-font-color;
-          padding: $accordion-navigation-padding;
           display: block;
           font-family: $accordion-navigation-font-family;
           font-size: $accordion-navigation-font-size;
+          padding: $accordion-navigation-padding;
           &:hover { background: $accordion-navigation-hover-bg-color; }
         }
 
@@ -147,8 +147,8 @@ $accordion-content-active-bg-color: $white !default;
           display: none;
           padding: $accordion-content-padding;
           &.active {
-            display: block;
             background: $accordion-content-active-bg-color;
+            display: block;
           }
         }
       }

data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // Alert Box Variables
@@ -35,8 +35,8 @@ $alert-close-color: $oil !default;
 $alert-close-top: 50% !default;
 $alert-close-position: rem-calc(4) !default;
 $alert-close-font-size: rem-calc(22) !default;
-$alert-close-opacity: 0.3 !default;
-$alert-close-opacity-hover: 0.5 !default;
+$alert-close-opacity: .3 !default;
+$alert-close-opacity-hover: .5 !default;
 $alert-close-padding: 0 6px 4px !default;
 $alert-close-background: inherit !default;
 
@@ -55,11 +55,11 @@ $alert-transition-ease: ease-out !default;
   border-style: $alert-border-style;
   border-width: $alert-border-width;
   display: block;
+  font-size: $alert-font-size;
   font-weight: $alert-font-weight;
   margin-bottom: $alert-bottom-margin;
-  position: relative;
   padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
-  font-size: $alert-font-size;
+  position: relative;
   @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease)
 }
 
@@ -83,16 +83,16 @@ $alert-transition-ease: ease-out !default;
 
 // We use this to create the close button.
 @mixin alert-close {
+  #{$opposite-direction}: $alert-close-position;
+  background: $alert-close-background;
+  color: $alert-close-color;
   font-size: $alert-close-font-size;
-  padding: $alert-close-padding;
   line-height: .9;
-  position: absolute;
-  top: $alert-close-top;
   margin-top: -($alert-close-font-size / 2);
-  #{$opposite-direction}: $alert-close-position;
-  color: $alert-close-color;
   opacity: $alert-close-opacity;
-  background: $alert-close-background;
+  padding: $alert-close-padding;
+  position: absolute;
+  top: $alert-close-top;
   &:hover,
   &:focus { opacity: $alert-close-opacity-hover; }
 }

data/vendor/assets/stylesheets/foundation/components/_block-grid.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // Block Grid Variables
@@ -48,10 +48,10 @@ $block-grid-media-queries: true !default;
     }
     @include clearfix;
 
-    &>li {
+    > li {
       display: block;
-      height: auto;
       float: $default-float;
+      height: auto;
       @if $include-spacing {
         padding: 0 ($spacing/2) $spacing;
       }
@@ -59,12 +59,12 @@ $block-grid-media-queries: true !default;
   }
 
   @if $per-row {
-    &>li {
-      width: 100%/$per-row;
+    > li {
+      list-style: none;
       @if $include-spacing {
         padding: 0 ($spacing/2) $spacing;
       }
-      list-style: none;
+      width: 100%/$per-row;
 
       &:nth-of-type(1n) { clear: none; }
       &:nth-of-type(#{$per-row}n+1) { clear: both; }
@@ -93,10 +93,10 @@ $block-grid-media-queries: true !default;
 // Generate presentational markup for block grid.
 //
 // $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
-@mixin block-grid-html-classes($size,$include-spacing) {
+@mixin block-grid-html-classes($size, $include-spacing) {
   @for $i from 1 through $block-grid-elements {
     .#{$size}-block-grid-#{($i)} {
-      @include block-grid($i,$block-grid-default-spacing,$include-spacing,false);
+      @include block-grid($i, $block-grid-default-spacing, $include-spacing, false);
     }
   }
 }
@@ -108,24 +108,24 @@ $block-grid-media-queries: true !default;
 
     @if $block-grid-media-queries {
       @media #{$small-up} {
-        @include block-grid-html-classes($size:small,$include-spacing:false);
+        @include block-grid-html-classes($size:small, $include-spacing:false);
       }
 
       @media #{$medium-up} {
-        @include block-grid-html-classes($size:medium,$include-spacing:false);
+        @include block-grid-html-classes($size:medium, $include-spacing:false);
       }
 
       @media #{$large-up} {
-        @include block-grid-html-classes($size:large,$include-spacing:false);
+        @include block-grid-html-classes($size:large, $include-spacing:false);
       }
 
       @if $include-xl-html-block-grid-classes {
         @media #{$xlarge-up} {
-          @include block-grid-html-classes($size:xlarge,$include-spacing:false);
+          @include block-grid-html-classes($size:xlarge, $include-spacing:false);
         }
 
         @media #{$xxlarge-up} {
-          @include block-grid-html-classes($size:xxlarge,$include-spacing:false);
+          @include block-grid-html-classes($size:xxlarge, $include-spacing:false);
         }
       }
     }