foundation-rails 5.5.1.2 → 5.5.2.0

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -75,12 +75,12 @@ $price-cta-padding: rem-calc(20 20 0) !default;
 // We use this mixin to create the pricing table title styles
 @mixin pricing-table-title {
   background-color: $price-title-bg;
-  padding: $price-title-padding;
-  text-align: $price-title-align;
   color: $price-title-color;
-  font-weight: $price-title-weight;
-  font-size: $price-title-size;
   font-family: $price-title-font-family;
+  font-size: $price-title-size;
+  font-weight: $price-title-weight;
+  padding: $price-title-padding;
+  text-align: $price-title-align;
 }
 
 // @mixins
@@ -88,12 +88,12 @@ $price-cta-padding: rem-calc(20 20 0) !default;
 // We use this mixin to control the pricing table price styles
 @mixin pricing-table-price {
   background-color: $price-money-bg;
-  padding: $price-money-padding;
-  text-align: $price-money-align;
   color: $price-money-color;
-  font-weight: $price-money-weight;
-  font-size: $price-money-size;
   font-family: $price-money-font-family;
+  font-size: $price-money-size;
+  font-weight: $price-money-weight;
+  padding: $price-money-padding;
+  text-align: $price-money-align;
 }
 
 // @mixins
@@ -101,13 +101,13 @@ $price-cta-padding: rem-calc(20 20 0) !default;
 // We use this mixin to create the description styles for the pricing table
 @mixin pricing-table-description {
   background-color: $price-bg;
-  padding: $price-desc-padding;
-  text-align: $price-desc-align;
+  border-bottom: $price-desc-bottom-border;
   color: $price-desc-color;
   font-size: $price-desc-font-size;
   font-weight: $price-desc-weight;
   line-height: $price-desc-line-height;
-  border-bottom: $price-desc-bottom-border;
+  padding: $price-desc-padding;
+  text-align: $price-desc-align;
 }
 
 // @mixins
@@ -115,12 +115,12 @@ $price-cta-padding: rem-calc(20 20 0) !default;
 // We use this mixin to style the bullet items in the pricing table
 @mixin pricing-table-bullet {
   background-color: $price-bg;
-  padding: $price-item-padding;
-  text-align: $price-item-align;
+  border-bottom: $price-item-bottom-border;
   color: $price-item-color;
   font-size: $price-item-font-size;
   font-weight: $price-item-weight;
-  border-bottom: $price-item-bottom-border;
+  padding: $price-item-padding;
+  text-align: $price-item-align;
 }
 
 // @mixins
@@ -128,8 +128,8 @@ $price-cta-padding: rem-calc(20 20 0) !default;
 // We use this mixin to style the CTA area of the pricing tables
 @mixin pricing-table-cta {
   background-color: $price-cta-bg;
-  text-align: $price-cta-align;
   padding: $price-cta-padding;
+  text-align: $price-cta-align;
 }
 
 @include exports("pricing-table") {

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -34,10 +34,10 @@ $progress-meter-alert-color: $alert-color !default;
 // We use this to set up the progress bar container
 @mixin progress-container {
   background-color: $progress-bar-color;
-  height: $progress-bar-height;
   border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
-  padding: $progress-bar-pad;
+  height: $progress-bar-height;
   margin-bottom: $progress-bar-margin-bottom;
+  padding: $progress-bar-pad;
 }
 
 // @mixins
@@ -45,8 +45,8 @@ $progress-meter-alert-color: $alert-color !default;
 // $bg - Default: $progress-meter-color || $primary-color
 @mixin progress-meter($bg:$progress-meter-color) {
   background: $bg;
-  height: 100%;
   display: block;
+  height: 100%;
 }
 
 

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @name _range-slider.scss
@@ -44,7 +44,7 @@ $range-slider-handle-round: $global-rounded !default;
 $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
 $range-slider-handle-cursor: pointer !default;
 
-$range-slider-disabled-opacity: 0.7 !default;
+$range-slider-disabled-opacity: .7 !default;
 $range-slider-disabled-cursor: $cursor-disabled-value !default;
 
 //
@@ -52,19 +52,19 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
 //
 
 @mixin range-slider-bar-base($vertical: false) {
-  position: relative;
   border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
   margin: rem-calc(20 0);
+  position: relative;
   -ms-touch-action: none;
   touch-action: none;
   @if $vertical == true {
     display: inline-block;
-    width: $range-slider-vertical-bar-width;
     height: $range-slider-vertical-bar-height;
+    width: $range-slider-vertical-bar-width;
   } @else {
     display: block;
-    width: $range-slider-bar-width;
     height: $range-slider-bar-height;
+    width: $range-slider-bar-width;
   }
 }
 @mixin range-slider-bar-style(
@@ -89,19 +89,20 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
 }
 
 @mixin range-slider-handle-base() {
+  border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
+  cursor: $range-slider-handle-cursor;
   display: inline-block;
+  height: $range-slider-handle-height;
   position: absolute;
-  z-index: 1;
   top: $range-slider-handle-position-top;
   width: $range-slider-handle-width;
-  height: $range-slider-handle-height;
-  border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
-  cursor: $range-slider-handle-cursor;
+  z-index: 1;
 
   // This removes the 300ms touch delay on Windows 8
   -ms-touch-action: manipulation;
-      touch-action: manipulation;
+  touch-action: manipulation;
 }
+
 @mixin range-slider-handle-style(
   $bg: true,
   $radius: false,
@@ -118,6 +119,7 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
     background: $range-slider-handle-bg-hover-color;
   }
 }
