foundation-rails 5.4.5.0 → 5.5.0.0

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

@@ -22,25 +22,25 @@ $button-pip-lrg: rem-calc(11) !default;
 $dropdown-button-padding-tny: $button-pip-tny * 7 !default;
 $dropdown-button-pip-size-tny: $button-pip-tny !default;
 $dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
-$dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1) !default;
+$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
 
 // We use these to style small dropdown buttons
 $dropdown-button-padding-sml: $button-pip-sml * 7 !default;
 $dropdown-button-pip-size-sml: $button-pip-sml !default;
 $dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
-$dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1) !default;
+$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
 
 // We use these to style medium dropdown buttons
 $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
 $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
 $dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
-$dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2) !default;
+$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
 
 // We use these to style large dropdown buttons
 $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
 $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
 $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
-$dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
+$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
 
 // @mixins
 //
@@ -57,9 +57,10 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // We add in base styles, but they can be negated by setting to 'false'.
   @if $base-style {
     position: relative;
+    outline: none;
 
     // This creates the base styles for the triangle pip
-    &:after {
+    &::after {
       position: absolute;
       content: "";
       width: 0;
@@ -74,7 +75,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with tiny buttons, use these styles
   @if $padding == tiny {
     padding-#{$opposite-direction}: $dropdown-button-padding-tny;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-tny;
       #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
       margin-top: $dropdown-button-pip-top-tny;
@@ -84,7 +85,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with small buttons, use these styles
   @if $padding == small {
     padding-#{$opposite-direction}: $dropdown-button-padding-sml;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-sml;
       #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
       margin-top: $dropdown-button-pip-top-sml;
@@ -94,7 +95,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with default (medium) buttons, use these styles
   @if $padding == medium {
     padding-#{$opposite-direction}: $dropdown-button-padding-med;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-med;
       #{$opposite-direction}: $dropdown-button-pip-opposite-med;
       margin-top: $dropdown-button-pip-top-med;
@@ -104,7 +105,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with large buttons, use these styles
   @if $padding == large {
     padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-lrg;
       #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
       margin-top: $dropdown-button-pip-top-lrg;
@@ -113,7 +114,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
 
   // We can control the pip color. We didn't use logic in this case, just set it and forget it.
   @if $pip-color {
-    &:after { border-color: $pip-color transparent transparent transparent; }
+    &::after { border-color: $pip-color transparent transparent transparent; }
   }
 }
 

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

@@ -68,6 +68,7 @@ $f-dropdown-radius: $global-radius !default;
   left: -9999px;
   list-style: $f-dropdown-list-style;
   margin-#{$default-float}: 0;
+  outline: none;
 
   > *:first-child { margin-top: 0; }
   > *:last-child { margin-bottom: 0; }

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

@@ -67,6 +67,7 @@ $input-error-message-font-size: rem-calc(12) !default;
 $input-error-message-font-weight: $font-weight-normal !default;
 $input-error-message-font-style: italic !default;
 $input-error-message-font-color: $white !default;
+$input-error-message-bg-color: $alert-color !default;
 $input-error-message-font-color-alt: $oil !default;
 
 // We use this to style the glowing effect of inputs when focused
@@ -86,7 +87,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   .row { margin: 0 ((-$form-spacing) / 2);
 
     .column,
-    .columns { padding: 0 $form-spacing / 2; }
+    .columns { padding: 0 ($form-spacing / 2); }
 
     // Use this to collapse the margins of a form row
     &.collapse { margin: 0;
@@ -102,7 +103,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   input.column,
   input.columns,
   textarea.column,
-  textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
+  textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
 }
 
 // @MIXIN
@@ -111,7 +112,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 @mixin form-element {
   background-color: $input-bg-color;
   font-family: $input-font-family;
-  border: $input-border-width $input-border-style $input-border-color;
+  border: {
+    style: $input-border-style;
+    width: $input-border-width;
+    color: $input-border-color;
+  }
   box-shadow: $input-box-shadow;
   color: $input-font-color;
   display: block;
@@ -220,7 +225,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    line-height: rem-calc(34);
     border: none;
   }
 
@@ -253,7 +257,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    line-height: rem-calc(34);
     border: none;
   }
 
@@ -300,7 +303,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 //
 // We use this mixin to create error message styles
 // $bg - Default: $alert-color (Found in settings file)
-@mixin form-error-message($bg:$alert-color) {
+@mixin form-error-message($bg:$input-error-message-bg-color) {
   display: block;
   padding: $input-error-message-padding;
   margin-top: $input-error-message-top;
@@ -319,10 +322,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to style select elements
 @mixin form-select  {
   -webkit-appearance: none !important;
-  -webkit-border-radius: 0px;
+  border-radius: 0;
   background-color: $select-bg-color;
 
-  // The custom arrow have some fake horizontal padding so we can align it
+  // Hide the dropdown arrow shown in newer IE versions
+  &::-ms-expand {
+    display: none;
+  }
+
+  // The custom arrow has some fake horizontal padding so we can align it
   // from the right side of the element without relying on CSS3
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
 
@@ -330,8 +338,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   background-position: if($text-direction == 'rtl', 0%, 100%) center;
 
   background-repeat: no-repeat;
-  border: $input-border-width $input-border-style $input-border-color;
-  padding: $form-spacing / 2;
+  border: {
+    style: $input-border-style;
+    width: $input-border-width;
+    color: $input-border-color;
+  }
+  padding: ($form-spacing / 2);
   font-size: $input-font-size;
   font-family: $body-font-family;
   color: $input-font-color;
@@ -342,7 +354,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     background-color: $select-hover-bg-color;
     border-color: $input-focus-border-color;
   }
-  // Disbaled Styles
+  // Disabled Styles
   &:disabled {
     background-color: $input-disabled-bg;
     cursor: $input-disabled-cursor;
@@ -380,10 +392,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       }
     }
 
-    select::-ms-expand {
-      display:none;
-    }
-
     /* Attach elements to the beginning or end of an input */
     .prefix,
     .postfix { @include prefix-postfix-base; }
@@ -402,23 +410,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     span.postfix,label.postfix { @include postfix(); }
 
     /* We use this to get basic styling on all basic form elements */
-    input[type="text"],
-    input[type="password"],
-    input[type="date"],
-    input[type="datetime"],
-    input[type="datetime-local"],
-    input[type="month"],
-    input[type="week"],
-    input[type="email"],
-    input[type="number"],
-    input[type="search"],
-    input[type="tel"],
-    input[type="time"],
-    input[type="url"],
-    input[type="color"],
-    textarea {
+    #{text-inputs(all, 'input')} {
       -webkit-appearance: none;
-      -webkit-border-radius: 0px;
+      border-radius: 0;
       @include form-element;
       @if $input-include-glowing-effect == false {
           @include single-transition(all, 0.15s, linear);
@@ -459,7 +453,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
     input[type="submit"] {
       -webkit-appearance: none;
-      -webkit-border-radius: 0px;
+      border-radius: 0;
     }
 
     /* Respect enforced amount of rows for textarea */
@@ -467,6 +461,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       height: auto;
     }
 
+	/* Not allow resize out of parent */
+	textarea {
+		max-width: 100%;
+	}
+
     /* Add height value for select elements to match text input height */
     select {
       @include form-select;

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

@@ -80,8 +80,8 @@ $base-line-height: 1.5 !default;
 // We use this to add box-sizing across browser prefixes
 @mixin box-sizing($type:border-box) {
   -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
-	   -moz-box-sizing: $type; // Firefox < 29
-	        box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
+     -moz-box-sizing: $type; // Firefox < 29
+          box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
 }
 
 // @mixins
@@ -138,14 +138,14 @@ $base-line-height: 1.5 !default;
       }
       @else {
         top: 50%;
-        margin-top: -$width/2;
+        margin-top: (-$width/2);
+      }
+      @if $left {
+        left: $left;
+      }
+      @else {
+        left: ($tabbar-menu-icon-width - $width)/2;
       }
-    	@if $left {
-    	  left: $left;
-    	}
-    	@else {
-    	  left: ($tabbar-menu-icon-width - $width)/2;
-    	}
     }
     @else {
       top: 50%;
@@ -154,14 +154,14 @@ $base-line-height: 1.5 !default;
     }
 
     box-shadow:
-      0 0px 0 $thickness $color,
+      0 0 0 $thickness $color,
       0 $gap + $thickness 0 $thickness $color,
       0 (2 * $gap + 2*$thickness) 0 $thickness $color;
     width: $width;
   }
   span:hover:after {
     box-shadow:
-      0 0px 0 $thickness $hover-color,
+      0 0 0 $thickness $hover-color,
       0 $gap + $thickness 0 $thickness $hover-color,
       0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
   }
@@ -220,14 +220,6 @@ $base-line-height: 1.5 !default;
   clip: auto;
 }
 
-// We use these as default colors throughout
-$primary-color: #008CBA !default;   // bondi-blue
-$secondary-color: #e7e7e7 !default; // white-lilac
-$alert-color: #f04124 !default;     // cinnabar
-$success-color: #43AC6A !default;   // sea-green
-$warning-color: #f08a24 !default;   // carrot
-$info-color: #a0d3e8 !default;      // cornflower
-
 $white         : #FFFFFF !default;
 $ghost         : #FAFAFA !default;
 $snow          : #F9F9F9 !default;
@@ -248,6 +240,14 @@ $oil           : #333333 !default;
 $jet           : #222222 !default;
 $black         : #000000 !default;
 
+// We use these as default colors throughout
+$primary-color: #008CBA !default;   // bondi-blue
+$secondary-color: #e7e7e7 !default; // white-lilac
+$alert-color: #f04124 !default;     // cinnabar
+$success-color: #43AC6A !default;   // sea-green
+$warning-color: #f08a24 !default;   // carrot
+$info-color: #a0d3e8 !default;      // cornflower
+
 // We use these to define default font stacks
 $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
 $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
@@ -296,7 +296,7 @@ $include-html-global-classes: $include-html-classes !default;
 $column-gutter: rem-calc(30) !default;
 
 // Media Query Ranges
-$small-range: (0em, 40em) !default;
+$small-range: (0, 40em) !default;
 $medium-range: (40.063em, 64em) !default;
 $large-range: (64.063em, 90em) !default;
 $xlarge-range: (90.063em, 120em) !default;
@@ -345,7 +345,7 @@ $cursor-text-value: text !default;
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
   meta.foundation-version {
-    font-family: "/5.4.5/";
+    font-family: "/5.5.0/";
   }
 
   meta.foundation-mq-small {
@@ -353,21 +353,41 @@ $cursor-text-value: text !default;
     width: lower-bound($small-range);
   }
 
+  meta.foundation-mq-small-only {
+    font-family: "/" + unquote($small-only) + "/";
+    width: lower-bound($small-range);
+  }
+
   meta.foundation-mq-medium {
     font-family: "/" + unquote($medium-up) + "/";
     width: lower-bound($medium-range);
   }
 
+  meta.foundation-mq-medium-only {
+    font-family: "/" + unquote($medium-only) + "/";
+    width: lower-bound($medium-range);
+  }
+
   meta.foundation-mq-large {
     font-family: "/" + unquote($large-up) + "/";
     width: lower-bound($large-range);
   }
 
+  meta.foundation-mq-large-only {
+    font-family: "/" + unquote($large-only) + "/";
+    width: lower-bound($large-range);
+  }
+
   meta.foundation-mq-xlarge {
     font-family: "/" + unquote($xlarge-up) + "/";
     width: lower-bound($xlarge-range);
   }
 
+  meta.foundation-mq-xlarge-only {
+    font-family: "/" + unquote($xlarge-only) + "/";
+    width: lower-bound($xlarge-range);
+  }
+
   meta.foundation-mq-xxlarge {
     font-family: "/" + unquote($xxlarge-up) + "/";
     width: lower-bound($xxlarge-range);
@@ -422,10 +442,18 @@ $cursor-text-value: text !default;
     }
 
     // Miscellaneous useful HTML classes
-    .left   { float: left !important; }
-    .right  { float: right !important; }
-    .clearfix     { @include clearfix; }
-    .hide         { display: none; }
+    .left { float: left !important; }
+    .right { float: right !important; }
+    .clearfix { @include clearfix; }
+
+    // Hide visually and from screen readers
+    .hide {
+      display: none !important;
+      visibility: hidden;
+    }
+
+    // Hide visually and from screen readers, but maintain layout
+    .invisible { visibility: hidden; }
 
     // Font smoothing
     // Antialiased font smoothing works best for light text on a dark background.

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

@@ -116,8 +116,8 @@ $last-child-float: $opposite-direction !default;
   // Gutter padding whenever a column isn't set to collapse
   // (use $collapse:null to do nothing)
   @else if $collapse == false {
-    padding-left: $column-gutter / 2;
-    padding-right: $column-gutter / 2;
+    padding-left: ($column-gutter / 2);
+    padding-right: ($column-gutter / 2);
   }
 
   // If a column number is given, calculate width
@@ -172,11 +172,10 @@ $last-child-float: $opposite-direction !default;
     .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
   }
 
-
-
   @for $i from 0 through $total-columns - 1 {
     .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
   }
+
   .#{$size}-reset-order {
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
@@ -211,6 +210,21 @@ $last-child-float: $opposite-direction !default;
   .columns.#{$size}-uncentered.opposite {
     float: $opposite-direction;
   }
+
+	.row {
+		&.#{$size}-collapse {
+			> .column,
+			> .columns { @include grid-column($collapse:true, $float:false); }
+
+			.row {margin-left:0; margin-right:0;}
+		}
+		&.#{$size}-uncollapse {
+			> .column,
+			> .columns {
+				@include grid-column;
+			}
+		}
+	}
 }
 
 @include exports("grid") {