diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-05-19 10:33:21 +0300 |
commit | 36a59d088eca61b834191dacea009677a96c052f (patch) | |
tree | e4f33972dab5d8ef79e3944a9f403035fceea43f /app/assets/stylesheets/pages/search.scss | |
parent | a1761f15ec2cae7c7f7bbda39a75494add0dfd6f (diff) |
Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42
Diffstat (limited to 'app/assets/stylesheets/pages/search.scss')
-rw-r--r-- | app/assets/stylesheets/pages/search.scss | 46 |
1 files changed, 44 insertions, 2 deletions
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 18a0f119edf..8755db83d35 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -2,6 +2,11 @@ $search-dropdown-max-height: 400px; $search-avatar-size: 16px; $search-sidebar-min-width: 240px; $search-sidebar-max-width: 300px; +$search-input-field-x-min-width: 200px; +$search-input-field-min-width: 320px; +$search-input-field-max-width: 600px; + +$border-radius-medium: 3px; .search-results { .search-result-row { @@ -37,8 +42,44 @@ input[type='checkbox']:hover { 0 0 0 1px lighten($dropdown-input-focus-shadow, 20%); } +.header-content { + .header-search-new { + max-width: $search-input-field-max-width; + } + + &.header-search-is-active { + .navbar-collapse { + flex-grow: 1; + } + + @include media-breakpoint-down(lg) { + .title-container { + flex: 0; + overflow: hidden; + } + } + + @include media-breakpoint-up(xl) { + .navbar-nav { + padding-left: 1rem; + } + } + } +} + +// This is a temporary workaround! +// the button in GitLab UI Search components need to be updated to not be the small size +// see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540 +.header-search .gl-search-box-by-type-clear.btn-sm { + padding: 0.5rem !important; +} + .header-search { - width: 320px; + min-width: $search-input-field-min-width; + + @include media-breakpoint-between(md, lg) { + min-width: $search-input-field-x-min-width; + } input, svg { @@ -66,9 +107,10 @@ input[type='checkbox']:hover { border-width: 0; border-style: solid; border-image: none; - border-radius: 3px; + border-radius: $border-radius-medium; box-shadow: none; white-space: pre-wrap; + box-sizing: border-box; // Safari word-wrap: break-word; overflow-wrap: break-word; |