Merge pull request #10 from ryankeairns/cleanup/search

Animate width
elastic · Dec 7, 2020 · d5126c1 · d5126c1
2 parents 78e0464 + 8cd804d
commit d5126c1
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.scss b/x-pack/plugins/global_search_bar/public/components/search_bar.scss
@@ -1,4 +1,19 @@
+//TODO add these overrides to EUI so that search behaves the same globally
 .kbnSearchBar {
-  width: 600px;
+  width: 400px;
   max-width: 100%;
+  will-change: width;
+
+  &:focus {
+    animation: kbnAnimateSearchBar $euiAnimSpeedFast forwards;
+  }
+}
+
+@keyframes kbnAnimateSearchBar {
+  from {
+    width: 400px;
+  }
+  to {
+    width: 600px;
+  }
 }