foundation-rails 5.5.1.2 → 5.5.2.0

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -53,23 +53,22 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
 // $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:$white, $base-style:true) {
+@mixin dropdown-button($padding:medium, $pip-color:$dropdown-button-pip-color, $base-style:true) {
 
   // 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 {
-      position: absolute;
+      border-color: $dropdown-button-pip-color transparent transparent transparent;
+      border-style: solid;
       content: "";
-      width: 0;
-      height: 0;
       display: block;
-      border-style: solid;
-      border-color: $dropdown-button-pip-color transparent transparent transparent;
+      height: 0;
+      position: absolute;
       top: 50%;
+      width: 0;
     }
   }
 
@@ -122,9 +121,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
 @include exports("dropdown-button") {
   @if $include-html-button-classes {
     .dropdown.button, button.dropdown { @include dropdown-button;
-      &.tiny { @include dropdown-button(tiny,$base-style:false); }
-      &.small { @include dropdown-button(small,$base-style:false); }
-      &.large { @include dropdown-button(large,$base-style:false); }
+      &.tiny { @include dropdown-button(tiny, $base-style:false); }
+      &.small { @include dropdown-button(small, $base-style:false); }
+      &.large { @include dropdown-button(large, $base-style:false); }
       &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
     }
   }

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -64,60 +64,67 @@ $f-dropdown-radius: $global-radius !default;
 // $triangle - Sets if dropdown has triangle. Default:true.
 // $max-width - Default: $f-dropdown-max-width || 200px.
 @mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
-  position: absolute;
+  display: none;
   left: -9999px;
   list-style: $f-dropdown-list-style;
   margin-#{$default-float}: 0;
-  outline: none;
+  position: absolute;
+
+  &.open {
+    display: block;
+  }
 
   > *:first-child { margin-top: 0; }
   > *:last-child { margin-bottom: 0; }
 
   @if $content == list {
-    width: 100%;
-    max-height: $f-dropdown-max-height;
-    height: $f-dropdown-height;
     background: $f-dropdown-bg;
     border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
     font-size: $f-dropdown-font-size;
+    height: $f-dropdown-height;
+    max-height: $f-dropdown-max-height;
+    width: 100%;
     z-index: 89;
   }
   @else if $content == content {
-    padding: $f-dropdown-content-padding;
-    width: 100%;
-    height: $f-dropdown-height;
-    max-height: $f-dropdown-max-height;
     background: $f-dropdown-bg;
     border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
     font-size: $f-dropdown-font-size;
+    height: $f-dropdown-height;
+    max-height: $f-dropdown-max-height;
+    padding: $f-dropdown-content-padding;
+    width: 100%;
     z-index: 89;
   }
 
   @if $triangle == bottom {
     margin-top: $f-dropdown-margin-top;
 
-    &:before {
-      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
-      position: absolute;
-      top: -($f-dropdown-triangle-size * 2);
-      #{$default-float}: $f-dropdown-triangle-side-offset;
-      z-index: 89;
-    }
-    &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
-      position: absolute;
-      top: -(($f-dropdown-triangle-size + 1) * 2);
-      #{$default-float}: $f-dropdown-triangle-side-offset - 1;
-      z-index: 88;
-    }
+    @if $f-dropdown-triangle-size != 0px {
 
-    &.right:before {
-      #{$default-float}: auto;
-      #{$opposite-direction}: $f-dropdown-triangle-side-offset;
-    }
-    &.right:after {
-      #{$default-float}: auto;
-      #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
+      &:before {
+        @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
+        position: absolute;
+        top: -($f-dropdown-triangle-size * 2);
+        #{$default-float}: $f-dropdown-triangle-side-offset;
+        z-index: 89;
+      }
+      &:after {
+        @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
+        position: absolute;
+        top: -(($f-dropdown-triangle-size + 1) * 2);
+        #{$default-float}: $f-dropdown-triangle-side-offset - 1;
+        z-index: 88;
+      }
+
+      &.right:before {
+        #{$default-float}: auto;
+        #{$opposite-direction}: $f-dropdown-triangle-side-offset;
+      }
+      &.right:after {
+        #{$default-float}: auto;
+        #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
+      }
     }
   }
 
@@ -166,23 +173,23 @@ $f-dropdown-radius: $global-radius !default;
   }
 
   @if $triangle == top {
-    margin-top: -$f-dropdown-margin-bottom;
     margin-left: 0;
+    margin-top: -$f-dropdown-margin-bottom;
 
     &:before {
       @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top);
+      bottom: -($f-dropdown-triangle-size * 2);
       position: absolute;
       top: auto;
-      bottom: -($f-dropdown-triangle-size * 2);
       #{$default-float}: $f-dropdown-triangle-side-offset;
       #{$opposite-direction}: auto;
       z-index: 89;
     }
     &:after {
       @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
+      bottom: -($f-dropdown-triangle-size * 2) - 2;
       position: absolute;
       top: auto;
-      bottom: -($f-dropdown-triangle-size * 2) - 2;
       #{$default-float}: $f-dropdown-triangle-side-offset - 1;
       #{$opposite-direction}: auto;
       z-index: 88;
@@ -200,9 +207,8 @@ $f-dropdown-radius: $global-radius !default;
 // We use this to style the list elements or content inside the dropdown.
 
 @mixin dropdown-style {
-  font-size: $f-dropdown-font-size;
   cursor: $cursor-pointer-value;
-
+  font-size: $f-dropdown-font-size;
   line-height: $f-dropdown-line-height;
   margin: 0;
 

data/vendor/assets/stylesheets/foundation/components/_flex-video.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -22,12 +22,12 @@ $flex-video-widescreen-padding-bottom: 56.34% !default;
 //
 
 @mixin flex-video-container {
-  position: relative;
-  padding-top: $flex-video-padding-top;
-  padding-bottom: $flex-video-padding-bottom;
   height: 0;
   margin-bottom: $flex-video-margin-bottom;
   overflow: hidden;
+  padding-bottom: $flex-video-padding-bottom;
+  padding-top: $flex-video-padding-top;
+  position: relative;
 
   &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
   &.vimeo { padding-top: 0; }
@@ -36,11 +36,11 @@ $flex-video-widescreen-padding-bottom: 56.34% !default;
   object,
   embed,
   video {
+    height: 100%;
     position: absolute;
     top: 0;
-    #{$default-float}: 0;
     width: 100%;
-    height: 100%;
+    #{$default-float}: 0;
   }
 }
 
@@ -48,4 +48,4 @@ $flex-video-widescreen-padding-bottom: 56.34% !default;
   @if $include-html-media-classes {
     .flex-video { @include flex-video-container; }
   }
-}
+}

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

