From: John Kole <jkole@me.com>
Date: Thu, 12 Feb 2015 04:18:36 +0000 (-0500)
Subject: Fixes input element animation
X-Git-Tag: v5.5.2~118^2^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F6287%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Fixes input element animation

When $input-include-glowing-effect == false, adding the .error class to
an input element resulted in unwanted animation of the input bottom
margin down to zero.  Fix is to replace the single-transition mixin
with specific animation of the border-color and background properties.
---

diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
index cb8c1854a..a256b867c 100644
--- a/scss/foundation/components/_forms.scss
+++ b/scss/foundation/components/_forms.scss
@@ -415,7 +415,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       border-radius: 0;
       @include form-element;
       @if $input-include-glowing-effect == false {
-          @include single-transition(all, .15s, linear);
+        -webkit-transition: border-color 0.15s linear, background 0.15s linear;
+        -moz-transition: border-color 0.15s linear, background 0.15s linear;
+        -ms-transition: border-color 0.15s linear, background 0.15s linear;
+        -o-transition: border-color 0.15s linear, background 0.15s linear;
+        transition: border-color 0.15s linear, background 0.15s linear;
       }
       &.radius {
         @include radius($input-border-radius);