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

fix(docs-infra): fix padding in sidenav and ensure all nav-items have equal height (#40427) 

This commit improves the padding nav-menus and nav-items in the sidenav.
It also ensures that all nav-items have the same height, regardless of
their level and of whether they have children or not.

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

PR Close #40427
This commit is contained in:
George Kalpakas 2021-02-02 14:35:42 +02:00 committed by Misko Hevery
parent e6bed90e6e
commit 6e42d67c38
1 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,17 +6,21 @@
aio-nav-menu { aio-nav-menu {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 260px; max-width: 268px;
@include font-size(13); @include font-size(13);
&:first-of-type {
margin-top: 16px;
}
&:last-of-type {
margin-bottom: 16px;
}
ul, a { ul, a {
margin: 0; margin: 0;
} }
&:first-child {
margin-top: 16px;
}
aio-nav-item div a { aio-nav-item div a {
padding-left: 6px; padding-left: 6px;
} }
@ -27,7 +31,6 @@ mat-sidenav.mat-sidenav.sidenav {
top: 64px; top: 64px;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: 0;
min-width: 260px; min-width: 260px;
background-color: $superlightgray; background-color: $superlightgray;
border-right: 1px solid $lightgray; border-right: 1px solid $lightgray;
@ -75,7 +78,7 @@ mat-sidenav-container div.mat-sidenav-content {
&:hover { &:hover {
background-color: $lightgray; background-color: $lightgray;
color: $blue; color: $blue;
text-shadow: 0 0 5px #ffffff; text-shadow: 0 0 5px $white;
} }
&:focus { &:focus {
@ -86,11 +89,6 @@ mat-sidenav-container div.mat-sidenav-content {
color: $darkblue; color: $darkblue;
} }
&.level-2 {
padding-top: 4px;
padding-bottom: 4px;
}
span { span {
padding-right: 32px; padding-right: 32px;
} }
@ -105,8 +103,6 @@ mat-sidenav-container div.mat-sidenav-content {
button.vertical-menu-item { button.vertical-menu-item {
border: none; border: none;
background-color: transparent; background-color: transparent;
padding-top: 10px;
padding-bottom: 10px;
margin: 0; margin: 0;
width: 100%; width: 100%;
} }