honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
aio/src/styles/1-layouts/_sidenav.scss
View File

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

2
aio/src/styles/_constants.scss
View File

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