foundation-rails 5.5.1.0 → 5.5.1.1

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

@@ -37,7 +37,7 @@ $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-padding: 9px 6px 4px !default;
+$alert-close-padding: 0 6px 4px !default;
 $alert-close-background: inherit !default;
 
 // We use this to control border radius
@@ -85,7 +85,7 @@ $alert-transition-ease: ease-out !default;
 @mixin alert-close {
   font-size: $alert-close-font-size;
   padding: $alert-close-padding;
-  line-height: 0;
+  line-height: .9;
   position: absolute;
   top: $alert-close-top;
   margin-top: -($alert-close-font-size / 2);

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

@@ -30,6 +30,7 @@ $block-grid-media-queries: true !default;
 //
 // $per-row - # of items to display per row. Default: false.
 // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
+// $include-spacing - Adds padding to our list item. Default: true.
 // $base-style - Apply a base style to block grid. Default: true.
 @mixin block-grid(
   $per-row:false,

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

@@ -95,7 +95,7 @@ $crumb-slash: "/" !default;
     a:focus {
       text-decoration: none;
       color: $crumb-font-color-unavailable;
-      cursor: $cursor-default-value;
+      cursor: $cursor-disabled-value;
     }
   }
 

data/vendor/assets/stylesheets/foundation/components/_button-groups.scss

@@ -70,6 +70,9 @@ $button-group-border-width: 1px !default;
       margin:0;
       display: block;
     }
+    > button {
+        width: 100%;
+    }
 
     &:first-child {
       button, .button {
@@ -147,6 +150,10 @@ $button-group-border-width: 1px !default;
   @if $include-html-button-classes {
     .button-group { @include button-group-container;
 
+      @for $i from 2 through 8 {
+        &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
+      }
+      
       & > li { @include button-group-style(); }
 
       &.stack {
@@ -183,10 +190,6 @@ $button-group-border-width: 1px !default;
           @include button-group-style($radius:$button-med, $orientation:vertical);
         }
       }
-
-      @for $i from 2 through 8 {
-        &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
-      }
     }
 
     .button-bar {

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

@@ -80,6 +80,7 @@ $button-disabled-cursor: $cursor-default-value !default;
     text-decoration: none;
     text-align: $button-font-align;
     -webkit-appearance: none;
+    -moz-appearance: none;
     border-radius:0;
   }
   @if $display { display: $display; }
@@ -134,7 +135,7 @@ $button-disabled-cursor: $cursor-default-value !default;
 // We use this mixin to add button color styles
 //
 // $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
-// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
+// $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
 // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
 // $bg-hover - Button Hover Background Color. Default: $button-bg-hover
 // $border-color - Button Border Color. Default: $button-border-color

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

@@ -93,7 +93,16 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
         position: absolute;
         #{$default-float}: 50%;
         top: 50%;
-        margin-#{$default-float}: -50%;
+        @if $default-float == left {
+          transform: translateY(-50%) translateX(-50%);
+          -webkit-transform: translateY(-50%) translateX(-50%);
+          -ms-transform: translateY(-50%) translateX(-50%);
+        }
+        @else {
+          transform: translateY(-50%) translateX(50%);
+          -webkit-transform: translateY(-50%) translateX(50%);
+          -ms-transform: translateY(-50%) translateX(50%);
+        };
         max-height: 100%;
         max-width: 100%;
       }
@@ -171,7 +180,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
           border-#{$default-float}-color: $clearing-arrow-color;
         }
       }
-    
+
       .clearing-main-prev.disabled,
       .clearing-main-next.disabled { opacity: 0.3; }
 

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

@@ -13,6 +13,7 @@ $include-html-button-classes: $include-html-classes !default;
 $dropdown-button-pip-color: $white !default;
 $dropdown-button-pip-color-alt: $oil !default;
 
+// We use these to set the size of the pip in dropdown buttons
 $button-pip-tny: rem-calc(6) !default;
 $button-pip-sml: rem-calc(7) !default;
 $button-pip-med: rem-calc(9) !default;

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

@@ -34,7 +34,7 @@ $input-border-radius: $global-radius !default;
 $input-disabled-bg: $gainsboro !default;
 $input-disabled-cursor: $cursor-default-value !default;
 $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
-$input-include-glowing-effect: true !default;
+$input-include-glowing-effect: false !default;
 
 // We use these to style the fieldset border and spacing.
 $fieldset-border-style: solid !default;
