diff options
Diffstat (limited to 'app/assets/stylesheets/pages/search.scss')
-rw-r--r-- | app/assets/stylesheets/pages/search.scss | 61 |
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, |