+
 @mixin range-slider-handle() {
   @include range-slider-handle-base;
   @include range-slider-handle-style;
@@ -132,15 +134,18 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
       &.vertical-range {
         @include range-slider-bar-base($vertical: true);
         .range-slider-handle {
-          margin-top: 0;
+          bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width);
           margin-#{$default-float}: -($range-slider-handle-width / 4);
+          margin-top: 0;
           position: absolute;
-          bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width);
         }
         .range-slider-active-segment {
-          width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
-          height: auto;
+          border-bottom-left-radius: inherit;
+          border-bottom-right-radius: inherit;
+          border-top-left-radius: initial;
           bottom: 0;
+          height: auto;
+          width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
         }
       }
       &.radius {
@@ -157,10 +162,12 @@ $range-slider-disabled-cursor: $cursor-disabled-value !default;
       }
     }
     .range-slider-active-segment {
+      background: $range-slider-active-segment-bg-color;
+      border-bottom-left-radius: inherit;
+      border-top-left-radius: inherit;
       display: inline-block;
-      position: absolute;
       height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
-      background: $range-slider-active-segment-bg-color;
+      position: absolute;
     }
     .range-slider-handle {
       @include range-slider-handle-base;

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

@@ -2,8 +2,8 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
-@import "grid";
+@import 'global';
+@import 'grid';
 
 //
 // @name _reveal.scss
@@ -21,7 +21,7 @@ $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-modal-padding: rem-calc(30) !default;
 $reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
 
 // We use these to style the reveal close button
@@ -52,16 +52,16 @@ $z-index-base: 1005;
 
 // We use this to create the reveal background overlay styles
 @mixin reveal-bg( $include-z-index-value: true ) {
-  position: fixed;
   // position: absolute; // allows modal background to extend beyond window position
-  top: 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;
   bottom: 0;
+  display: none;
   left: 0;
+  position: fixed;
   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;
+  top: 0;
   z-index: if( $include-z-index-value, $z-index-base - 1, auto );
-  display: none;
   #{$default-float}: 0;
 }
 
@@ -72,13 +72,13 @@ $z-index-base: 1005;
 //
 @mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
   @if $base-style {
-    visibility: hidden;
+    border-radius: $border-radius;
     display: none;
     position: absolute;
-    z-index: $z-index-base;
-    width: 100%;
     top:0;
-    border-radius: $border-radius;
+    visibility: hidden;
+    width: 100%;
+    z-index: $z-index-base;
     #{$default-float}: 0;
 
     @media #{$small-only} {
@@ -89,18 +89,18 @@ $z-index-base: 1005;
     .column, .columns { min-width: 0; }
 
     // Get rid of margin from first and last element inside modal
-    & > :first-child { margin-top: 0; }
+    > :first-child { margin-top: 0; }
 
-    & > :last-child { margin-bottom: 0; }
+    > :last-child { margin-bottom: 0; }
   }
 
   @if $width {
     @media #{$medium-up} {
-      width: $width;
-      max-width: $max-width;
       left: 0;
-      right: 0;
       margin: 0 auto;
+      max-width: $max-width;
+      right: 0;
+      width: $width;
     }
   }
 }