@@ -2,8 +2,8 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
-@import "buttons";
+@import 'global';
+@import 'buttons';
 
 //
 // @variables
@@ -23,6 +23,7 @@ $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-placeholder-font-color: #cccccc !default;
 $input-font-size: rem-calc(14) !default;
 $input-bg-color: $white !default;
 $input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
@@ -71,9 +72,13 @@ $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
-$glowing-effect-fade-time: 0.45s !default;
+$glowing-effect-fade-time: .45s !default;
 $glowing-effect-color: $input-focus-border-color !default;
 
+// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
+$input-transition-fade-time: 0.15s !default;
+$input-transition-fade-timing-function: linear !default;
+
 // Select variables
 $select-bg-color: $ghost !default;
 $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
@@ -111,7 +116,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to give all basic form elements their style
 @mixin form-element {
   background-color: $input-bg-color;
-  font-family: $input-font-family;
   border: {
     style: $input-border-style;
     width: $input-border-width;
@@ -120,10 +124,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   box-shadow: $input-box-shadow;
   color: $input-font-color;
   display: block;
+  font-family: $input-font-family;
   font-size: $input-font-size;
+  height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
   margin: 0 0 $form-spacing 0;
   padding: $form-spacing / 2;
-  height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
   width: 100%;
   @include box-sizing(border-box);
   @if $input-include-glowing-effect {
@@ -135,7 +140,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     border-color: $input-focus-border-color;
     outline: none;
   }
-  // Disbaled Styles
+  // Disabled Styles
   &:disabled {
     background-color: $input-disabled-bg;
     cursor: $input-disabled-cursor;
@@ -160,10 +165,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
   // Control whether or not the base styles come through.
   @if $base-style {
-    font-size: $form-label-font-size;
     color: $form-label-font-color;
     cursor: $form-label-pointer;
     display: block;
+    font-size: $form-label-font-size;
     font-weight: $form-label-font-weight;
     line-height: $form-label-line-height;
     margin-bottom: $form-label-bottom-margin;
@@ -182,19 +187,19 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
 // We use this mixin to create postfix/prefix form Labels
 @mixin prefix-postfix-base {
-  display: block;
-  position: relative;
-  z-index: 2;
-  text-align: center;
-  width: 100%;
-  padding-top: 0;
-  padding-bottom: 0;
   border-style: $input-prefix-border-type;
   border-width: $input-prefix-border-size;
-  overflow: $input-prefix-overflow;
+  display: block;
   font-size: $form-label-font-size;
   height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
   line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+  overflow: $input-prefix-overflow;
+  padding-bottom: 0;
+  padding-top: 0;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  z-index: 2;
 }
 
 // @MIXIN
@@ -220,12 +225,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   }
 
   @if $is-button {
+    border: none;
     padding-#{$default-float}: 0;
     padding-#{$opposite-direction}: 0;
-    padding-top: 0;
     padding-bottom: 0;
+    padding-top: 0;
     text-align: center;
-    border: none;
   }
 
 }
@@ -235,12 +240,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to create postfix label styles
 // $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) {
+@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:false, $border:$input-prefix-border-color, $is-button:false) {
 
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-#{$default-float}: none;
+    @if $border-left-hidden {
+      border-#{$default-float}: none;
+    }
 
     // Control the font color based on background brightness
     @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }
@@ -252,12 +259,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   }
 
   @if $is-button {
+    border: none;
     padding-#{$default-float}: 0;
     padding-#{$opposite-direction}: 0;
-    padding-top: 0;
     padding-bottom: 0;
+    padding-top: 0;
     text-align: center;
-    border: none;
   }
 
 }
