Skip to content

G
gitlab-ce
Commit ac09bbdc authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray
Browse files
Options

Merge branch '34402-navigation-color-palette-for-new-navigation' into 'master' 

Resolve "Navigation - Color palette for new navigation"

Closes #34402

See merge request !12684
parents 69e17c22 f841faf9
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 73 deletions
app/assets/stylesheets/framework/variables.scss
View file @ ac09bbdc
...@@ -74,11 +74,17 @@ $red-700: #a62d19; ...@@ -74,11 +74,17 @@ $red-700: #a62d19;
$red-800: #8b2615; $red-800: #8b2615;
$red-900: #711e11; $red-900: #711e11;
$purple-600: #6e49cb; $indigo-50: #f7f7ff;
$purple-650: #5c35ae; $indigo-100: #ebebfa;
$purple-700: #4a2192; $indigo-200: #d1d1f0;
$purple-800: #2c0a5c; $indigo-300: #a6a6de;
$purple-900: #380d75; $indigo-400: #7c7ccc;
$indigo-500: #6666c4;
$indigo-600: #5b5bbd;
$indigo-700: #4b4ba3;
$indigo-800: #393982;
$indigo-900: #292961;
$indigo-950: #1a1a40;
$black: #000; $black: #000;
$black-transparent: rgba(0, 0, 0, 0.3); $black-transparent: rgba(0, 0, 0, 0.3);
......
app/assets/stylesheets/new_nav.scss
View file @ ac09bbdc
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
header.navbar-gitlab-new { header.navbar-gitlab-new {
color: $white-light; color: $white-light;
background-color: $purple-900; background: linear-gradient(to right, $indigo-900, $indigo-800);
border-bottom: 0; border-bottom: 0;
.header-content { .header-content {
...@@ -24,11 +24,9 @@ header.navbar-gitlab-new { ...@@ -24,11 +24,9 @@ header.navbar-gitlab-new {
> a { > a {
display: flex; display: flex;
align-items: center; align-items: center;
padding-top: 3px;
padding-right: $gl-padding; padding-right: $gl-padding;
padding-left: $gl-padding; padding-left: $gl-padding;
margin-left: -$gl-padding; margin-left: -$gl-padding;
border-bottom: 3px solid transparent;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
padding-right: $gl-padding; padding-right: $gl-padding;
...@@ -45,9 +43,8 @@ header.navbar-gitlab-new { ...@@ -45,9 +43,8 @@ header.navbar-gitlab-new {
&:hover, &:hover,
&:focus { &:focus {
color: currentColor; color: $tanuki-yellow;
text-decoration: none; text-decoration: none;
border-bottom-color: $white-light;
} }
} }
} }
...@@ -71,7 +68,7 @@ header.navbar-gitlab-new { ...@@ -71,7 +68,7 @@ header.navbar-gitlab-new {
.navbar-collapse { .navbar-collapse {
padding-left: 0; padding-left: 0;
color: $white-light; color: $indigo-200;
box-shadow: 0; box-shadow: 0;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
...@@ -101,7 +98,7 @@ header.navbar-gitlab-new { ...@@ -101,7 +98,7 @@ header.navbar-gitlab-new {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
color: currentColor; color: currentColor;
border-left: 1px solid lighten($purple-700, 10%); border-left: 1px solid lighten($indigo-700, 10%);
&:hover, &:hover,
&:focus, &:focus,
...@@ -120,6 +117,7 @@ header.navbar-gitlab-new { ...@@ -120,6 +117,7 @@ header.navbar-gitlab-new {
li { li {
.badge { .badge {
box-shadow: none; box-shadow: none;
font-weight: 600;
} }
} }
} }
...@@ -133,12 +131,11 @@ header.navbar-gitlab-new { ...@@ -133,12 +131,11 @@ header.navbar-gitlab-new {
> a { > a {
background: none; background: none;
opacity: .9; will-change: color;
will-change: opacity;
&.header-user-dropdown-toggle { &.header-user-dropdown-toggle {
.header-user-avatar { .header-user-avatar {
border-color: $white-light; border-color: $indigo-200;
} }
} }
...@@ -165,29 +162,34 @@ header.navbar-gitlab-new { ...@@ -165,29 +162,34 @@ header.navbar-gitlab-new {
.navbar-sub-nav { .navbar-sub-nav {
display: flex; display: flex;
margin-bottom: 0; margin-bottom: 0;
color: $white-light; color: $indigo-200;
> li { > li {
&.active > a, > a:hover,
a:hover, > a:focus {
a:focus { box-shadow: inset 0 -3px 0 rgba($indigo-200, .4);
border-bottom-color: $white-light;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
opacity: 1; color: $white-light;
}
&.active > a {
box-shadow: inset 0 -3px 0 $indigo-500;
color: $white-light;
font-weight: 700;
} }
> a { > a {
display: block; display: block;
padding: 16px 10px 13px; padding: 16px 10px;
font-size: 13px; font-size: 13px;
color: currentColor; color: currentColor;
border-bottom: 3px solid transparent; box-shadow: inset 0 0 0 transparent;
opacity: .9; will-change: box-shadow;
will-change: opacity; transition: box-shadow 0.15s;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
padding: 15px $gl-padding 12px; padding: 15px $gl-padding;
font-size: 14px; font-size: 14px;
} }
} }
...@@ -207,55 +209,60 @@ header.navbar-gitlab-new { ...@@ -207,55 +209,60 @@ header.navbar-gitlab-new {
.search { .search {
form { form {
border-color: $purple-800; border: 0;
background-color: rgba($indigo-200, .2);
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s;
&:hover { &:hover {
border-color: rgba($white-light, .6); background-color: rgba($indigo-200, .3);
box-shadow: none; box-shadow: none;
} }
} }
&.search-active form { &.search-active form {
border-color: $white-light; background-color: rgba($indigo-200, .3);
} box-shadow: none;
form,
.search-input {
background-color: $purple-700;
} }
.search-input { .search-input {
color: $white-light; color: $white-light;
background: none;
} }
.search-input::placeholder { .search-input::placeholder {
color: rgba($white-light, .6); color: rgba($indigo-200, .8);
} }
.location-badge { .location-badge {
font-size: 12px; font-size: 12px;
color: rgba($white-light, .6); color: $indigo-100;
background-color: $purple-800; background-color: rgba($indigo-200, .1);
transition: color 0.15s; transition: color 0.15s;
will-change: color; 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: 34px;
} }
.search-input-wrap { .search-input-wrap {
.search-icon, .search-icon,
.clear-icon { .clear-icon {
color: rgba($white-light, .6); color: rgba($indigo-200, .8);
} }
} }
&.search-active { &.search-active {
.location-badge { .location-badge {
color: $white-light; color: $white-light;
background-color: $purple-800; background-color: rgba($indigo-200, .2);
} }
.search-input-wrap { .search-input-wrap {
.search-icon { .search-icon {
color: rgba($white-light, .6); color: rgba($indigo-200, .8);
} }
.clear-icon { .clear-icon {
......
app/assets/stylesheets/new_sidebar.scss
View file @ ac09bbdc
...@@ -2,6 +2,15 @@ ...@@ -2,6 +2,15 @@
@import 'framework/tw_bootstrap_variables'; @import 'framework/tw_bootstrap_variables';
@import "bootstrap/variables"; @import "bootstrap/variables";
$active-background: rgba(0,0,0,.04);
$active-border: $indigo-500;
$active-color: $indigo-700;
$active-hover-background: $active-background;
$active-hover-color: $gl-text-color;
$inactive-badge-background: rgba(0,0,0,.08);
$hover-background: $indigo-700;
$hover-color: $white-light;
$inactive-color: $gl-text-color-secondary;
$new-sidebar-width: 220px; $new-sidebar-width: 220px;
.page-with-new-sidebar { .page-with-new-sidebar {
...@@ -17,19 +26,33 @@ $new-sidebar-width: 220px; ...@@ -17,19 +26,33 @@ $new-sidebar-width: 220px;
} }
.context-header { .context-header {
background-color: $gray-normal;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 14px; padding: 10px 16px 10px 10px;
color: $gl-text-color;
.avatar-container { .avatar-container {
flex: 0 0 40px; flex: 0 0 40px;
} }
&:hover { &:hover {
background-color: $border-color; background-color: $hover-background;
color: $hover-color;
border-color: $hover-background;
.avatar-container {
border-color: transparent;
}
.settings-avatar {
background-color: $indigo-500;
i {
color: $hover-color;
}
}
} }
.project-title, .project-title,
...@@ -41,6 +64,7 @@ $new-sidebar-width: 220px; ...@@ -41,6 +64,7 @@ $new-sidebar-width: 220px;
.settings-avatar { .settings-avatar {
background-color: $white-light; background-color: $white-light;
transition: background-color 100ms linear;
i { i {
font-size: 20px; font-size: 20px;
...@@ -48,6 +72,7 @@ $new-sidebar-width: 220px; ...@@ -48,6 +72,7 @@ $new-sidebar-width: 220px;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
text-align: center; text-align: center;
align-self: center; align-self: center;
transition: color 100ms linear;
} }
} }
...@@ -60,11 +85,15 @@ $new-sidebar-width: 220px; ...@@ -60,11 +85,15 @@ $new-sidebar-width: 220px;
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: auto; overflow: auto;
background-color: $gray-light; background-color: $gray-normal;
border-right: 1px solid $border-color; box-shadow: inset -2px 0 0 $border-color;
a {
text-decoration: none;
}
ul { ul {
padding: 0; padding-left: 0;
list-style: none; list-style: none;
} }
...@@ -73,13 +102,18 @@ $new-sidebar-width: 220px; ...@@ -73,13 +102,18 @@ $new-sidebar-width: 220px;
a { a {
display: block; display: block;
padding: 12px 14px; padding: 12px 16px;
color: $inactive-color;
} }
} }
a { li.active {
color: $gl-text-color; box-shadow: inset 4px 0 0 $active-border;
text-decoration: none;
> a {
color: $active-color;
font-weight: 700;
}
} }
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
...@@ -89,22 +123,28 @@ $new-sidebar-width: 220px; ...@@ -89,22 +123,28 @@ $new-sidebar-width: 220px;
.sidebar-sub-level-items { .sidebar-sub-level-items {
display: none; display: none;
padding-bottom: 8px;
> li { > li {
a { a {
padding: 12px 24px; font-size: 12px;
color: $gl-text-color-light; padding: 8px 16px 8px 24px;
&:hover { &:hover,
color: $gl-text-color; &:focus {
background-color: $border-color; background: $active-hover-background;
color: $active-hover-color;
} }
} }
&.active { &.active {
> a { a {
color: $purple-650; &,
font-weight: 600; &:hover,
&:focus {
background: $active-background;
color: $active-color;
}
} }
} }
} }
...@@ -114,35 +154,31 @@ $new-sidebar-width: 220px; ...@@ -114,35 +154,31 @@ $new-sidebar-width: 220px;
> li { > li {
.badge { .badge {
float: right; float: right;
background-color: $border-color; background-color: $inactive-badge-background;
color: $gl-text-color; color: $inactive-color;
} }
&.active { &.active {
> a { background: $active-background;
background-color: $purple-600;
color: $white-light;
font-weight: 600;
}
.badge { .badge {
background-color: $purple-700; color: $active-color;
color: $white-light; font-weight: 600;
} }
.sidebar-sub-level-items { .sidebar-sub-level-items {
background-color: $gray-normal;
border-left: 6px solid $purple-600;
display: block; display: block;
} }
} }
&:not(.active) > a:hover { > a:hover {
background-color: $border-color; background-color: $hover-background;
color: $hover-color;
.badge { .badge {
transition: background-color 100ms linear; transition: background-color 100ms linear, color 100ms linear;
background-color: $gray-normal; background-color: $indigo-500;
color: $hover-color;
} }
} }
} }
...@@ -161,3 +197,13 @@ $new-sidebar-width: 220px; ...@@ -161,3 +197,13 @@ $new-sidebar-width: 220px;
// scss-lint:enable DuplicateProperty // scss-lint:enable DuplicateProperty
} }
} }
// Change color of all horizontal tabs to match the new indigo color
.nav-links li.active a {
border-bottom-color: $active-border;
.badge {
font-weight: 600;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7