From: Haris Khan <khanh@inniogroup.com>
Date: Sat, 7 Mar 2015 00:09:50 +0000 (-0500)
Subject: when glowing is disabled, use variables to style the transition of the background... 
X-Git-Tag: v5.5.2~57^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F6377%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

when glowing is disabled, use variables to style the transition of the background and border-color
---

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index f0b0d2a7d..314802fa8 100644
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -683,6 +683,10 @@ $include-html-global-classes: $include-html-classes;
 // $glowing-effect-fade-time: .45s;
 // $glowing-effect-color: $input-focus-border-color;
 
+// 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;
 // $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
index 9c59ddf19..b5f94862d 100644
--- a/scss/foundation/components/_forms.scss
+++ b/scss/foundation/components/_forms.scss
@@ -74,6 +74,10 @@ $input-error-message-font-color-alt: $oil !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;
@@ -417,11 +421,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 {
-        -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;
+        -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);