@@ -265,16 +272,16 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to style fieldsets
 @mixin fieldset {
   border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
-  padding: $fieldset-padding;
   margin: $fieldset-margin;
+  padding: $fieldset-padding;
 
   // and legend styles
   legend {
-    font-weight: $legend-font-weight;
     background: $legend-bg;
-    padding: $legend-padding;
-    margin: 0;
+    font-weight: $legend-font-weight;
     margin-#{$default-float}: rem-calc(-3);
+    margin: 0;
+    padding: $legend-padding;
   }
 }
 
@@ -283,8 +290,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to control border and background color of error inputs
 // $color - Default: $alert-color (found in settings file)
 @mixin form-error-color($color:$alert-color) {
+  background-color: rgba($color, .1);
   border-color: $color;
-  background-color: rgba($color, 0.1);
 
   // Go back to normal on focus
   &:focus {
@@ -305,12 +312,12 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // $bg - Default: $alert-color (Found in settings file)
 @mixin form-error-message($bg:$input-error-message-bg-color) {
   display: block;
-  padding: $input-error-message-padding;
-  margin-top: $input-error-message-top;
-  margin-bottom: $form-spacing;
   font-size: $input-error-message-font-size;
-  font-weight: $input-error-message-font-weight;
   font-style: $input-error-message-font-style;
+  font-weight: $input-error-message-font-weight;
+  margin-bottom: $form-spacing;
+  margin-top: $input-error-message-top;
+  padding: $input-error-message-padding;
 
   // We can control the text color based on the brightness of the background.
   $bg-lightness: lightness($bg);
@@ -322,8 +329,9 @@ $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;
-  border-radius: 0;
+  -moz-appearance: none !important;
   background-color: $select-bg-color;
+  border-radius: 0;
 
   // Hide the dropdown arrow shown in newer IE versions
   &::-ms-expand {
@@ -343,11 +351,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     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;
+  font-family: $input-font-family;
+  font-size: $input-font-size;
   line-height: normal;
+  padding: ($form-spacing / 2);
   @include radius(0);
   &.radius { @include radius($global-radius); }
   &:hover {
@@ -383,8 +391,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
     /* Label Styles */
     label { @include form-label;
-      &.right { @include form-label(right,false); }
-      &.inline { @include form-label(inline,false); }
+      &.right { @include form-label(right, false); }
+      &.inline { @include form-label(inline, false); }
       /* Styles for required inputs */
       small {
         text-transform: $form-label-small-transform;
@@ -397,8 +405,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     .postfix { @include prefix-postfix-base; }
 
     /* Adjust padding, alignment and radius if pre/post element is a button */
-    .postfix.button { @include button-size(false,false); @include postfix(false, false, true); }
-    .prefix.button { @include button-size(false,false); @include prefix(false, false, true); }
+    .postfix.button { @include button-size(false, false); @include postfix(false, false, true); }
+    .prefix.button { @include button-size(false, false); @include prefix(false, false, true); }
 
     .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
     .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
@@ -406,16 +414,21 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
 
     /* Separate prefix and postfix styles when on span or label so buttons keep their own */
-    span.prefix,label.prefix { @include prefix(); }
-    span.postfix,label.postfix { @include postfix(); }
+    span.prefix, label.prefix { @include prefix(); }
+    span.postfix, label.postfix { @include postfix(); }
 
     /* We use this to get basic styling on all basic form elements */
     #{text-inputs(all, 'input')} {
       -webkit-appearance: none;
+      -moz-appearance: none;
       border-radius: 0;
       @include form-element;
       @if $input-include-glowing-effect == false {
-          @include single-transition(all, 0.15s, linear);
+        -webkit-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+        -moz-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+        -ms-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+        -o-transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
+        transition: border-color $input-transition-fade-time $input-transition-fade-timing-function, background $input-transition-fade-time $input-transition-fade-timing-function;
       }
       &.radius {
         @include radius($input-border-radius);
@@ -457,6 +470,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
     input[type="submit"] {
       -webkit-appearance: none;
+      -moz-appearance: none;
       border-radius: 0;
     }
 
@@ -465,10 +479,28 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       height: auto;
     }
 
-	/* Not allow resize out of parent */
-	textarea {
-		max-width: 100%;
-	}
+	  /* Not allow resize out of parent */
+	  textarea {
+	    max-width: 100%;
+	  }
+    
+    // style placeholder text cross browser
+    ::-webkit-input-placeholder {
+      color: $input-placeholder-font-color;
+    }
+
+    :-moz-placeholder { /* Firefox 18- */
+       color: $input-placeholder-font-color;  
+    }
+
+    ::-moz-placeholder {  /* Firefox 19+ */
+       color: $input-placeholder-font-color;  
+    }
+
+    :-ms-input-placeholder {  
+       color: $input-placeholder-font-color;  
+    }
+   
 
     /* Add height value for select elements to match text input height */
     select {
@@ -551,14 +583,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
       > label {
         > small {
-          color: scale-color($form-label-font-color, $lightness: 15%);
           background: transparent;
-          padding: 0;
-          text-transform: $form-label-small-transform;
-          font-style: normal;
+          color: scale-color($form-label-font-color, $lightness: 15%);
+          display: inline;
           font-size: 60%;
+          font-style: normal;
           margin: 0;
-          display: inline;
+          padding: 0;
+          text-transform: $form-label-small-transform;
         }
       }