kopia lustrzana https://github.com/wagtail/wagtail
Detach nav colors from color-grey vars gives fine grained color control
rodzic
5356ff13c8
commit
0e1c6b953d
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
Ładowanie…
Reference in New Issue