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

refactor(docs-infra): simplify the CSS rules for styling the "collapsed/expanded" sidenav icons (#40427) 

This commit simplifies the styling of the "collapsed/expanded" icons in
sidenav nav-items with children by consolidating the CSS rules in one
block (instead of having duplicate blocks for different levels).

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

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

@ -149,17 +149,6 @@ button.vertical-menu-item {
padding-left: 20px;
margin: 0;
transition: background-color 0.2s;
&.expanded .mat-icon,
.level-2.expanded .mat-icon {
@include rotate(90deg);
}
&:not(.expanded) .mat-icon,
.level-2:not(.expanded) .mat-icon {
@include rotate(0deg);
}
}
.level-2 {
@ -169,16 +158,6 @@ button.vertical-menu-item {
font-weight: 400;
margin: 0;
padding-left: 36px;
&.expanded .mat-icon,
.level-3.expanded .mat-icon {
@include rotate(90deg);
}
&:not(.expanded) .mat-icon,
.level-3:not(.expanded) .mat-icon {
@include rotate(0deg);
}
}
.level-3 {
@ -197,6 +176,16 @@ button.vertical-menu-item {
padding-left: 52px;
}
.level-1, .level-2, .level-3 {
&.collapsed > .mat-icon {
@include rotate(0deg);
}
&.expanded > .mat-icon {
@include rotate(90deg);
}
}
aio-nav-menu.top-menu {
padding: 24px 0 0;