foundation-rails 5.3.3.0 → 5.4.0.0

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

@@ -11,7 +11,7 @@ $include-html-orbit-classes: $include-html-classes !default;
 // We use these to control the caption styles
 $orbit-container-bg: none !default;
 $orbit-caption-bg: rgba(51,51,51, 0.8) !default;
-$orbit-caption-font-color: #fff !default;
+$orbit-caption-font-color: $white !default;
 $orbit-caption-font-size: rem-calc(14) !default;
 $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
 $orbit-caption-padding: rem-calc(10 14) !default;
@@ -20,21 +20,21 @@ $orbit-caption-height: auto !default;
 // We use these to control the left/right nav styles
 $orbit-nav-bg: transparent !default;
 $orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
-$orbit-nav-arrow-color: #fff !default;
-$orbit-nav-arrow-color-hover: #fff !default;
+$orbit-nav-arrow-color: $white !default;
+$orbit-nav-arrow-color-hover: $white !default;
 
 // We use these to control the timer styles
 $orbit-timer-bg: rgba(255,255,255,0.3) !default;
 $orbit-timer-show-progress-bar: true !default;
 
 // We use these to control the bullet nav styles
-$orbit-bullet-nav-color: #ccc !default;
-$orbit-bullet-nav-color-active: #999 !default;
+$orbit-bullet-nav-color: $iron !default;
+$orbit-bullet-nav-color-active: $aluminum !default;
 $orbit-bullet-radius: rem-calc(9) !default;
 
 // We use these to controls the style of slide numbers
 $orbit-slide-number-bg: rgba(0,0,0,0) !default;
-$orbit-slide-number-font-color: #fff !default;
+$orbit-slide-number-font-color: $white !default;
 $orbit-slide-number-padding: rem-calc(5) !default;
 
 // Graceful Loading Wrapper and preloader
@@ -107,7 +107,7 @@ $orbit-timer-hide-for-small: true !default;
         margin-top: -20px;
         margin-left: -20px;
         border: solid 3px;
-        border-color: #555 #fff;
+        border-color: $charcoal $white;
         @include radius(1000px);
         animation-name: rotate;
         animation-duration: 1.5s;
@@ -209,7 +209,7 @@ $orbit-timer-hide-for-small: true !default;
           #{$opposite-direction}: 0;
           width: 11px;
           height: 14px;
-          border: solid 4px #fff;
+          border: solid 4px $white;
           border-top: none;
           border-bottom: none;
         }
@@ -224,9 +224,9 @@ $orbit-timer-hide-for-small: true !default;
             border: inset 8px;
             border-left-style: solid;
             border-color: transparent;
-            border-left-color: #fff;
+            border-left-color: $white;
             &.dark { 
-              border-left-color: #333;
+              border-left-color: $oil;
             }
           }
         }

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

@@ -16,23 +16,23 @@ $pagination-margin: rem-calc(-5) !default;
 // We use these to set the list-item properties
 $pagination-li-float: $default-float !default;
 $pagination-li-height: rem-calc(24) !default;
-$pagination-li-font-color: #222 !default;
+$pagination-li-font-color: $jet !default;
 $pagination-li-font-size: rem-calc(14) !default;
 $pagination-li-margin: rem-calc(5) !default;
 
 // We use these for the pagination anchor links
 $pagination-link-pad: rem-calc(1 10 1) !default;
