Commit 164dbc6b authored by Annabel Gray's avatar Annabel Gray Committed by Phil Hughes

Resolve "Introduce new navigation themes in GitLab 11.0"

parent ce001db9
...@@ -3,26 +3,26 @@ ...@@ -3,26 +3,26 @@
*/ */
@mixin gitlab-theme( @mixin gitlab-theme(
$color-100, $location-badge-color,
$color-200, $search-and-nav-links,
$color-500, $active-tab-border,
$color-700, $border-and-box-shadow,
$color-800, $sidebar-text,
$color-900, $nav-svg-color,
$color-alternate $color-alternate
) { ) {
// Header // Header
.navbar-gitlab { .navbar-gitlab {
background-color: $color-900; background-color: $nav-svg-color;
.navbar-collapse { .navbar-collapse {
color: $color-200; color: $search-and-nav-links;
} }
.container-fluid { .container-fluid {
.navbar-toggler { .navbar-toggler {
border-left: 1px solid lighten($color-700, 10%); border-left: 1px solid lighten($border-and-box-shadow, 10%);
} }
} }
...@@ -31,40 +31,40 @@ ...@@ -31,40 +31,40 @@
> li { > li {
> a:hover, > a:hover,
> a:focus { > a:focus {
background-color: rgba($color-200, 0.2); background-color: rgba($search-and-nav-links, 0.2);
} }
&.active > a, &.active > a,
&.dropdown.show > a { &.dropdown.show > a {
color: $color-900; color: $nav-svg-color;
background-color: $color-alternate; background-color: $color-alternate;
} }
&.line-separator { &.line-separator {
border-left: 1px solid rgba($color-200, 0.2); border-left: 1px solid rgba($search-and-nav-links, 0.2);
} }
} }
} }
.navbar-sub-nav { .navbar-sub-nav {
color: $color-200; color: $search-and-nav-links;
} }
.nav { .nav {
> li { > li {
color: $color-200; color: $search-and-nav-links;
> a { > a {
&.header-user-dropdown-toggle { &.header-user-dropdown-toggle {
.header-user-avatar { .header-user-avatar {
border-color: $color-200; border-color: $search-and-nav-links;
} }
} }
&:hover, &:hover,
&:focus { &:focus {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
background-color: rgba($color-200, 0.2); background-color: rgba($search-and-nav-links, 0.2);
} }
svg { svg {
...@@ -75,12 +75,12 @@ ...@@ -75,12 +75,12 @@
&.active > a, &.active > a,
&.dropdown.show > a { &.dropdown.show > a {
color: $color-900; color: $nav-svg-color;
background-color: $color-alternate; background-color: $color-alternate;
&:hover { &:hover {
svg { svg {
fill: $color-900; fill: $nav-svg-color;
} }
} }
} }
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
.impersonated-user, .impersonated-user,
.impersonated-user:hover { .impersonated-user:hover {
svg { svg {
fill: $color-900; fill: $nav-svg-color;
} }
} }
} }
...@@ -99,34 +99,34 @@ ...@@ -99,34 +99,34 @@
> a { > a {
&:hover, &:hover,
&:focus { &:focus {
background-color: rgba($color-200, 0.2); background-color: rgba($search-and-nav-links, 0.2);
} }
} }
} }
.search { .search {
form { form {
background-color: rgba($color-200, 0.2); background-color: rgba($search-and-nav-links, 0.2);
&:hover { &:hover {
background-color: rgba($color-200, 0.3); background-color: rgba($search-and-nav-links, 0.3);
} }
} }
.location-badge { .location-badge {
color: $color-100; color: $location-badge-color;
background-color: rgba($color-200, 0.1); background-color: rgba($search-and-nav-links, 0.1);
border-right: 1px solid $color-800; border-right: 1px solid $sidebar-text;
} }
.search-input::placeholder { .search-input::placeholder {
color: rgba($color-200, 0.8); color: rgba($search-and-nav-links, 0.8);
} }
.search-input-wrap { .search-input-wrap {
.search-icon, .search-icon,
.clear-icon { .clear-icon {
fill: rgba($color-200, 0.8); fill: rgba($search-and-nav-links, 0.8);
} }
} }
...@@ -141,38 +141,34 @@ ...@@ -141,38 +141,34 @@
.search-input-wrap { .search-input-wrap {
.search-icon { .search-icon {
fill: rgba($color-200, 0.8); fill: rgba($search-and-nav-links, 0.8);
} }
} }
} }
} }
.btn-sign-in {
background-color: $color-100;
color: $color-900;
}
// Sidebar // Sidebar
.nav-sidebar li.active { .nav-sidebar li.active {
box-shadow: inset 4px 0 0 $color-700; box-shadow: inset 4px 0 0 $border-and-box-shadow;
> a { > a {
color: $color-800; color: $sidebar-text;
} }
svg { svg {
fill: $color-800; fill: $sidebar-text;
} }
} }
.sidebar-top-level-items > li.active .badge.badge-pill { .sidebar-top-level-items > li.active .badge.badge-pill {
color: $color-800; color: $sidebar-text;
} }
.nav-links li { .nav-links li {
&.active a, &.active a,
a.active { a.active {
border-bottom: 2px solid $color-500; border-bottom: 2px solid $active-tab-border;
.badge.badge-pill { .badge.badge-pill {
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
...@@ -181,27 +177,27 @@ ...@@ -181,27 +177,27 @@
} }
.branch-header-title { .branch-header-title {
color: $color-700; color: $border-and-box-shadow;
} }
.ide-file-list .file.file-active { .ide-file-list .file.file-active {
color: $color-700; color: $border-and-box-shadow;
} }
.ide-sidebar-link { .ide-sidebar-link {
&.active { &.active {
color: $color-700; color: $border-and-box-shadow;
box-shadow: inset 3px 0 $color-700; box-shadow: inset 3px 0 $border-and-box-shadow;
&.is-right { &.is-right {
box-shadow: inset -3px 0 $color-700; box-shadow: inset -3px 0 $border-and-box-shadow;
} }
} }
} }
} }
body { body {
&.ui_indigo { &.ui-indigo {
@include gitlab-theme( @include gitlab-theme(
$indigo-100, $indigo-100,
$indigo-200, $indigo-200,
...@@ -213,19 +209,19 @@ body { ...@@ -213,19 +209,19 @@ body {
); );
} }
&.ui_dark { &.ui-light-indigo {
@include gitlab-theme( @include gitlab-theme(
$theme-gray-100, $indigo-100,
$theme-gray-200, $indigo-200,
$theme-gray-500, $indigo-500,
$theme-gray-700, $indigo-500,
$theme-gray-800, $indigo-700,
$theme-gray-900, $indigo-700,
$white-light $white-light
); );
} }
&.ui_blue { &.ui-blue {
@include gitlab-theme( @include gitlab-theme(
$theme-blue-100, $theme-blue-100,
$theme-blue-200, $theme-blue-200,
...@@ -237,7 +233,19 @@ body { ...@@ -237,7 +233,19 @@ body {
); );
} }
&.ui_green { &.ui-light-blue {
@include gitlab-theme(
$theme-light-blue-100,
$theme-light-blue-200,
$theme-light-blue-500,
$theme-light-blue-500,
$theme-light-blue-700,
$theme-light-blue-700,
$white-light
);
}
&.ui-green {
@include gitlab-theme( @include gitlab-theme(
$theme-green-100, $theme-green-100,
$theme-green-200, $theme-green-200,
...@@ -249,7 +257,55 @@ body { ...@@ -249,7 +257,55 @@ body {
); );
} }
&.ui_light { &.ui-light-green {
@include gitlab-theme(
$theme-green-100,
$theme-green-200,
$theme-green-500,
$theme-green-500,
$theme-light-green-700,
$theme-light-green-700,
$white-light
);
}
&.ui-red {
@include gitlab-theme(
$theme-red-100,
$theme-red-200,
$theme-red-500,
$theme-red-700,
$theme-red-800,
$theme-red-900,
$white-light
);
}
&.ui-light-red {
@include gitlab-theme(
$theme-light-red-100,
$theme-light-red-200,
$theme-light-red-500,
$theme-light-red-500,
$theme-light-red-700,
$theme-light-red-700,
$white-light
);
}
&.ui-dark {
@include gitlab-theme(
$theme-gray-100,
$theme-gray-200,
$theme-gray-500,
$theme-gray-700,
$theme-gray-800,
$theme-gray-900,
$white-light
);
}
&.ui-light {
@include gitlab-theme( @include gitlab-theme(
$theme-gray-900, $theme-gray-900,
$theme-gray-700, $theme-gray-700,
......
...@@ -437,6 +437,8 @@ ...@@ -437,6 +437,8 @@
} }
.btn-sign-in { .btn-sign-in {
background-color: $indigo-100;
color: $indigo-900;
margin-top: 3px; margin-top: 3px;
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
......
...@@ -117,6 +117,15 @@ $theme-blue-800: #25496e; ...@@ -117,6 +117,15 @@ $theme-blue-800: #25496e;
$theme-blue-900: #1a3652; $theme-blue-900: #1a3652;
$theme-blue-950: #0f2235; $theme-blue-950: #0f2235;
$theme-light-blue-50: #f2f7fc;
$theme-light-blue-100: #ebf1f7;
$theme-light-blue-200: #c9dcf2;
$theme-light-blue-300: #83abd4;
$theme-light-blue-400: #4d86bf;
$theme-light-blue-500: #367cc2;
$theme-light-blue-600: #3771ab;
$theme-light-blue-700: #2261a1;
$theme-green-50: #f2faf6; $theme-green-50: #f2faf6;
$theme-green-100: #e4f3ea; $theme-green-100: #e4f3ea;
$theme-green-200: #c0dfcd; $theme-green-200: #c0dfcd;
...@@ -129,6 +138,29 @@ $theme-green-800: #145d33; ...@@ -129,6 +138,29 @@ $theme-green-800: #145d33;
$theme-green-900: #0d4524; $theme-green-900: #0d4524;
$theme-green-950: #072d16; $theme-green-950: #072d16;
$theme-light-green-700: #156b39;
$theme-red-50: #fcf4f2;
$theme-red-100: #fae9e6;
$theme-red-200: #ebcac5;
$theme-red-300: #d99b91;
$theme-red-400: #b0655a;
$theme-red-500: #ad4a3b;
$theme-red-600: #9e4133;
$theme-red-700: #912f20;
$theme-red-800: #78291d;
$theme-red-900: #691a16;
$theme-red-950: #36140f;
$theme-light-red-50: #fff6f5;
$theme-light-red-100: #fae2de;
$theme-light-red-200: #f7d5d0;
$theme-light-red-300: #d9796a;
$theme-light-red-400: #cf604e;
$theme-light-red-500: #c24b38;
$theme-light-red-600: #b03927;
$theme-light-red-700: #a62e21;
$black: #000; $black: #000;
$black-transparent: rgba(0, 0, 0, 0.3); $black-transparent: rgba(0, 0, 0, 0.3);
$almost-black: #242424; $almost-black: #242424;
......
@mixin application-theme-preview($color-1, $color-2, $color-3, $color-4) {
.one {
background-color: $color-1;
border-top-left-radius: $border-radius-default;
}
.two {
background-color: $color-2;
border-top-right-radius: $border-radius-default;
}
.three {
background-color: $color-3;
border-bottom-left-radius: $border-radius-default;
}
.four {
background-color: $color-4;
border-bottom-right-radius: $border-radius-default;
}
}
.multi-file-editor-options { .multi-file-editor-options {
label { label {
margin-right: 20px; margin-right: 20px;
...@@ -38,44 +16,61 @@ ...@@ -38,44 +16,61 @@
.application-theme { .application-theme {
label { label {
margin-right: 20px; margin: 0 $gl-padding $gl-padding 0;
text-align: center; text-align: center;
} }
.preview { .preview {
font-size: 0; font-size: 0;
margin-bottom: 10px; height: 48px;
border-radius: 4px;
min-width: 135px;
margin-bottom: $gl-padding-8;
&.ui-indigo {
background-color: $indigo-900;
}
&.ui-light-indigo {
background-color: $indigo-700;
}
&.indigo { &.ui-blue {
@include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500); background-color: $theme-blue-900;
} }
&.dark { &.ui-light-blue {
@include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600); background-color: $theme-light-blue-700;
} }
&.light { &.ui-green {
@include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100); background-color: $theme-green-900;
} }
&.blue { &.ui-light-green {
@include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500); background-color: $theme-light-green-700;
} }
&.green { &.ui-red {
@include application-theme-preview($theme-green-900,