@@ -53,7 +53,7 @@ $input-prefix-bg: scale-color($white, $lightness: -5%) !default;
 $input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
 $input-prefix-border-size: 1px !default;
 $input-prefix-border-type: solid !default;
-$input-prefix-overflow: hidden !default;
+$input-prefix-overflow: visible !default;
 $input-prefix-font-color: $oil !default;
 $input-prefix-font-color-alt: $white !default;
 
@@ -427,25 +427,29 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
         .prefix-radius.row.collapse {
           input,
           textarea,
-          select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+          select,
+          button { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
           .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
         }
         .postfix-radius.row.collapse {
           input,
           textarea,
-          select { @include radius(0); @include side-radius($default-float, $button-radius); }
+          select,
+          button { @include radius(0); @include side-radius($default-float, $button-radius); }
           .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
         }
         .prefix-round.row.collapse {
           input,
           textarea,
-          select { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+          select,
+          button { @include radius(0); @include side-radius($opposite-direction, $button-round); }
           .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
         }
         .postfix-round.row.collapse {
           input,
           textarea,
-          select { @include radius(0); @include side-radius($default-float, $button-round); }
+          select,
+          button { @include radius(0); @include side-radius($default-float, $button-round); }
           .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
         }
       }
@@ -470,6 +474,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     select {
       @include form-select;
       height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+      &[multiple] {
+        height: auto;
+      }
     }
 
     /* Adjust margin for form elements below */

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

@@ -333,6 +333,7 @@ $large: $large-up;
 $cursor-auto-value: auto !default;
 $cursor-crosshair-value: crosshair !default;
 $cursor-default-value: default !default;
+$cursor-disabled-value: not-allowed !default;
 $cursor-pointer-value: pointer !default;
 $cursor-help-value: help !default;
 $cursor-text-value: text !default;
@@ -345,7 +346,7 @@ $cursor-text-value: text !default;
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
   meta.foundation-version {
-    font-family: "/5.5.0/";
+    font-family: "/5.5.1/";
   }
 
   meta.foundation-mq-small {
@@ -448,8 +449,7 @@ $cursor-text-value: text !default;
 
     // Hide visually and from screen readers
     .hide {
-      display: none !important;
-      visibility: hidden;
+      display: none;
     }
 
     // Hide visually and from screen readers, but maintain layout

data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss

@@ -28,7 +28,8 @@ $icon-bar-item-padding: 1.25rem !default;
 
 // We use this to set default opacity and cursor for disabled icons.
 $icon-bar-disabled-opacity: 0.7 !default;
-$icon-bar-disabled-cursor: $cursor-default-value !default;
+$icon-bar-disabled-cursor: $cursor-disabled-value !default;
+
 
 //
 // @mixins
@@ -200,6 +201,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
     .item.disabled {
       opacity: $icon-bar-disabled-opacity;
       cursor: $icon-bar-disabled-cursor;
+      pointer-events: none;
       >* {
         opacity: $icon-bar-disabled-opacity;
         cursor: $icon-bar-disabled-cursor;
@@ -233,7 +235,7 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
 	$image-width: $icon-bar-image-width,
 	$image-height: $icon-bar-image-height,
   $base-style:true,
-  $disabled:false) {
+  $disabled:true) {
     @include icon-bar-base();
     @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
     @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
@@ -325,5 +327,33 @@ $icon-bar-disabled-cursor: $cursor-default-value !default;
 				}
 			}
 		}
+		&.seven-up {
+  		.item { width: 14.28571%; }
+  		&.vertical .item, &.small-vertical .item { width: auto; }
+  		&.medium-vertical .item {
+    		@media #{$medium-up} {
+        			width: auto;
+    		}
+  		}
+  		&.large-vertical .item {
+      	@media #{$large-up} {
+       		width: auto;
+      	}
+  		}
+    }
+    &.eight-up {
+  		.item { width: 12.5%; }
+  		&.vertical .item, &.small-vertical .item { width: auto; }
+  		&.medium-vertical .item {
+    		@media #{$medium-up} {
+        			width: auto;
+    		}
+  		}
+  		&.large-vertical .item {
+      	@media #{$large-up} {
+       		width: auto;
+      	}
+  		}
+    }
 	}
 }

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

@@ -45,16 +45,14 @@ $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12
 $range-slider-handle-cursor: pointer !default;
 
 $range-slider-disabled-opacity: 0.7 !default;