-$pagination-link-font-color: #999 !default;
-$pagination-link-active-bg: scale-color(#fff, $lightness: -10%) !default;
+$pagination-link-font-color: $aluminum !default;
+$pagination-link-active-bg: scale-color($white, $lightness: -10%) !default;
 
 // We use these for disabled anchor links
 $pagination-link-unavailable-cursor: default !default;
-$pagination-link-unavailable-font-color: #999 !default;
+$pagination-link-unavailable-font-color: $aluminum !default;
 $pagination-link-unavailable-bg-active: transparent !default;
 
 // We use these for currently selected anchor links
 $pagination-link-current-background: $primary-color !default;
-$pagination-link-current-font-color: #fff !default;
+$pagination-link-current-font-color: $white !default;
 $pagination-link-current-font-weight: $font-weight-bold !default;
 $pagination-link-current-cursor: default !default;
 $pagination-link-current-active-bg: $primary-color !default;

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

@@ -10,7 +10,7 @@
 $include-html-panel-classes: $include-html-classes !default;
 
 // We use these to control the background and border styles
-$panel-bg: scale-color(#fff, $lightness: -5%) !default;
+$panel-bg: scale-color($white, $lightness: -5%) !default;
 $panel-border-style: solid !default;
 $panel-border-size: 1px !default;
 
@@ -23,8 +23,8 @@ $panel-margin-bottom: rem-calc(20) !default;
 $panel-padding: rem-calc(20) !default;
 
 // We use these to set default font colors
-$panel-font-color: #333 !default;
-$panel-font-color-alt: #fff !default;
+$panel-font-color: $oil !default;
+$panel-font-color-alt: $white !default;
 
 $panel-header-adjust: true !default;
 $callout-panel-link-color: $primary-color !default;
@@ -32,7 +32,7 @@ $callout-panel-link-color: $primary-color !default;
 // @mixins
 //
 // We use this mixin to create panels.
-// $bg - Sets the panel background color. Default: $panel-pg || scale-color(#fff, $lightness: -5%) !default
+// $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
 // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
 // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
 @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {

data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss

@@ -10,50 +10,50 @@
 $include-html-pricing-classes: $include-html-classes !default;
 
 // We use this to control the border color
-$price-table-border: solid 1px #ddd !default;
+$price-table-border: solid 1px $gainsboro !default;
 
 // We use this to control the bottom margin of the pricing table
 $price-table-margin-bottom: rem-calc(20) !default;
 
 // We use these to control the title styles
-$price-title-bg: #333 !default;
+$price-title-bg: $oil !default;
 $price-title-padding: rem-calc(15 20) !default;
 $price-title-align: center !default;
-$price-title-color: #eee !default;
+$price-title-color: $smoke !default;
 $price-title-weight: $font-weight-normal !default;
 $price-title-size: rem-calc(16) !default;
 $price-title-font-family: $body-font-family !default;
 
 // We use these to control the price styles
-$price-money-bg: #f6f6f6 !default;
+$price-money-bg: $vapor !default;
 $price-money-padding: rem-calc(15 20) !default;
 $price-money-align: center !default;
-$price-money-color: #333 !default;
+$price-money-color: $oil !default;
 $price-money-weight: $font-weight-normal !default;
 $price-money-size: rem-calc(32) !default;
 $price-money-font-family: $body-font-family !default;
 
 
 // We use these to control the description styles
-$price-bg: #fff !default;
-$price-desc-color: #777 !default;
+$price-bg: $white !default;
+$price-desc-color: $monsoon !default;
 $price-desc-padding: rem-calc(15) !default;
 $price-desc-align: center !default;
 $price-desc-font-size: rem-calc(12) !default;
 $price-desc-weight: $font-weight-normal !default;
 $price-desc-line-height: 1.4 !default;
-$price-desc-bottom-border: dotted 1px #ddd !default;
+$price-desc-bottom-border: dotted 1px $gainsboro !default;
 
 // We use these to control the list item styles
-$price-item-color: #333 !default;
+$price-item-color: $oil !default;
 $price-item-padding: rem-calc(15) !default;
 $price-item-align: center !default;
 $price-item-font-size: rem-calc(14) !default;
 $price-item-weight: $font-weight-normal !default;
-$price-item-bottom-border: dotted 1px #ddd !default;
+$price-item-bottom-border: dotted 1px $gainsboro !default;
 
 // We use these to control the CTA area styles
-$price-cta-bg: #fff !default;
+$price-cta-bg: $white !default;
 $price-cta-align: center !default;
 $price-cta-padding: rem-calc(20 20 0) !default;
 

data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss

@@ -11,10 +11,10 @@ $include-html-media-classes: $include-html-classes !default;
 
 // We use this to set the progress bar height
 $progress-bar-height: rem-calc(25) !default;
-$progress-bar-color: #f6f6f6 !default;
+$progress-bar-color: $vapor !default;
 
 // We use these to control the border styles
-$progress-bar-border-color: scale-color(#fff, $lightness: 20%) !default;
+$progress-bar-border-color: scale-color($white, $lightness: 20%) !default;
 $progress-bar-border-size: 1px !default;
 $progress-bar-border-style: solid !default;
 $progress-bar-border-radius: $global-radius !default;

data/vendor/assets/stylesheets/foundation/components/_range-slider.scss

@@ -21,10 +21,10 @@ $range-slider-bar-height: rem-calc(16) !default;
 
 $range-slider-bar-border-width: 1px !default;
 $range-slider-bar-border-style: solid !default;
-$range-slider-bar-border-color: #ddd !default; 
+$range-slider-bar-border-color: $gainsboro !default; 
 $range-slider-radius: $global-radius !default;
 $range-slider-round: $global-rounded !default;
-$range-slider-bar-bg-color: #fafafa !default;
+$range-slider-bar-bg-color: $ghost !default;
 
 // Vertical bar styles
 $range-slider-vertical-bar-width: rem-calc(16) !default;

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

@@ -12,21 +12,22 @@
 $include-html-reveal-classes: $include-html-classes !default;
 
 // We use these to control the style of the reveal overlay.
-$reveal-overlay-bg: rgba(#000, .45) !default;
-$reveal-overlay-bg-old: #000 !default;
+$reveal-overlay-bg: rgba($black, .45) !default;
+$reveal-overlay-bg-old: $black !default;
 
 // We use these to control the style of the modal itself.
-$reveal-modal-bg: #fff !default;
+$reveal-modal-bg: $white !default;
 $reveal-position-top: rem-calc(100) !default;
 $reveal-default-width: 80% !default;
+$reveal-max-width: $row-width !default;
 $reveal-modal-padding: rem-calc(20) !default;
-$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
+$reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
 
 // We use these to style the reveal close button
 $reveal-close-font-size: rem-calc(40) !default;
 $reveal-close-top: rem-calc(8) !default;
 $reveal-close-side: rem-calc(11) !default;
-$reveal-close-color: #aaa !default;
+$reveal-close-color: $base !default;
 $reveal-close-weight: $font-weight-bold !default;
 
 // We use this to set the default radius used throughout the core.
@@ -36,7 +37,7 @@ $reveal-round: $global-rounded !default;
 // We use these to control the modal border
 $reveal-border-style: solid !default;
 $reveal-border-width: 1px !default;
-$reveal-border-color: #666 !default;
+$reveal-border-color: $steel !default;
 
 $reveal-modal-class: "reveal-modal" !default;
 $close-reveal-modal-class: "close-reveal-modal" !default;
@@ -46,15 +47,16 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 //
 
 // We use this to create the reveal background overlay styles
-@mixin reveal-bg {
+@mixin reveal-bg( $include-z-index-value: true ) {
   position: fixed;
-  height: 100%;
-  width: 100%;
-  background: $reveal-overlay-bg-old;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
   background: $reveal-overlay-bg;
-  z-index: 1004;
+  z-index: if( $include-z-index-value, 1004, null );
   display: none;
-  top: 0;
   #{$default-float}: 0;
 }
 
@@ -65,7 +67,9 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 //
 @mixin reveal-modal-base(
   $base-style:true,
-  $width:$reveal-default-width) {
+  $width:$reveal-default-width,
+  $max-width:$reveal-max-width,
+  $border-radius: $reveal-radius) {
   @if $base-style {
     visibility: hidden;
     display: none;
@@ -73,13 +77,11 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     z-index: 1005;
     width: 100vw;
     top:0;
+    border-radius: $border-radius; 
     #{$default-float}: 0;
     @media #{$small-only} {
       min-height:100vh;
     }
-    @media #{$medium-up} {
-      #{$default-float}: 50%;
-    }
 
     // Make sure rows don't have a min-width on them
     .column,
@@ -92,15 +94,18 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
   @if $width {
     @media #{$medium-up} {
-      margin-#{$default-float}: -($width / 2);
       width: $width;
+      max-width: $max-width;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
     }
   }
 }
 
 // We use this to style the reveal modal defaults
 //
-// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || #fff
+// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white
 // $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
 // $border - Choose whether reveal uses a border. Default: true, Options: false
 // $border-style - Set reveal border style. Default: $reveal-border-style || solid
@@ -143,7 +148,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
 // We use this to create a close button for the reveal modal
 //
-// $color - Default: $reveal-close-color || #aaa
+// $color - Default: $reveal-close-color || $base
 @mixin reveal-close($color:$reveal-close-color) {
   font-size: $reveal-close-font-size;
   line-height: 1;
@@ -161,7 +166,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     // Reveal Modals
     .reveal-modal-bg { @include reveal-bg; }
 
-    dialog, .#{$reveal-modal-class} {
+    .#{$reveal-modal-class} {
       @include reveal-modal-base;
       @include reveal-modal-style(
         $bg:$reveal-modal-bg,
@@ -169,32 +174,18 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
         $border:true,
         $box-shadow:true,
         $radius:false,
-        $top-offset:$reveal-position-top);
-
-      .#{$close-reveal-modal-class} { @include reveal-close; }
-    }
-
-    dialog[open] {
-      display:block;
-      visibility: visible;
-    }
-
-    dialog, .#{$reveal-modal-class} {
+        $top-offset:$reveal-position-top
+      );
       @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
 
       &.radius { @include reveal-modal-style($radius:true); }
       &.round  { @include reveal-modal-style($radius:$reveal-round); }
-      
       &.collapse { @include reveal-modal-style($padding:0); }
-
       &.tiny  { @include reveal-modal-base(false, 30%); }
       &.small { @include reveal-modal-base(false, 40%); }
       &.medium  { @include reveal-modal-base(false, 60%); }
       &.large { @include reveal-modal-base(false, 70%); }
       &.xlarge { @include reveal-modal-base(false, 95%); }
-    }
-
-    dialog, .#{$reveal-modal-class} {
       &.full {
         @include reveal-modal-base(false, 100vw);
         top:0;
@@ -204,11 +195,26 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
         min-height:100vh;
         margin-left: 0 !important;
       }
+
+      .#{$close-reveal-modal-class} { @include reveal-close; }
+    }
+
+    dialog {
+      @extend .#{$reveal-modal-class};
+
+      &::backdrop {
+        @include reveal-bg(false);
+      }
+
+      //&[open]{ display: block; }  As far as I know, this is no longer needed; this is the expected behavior in all browsers that currently support dialog or plan to with their nightly builds.
     }
 
-    // Reveal Print Styles
+    // Reveal Print Styles: It should be invislbe, adds no value being printed.
     @media print {
-      dialog, .#{$reveal-modal-class} {background: #fff !important;}
+      dialog, .#{$reveal-modal-class} { 
+        display: none;
+        background: $white !important;
+      }
     }
   }
 }

