Add transition on search box

It's kind of cool trend to use animated-expanding search box nowadays.
E.g. see Github.

diff --git a/app/assets/stylesheets/gitlab_bootstrap/mixins.scss b/app/assets/stylesheets/gitlab_bootstrap/mixins.scss
index c8cc9a7..f416be9 100644 (file)
--- a/app/assets/stylesheets/gitlab_bootstrap/mixins.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/mixins.scss
@@ -24,6 +24,14 @@
   background-image: -o-linear-gradient($from, $to);
 }
 
+@mixin transition($transition) {
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -ms-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
+}
+
 /**
  * Prefilled mixins
  * Mixins with fixed values

diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss
index 05c077a..99c8275 100644 (file)
--- a/app/assets/stylesheets/sections/header.scss
+++ b/app/assets/stylesheets/sections/header.scss
@@ -90,6 +90,7 @@ header {
       @include border-radius(3px);
       border: 1px solid #c6c6c6;
       box-shadow: none;
+      @include transition(all 0.15s ease-in 0s);
       &:focus {
         @extend .span3;
       }