diff options
| author | Kemais Ehlers <kemais_ehlers@byu.edu> | 2019-08-28 16:53:20 +0000 |
|---|---|---|
| committer | Paul Slaughter <pslaughter@gitlab.com> | 2019-08-28 16:53:20 +0000 |
| commit | b57839da46db1b2805de7b2efb957f3ed4b6b5b8 (patch) | |
| tree | e3a83dfd22f42cf6e85fba064296bce2daccfd9e | |
| parent | 6d579e9b0ec3a00314a4ca36cc4617777de9a036 (diff) | |
| download | gitlab-ce-b57839da46db1b2805de7b2efb957f3ed4b6b5b8.tar.gz | |
Fix top-nav search bar dropdown on xl displays
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/search.scss | 10 | ||||
| -rw-r--r-- | changelogs/unreleased/fix-search-input-dropdown.yml | 5 |
3 files changed, 11 insertions, 6 deletions
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 9871771542d..7a3fd2adfbb 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -529,7 +529,7 @@ $award-emoji-width-xs: 90%; */ $search-input-border-color: rgba($blue-400, 0.8); $search-input-width: 200px; -$search-input-active-width: 320px; +$search-input-xl-width: 320px; $location-icon-color: #e7e9ed; /* diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 58e46cfb70f..74380ec995a 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -48,6 +48,10 @@ input[type='checkbox']:hover { background-color ease-in-out $default-transition-duration, width ease-in-out $default-transition-duration; + @include media-breakpoint-up(xl) { + width: $search-input-xl-width; + } + &:hover { box-shadow: none; } @@ -116,7 +120,7 @@ input[type='checkbox']:hover { overflow: auto; @include media-breakpoint-up(xl) { - width: $search-input-active-width; + width: $search-input-xl-width; } } @@ -131,10 +135,6 @@ input[type='checkbox']:hover { border-color: $blue-300; box-shadow: none; - @include media-breakpoint-up(xl) { - width: $search-input-active-width; - } - .search-input-wrap { .search-icon, .clear-icon { diff --git a/changelogs/unreleased/fix-search-input-dropdown.yml b/changelogs/unreleased/fix-search-input-dropdown.yml new file mode 100644 index 00000000000..a86f7eacfdb --- /dev/null +++ b/changelogs/unreleased/fix-search-input-dropdown.yml @@ -0,0 +1,5 @@ +--- +title: Fix top-nav search bar dropdown on xl displays +merge_request: 31864 +author: Kemais Ehlers +type: fixed |