Combine all search releated CSS

1 files changed, 45 insertions, 36 deletions

diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 13dd7b5a780..e438c6c1df2 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -28,9 +28,7 @@ input[type="checkbox"]:hover {
 }
 
 .search {
-  margin-right: 10px;
-  margin-left: 10px;
-  margin-top: ($header-height - 35) / 2;
+  margin: 4px 8px 0;
 
   form {
     @extend .form-control;
@@ -38,15 +36,24 @@ input[type="checkbox"]:hover {
     padding: 4px;
     width: $search-input-width;
     line-height: 24px;
+    height: 32px;
+    border: 0;
+    border-radius: $border-radius-default;
+    transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
     &:hover {
-      border-color: lighten($dropdown-input-focus-border, 20%);
-      box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+      box-shadow: none;
     }
   }
 
-  .location-text {
-    font-style: normal;
+  .location-badge {
+    font-size: 12px;
+    margin: -4px 4px -4px -4px;
+    line-height: 25px;
+    padding: 4px 8px;
+    border-radius: 2px 0 0 2px;
+    height: 32px;
+    transition: border-color ease-in-out 0.15s;
   }
 
   .search-input {
@@ -56,41 +63,26 @@ input[type="checkbox"]:hover {
     margin-left: 5px;
     line-height: 25px;
     width: 98%;
+    color: $white-light;
+    background: none;
+    transition: color ease-in-out 0.15s;
   }
 
-  .location-badge {
-    line-height: 25px;
-    padding: 0 5px;
-    border-radius: $border-radius-default;
-    font-size: 14px;
-    font-style: normal;
-    color: $note-disabled-comment-color;
-    display: inline-block;
-    background-color: $gray-normal;
-    vertical-align: top;
-    cursor: default;
+  .search-input::placeholder {
+    transition: color ease-in-out 0.15s;
   }
 
   .search-input-container {
-    display: -webkit-flex;
     display: flex;
     position: relative;
   }
 
   .search-input-wrap {
-    // Fallback if flexbox is not supported
-    display: inline-block;
-  }
-
-  .search-input-wrap {
-    width: 100%;
-
     .search-icon,
     .clear-icon {
       position: absolute;
       right: 5px;
       top: 0;
-      color: $location-icon-color;
 
       &::before {
         font-family: FontAwesome;
@@ -148,19 +140,30 @@ input[type="checkbox"]:hover {
     form {
       @extend .form-control:focus;
       border-color: $dropdown-input-focus-border;
-      box-shadow: 0 0 4px $search-input-focus-shadow-color;
+      box-shadow: none;
+
+      .search-input-wrap {
+        .search-icon,
+        .clear-icon {
+          color: $gl-text-color-tertiary;
+          transition: color ease-in-out 0.15s;
+        }
+      }
+
+      .search-input {
+        color: $gl-text-color;
+        transition: color ease-in-out 0.15s;
+      }
+
+      .search-input::placeholder {
+        color: $gl-text-color-tertiary;
+      }
     }
 
     .location-badge {
       transition: all 0.15s;
-      background-color: $location-badge-active-bg;
-      color: $white-light;
-    }
-
-    .search-input-wrap {
-      i {
-        color: $layout-link-gray;
-      }
+      background-color: $nav-badge-bg;
+      border-color: $border-color;
     }
 
     .dropdown-menu {
@@ -189,6 +192,12 @@ input[type="checkbox"]:hover {
   }
 }
 
+.search {
+
+
+
+}
+
 .search-holder {
   @include new-style-dropdown;