+$range-slider-disabled-cursor: $cursor-disabled-value !default;
 
 //
 // @mixins
 //
 
 @mixin range-slider-bar-base($vertical: false) {
-  display: block;
   position: relative;
-  width: $range-slider-bar-width;
-  height: $range-slider-bar-height;
   border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
   margin: rem-calc(20 0);
   -ms-touch-action: none;
@@ -63,6 +61,10 @@ $range-slider-disabled-opacity: 0.7 !default;
     display: inline-block;
     width: $range-slider-vertical-bar-width;
     height: $range-slider-vertical-bar-height;
+  } @else {
+    display: block;
+    width: $range-slider-bar-width;
+    height: $range-slider-bar-height;
   }
 }
 @mixin range-slider-bar-style(
@@ -74,7 +76,7 @@ $range-slider-disabled-opacity: 0.7 !default;
   @if $radius == true { @include radius($range-slider-radius); }
   @if $round == true { @include radius($range-slider-round); }
   @if $disabled == true {
-    cursor: $cursor-default-value;
+    cursor: $range-slider-disabled-cursor;
     opacity: $range-slider-disabled-opacity;
   }
 }

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

@@ -43,21 +43,24 @@ $reveal-border-color: $steel !default;
 $reveal-modal-class: "reveal-modal" !default;
 $close-reveal-modal-class: "close-reveal-modal" !default;
 
+// Set base z-index
+$z-index-base: 1005;
+
 //
 // @mixins
 //
 
 // 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
+  position: fixed;
+  // position: absolute; // allows modal background to extend beyond window position
   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: if( $include-z-index-value, 1004, auto );
+  z-index: if( $include-z-index-value, $z-index-base - 1, auto );
   display: none;
   #{$default-float}: 0;
 }
@@ -72,8 +75,8 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     visibility: hidden;
     display: none;
     position: absolute;
-    z-index: 1005;
-    width: 100vw;
+    z-index: $z-index-base;
+    width: 100%;
     top:0;
     border-radius: $border-radius;
     #{$default-float}: 0;
@@ -169,13 +172,12 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
       @include reveal-modal-base;
       @include reveal-modal-style(
         $bg:$reveal-modal-bg,
-        $padding:$reveal-modal-padding,
+        $padding:$reveal-modal-padding * 1.5,
         $border:true,
         $box-shadow:true,
         $radius:false,
         $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); }
@@ -186,7 +188,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
       &.large { @include reveal-modal-base(false, 70%); }
       &.xlarge { @include reveal-modal-base(false, 95%); }
       &.full {
-        @include reveal-modal-base(false, 100vw);
+        @include reveal-modal-base(false, 100%);
         top:0;
         left:0;
         height:100%;
@@ -195,29 +197,13 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
         max-width: none !important;
         margin-left: 0 !important;
       }
-
-      .#{$close-reveal-modal-class} { @include reveal-close; }
-    }
-
-    dialog {
-      @extend .#{$reveal-modal-class};
-      display: none;
-
-      &::backdrop, & + .backdrop {
-        @include reveal-bg(false);
+      
+      // Modals pushed to back
+      &.toback {
+        z-index: $z-index-base - 2;
       }
 
-      &[open]{
-        display: block;
-      }
-    }
-
-    // Reveal Print Styles: It should be invisible, adds no value being printed.
-    @media print {
-      dialog, .#{$reveal-modal-class} { 
-        display: none;
-        background: $white !important;
-      }
+      .#{$close-reveal-modal-class} { @include reveal-close; }
     }
   }
 }

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

@@ -185,6 +185,18 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
 
       &.radius span { @include side-radius($opposite-direction, $global-radius); }
       &.round span { @include side-radius($opposite-direction, 1000px); }
+      &.no-pip{
+        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;
+        }
+      }
     }
 
   }

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

@@ -61,7 +61,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
   display: block;
   width: auto;
   overflow: hidden;
-  margin: $sub-nav-list-margin;
+  margin-bottom: $sub-nav-list-margin;
   padding-top: $sub-nav-list-padding-top;
 
   dt {
@@ -72,7 +72,6 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
   dd,
   li {
     float: $default-float;
-    display: inline;
     margin-#{$default-float}: rem-calc(16);
     margin-bottom: 0;
     font-family: $sub-nav-font-family;

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

@@ -37,7 +37,6 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
         list-style: none;
         float: $default-float;
         > a {
-          outline: none;
           display: block;
           background: {
             color: $tabs-navigation-bg-color;
@@ -51,6 +50,9 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
               color: $tabs-navigation-hover-bg-color;
             }
           }
+          &:focus{
+              outline: none;
+          }
         }
         &.active a {
           background: {