@@ -152,14 +152,14 @@ $z-index-base: 1005;
 //
 // $color - Default: $reveal-close-color || $base
 @mixin reveal-close($color:$reveal-close-color) {
+  color: $color;
+  cursor: $cursor-pointer-value;
   font-size: $reveal-close-font-size;
+  font-weight: $reveal-close-weight;
   line-height: 1;
   position: absolute;
   top: $reveal-close-top;
   #{$opposite-direction}: $reveal-close-side;
-  color: $color;
-  font-weight: $reveal-close-weight;
-  cursor: $cursor-pointer-value;
 }
 
 @include exports("reveal") {
@@ -172,7 +172,7 @@ $z-index-base: 1005;
       @include reveal-modal-base;
       @include reveal-modal-style(
         $bg:$reveal-modal-bg,
-        $padding:$reveal-modal-padding * 1.5,
+        $padding:$reveal-modal-padding,
         $border:true,
         $box-shadow:true,
         $radius:false,
@@ -189,15 +189,15 @@ $z-index-base: 1005;
       &.xlarge { @include reveal-modal-base(false, 95%); }
       &.full {
         @include reveal-modal-base(false, 100%);
-        top:0;
-        left:0;
-        height:100%;
         height: 100vh;
-        min-height:100vh;
-        max-width: none !important;
+        height:100%;
+        left:0;
         margin-left: 0 !important;
+        max-width: none !important;
+        min-height:100vh;
+        top:0;
       }
-      
+
       // Modals pushed to back
       &.toback {
         z-index: $z-index-base - 2;

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -22,7 +22,7 @@ $side-nav-list-margin: rem-calc(0 0 7 0) !default;
 $side-nav-link-color: $primary-color !default;
 $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default;
 $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default;
-$side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default;
+$side-nav-link-bg-hover: hsla(0, 0, 0, .025) !default;
 $side-nav-link-margin: 0 !default;
 $side-nav-link-padding: rem-calc(7 14) !default;
 $side-nav-font-size: rem-calc(14) !default;
@@ -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($white, $lightness: 10%) !default;
+$side-nav-divider-color: scale-color($white, $lightness: -10%) !default;
 
 
 //
@@ -58,23 +58,24 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
   $divider-color:$side-nav-divider-color,
   $font-size:$side-nav-font-size,
   $link-color:$side-nav-link-color,
+  $link-color-active:$side-nav-link-color-active,
   $link-color-hover:$side-nav-link-color-hover,
   $link-bg-hover:$side-nav-link-bg-hover) {
   display: block;
+  font-family: $side-nav-font-family;
+  list-style-position: $side-nav-list-position;
+  list-style-type: $side-nav-list-type;
   margin: 0;
   padding: $side-nav-padding;
-  list-style-type: $side-nav-list-type;
-  list-style-position: $side-nav-list-position;
-  font-family: $side-nav-font-family;
 
   li {
-    margin: $side-nav-list-margin;
     font-size: $font-size;
     font-weight: $side-nav-font-weight;
+    margin: $side-nav-list-margin;
 
     a:not(.button) {
-      display: block;
       color: $link-color;
+      display: block;
       margin: $side-nav-link-margin;
       padding: $side-nav-link-padding;
       &:hover,
@@ -82,19 +83,22 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
         background: $link-bg-hover;
         color: $link-color-hover;
       }
+      &:active {
+        color: $link-color-active;
+      }
     }
 
     &.active > a:first-child:not(.button) {
       color: $side-nav-link-color-active;
-      font-weight: $side-nav-font-weight-active;
       font-family: $side-nav-font-family-active;
+      font-weight: $side-nav-font-weight-active;
     }
 
     &.divider {
       border-top: $side-nav-divider-size $side-nav-divider-style;
       height: 0;
-      padding: 0;
       list-style: none;
+      padding: 0;
       border-top-color: $divider-color;
     }
 
@@ -111,6 +115,6 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
 
 @include exports("side-nav") {
   @if $include-html-nav-classes {
-    .side-nav { @include side-nav; }
+    .side-nav {@include side-nav;}
   }
 }

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

@@ -2,9 +2,9 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
-@import "buttons";
-@import "dropdown-buttons";
+@import 'global';
+@import 'buttons';
+@import 'dropdown-buttons';
 
 //
 // @name _split-buttons.scss
@@ -22,6 +22,7 @@ $split-button-function-factor: 10% !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;
+$split-button-span-border-color: rgba(255,255,255,0.5) !default;
 
 // We use these to control tiny split buttons
 $split-button-padding-tny: $button-pip-tny * 10 !default;
@@ -60,12 +61,12 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
 //
 // $padding - Type of padding to apply. Default: medium. Options: tiny, small, medium, large.
 // $pip-color - Color of the triangle. Default: $split-button-pip-color.
-// $span-border - Border color of button divider. Default: $primary-color.
+// $span-border - Border color of button divider. Default: $split-button-span-border-color.
 // $base-style - Apply base style to split button. Default: true.
 @mixin split-button(
   $padding:medium,
   $pip-color:$split-button-pip-color, 
-  $span-border:$primary-color, 
+  $span-border:$split-button-span-border-color, 
   $base-style:true) {
 
   // With this, we can control whether or not the base styles come through.
@@ -90,7 +91,6 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
         display: block;
         border-style: inset;
         top: 50%;
-
         #{$default-float}: 50%;
       }
 
@@ -101,7 +101,7 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
   // Control the border color for the span area of the split button
   @if $span-border {
     span {
-      border-#{$default-float}-color: rgba(255,255,255,0.5);
+      border-#{$default-float}-color: $span-border;
     }
   }
 
@@ -113,8 +113,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
       &:after {
         border-top-style: solid;
         border-width: $split-button-pip-size-tny;
-        top: 48%;
         margin-#{$default-float}: $split-button-pip-default-float-tny;
+        top: 48%;
       }
     }
   }
@@ -127,8 +127,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
       &:after {
         border-top-style: solid;
         border-width: $split-button-pip-size-sml;
-        top: 48%;
         margin-#{$default-float}: $split-button-pip-default-float-sml;
+        top: 48%;
       }
     }
   }