data/vendor/assets/stylesheets/foundation/components/_side-nav.scss

@@ -40,7 +40,7 @@ $side-nav-heading-text-transform: uppercase !default;
 // We use these to control border styles
 $side-nav-divider-size: 1px !default;
 $side-nav-divider-style: solid !default;
-$side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
+$side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
 
 
 //

data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss

@@ -19,8 +19,8 @@ $include-html-button-classes: $include-html-classes !default;
 
 // We use these to control different shared styles for Split Buttons
 $split-button-function-factor: 10% !default;
-$split-button-pip-color: #fff !default;
-$split-button-pip-color-alt: #333 !default;
+$split-button-pip-color: $white !default;
+$split-button-pip-color-alt: $oil !default;
 $split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
 
 // We use these to control tiny split buttons

data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss

@@ -22,7 +22,7 @@ $sub-nav-list-padding-top: rem-calc(4) !default;
 // We use this to control the definition
 $sub-nav-font-family: $body-font-family !default;
 $sub-nav-font-size: rem-calc(14) !default;
-$sub-nav-font-color: #999 !default;
+$sub-nav-font-color: $aluminum !default;
 $sub-nav-font-weight: $font-weight-normal !default;
 $sub-nav-text-decoration: none !default;
 $sub-nav-padding: rem-calc(3 16) !default;
