foundation-rails 5.3.3.0 → 5.4.0.0

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

@@ -11,15 +11,15 @@
 $include-html-accordion-classes: $include-html-classes !default;
 
 $accordion-navigation-padding: rem-calc(16) !default;
-$accordion-navigation-bg-color: #efefef !default;
+$accordion-navigation-bg-color: $silver !default;
 $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
 $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
-$accordion-navigation-font-color: #222 !default;
+$accordion-navigation-font-color: $jet !default;
 $accordion-navigation-font-size: rem-calc(16) !default;
 $accordion-navigation-font-family: $body-font-family !default;
 
 $accordion-content-padding: $column-gutter/2 !default;
-$accordion-content-active-bg-color: #fff !default;
+$accordion-content-active-bg-color: $white !default;
 
 
 //  Mixin: accordion-container()

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

@@ -18,7 +18,7 @@ $alert-padding-bottom: $alert-padding-top !default;
 // We use these to control text style.
 $alert-font-weight: $font-weight-normal !default;
 $alert-font-size: rem-calc(13) !default;
-$alert-font-color: #fff !default;
+$alert-font-color: $white !default;
 $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
 
 // We use this for close hover effect.
@@ -31,7 +31,7 @@ $alert-border-color: scale-color($primary-color, $lightness: $alert-function-fac
 $alert-bottom-margin: rem-calc(20) !default;
 
 // We use these to style the close buttons
-$alert-close-color: #333 !default;
+$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;

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

@@ -26,13 +26,13 @@ $crumb-radius: $global-radius !default;
 // We use these to set various text styles for breadcrumbs.
 $crumb-font-size: rem-calc(11) !default;
 $crumb-font-color: $primary-color !default;
-$crumb-font-color-current: #333 !default;
-$crumb-font-color-unavailable: #999 !default;
+$crumb-font-color-current: $oil !default;
+$crumb-font-color-unavailable: $aluminum !default;
 $crumb-font-transform: uppercase !default;
 $crumb-link-decor: underline !default;
 
 // We use these to control the slash between breadcrumbs
-$crumb-slash-color: #aaa !default;
+$crumb-slash-color: $base !default;
 $crumb-slash: "/" !default;
 
 //
@@ -125,3 +125,8 @@ $crumb-slash: "/" !default;
     }
   }
 }
+
+/* Accessibility - hides the forward slash */
+[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+  content: "/";
+  }

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

@@ -35,7 +35,7 @@ $button-group-border-width: 1px !default;
 }
 
 // We use this to control styles for button groups
-@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
+@mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) {
 
   > button, .button {
     border-#{$default-float}: $button-group-border-width solid;
@@ -52,9 +52,33 @@ $button-group-border-width: 1px !default;
   @if $float {
     margin: 0;
     float: $float;
+    display: list-item;
     // Make sure the first child doesn't get the negative margin.
     &:first-child { margin-#{$default-float}: 0; }
   }
+  @else {
+    margin: 0 -2px;
+    float: none;
+    display: inline-block;
+  }
+
+  @if $orientation == vertical {
+    display:block;
+    margin:0;
+    > button, .button {
+    border-top: $button-group-border-width solid;
+    border-color: rgba(255, 255, 255, 0.5);
+    border-left-width: 0px;
+    margin:0;
+    display: block;
+    }
+
+    &:first-child {
+      button, .button {
+        border-top: 0;
+      }
+    }
+  }
 
   // We use these to control left and right radius on first/last buttons in the group.
   @if $radius == true {
@@ -65,11 +89,25 @@ $button-group-border-width: 1px !default;
     &:first-child,
     &:first-child > a,
     &:first-child > button,
-    &:first-child > .button { @include side-radius($default-float, $button-radius); }
+    &:first-child > .button {   
+      @if $orientation == vertical {
+        @include side-radius(top, $button-radius);
+      }
+      @else {
+        @include side-radius($default-float, $button-radius);
+      }
+    }
     &:last-child,
     &:last-child > a,
     &:last-child > button,
-    &:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
+    &:last-child > .button { 
+      @if $orientation == vertical {
+        @include side-radius(bottom, $button-radius);
+      }
+      @else {
+        @include side-radius($opposite-direction, $button-radius); 
+      }
+    }
   }
   @else if $radius {
     &,
@@ -79,11 +117,25 @@ $button-group-border-width: 1px !default;
     &:first-child,
     &:first-child > a,
     &:first-child > button,
-    &:first-child > .button { @include side-radius($default-float, $radius); }
+    &:first-child > .button { 
+      @if $orientation == vertical {
+        @include side-radius(top, $radius);
+      }
+      @else {
+        @include side-radius($default-float, $radius);
+      } 
+    }
     &:last-child,
     &:last-child > a,
     &:last-child > button,
-    &:last-child > .button { @include side-radius($opposite-direction, $radius); }
+    &:last-child > .button { 
+      @if $orientation == vertical {
+        @include side-radius(bottom, $radius);
+      }
+      @else {
+        @include side-radius($opposite-direction, $radius); 
+      } 
+    }
   }
 
   // We use this to make the buttons even width across their container
@@ -100,8 +152,40 @@ $button-group-border-width: 1px !default;
 
       & > li { @include button-group-style(); }
 
+      &.stack {
+        & > li { @include button-group-style($orientation:vertical); }
+      }
+
+      &.stack-for-small {
+        & > li {
+          @include button-group-style($orientation:horizontal);
+          @media #{$small-only} { 
+            @include button-group-style($orientation:vertical);
+          }
+        }
+      }
+
       &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
+      &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); }
+      &.radius.stack-for-small > * { 
+        @media #{$medium-up} {
+          @include button-group-style($radius:$button-radius, $orientation:horizontal);
+        }
+        @media #{$small-only} { 
+          @include button-group-style($radius:$button-radius, $orientation:vertical);
+        }
+      }
+
       &.round > * { @include button-group-style($radius:$button-round, $float:null); }
