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
Show 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;
$red-800: #8b2615;
$red-900: #711e11;
$purple-600: #6e49cb;
$purple-650: #5c35ae;
$purple-700: #4a2192;
$purple-800: #2c0a5c;
$purple-900: #380d75;
$indigo-50: #f7f7ff;
$indigo-100: #ebebfa;
$indigo-200: #d1d1f0;
$indigo-300: #a6a6de;
$indigo-400: #7c7ccc;
$indigo-500: #6666c4;
$indigo-600: #5b5bbd;
$indigo-700: #4b4ba3;
$indigo-800: #393982;
$indigo-900: #292961;
$indigo-950: #1a1a40;
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);
......
app/assets/stylesheets/new_nav.scss
View file @ ac09bbdc
......@@ -4,7 +4,7 @@
header.navbar-gitlab-new {
color: $white-light;
background-color: $purple-900;
background: linear-gradient(to right, $indigo-900, $indigo-800);
border-bottom: 0;
.header-content {
......@@ -24,11 +24,9 @@ header.navbar-gitlab-new {
> a {
display: flex;
align-items: center;
padding-top: 3px;
padding-right: $gl-padding;
padding-left: $gl-padding;
margin-left: -$gl-padding;
border-bottom: 3px solid transparent;
@media (min-width: $screen-sm-min) {
padding-right: $gl-padding;
......@@ -45,9 +43,8 @@ header.navbar-gitlab-new {
&:hover,
&:focus {
color: currentColor;
color: $tanuki-yellow;
text-decoration: none;
border-bottom-color: $white-light;
}
}
}
......@@ -71,7 +68,7 @@ header.navbar-gitlab-new {
.navbar-collapse {
padding-left: 0;
color: $white-light;
color: $indigo-200;
box-shadow: 0;
@media (max-width: $screen-xs-max) {
......@@ -101,7 +98,7 @@ header.navbar-gitlab-new {
font-size: 14px;
text-align: center;
color: currentColor;
border-left: 1px solid lighten($purple-700, 10%);
border-left: 1px solid lighten($indigo-700, 10%);
&:hover,
&:focus,
......@@ -120,6 +117,7 @@ header.navbar-gitlab-new {
li {
.badge {
box-shadow: none;
font-weight: 600;
}
}
}
......@@ -133,12 +131,11 @@ header.navbar-gitlab-new {
> a {
background: none;
opacity: .9;
will-change: opacity;
will-change: color;
&.header-user-dropdown-toggle {
.header-user-avatar {
border-color: $white-light;
border-color: $indigo-200;
}
}
......@@ -165,29 +162,34 @@ header.navbar-gitlab-new {
.navbar-sub-nav {
display: flex;
margin-bottom: 0;
color: $white-light;
color: $indigo-200;
> li {
&.active > a,
a:hover,
a:focus {
border-bottom-color: $white-light;
> a:hover,
> a:focus {
box-shadow: inset 0 -3px 0 rgba($indigo-200, .4);
text-decoration: none;
outline: 0;
opacity: 1;
color: $white-light;
}
&.active > a {
box-shadow: inset 0 -3px 0 $indigo-500;
color: $white-light;
font-weight: 700;
}
> a {
display: block;
padding: 16px 10px 13px;
padding: 16px 10px;
font-size: 13px;
color: currentColor;
border-bottom: 3px solid transparent;
opacity: .9;
will-change: opacity;
box-shadow: inset 0 0 0 transparent;
will-change: box-shadow;
transition: box-shadow 0.15s;
@media (min-width: $screen-sm-min) {
padding: 15px $gl-padding 12px;
padding: 15px $gl-padding;
font-size: 14px;
}
}
......@@ -207,55 +209,60 @@ header.navbar-gitlab-new {
.search {
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 {
border-color: rgba($white-light, .6);
background-color: rgba($indigo-200, .3);
box-shadow: none;
}
}
&.search-active form {
border-color: $white-light;
}
form,
.search-input {
background-color: $purple-700;
background-color: rgba($indigo-200, .3);
box-shadow: none;
}
.search-input {
color: $white-light;
background: none;
}
.search-input::placeholder {
color: rgba($white-light, .6);
color: rgba($indigo-200, .8);
}
.location-badge {
font-size: 12px;
color: rgba($white-light, .6);
background-color: $purple-800;
color: $indigo-100;
background-color: rgba($indigo-200, .1);
transition: color 0.15s;
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-icon,
.clear-icon {
color: rgba($white-light, .6);
color: rgba($indigo-200, .8);
}
}
&.search-active {
.location-badge {
color: $white-light;
background-color: $purple-800;
background-color: rgba($indigo-200, .2);
}
.search-input-wrap {
.search-icon {
color: rgba($white-light, .6);
color: rgba($indigo-200, .8);
}
.clear-icon {
......
app/assets/stylesheets/new_sidebar.scss
View file @ ac09bbdc
......@@ -2,6 +2,15 @@
@import 'framework/tw_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;
.page-with-new-sidebar {
......@@ -17,19 +26,33 @@ $new-sidebar-width: 220px;
}
.context-header {
background-color: $gray-normal;
border-bottom: 1px solid $border-color;
font-weight: 600;
display: flex;
align-items: center;
padding: 10px 14px;
padding: 10px 16px 10px 10px;
color: $gl-text-color;
.avatar-container {
flex: 0 0 40px;
}
&: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,
......@@ -41,6 +64,7 @@ $new-sidebar-width: 220px;
.settings-avatar {
background-color: $white-light;
transition: background-color 100ms linear;
i {
font-size: 20px;
......@@ -48,6 +72,7 @@ $new-sidebar-width: 220px;
color: $gl-text-color-secondary;
text-align: center;
align-self: center;
transition: color 100ms linear;
}
}
......@@ -60,11 +85,15 @@ $new-sidebar-width: 220px;
bottom: 0;
left: 0;
overflow: auto;
background-color: $gray-light;
border-right: 1px solid $border-color;
background-color: $gray-normal;
box-shadow: inset -2px 0 0 $border-color;
a {
text-decoration: none;
}
ul {
padding: 0;
padding-left: 0;
list-style: none;
}
......@@ -73,13 +102,18 @@ $new-sidebar-width: 220px;
a {
display: block;
padding: 12px 14px;
padding: 12px 16px;
color: $inactive-color;
}
}
a {
color: $gl-text-color;
text-decoration: none;
li.active {
box-shadow: inset 4px 0 0 $active-border;
> a {
color: $active-color;
font-weight: 700;
}
}
@media (max-width: $screen-xs-max) {
......@@ -89,22 +123,28 @@ $new-sidebar-width: 220px;
.sidebar-sub-level-items {
display: none;
padding-bottom: 8px;
> li {
a {
padding: 12px 24px;
color: $gl-text-color-light;
font-size: 12px;
padding: 8px 16px 8px 24px;
&:hover {
color: $gl-text-color;
background-color: $border-color;
&:hover,
&:focus {
background: $active-hover-background;
color: $active-hover-color;
}
}
&.active {
> a {
color: $purple-650;
font-weight: 600;
a {
&,
&:hover,
&:focus {
background: $active-background;
color: $active-color;
}
}
}
}
......@@ -114,35 +154,31 @@ $new-sidebar-width: 220px;
> li {
.badge {
float: right;
background-color: $border-color;
color: $gl-text-color;
background-color: $inactive-badge-background;
color: $inactive-color;
}
&.active {
> a {
background-color: $purple-600;
color: $white-light;
font-weight: 600;
}
background: $active-background;
.badge {
background-color: $purple-700;
color: $white-light;
color: $active-color;
font-weight: 600;
}
.sidebar-sub-level-items {
background-color: $gray-normal;
border-left: 6px solid $purple-600;
display: block;
}
}
&:not(.active) > a:hover {
background-color: $border-color;
> a:hover {
background-color: $hover-background;
color: $hover-color;
.badge {
transition: background-color 100ms linear;
background-color: $gray-normal;
transition: background-color 100ms linear, color 100ms linear;
background-color: $indigo-500;
color: $hover-color;
}
}
}
......@@ -161,3 +197,13 @@ $new-sidebar-width: 220px;
// 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