diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index 216c6bff30d..bd343963b35 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/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; - display: inline-block; + box-sizing: border-box; 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; - margin-right: 10px; + padding: 4px 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; } } diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index c40557d8555..613fa8301ee 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/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; diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss index 2e27fea111c..cf5b0e4b9a4 100644 --- a/app/assets/stylesheets/common/base/search.scss +++ b/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; + } + } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/common/components/date-picker.scss b/app/assets/stylesheets/common/components/date-picker.scss index edf976fa7fa..350927e4b5b 100644 --- a/app/assets/stylesheets/common/components/date-picker.scss +++ b/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 { diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss index 9123b11c4ea..59db74d3b02 100644 --- a/app/assets/stylesheets/common/select-kit/combo-box.scss +++ b/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; diff --git a/app/assets/stylesheets/mobile/search.scss b/app/assets/stylesheets/mobile/search.scss index bb4ea638c3f..c9903295ecc 100644 --- a/app/assets/stylesheets/mobile/search.scss +++ b/app/assets/stylesheets/mobile/search.scss @@ -5,19 +5,8 @@ .search-advanced { .search-advanced-options { .control-group { - padding-bottom: 10px; - - &.pull-left { - float: none; - width: auto; - } - + margin-bottom: 10px; .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 { diff --git a/app/assets/stylesheets/vendor/select2.scss b/app/assets/stylesheets/vendor/select2.scss index c2b1e492213..0981475b458 100644 --- a/app/assets/stylesheets/vendor/select2.scss +++ b/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;