+      &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); }
+      &.round.stack-for-small > * { 
+        @media #{$medium-up} {
+          @include button-group-style($radius:$button-round, $orientation:horizontal);
+        }
+        @media #{$small-only} { 
+          @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); }

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

@@ -21,8 +21,8 @@ $button-margin-bottom: rem-calc(20) !default;
 
 // We use these to control button text styles.
 $button-font-family: $body-font-family !default;
-$button-font-color: #fff !default;
-$button-font-color-alt: #333 !default;
+$button-font-color: $white !default;
+$button-font-color-alt: $oil !default;
 $button-font-tny: rem-calc(11) !default;
 $button-font-sml: rem-calc(13) !default;
 $button-font-med: rem-calc(16) !default;

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

@@ -10,13 +10,13 @@
 $include-html-clearing-classes: $include-html-classes !default;
 
 // We use these to set the background colors for parts of Clearing.
-$clearing-bg: #333 !default;
+$clearing-bg: $oil !default;
 $clearing-caption-bg: $clearing-bg !default;
 $clearing-carousel-bg: rgba(51,51,51,0.8) !default;
 $clearing-img-bg: $clearing-bg !default;
 
 // We use these to style the close button
-$clearing-close-color: #ccc !default;
+$clearing-close-color: $iron !default;
 $clearing-close-size: 30px !default;
 
 // We use these to style the arrows
@@ -24,7 +24,7 @@ $clearing-arrow-size: 12px !default;
 $clearing-arrow-color: $clearing-close-color !default;
 
 // We use these to style captions
-$clearing-caption-font-color: #ccc !default;
+$clearing-caption-font-color: $iron !default;
 $clearing-caption-font-size: 0.875em !default;
 $clearing-caption-padding: 10px 30px 20px !default;
 
@@ -81,7 +81,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
       position: absolute;
       top: 50%;
       left: 50%;
-      color: #aaa;
+      color: $base;
       font-size: 0.6em;
     }
 
@@ -123,7 +123,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
       display: none;
 
       &:hover,
