diff options
Diffstat (limited to 'app/assets/stylesheets/new_nav.scss')
-rw-r--r-- | app/assets/stylesheets/new_nav.scss | 119 |
1 files changed, 89 insertions, 30 deletions
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index 8e095cbdd7e..2b6c0fc015c 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -9,20 +9,10 @@ header.navbar-gitlab-new { color: $white-light; + background: linear-gradient(to right, $indigo-900, $indigo-800); border-bottom: 0; min-height: $new-navbar-height; - .logo-text { - line-height: initial; - - svg { - width: 55px; - height: 14px; - margin: 0; - fill: $white-light; - } - } - .header-content { display: -webkit-flex; display: flex; @@ -48,10 +38,10 @@ header.navbar-gitlab-new { img { height: 28px; - margin-right: 8px; + margin-right: 10px; } - a { + > a { display: -webkit-flex; display: flex; align-items: center; @@ -64,6 +54,22 @@ header.navbar-gitlab-new { margin-right: 8px; } } + + .logo-text { + line-height: initial; + + svg { + width: 55px; + height: 14px; + margin: 0; + fill: $white-light; + } + } + + &:hover, + &:focus { + background-color: rgba($indigo-200, .2); + } } } @@ -100,6 +106,7 @@ header.navbar-gitlab-new { .navbar-collapse { padding-left: 0; + color: $indigo-200; box-shadow: 0; @media (max-width: $screen-xs-max) { @@ -125,6 +132,7 @@ header.navbar-gitlab-new { font-size: 14px; text-align: center; color: currentColor; + border-left: 1px solid lighten($indigo-700, 10%); &:hover, &:focus, @@ -159,41 +167,51 @@ header.navbar-gitlab-new { will-change: color; margin: 4px 2px; padding: 6px 8px; + color: $indigo-200; height: 32px; @media (max-width: $screen-xs-max) { padding: 0; } + svg { + fill: $indigo-200; + } + &.header-user-dropdown-toggle { margin-left: 2px; .header-user-avatar { + border-color: $indigo-200; margin-right: 0; } } + } - &:hover, - &:focus { - text-decoration: none; - outline: 0; - opacity: 1; - color: $white-light; + .header-new-dropdown-toggle { + margin-right: 0; + } - svg { - fill: currentColor; - } + > a:hover, + > a:focus { + text-decoration: none; + outline: 0; + opacity: 1; + color: $white-light; - &.header-user-dropdown-toggle { - .header-user-avatar { - border-color: $white-light; - } - } + @media (min-width: $screen-sm-min) { + background-color: rgba($indigo-200, .2); } - } - .header-new-dropdown-toggle { - margin-right: 0; + svg { + fill: currentColor; + } + + &.header-user-dropdown-toggle { + .header-user-avatar { + border-color: $white-light; + } + } } .impersonated-user, @@ -202,6 +220,10 @@ header.navbar-gitlab-new { background-color: $white-light; border-top-right-radius: 0; border-bottom-right-radius: 0; + + svg { + fill: $indigo-900; + } } .impersonation-btn, @@ -219,6 +241,8 @@ header.navbar-gitlab-new { &.active > a, &.dropdown.open > a { + color: $indigo-900; + background-color: $white-light; svg { fill: currentColor; @@ -232,6 +256,7 @@ header.navbar-gitlab-new { display: -webkit-flex; display: flex; margin: 0 0 0 6px; + color: $indigo-200; .dropdown-chevron { position: relative; @@ -249,6 +274,17 @@ header.navbar-gitlab-new { text-decoration: none; outline: 0; color: $white-light; + background-color: rgba($indigo-200, .2); + + svg { + fill: currentColor; + } + } + + &.active > a, + &.dropdown.open > a { + color: $indigo-900; + background-color: $white-light; svg { fill: currentColor; @@ -273,6 +309,7 @@ header.navbar-gitlab-new { } &.line-separator { + border-left: 1px solid rgba($indigo-200, .2); margin: 8px; } } @@ -302,14 +339,17 @@ header.navbar-gitlab-new { height: 32px; border: 0; border-radius: $border-radius-default; + background-color: rgba($indigo-200, .2); transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s; &:hover { + background-color: rgba($indigo-200, .3); box-shadow: none; } } &.search-active form { + background-color: $white-light; box-shadow: none; .search-input { @@ -337,26 +377,43 @@ header.navbar-gitlab-new { } .search-input::placeholder { + color: rgba($indigo-200, .8); transition: color ease-in-out 0.15s; } .location-badge { font-size: 12px; + color: $indigo-100; + background-color: rgba($indigo-200, .1); + will-change: color; margin: -4px 4px -4px -4px; line-height: 25px; padding: 4px 8px; border-radius: 2px 0 0 2px; + border-right: 1px solid $indigo-800; height: 32px; transition: border-color ease-in-out 0.15s; } + .search-input-wrap { + .search-icon, + .clear-icon { + color: rgba($indigo-200, .8); + } + } + &.search-active { .location-badge { + color: $gl-text-color; background-color: $nav-badge-bg; border-color: $border-color; } .search-input-wrap { + .search-icon { + color: rgba($indigo-200, .8); + } + .clear-icon { color: $white-light; } @@ -460,6 +517,8 @@ header.navbar-gitlab-new { .btn-sign-in { margin-top: 3px; + background-color: $indigo-100; + color: $indigo-900; font-weight: $gl-font-weight-bold; &:hover { |