Detach nav colors from color-grey vars gives fine grained color control

pull/4808/head
Coen van der Kamp 2018-09-26 10:29:36 +02:00 zatwierdzone przez Matt Westcott
rodzic 5356ff13c8
commit 0e1c6b953d
3 zmienionych plików z 19 dodań i 15 usunięć

Wyświetl plik

@ -1,5 +1,5 @@
$c-explorer-bg: #4c4e4d;
$c-explorer-bg-dark: $color-grey-1;
$c-explorer-bg-dark: $nav-grey-1;
$c-explorer-bg-active: rgba(0, 0, 0, 0.425);
$c-explorer-secondary: #a5a5a5;
$c-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);

Wyświetl plik

@ -25,9 +25,9 @@ $breakpoint-desktop-large: 75em; // 1200px
$breakpoint-desktop-larger: 100em; // 1600px
// colours
$color-teal: #43b1b0;
$color-teal-darker: darken($color-teal, 10);
$color-teal-dark: darken($color-teal, 22);
$color-teal: #007d7e;
$color-teal-darker: darken(adjust-hue($color-teal, 1), 3);
$color-teal-dark: darken(adjust-hue($color-teal, 1), 6);
$color-blue: #71b2d4;
$color-red: #cd3238;
@ -89,3 +89,12 @@ $mobile-nav-indent: 50px;
$nav-wrapper-inner-z-index: 26;
$draftail-editor-z-index: $nav-wrapper-inner-z-index + 1;
// Nav
$nav-grey-1: darken($color-white, 80);
$nav-grey-2: darken($color-white, 60);
$nav-item-hover-bg: rgba(100, 100, 100, 0.15);
$nav-item-active-bg: darken($color-white, 90);
$submenu-bg: darken($color-white, 85);
$footer-account: $nav-item-active-bg;
$footer-submenu: $submenu-bg;

Wyświetl plik

@ -1,8 +1,3 @@
$selected-highlight: darken($color-grey-1, 10%);
$submenu-color: darken($color-grey-1, 5%);
$footer-account: $selected-highlight;
$footer-submenu: $submenu-color;
.nav-wrapper {
position: relative;
margin-left: -$menu-width;
@ -11,10 +6,10 @@ $footer-submenu: $submenu-color;
display: flex;
flex-direction: column;
height: 100%;
background: $color-grey-1;
background: $nav-grey-1;
.inner {
background: $color-grey-1;
background: $nav-grey-1;
}
}
@ -62,7 +57,7 @@ $footer-submenu: $submenu-color;
&:hover,
&:focus {
outline: none;
background-color: rgba(100, 100, 100, 0.15);
background-color: $nav-item-hover-bg;
color: $color-white;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}
@ -92,7 +87,7 @@ $footer-submenu: $submenu-color;
}
.menu-active {
background: $selected-highlight;
background: $nav-item-active-bg;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
> a {
@ -136,7 +131,7 @@ $footer-submenu: $submenu-color;
}
.nav-submenu {
background: $submenu-color;
background: $submenu-bg;
h2 {
display: none;
@ -395,7 +390,7 @@ body.explorer-open {
}
li.submenu-active {
background: $submenu-color;
background: $submenu-bg;
> a {
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);