Add transition on search box

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

Add transition on search box
It's kind of cool trend to use animated-expanding search box nowadays. E.g. see Github.
Dmitry Medvinsky
1 parent 292dffc2
Showing 2 changed files with 9 additions and 0 deletions Show diff stats
app/assets/stylesheets/gitlab_bootstrap/mixins.scss
app/assets/stylesheets/sections/header.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
@@ -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;
       }
	@@ -24,6 +24,14 @@		@@ -24,6 +24,14 @@
24	background-image: -o-linear-gradient($from, $to);	24	background-image: -o-linear-gradient($from, $to);
25	}	25	}
26		26
		27	+@mixin transition($transition) {
		28	+ -webkit-transition: $transition;
		29	+ -moz-transition: $transition;
		30	+ -ms-transition: $transition;
		31	+ -o-transition: $transition;
		32	+ transition: $transition;
		33	+}
		34	+
27	/**	35	/**
28	* Prefilled mixins	36	* Prefilled mixins
29	* Mixins with fixed values	37	* Mixins with fixed values