@@ -141,8 +141,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
       &:after {
         border-top-style: solid;
         border-width: $split-button-pip-size-med;
-        top: 48%;
         margin-#{$default-float}: $split-button-pip-default-float-med;
+        top: 48%;
       }
     }
   }
@@ -155,8 +155,8 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
       &:after {
         border-top-style: solid;
         border-width: $split-button-pip-size-lrg;
-        top: 48%;
         margin-#{$default-float}: $split-button-pip-default-float-lrg;
+        top: 48%;
       }
     }
   }
@@ -172,9 +172,9 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
 
     .split.button { @include split-button;
 
-      &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
-      &.alert { @include split-button(false, false, $alert-color, false); }
-      &.success { @include split-button(false, false, $success-color, false); }
+      &.secondary { @include split-button(false, $split-button-pip-color, $split-button-span-border-color, false); }
+      &.alert { @include split-button(false, false, $split-button-span-border-color, false); }
+      &.success { @include split-button(false, false, $split-button-span-border-color, false); }
 
       &.tiny { @include split-button(tiny, false, false, false); }
       &.small { @include split-button(small, false, false, false); }
@@ -189,12 +189,12 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
         span:before{ border-style:none; }
         span:after{ border-style:none; }
         span>i{
-          top: 50%;
           display: block;
-          position: absolute;
           left: 50%;
           margin-left: -0.28889em;
           margin-top: -0.48889em;
+          position: absolute;
+          top: 50%;
         }
       }
     }