/* * Application Header * */ header { transition: padding $sidebar-transition-duration; &.navbar-empty { height: $header-height; background: $white-light; border-bottom: 1px solid $white-normal; .center-logo { margin: 8px 0; text-align: center; .tanuki-logo, img { height: 36px; } } } &.navbar-gitlab { padding: 0 16px; z-index: 100; margin-bottom: 0; min-height: $header-height; background-color: $gray-light; border: none; border-bottom: 1px solid $border-color; @media (max-width: $screen-xs-min) { padding: 0 16px; } &.with-horizontal-nav { border-bottom: none; } .container-fluid { width: 100% !important; filter: none; padding: 0; .nav > li > a { color: $gl-text-color-secondary; font-size: 18px; padding: 0; margin: (($header-height - 28) / 2) 3px; margin-left: 8px; height: 28px; min-width: 32px; line-height: 28px; text-align: center; &.header-user-dropdown-toggle { margin-left: 14px; &:hover, &:focus, &:active { .header-user-avatar { border-color: rgba($avatar-border, .2); } } } &:hover, &:focus, &:active { background-color: $gray-light; color: $gl-text-color; svg { fill: $gl-text-color; } } .fa-caret-down { font-size: 14px; } svg { position: relative; top: 2px; height: 17px; // hack to get SVG to line up with FA icons width: 23px; fill: $gl-text-color-secondary; } } .navbar-toggle { color: $nav-toggle-gray; margin: 5px 0; border-radius: 0; right: -10px; padding: 6px 10px; &:hover { background-color: $white-normal; } &.active { color: $gl-text-color-secondary; } } } } .global-dropdown { position: absolute; left: -10px; .badge { font-size: 11px; } li { &.active a { font-weight: bold; } } } .global-dropdown-toggle { margin: 7px 0; font-size: 18px; padding: 6px 10px; border: none; background-color: $gray-light; &:hover { background-color: $white-normal; } &:focus { outline: none; background-color: $white-normal; } } .header-content { display: flex; justify-content: space-between; position: relative; min-height: $header-height; padding-left: 30px; .dropdown-menu { margin-top: -5px; } .header-logo { display: inline-block; margin: 0 12px 0 2px; position: relative; top: 10px; transition-duration: .3s; svg, img { height: 28px; } &:hover { cursor: pointer; } } .group-name-toggle { margin: 3px 5px; } .group-title { &.is-hidden { .hidable:not(:last-of-type) { display: none; } } } .title-container { display: flex; align-items: flex-start; flex: 1 1 auto; padding-top: 14px; overflow: hidden; } .title { position: relative; padding-right: 20px; margin: 0; font-size: 18px; line-height: 22px; display: inline-block; font-weight: normal; color: $gl-text-color; vertical-align: top; white-space: nowrap; &.wrap { white-space: normal; } &.initializing { opacity: 0; } a { color: $gl-text-color; &:hover { text-decoration: underline; color: $gl-header-nav-hover-color; } } .dropdown-toggle-caret { color: $gl-text-color; border: transparent; background: transparent; position: absolute; top: 2px; right: 3px; width: 12px; line-height: 19px; padding: 0; font-size: 10px; text-align: center; cursor: pointer; &:hover { color: $gl-header-nav-hover-color; } } .project-item-select { right: auto; left: 0; } } .navbar-collapse { flex: 0 0 auto; border-top: none; padding: 0; @media (max-width: $screen-xs-max) { flex: 1 1 auto; } } } .project-item-select-holder { display: inline; } .impersonation i { color: $red-500; } } .navbar-nav { li { .badge { position: inherit; top: -3px; font-weight: normal; margin-left: -12px; font-size: 11px; color: $white-light; padding: 1px 5px 2px; border-radius: 7px; box-shadow: 0 1px 0 rgba($gl-header-color, .2); &.issues-count { background-color: $green-500; } &.merge-requests-count { background-color: $orange-600; } &.todos-count { background-color: $blue-500; } } } } @media (max-width: $screen-xs-max) { header .container-fluid { font-size: 18px; .navbar-nav { display: table; table-layout: fixed; width: 100%; margin: 0; text-align: right; } .navbar-collapse { padding-left: 5px; .nav > li:not(.hidden-xs) { display: table-cell!important; width: 25%; a { margin-right: 8px; } } } } .header-user-dropdown-toggle { text-align: center; } .header-user-avatar { float: none; } } .header-user { .dropdown-menu-nav { width: auto; min-width: 140px; margin-top: -5px; .current-user { padding: 5px 18px; .user-name { display: block; } } } } .header-user-avatar { float: left; margin-right: 5px; border-radius: 50%; border: 1px solid $avatar-border; }