Fixed input styles in search preview mode, added animation

Also added JS handlers for hiding the suggestions

resources/sass/_animations.scss

@@ -16,23 +16,21 @@
   }
 }
 
-.anim.searchResult {
-  opacity: 0;
-  transform: translate3d(580px, 0, 0);
-  animation-name: searchResult;
-  animation-duration: 220ms;
+.search-suggestions-animation{
+  animation-name: searchSuggestions;
+  animation-duration: 180ms;
   animation-fill-mode: forwards;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
 }
 
-@keyframes searchResult {
+@keyframes searchSuggestions {
   0% {
-    opacity: 0;
-    transform: translate3d(400px, 0, 0);
+    opacity: .5;
+    transform: scale(0.9);
   }
   100% {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    transform: scale(1);
   }
 }
 

resources/sass/_components.scss

@@ -1010,31 +1010,4 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   border: 1px solid #b4b4b4;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
   color: #333;
-}
-
-.global-search-suggestions {
-  display: none;
-  position: absolute;
-  top: -$-s;
-  left: 0;
-  right: 0;
-  z-index: -1;
-  margin-left: -$-xxl;
-  margin-right: -$-xxl;
-  padding-top: 56px;
-  border-radius: 3px;
-  box-shadow: $bs-hover;
-  .entity-item-snippet p  {
-    display: none;
-  }
-  .entity-item-snippet {
-    font-size: .8rem;
-  }
-  .entity-list-item-name {
-    font-size: .9rem;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-  }
 }

resources/sass/_header.scss

@@ -135,6 +135,47 @@ header .search-box {
   }
 }
 
+.global-search-suggestions {
+  display: none;
+  position: absolute;
+  top: -$-s;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  margin-left: -$-xxl;
+  margin-right: -$-xxl;
+  padding-top: 56px;
+  border-radius: 3px;
+  box-shadow: $bs-hover;
+  transform-origin: top center;
+  opacity: .5;
+  transform: scale(0.9);
+  .entity-item-snippet p  {
+    display: none;
+  }
+  .entity-item-snippet {
+    font-size: .8rem;
+  }
+  .entity-list-item-name {
+    font-size: .9rem;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+.search-active .global-search-suggestions {
+  display: block;
+}
+header .search-box.search-active input {
+  background-color: #EEE;
+  color: #444;
+  border-color: #DDD;
+}
+header .search-box.search-active #header-search-box-button {
+  color: #444;
+}
+
 .logo {
   display: inline-flex;
   padding: ($-s - 6px) $-s;