@@ -35,7 +35,7 @@ $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !d
 $sub-nav-active-font-weight: $font-weight-normal !default;
 $sub-nav-active-bg: $primary-color !default;
 $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
-$sub-nav-active-color: #fff !default;
+$sub-nav-active-color: $white !default;
 $sub-nav-active-padding: $sub-nav-padding !default;
 $sub-nav-active-cursor: default !default;
 

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

@@ -16,7 +16,7 @@
 $include-html-form-classes: $include-html-classes !default;
 
 // Controlling background color for the switch container
-$switch-bg: #ddd !default;
+$switch-bg: $gainsboro !default;
 
 // We use these to control the switch heights for our default classes
 $switch-height-tny: 1.5rem !default;
@@ -26,7 +26,7 @@ $switch-height-lrg: 2.5rem !default;
 $switch-bottom-margin: 1.5rem !default;
 
 // We use these to style the switch-paddle
-$switch-paddle-bg: #fff !default;
+$switch-paddle-bg: $white !default;
 $switch-paddle-transition-speed: .15s !default;
 $switch-paddle-transition-ease: ease-out !default;
 $switch-active-color: $primary-color;
@@ -82,6 +82,10 @@ $switch-active-color: $primary-color;
     -webkit-transition: left $transition-speed $transition-ease;
     -moz-transition: left $transition-speed $transition-ease;
     transition: left $transition-speed $transition-ease;
+
+    -webkit-transform: translate3d(0,0,0);
+    -moz-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
   }
 
   input:checked + label {