-      &:focus { color: #ccc; }
+      &:focus { color: $iron; }
     }
 
     .clearing-assembled .clearing-container { height: 100%;

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

@@ -10,8 +10,8 @@
 $include-html-button-classes: $include-html-classes !default;
 
 // We use these to set the color of the pip in dropdown buttons
-$dropdown-button-pip-color: #fff !default;
-$dropdown-button-pip-color-alt: #333 !default;
+$dropdown-button-pip-color: $white !default;
+$dropdown-button-pip-color-alt: $oil !default;
 
 $button-pip-tny: rem-calc(6) !default;
 $button-pip-sml: rem-calc(7) !default;
@@ -49,10 +49,10 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
 // We use this mixin to build off of the button mixin and add dropdown button styles
 //
 // $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large]
-// $pip-color - Color of the little triangle that points to the dropdown. Default: #fff.
+// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
 // $base-style - Add in base-styles. This can be set to false. Default:true
 
-@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
+@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
 
   // We add in base styles, but they can be negated by setting to 'false'.
   @if $base-style {

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

@@ -27,25 +27,25 @@ $f-dropdown-margin-right: $f-dropdown-margin-top !default;
 $f-dropdown-margin-bottom: $f-dropdown-margin-top !default;
 
 // We use this to control the background color
-$f-dropdown-bg: #fff !default;
+$f-dropdown-bg: $white !default;
 
 // We use this to set the border styles for dropdowns.
 $f-dropdown-border-style: solid !default;
 $f-dropdown-border-width: 1px !default;
-$f-dropdown-border-color: scale-color(#fff, $lightness: -20%) !default;
+$f-dropdown-border-color: scale-color($white, $lightness: -20%) !default;
 
 // We use these to style the triangle pip.
 $f-dropdown-triangle-size: 6px !default;
-$f-dropdown-triangle-color: #fff !default;
+$f-dropdown-triangle-color: $white !default;
 $f-dropdown-triangle-side-offset: 10px !default;
 
 // We use these to control styles for the list elements.
 $f-dropdown-list-style: none !default;
-$f-dropdown-font-color: #555 !default;
+$f-dropdown-font-color: $charcoal !default;
 $f-dropdown-font-size: rem-calc(14) !default;
 $f-dropdown-list-padding: rem-calc(5, 10) !default;
 $f-dropdown-line-height: rem-calc(18) !default;
-$f-dropdown-list-hover-bg: #eeeeee !default;
+$f-dropdown-list-hover-bg: $smoke !default;
 $dropdown-mobile-default-float: 0 !default;
 
 // We use this to control the styles for when the dropdown has custom content.
@@ -117,7 +117,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
     }
   }
 
-  @if $triangle == #{$default-float} {
+  @if $triangle == $default-float {
     margin-top: 0;
     margin-#{$default-float}: $f-dropdown-margin-right;
 
@@ -138,7 +138,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
 
   }
 
-  @if $triangle == #{$opposite-direction} {
+  @if $triangle == $opposite-direction {
     margin-top: 0;
     margin-#{$default-float}: -$f-dropdown-margin-right;
 

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

@@ -18,20 +18,20 @@ $form-label-pointer: pointer !default;
 $form-label-font-size: rem-calc(14) !default;
 $form-label-font-weight: $font-weight-normal !default;
 $form-label-line-height: 1.5 !default;
-$form-label-font-color: scale-color(#000, $lightness: 30%) !default;
+$form-label-font-color: scale-color($black, $lightness: 30%) !default;
 $form-label-small-transform: capitalize !default;
 $form-label-bottom-margin: 0 !default;
 $input-font-family: inherit !default;
 $input-font-color: rgba(0,0,0,0.75) !default;
 $input-font-size: rem-calc(14) !default;
-$input-bg-color: #fff !default;
-$input-focus-bg-color: scale-color(#fff, $lightness: -2%) !default;
-$input-border-color: scale-color(#fff, $lightness: -20%) !default;
-$input-focus-border-color: scale-color(#fff, $lightness: -40%) !default;
+$input-bg-color: $white !default;
+$input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
+$input-border-color: scale-color($white, $lightness: -20%) !default;
+$input-focus-border-color: scale-color($white, $lightness: -40%) !default;
 $input-border-style: solid !default;
 $input-border-width: 1px !default;
 $input-border-radius: $global-radius !default;
-$input-disabled-bg: #ddd !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;
@@ -39,23 +39,23 @@ $input-include-glowing-effect: true !default;
 // We use these to style the fieldset border and spacing.
 $fieldset-border-style: solid !default;
 $fieldset-border-width: 1px !default;
-$fieldset-border-color: #ddd !default;
+$fieldset-border-color: $gainsboro !default;
 $fieldset-padding: rem-calc(20) !default;
 $fieldset-margin: rem-calc(18 0) !default;
 
 // We use these to style the legends when you use them
-$legend-bg: #fff !default;
+$legend-bg: $white !default;
 $legend-font-weight: $font-weight-bold !default;
 $legend-padding: rem-calc(0 3) !default;
 
 // We use these to style the prefix and postfix input elements
-$input-prefix-bg: scale-color(#fff, $lightness: -5%) !default;
-$input-prefix-border-color: scale-color(#fff, $lightness: -20%) !default;
+$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-font-color: #333 !default;
-$input-prefix-font-color-alt: #fff !default;
+$input-prefix-font-color: $oil !default;
+$input-prefix-font-color-alt: $white !default;
 
 // We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
 $input-number-spinners: true !default;
@@ -66,15 +66,15 @@ $input-error-message-top: -1px !default;
 $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: #fff !default;
-$input-error-message-font-color-alt: #333 !default;
+$input-error-message-font-color: $white !default;
+$input-error-message-font-color-alt: $oil !default;
 
 // We use this to style the glowing effect of inputs when focused
 $glowing-effect-fade-time: 0.45s !default;
 $glowing-effect-color: $input-focus-border-color !default;
 
 // Select variables
-$select-bg-color: #fafafa !default;
+$select-bg-color: $ghost !default;
 $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
 //
@@ -195,7 +195,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // @MIXIN
 //
 // We use this mixin to create prefix label styles
-// $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
+// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default:false
 //
 @mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
@@ -229,7 +229,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // @MIXIN
 //
 // We use this mixin to create postfix label styles
-// $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
+// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default: false
 @mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
 
@@ -418,6 +418,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     input[type="tel"],
     input[type="time"],
     input[type="url"],
+    input[type="color"],
     textarea {
       -webkit-appearance: none;
       -webkit-border-radius: 0px;

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

@@ -42,9 +42,13 @@ $base-line-height: 150% !default;
 // $side - Options: left, right, top, bottom
 @mixin side-radius($side, $radius:$global-radius) {
   @if ($side == left or $side == right) {
+    -webkit-border-bottom-#{$side}-radius: $radius;
+    -webkit-border-top-#{$side}-radius: $radius;
     border-bottom-#{$side}-radius: $radius;
     border-top-#{$side}-radius: $radius;
   } @else {
+    -webkit-#{$side}-left-radius: $radius;
+    -webkit-#{$side}-right-radius: $radius;
     border-#{$side}-left-radius: $radius;
     border-#{$side}-right-radius: $radius;
   }
@@ -145,7 +149,7 @@ $base-line-height: 150% !default;
     }
     @else {
       top: 50%;
-      margin-top: -$width/2;
+      margin-top: -($width/2);
       #{$opposite-direction}: $topbar-link-padding;
     }
 
@@ -216,6 +220,36 @@ $base-line-height: 150% !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;
+$vapor         : #F6F6F6 !default;
+$white-smoke   : #F5F5F5 !default;
+$silver        : #EFEFEF !default;
+$smoke         : #EEEEEE !default;
+$gainsboro     : #DDDDDD !default;
+$iron          : #CCCCCC !default;
+$base          : #AAAAAA !default;
+$aluminum      : #999999 !default;
+$jumbo         : #888888 !default;
+$monsoon       : #777777 !default;
+$steel         : #666666 !default;
+$charcoal      : #555555 !default;
+$tuatara       : #444444 !default;
+$oil           : #333333 !default;
+$jet           : #222222 !default;
+$black         : #000000 !default;
+
+
 // We use these to define default font weights
 $font-weight-normal: normal !default;
 $font-weight-bold: bold !default;
@@ -241,13 +275,6 @@ $opposite-direction: right !default;
   $default-float: right;
   $opposite-direction: left;
 }
-// We use these as default colors throughout
-$primary-color: #008CBA !default;
-$secondary-color: #e7e7e7 !default;
-$alert-color: #f04124 !default;
-$success-color: #43AC6A !default;
-$warning-color: #f08a24 !default;
-$info-color: #a0d3e8 !default;
 
 // We use these to make sure border radius matches unless we want it different.
 $global-radius: 3px !default;
@@ -314,7 +341,7 @@ $cursor-text-value: text !default;
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
   meta.foundation-version {
-    font-family: "/5.3.3/";
+    font-family: "/{{ VERSION }}/";
   }
 
   meta.foundation-mq-small {