fix(docs-infra): update the sidenav background to better distinguish from main content (#40427)

Previously, we used a box-shadow to indicate that the sidenav is
separate from the main content.

This commits updates the sidenav styling to remove the shadow and give
it a slightly different background color instead.

Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com>

PR Close #40427
This commit is contained in:
George Kalpakas 2021-02-02 14:35:41 +02:00 committed by Misko Hevery
parent cc8af03eec
commit 35cb39d75b
2 changed files with 5 additions and 6 deletions

View File

@ -29,8 +29,8 @@ mat-sidenav.mat-sidenav.sidenav {
left: 0;
padding: 0;
min-width: 260px;
background-color: $white;
box-shadow: 6px 0 6px rgba(0,0,0,0.10);
background-color: $superlightgray;
border-right: 1px solid $lightgray;
&.collapsed {
top: 56px;
@ -83,7 +83,7 @@ mat-sidenav-container div.mat-sidenav-content {
}
&.selected {
color: $blue;
color: $darkblue;
}
&.level-2 {
@ -168,7 +168,6 @@ button.vertical-menu-item {
}
.level-2 {
color: $mediumgray;
font-family: $main-font;
@include font-size(14);
font-weight: 400;
@ -188,7 +187,6 @@ button.vertical-menu-item {
}
.level-3 {
color: $mediumgray;
font-family: $main-font;
@include font-size(14);
margin: 0;
@ -197,7 +195,6 @@ button.vertical-menu-item {
}
.level-4 {
color: $mediumgray;
font-family: $main-font;
@include font-size(14);
margin: 0;

View File

@ -11,12 +11,14 @@ $layer-5: 5;
// COLOR PALETTE
$blue: #1976D2;
$darkblue: #1669bb;
$accentblue: #1E88E5;
$brightred: #DD0031;
$darkred: #C3002F;
$white: #FFFFFF;
$offwhite: #FAFAFA;
$backgroundgray: #F1F1F1;
$superlightgray: #F2F2F2;
$lightgray: #DBDBDB;
$lightboxgray: #EBEBEB;
$mist: #ECEFF1;