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	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	36	* Prefilled mixins
29	37	* Mixins with fixed values
...	...
...	...	@@ -90,6 +90,7 @@ header {
90	90	@include border-radius(3px);
91	91	border: 1px solid #c6c6c6;
92	92	box-shadow: none;
	93	+ @include transition(all 0.15s ease-in 0s);
93	94	&:focus {
94	95	@extend .span3;
95	96	}
...	...