diff options
Diffstat (limited to 'app/assets/stylesheets/framework/header.scss')
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss | 57 |
1 files changed, 56 insertions, 1 deletions
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index ed41d10f3b2..4b1efcc1e9a 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -1,3 +1,7 @@ +$search-input-field-min-width: 320px; +$search-input-field-max-width: 640px; +$search-input-field-x-min-width: 200px; + .navbar-gitlab { padding: 0 16px; z-index: $header-zindex; @@ -76,6 +80,57 @@ .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } + + .header-search-new { + max-width: $search-input-field-max-width; + } + + &.header-search-is-active { + .global-search-container { + flex-grow: 1; + } + } + } + + .header-search { + min-width: $search-input-field-min-width; + + // 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 + .gl-search-box-by-type-clear.btn-sm { + padding: 0.5rem !important; + } + + @include media-breakpoint-between(md, lg) { + min-width: $search-input-field-x-min-width; + } + + &.is-searching { + .in-search-scope-help { + position: absolute; + top: $gl-spacing-scale-2; + right: 2.125rem; + z-index: 2; + } + } + + &.is-not-focused { + .gl-search-box-by-type-clear { + display: none; + } + } + + .keyboard-shortcut-helper { + transform: translateY(calc(50% - 2px)); + box-shadow: none; + border-color: transparent; + } + } + + .header-search-dropdown-menu { + max-height: $dropdown-max-height; + top: 100%; } .navbar-collapse { @@ -555,7 +610,7 @@ } .top-nav-container-view { - .gl-new-dropdown & .gl-search-box-by-type { + .gl-dropdown & .gl-search-box-by-type { @include gl-m-0; } |