UX: Input and search cleanup (#5546)

* Cleaning up input sizes

* alignment

* more alignment adjustments

app/assets/stylesheets/common/base/compose.scss

@@ -179,7 +179,6 @@
   }
 
   #reply-title {
-    padding: 6px 10px;
     margin: 0 0 5px 0;
     flex-basis: 50%;
   }
@@ -187,15 +186,12 @@
   .tag-chooser {
     flex: 1 1 25%;
     margin: 0 0 5px 10px;
-    border: 1px solid $primary-medium;
     background: $secondary;
     @media all and (max-width: 900px) {
       margin: 0;
       flex: 1 1 100%;
     }
-    .select2-choices {
+
-      border: none;
-    }
     &.select2-dropdown-open, &.select2-container-active {
       border-color: $tertiary;
     }
@@ -328,10 +324,9 @@ div.ac-wrap div.item a.remove, .remove-link {
   margin-left: 4px;
   font-size: $font-down-1;
   line-height: $line-height-small;
-  padding: 1.5px 1.5px 1.5px 2.5px;
+  padding: 1px 3.5px;
   border-radius: 12px;
-  width: 10px;
+  box-sizing: border-box;
-  display: inline-block;
   border: 1px solid $primary-low;
   &:hover {
     background-color: $danger-low;
@@ -344,17 +339,17 @@ div.ac-wrap div.item a.remove, .remove-link {
 div.ac-wrap {
   overflow: auto;
   max-height: 150px;
+  display: flex;
+  flex-wrap: wrap;
   background-color: $secondary;
   border: 1px solid $primary-medium;
-  padding: 5px 4px 1px 10px;
   div.item {
     float: left;
-    margin-bottom: 4px;
+    padding: 4px 10px;
-    margin-right: 10px;
+    line-height: $line-height-large;
     span {
-      height: 24px;
       display: inline-block;
-      line-height: $line-height-large;
+      line-height: $line-height-medium;
     }
   }
 
@@ -368,12 +363,10 @@ div.ac-wrap {
 
   input[type="text"] {
     float: left;
-    margin-bottom: 4px;
-    height: 24px;
     display: block;
-    border: 0;
-    padding: 0;
     box-shadow: none;
+    border: 0;
+    margin: 0;
   }
 }
 

app/assets/stylesheets/common/base/discourse.scss

@@ -186,11 +186,10 @@ input {
   &[type="color"] {
     @include appearance-none;
     display: inline-block;
-    height: 18px;
     padding: 4px 10px;
     margin-bottom: 9px;
     font-size:  $font-0;
-    line-height: $line-height-medium;
+    line-height: $line-height-large;
     color: $primary;
     background-color: $secondary;
     border: 1px solid $primary-medium;

app/assets/stylesheets/common/base/search.scss

@@ -87,10 +87,14 @@
 
 .search.row {
   margin-bottom: 15px;
+  .input-xxlarge {
+    width: 100%;
+  }
 
   .search-bar {
     display: flex; 
     margin-bottom: 10px;
+    max-width: 780px;
     input {
       height: 22px;
       padding-left: 6px;
@@ -103,30 +107,6 @@
   }
 }
 
-.search-advanced {
-  margin-bottom: 15px;
-
-  .search-advanced-btn {
-    padding: 8px 10px;
-    width: 100%;
-    text-align: left;
-    font-weight: bold;
-  }
-
-  .search-advanced-options {
-    border: 1px solid $primary-low;
-    padding: 10px;
-
-    .control-group.pull-left {
-      width: 50%;
-    }
-
-    input[type="checkbox"] {
-      height: auto;
-    }
-  }
-}
-
 .no-results-suggestion {
   margin-top: 30px;
 }
@@ -139,26 +119,28 @@
 }
 
 .search-title {
-
+  position: relative;
+  margin: 10px 0 15px;
+  max-width: 780px;
+  border-bottom: 3px solid $primary-low; 
+  width: 100%;
   .term {
     font-weight: bold;
   }
 
-  position: relative;
   .result-count {
     float: left;
+    margin-bottom: 4px;    
     span {
       line-height: $line-height-large;
       height: 28px;
       display: inline-block;
     }
-    margin-bottom: 4px;
   }
-  margin: 10px 0 15px;
+
-  max-width: 780px;
-  border-bottom: 3px solid $primary-low; 
-  width: 100%;
   .sort-by {
+    float: right;
+    margin-bottom: 4px;
     .desc {
       margin-right: 5px;
     }
@@ -167,11 +149,61 @@
       width: auto;
       min-width: 150px;
     }
-    float: right;
-    margin-bottom: 4px;
   }
 }
 
 .google-search-form {
   margin-top: 2em;
 }
+
+.search-advanced {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+  max-width: 780px;
+  .search-advanced-options {
+    border: 1px solid $primary-low;
+    padding: 0 20px;    
+    width: 100%;
+    .date-picker-wrapper {
+      vertical-align: top;
+    }
+    @media screen and (max-width: 715px) {
+      padding: 0 10px;
+      #postTime {
+        margin: 0 0 5px 0;
+      }
+    }
+  }
+
+  .search-advanced-btn {
+    flex: 1 1 100%;
+    width: 100%;
+    text-align: left;
+    font-weight: bold;
+  }
+
+  .container {
+    display: flex;
+    flex: 1 1 100%;
+    padding: 15px 0 10px 0;
+    .all-tags {
+      margin-bottom: 0;
+    }
+    @media screen and (max-width: 600px) {
+      flex-wrap: wrap;
+    }
+    &:not(:first-of-type) {
+      border-top: 1px solid $primary-low;
+    }
+    .control-group {
+      flex: 1 1 100%;
+      @media screen and (max-width: 600px) {
+        margin: 0;
+        &:nth-of-type(2) {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/common/components/date-picker.scss

@@ -7,8 +7,8 @@
 }
 
 .date-picker-wrapper {
-  display: inline-block;
   position: relative;
+  display: inline-block;
 }
 
 .date-picker {

app/assets/stylesheets/common/select-kit/combo-box.scss

@@ -25,10 +25,10 @@
     .select-box-kit-header, .select-kit-header {
       background: $secondary;
       border: 1px solid $primary-medium;
-      padding: 6px 10px;
+      padding: 4px 10px;
       font-weight: 500;
       font-size: $font-0;
-      line-height: $line-height-medium;
+      line-height: $line-height-large;
 
       &.is-focused {
         border: 1px solid $tertiary;

app/assets/stylesheets/mobile/search.scss

@@ -5,19 +5,8 @@
 .search-advanced {
   .search-advanced-options {
     .control-group {
-      padding-bottom: 10px;
+      margin-bottom: 10px;
-
-      &.pull-left {
-        float: none;
-        width: auto;
-      }
-
       .controls {
-        label {
-          display: block;
-          margin-bottom: 5px;
-        }
-
         input:not([type="checkbox"]),select {
           width: 75%;
         }
@@ -26,13 +15,23 @@
   }
 }
 
+.search-title {
+  .sort-by {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    .select-kit {
+      flex: 1 1 auto;
+    }
+  }
+}
+
 .search.row {
-  margin-top: 5px;
+  margin-top: 10px;
 }
 
 .search.row input.search {
   height: 25px;
-  width: 69%;
 }
 
 .fps-search-context {

app/assets/stylesheets/vendor/select2.scss

@@ -439,13 +439,13 @@ html[dir="rtl"] .select2-container-multi .select2-choices li
 }
 
 .select2-container-multi .select2-choices .select2-search-field input {
-    margin: 1px 0;
     padding-left: 0;
     font-family: sans-serif;
     font-size: 1em;
     color: #666;
     outline: 0;
     border: 0;
+    margin-bottom: 0;
     -webkit-box-shadow: none;
             box-shadow: none;
     background: transparent !important;