1 files changed, 79 insertions, 12 deletions
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index f0f3744c6fa..2bff70c8c64 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -10,17 +10,6 @@
   }
 }
 
-.search-holder {
-  max-width: 600px;
-  margin: 0 auto;
-  margin-bottom: 20px;
-
-  input {
-    border-color: #bbb;
-    font-weight: bold;
-  }
-}
-
 .search {
   margin-right: 10px;
   margin-left: 10px;
@@ -159,7 +148,85 @@
 
   &.has-location-badge {
     .search-input-wrap {
-      width: 78%;
+      width: 68%;
     }
   }
 }
+
+.search-holder {
+  @media (min-width: $screen-sm-min) {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .search-field-holder {
+    -webkit-flex: 1 0 auto;
+    -ms-flex: 1 0 auto;
+    flex: 1 0 auto;
+    position: relative;
+    margin-right: 0;
+
+    @media (min-width: $screen-sm-min) {
+      margin-right: 5px;
+    }
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    color: $gray-darkest;
+    pointer-events: none;
+  }
+
+  .search-text-input {
+    padding-left: $gl-padding + 15px;
+    padding-right: $gl-padding + 15px;
+  }
+
+  .btn-search {
+    width: 100%;
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      width: auto;
+      margin-top: 0;
+      margin-left: 5px;
+    }
+  }
+
+  .dropdown {
+    @media (min-width: $screen-sm-min) {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+
+  .dropdown-menu-toggle {
+    width: 100%;
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      width: 160px;
+      margin-top: 0;
+    }
+  }
+}
+
+.search-clear {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  padding: 0;
+  color: $gray-darkest;
+  line-height: 0;
+  background: none;
+  border: 0;
+
+  &:hover,
+  &:focus {
+    color: $gl-link-color;
+    outline: none;
+  }
+}