diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 0f60a071d53..5bd6c095109 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -98,6 +98,12 @@ header { font-size: 14px; } + .fa-chevron-down { + position: relative; + top: -3px; + font-size: 10px; + } + svg { position: relative; top: 2px; diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index 8d280cbe305..3c086ef15d1 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -5,6 +5,7 @@ header.navbar-gitlab-new { color: $gray-normal; background-color: $purple-900; + border-bottom: 0; .header-content { padding-left: 0; @@ -15,19 +16,37 @@ header.navbar-gitlab-new { } .title { - padding-top: 14px; - padding-right: 9px; + display: block; + height: 100%; + padding-right: 0; color: currentColor; - @media (min-width: $screen-sm-min) { - padding-right: $gl-padding; - } + > a { + display: flex; + align-items: center; + height: 100%; + padding-top: 3px; + padding-left: 9px; + padding-right: 9px; + margin-left: -9px; + border-bottom: 3px solid transparent; + + @media (min-width: $screen-sm-min) { + padding-right: $gl-padding; + padding-left: $gl-padding; + margin-left: -16px; + } + + svg { + margin-top: -3px; + margin-right: 10px; + } - a { &:hover, &:focus { color: currentColor; text-decoration: none; + border-bottom-color: $white-light; } } } @@ -52,6 +71,20 @@ header.navbar-gitlab-new { .navbar-collapse { padding-left: 0; color: $white-light; + + @media (max-width: $screen-xs-max) { + margin-left: -$gl-padding; + margin-right: -10px; + } + + .nav { + > li:not(.hidden-xs) a { + @media (max-width: $screen-xs-max) { + margin-left: 0; + min-width: 100%; + } + } + } } .container-fluid { @@ -76,6 +109,12 @@ header.navbar-gitlab-new { @media (max-width: $screen-xs-max) { padding-right: 10px; } + + li { + .badge { + box-shadow: none; + } + } } .nav > li > a { @@ -90,6 +129,12 @@ header.navbar-gitlab-new { > svg { fill: $white-light; } + + &.header-user-dropdown-toggle { + .header-user-avatar { + border: 0; + } + } } } } @@ -127,11 +172,14 @@ header.navbar-gitlab-new { } .dropdown-chevron { + position: relative; + top: -1px; font-size: 10px; } } -.header-user .dropdown-menu-nav { +.header-user .dropdown-menu-nav, +.header-new .dropdown-menu-nav { margin-top: 4px; } @@ -140,7 +188,8 @@ header.navbar-gitlab-new { border-color: $purple-800; &:hover { - border-color: rgba($white-light, .5); + border-color: rgba($white-light, .6); + box-shadow: none; } } @@ -158,7 +207,7 @@ header.navbar-gitlab-new { } .search-input::placeholder { - color: $white-light; + color: rgba($white-light, .6); } .location-badge { @@ -166,9 +215,19 @@ header.navbar-gitlab-new { background-color: $purple-900; } + .search-input-wrap { + .search-icon { + color: rgba($white-light, .6); + } + } + &.search-active { .search-input-wrap { - i { + .search-icon { + color: rgba($white-light, .6); + } + + .clear-icon { color: $white-light; } } diff --git a/app/views/layouts/header/_new.html.haml b/app/views/layouts/header/_new.html.haml index 7aa12657c03..c0833c64911 100644 --- a/app/views/layouts/header/_new.html.haml +++ b/app/views/layouts/header/_new.html.haml @@ -2,14 +2,12 @@ %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content .container-fluid .header-content - .header-logo - = link_to root_path, class: 'home', title: 'Dashboard', id: 'logo' do - = brand_header_logo - .title-container %h1.title = link_to root_path, title: 'Dashboard' do - GitLab + = brand_header_logo + %span.hidden-xs + GitLab - if current_user = render "layouts/nav/new_dashboard" @@ -58,7 +56,7 @@ %li.header-user.dropdown = link_to current_user, class: "header-user-dropdown-toggle", data: { toggle: "dropdown" } do = image_tag avatar_icon(current_user, 26), width: 26, height: 26, class: "header-user-avatar" - = icon('caret-down') + = icon('chevron-down') .dropdown-menu-nav.dropdown-menu-align-right %ul %li.current-user diff --git a/app/views/layouts/header/_new_dropdown.haml b/app/views/layouts/header/_new_dropdown.haml index c7302414386..b3213c12510 100644 --- a/app/views/layouts/header/_new_dropdown.haml +++ b/app/views/layouts/header/_new_dropdown.haml @@ -1,7 +1,11 @@ %li.header-new.dropdown = link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip", title: "New...", ref: 'tooltip', aria: { label: "New..." }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body' } do - = icon('plus fw') - = icon('caret-down') + - if show_new_nav? + = icon('plus') + = icon('chevron-down') + - else + = icon('plus fw') + = icon('caret-down') .dropdown-menu-nav.dropdown-menu-align-right %ul - if @group