Limiting search-field styling to search only

- Re-organising search.scss
- Rely more on utility-classes instead of component classes
- Update relevant specs

1 files changed, 38 insertions, 23 deletions

diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 16efaba2799..58e46cfb70f 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -186,25 +186,20 @@ input[type='checkbox']:hover {
   }
 }
 
-.search-holder {
+.search-field-holder,
+.project-filter-form {
+  flex: 1 0 auto;
+  position: relative;
 
-  @include media-breakpoint-up(lg) {
-    display: flex;
-    align-items: flex-end;
-  }
-
-  .search-field-holder,
-  .project-filter-form {
-    flex: 1 0 auto;
-    position: relative;
+  .search-holder & {
     margin-right: 0;
 
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(sm) {
       margin-right: 5px;
-      margin-bottom: 0;
     }
   }
 
+
   .search-icon {
     position: absolute;
     left: 10px;
@@ -218,13 +213,20 @@ input[type='checkbox']:hover {
     padding-left: $gl-padding + 15px;
     padding-right: $gl-padding + 15px;
   }
+}
+
+.search-holder {
+  @include media-breakpoint-up(sm) {
+    display: flex;
+  }
 
   .btn-search,
-  .btn-success {
+  .btn-success,
+  .dropdown-menu-toggle {
     width: 100%;
     margin-top: 5px;
 
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(sm) {
       width: auto;
       margin-top: 0;
       margin-left: 5px;
@@ -232,21 +234,15 @@ input[type='checkbox']:hover {
   }
 
   .dropdown {
-    margin-bottom: $gl-padding;
-
-    @include media-breakpoint-up(lg) {
+    @include media-breakpoint-up(sm) {
       margin-left: 5px;
       margin-right: 5px;
-      margin-bottom: 0;
     }
   }
 
   .dropdown-menu-toggle {
-    width: 100%;
-    margin-top: 5px;
-
-    @include media-breakpoint-up(lg) {
-      width: 240px;
+    @include media-breakpoint-up(sm) {
+      width: 180px;
       margin-top: 0;
     }
   }
@@ -268,6 +264,25 @@ input[type='checkbox']:hover {
   }
 }
 
+.search-page-form {
+  .dropdown-menu-toggle,
+  .btn-search {
+    width: 100%;
+  }
+
+  .dropdown-menu-toggle {
+    @include media-breakpoint-up(lg) {
+      width: 240px;
+    }
+  }
+
+  .btn-search {
+    @include media-breakpoint-up(lg) {
+      width: auto;
+    }
+  }
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,