.navbar-gitlab { padding: 0 16px; z-index: $header-zindex; margin-bottom: 0; min-height: var(--header-height); border: 0; position: fixed; top: $calc-system-headers-height; left: 0; right: 0; border-radius: 0; } .navbar-empty { justify-content: center; height: var(--header-height); background: $white; border-bottom: 1px solid $gray-100; .tanuki-logo, .brand-header-logo { max-height: 100%; } } .set-user-status-modal { .modal-body { min-height: unset; } .input-lg { max-width: unset; } .no-emoji-placeholder { svg { fill: var(--gray-500, $gray-500); } } .emoji-menu-toggle-button { @include emoji-menu-toggle-button; padding: $gl-vert-padding $gl-btn-padding; } .input-group { &, .input-group-prepend, .input-group-append { height: $input-height; } } } .nav-links > li > a { .badge.badge-pill { @include media-breakpoint-down(xs) { display: none; } } @include media-breakpoint-down(xs) { margin-right: 3px; } } .header-logged-out { z-index: $header-zindex; min-height: var(--header-height); position: fixed; top: $calc-system-headers-height; left: 0; right: 0; background-color: $brand-charcoal; } .header-logged-out-nav { position: relative; min-height: var(--header-height); } .header-logged-out-logo { a { display: flex; align-items: center; padding: 4px; margin-left: -4px; border-radius: $border-radius-default; &:hover, &:focus { background-color: $brand-gray-04; } &:focus, &:active { @include gl-focus; } &:active { background-color: $brand-gray-03; } } } .header-logged-out-toggle { appearance: none; border: 0; background-color: transparent; border-radius: $border-radius-default; } .header-logged-out-dropdown { position: static; .dropdown-menu { position: absolute; width: 100%; min-width: 100%; } } .header-logged-out-nav-item { > button, > a { display: inline-block; padding: 6px 8px; height: 32px; border-radius: $border-radius-default; @include gl-text-gray-100; @include gl-font-weight-normal; @include gl-font-base; &:hover, &:focus, &:active { @include gl-text-white; } &:hover, &:focus { background-color: $brand-gray-04; text-decoration: none; } &:focus, &:active { @include gl-focus; } &:active { background-color: $brand-gray-03; } } }