Combine all search releated CSS

app/assets/stylesheets/framework/new-nav.scss

@@ -295,75 +295,6 @@ header.navbar-gitlab-new {
   margin-top: 4px;
 }
 
-.search {
-  margin: 4px 8px 0;
-
-  form {
-    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 {
-      box-shadow: none;
-    }
-  }
-
-  &.search-active form {
-    box-shadow: none;
-
-    .search-input {
-      color: $gl-text-color;
-      transition: color ease-in-out 0.15s;
-    }
-
-    .search-input::placeholder {
-      color: $gl-text-color-tertiary;
-    }
-
-    .search-input-wrap {
-      .search-icon,
-      .clear-icon {
-        color: $gl-text-color-tertiary;
-        transition: color ease-in-out 0.15s;
-      }
-    }
-  }
-
-  .search-input {
-    color: $white-light;
-    background: none;
-    transition: color ease-in-out 0.15s;
-  }
-
-  .search-input::placeholder {
-    transition: color ease-in-out 0.15s;
-  }
-
-  .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-active {
-    .location-badge {
-      background-color: $nav-badge-bg;
-      border-color: $border-color;
-    }
-
-    .search-input-wrap {
-      .clear-icon {
-        color: $white-light;
-      }
-    }
-  }
-}
-
 .breadcrumbs {
   display: flex;
   min-height: 48px;
@@ -375,6 +306,8 @@ header.navbar-gitlab-new {
   display: flex;
   width: 100%;
   position: relative;
+  padding-top: $gl-padding;
+  padding-bottom: $gl-padding;
   align-items: center;
   border-bottom: 1px solid $border-color;
 }
@@ -386,11 +319,6 @@ header.navbar-gitlab-new {
   align-self: center;
   color: $gl-text-color-secondary;
 
-  @media (max-width: $screen-xs-max) {
-    padding-left: 17px;
-    border-left: 1px solid $gl-text-color-quaternary;
-  }
-
   .avatar-tile {
     margin-right: 4px;
     border: 1px solid $border-color;

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 {
@@ -187,6 +190,12 @@ input[type="checkbox"]:hover {
       width: 68%;
     }
   }
+}
+
+.search {
+
+
+
 }
 
 .search-holder {