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

refactor(docs-infra): merge style rules in `_sidenav.scss` (#40704) 

This commit cleans up the styles in `_sidenav.scss` by merging
together blocks that target the same elements.

It also applies the equivalent changes in `_notification.scss` rules
that override sidenav styles.

PR Close #40704
This commit is contained in:
George Kalpakas 2021-02-05 12:48:56 +02:00 committed by Alex Rickabaugh
parent c8b30f4fd9
commit e043e52a4f
2 changed files with 52 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,21 +21,8 @@ aio-nav-menu {
} }
} }
mat-sidenav.mat-sidenav.sidenav {
position: fixed;
top: 64px;
bottom: 0;
left: 0;
min-width: 260px;
background-color: $superlightgray;
border-right: 1px solid $lightgray;
&.collapsed {
top: 56px;
}
}
mat-sidenav-container.sidenav-container { mat-sidenav-container.sidenav-container {
background-color: $white;
min-height: 100%; min-height: 100%;
height: auto !important; height: auto !important;
max-width: 100%; max-width: 100%;
@ -45,14 +32,44 @@ mat-sidenav-container.sidenav-container {
&.has-floating-toc { &.has-floating-toc {
max-width: 82%; max-width: 82%;
} }
}
mat-sidenav-container.sidenav-container.mat-drawer-container.mat-sidenav-container { .sidenav-content {
background-color: $white; height: auto;
} }
mat-sidenav-container div.mat-sidenav-content { mat-sidenav.sidenav {
height: auto; position: fixed;
top: 64px;
bottom: 0;
left: 0;
min-width: 260px;
background-color: $superlightgray;
border-right: 1px solid $lightgray;
&.collapsed {
top: 56px;
}
// Angular Version Selector
.doc-version {
padding: 8px;
border-top: 1px solid $lightgray;
select {
outline: none;
width: 100%;
background: rgba($lightgray, 0.5);
height: 32px;
border: 1px solid $lightgray;
color: $darkgray;
option {
font-family: $main-font;
@include font-size(14);
}
}
}
}
} }
.vertical-menu-item { .vertical-menu-item {
@ -120,12 +137,10 @@ button.vertical-menu-item {
transition: visibility 275ms, opacity 275ms, max-height 280ms; transition: visibility 275ms, opacity 275ms, max-height 280ms;
transition-timing-function: ease-out; transition-timing-function: ease-out;
} }
}
.no-animations { .no-animations &.expanded,
.heading-children.expanded, .no-animations &.collapsed {
.heading-children.collapsed { transition: none !important;
transition: none! important;
} }
} }
@ -173,23 +188,3 @@ button.vertical-menu-item {
@include rotate(90deg); @include rotate(90deg);
} }
} }
// Angular Version Selector
mat-sidenav .doc-version {
padding: 8px;
border-top: 1px solid $lightgray;
select {
outline: none;
width: 100%;
background: rgba($lightgray, 0.5);
height: 32px;
border: 1px solid $lightgray;
color: $darkgray;
option {
font-family: $main-font;
@include font-size(14);
}
}
}

21
aio/src/styles/2-modules/_notification.scss
View File

@ -69,15 +69,17 @@ aio-notification {
// Here are all the hacks to make the content and sidebars the right height // Here are all the hacks to make the content and sidebars the right height
// when the notification is visible // when the notification is visible
.aio-notification-show { .aio-notification-show {
.sidenav-content { mat-sidenav-container.sidenav-container {
padding-top: 80px + $notificationHeight; .sidenav-content {
} padding-top: 80px + $notificationHeight;
}
mat-sidenav.mat-sidenav.sidenav { mat-sidenav.sidenav {
top: 64px + $notificationHeight; top: 64px + $notificationHeight;
@media (max-width: 600px) { @media (max-width: 600px) {
top: 56px + $notificationHeight; top: 56px + $notificationHeight;
}
} }
} }
@ -90,7 +92,7 @@ aio-notification {
} }
&.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute { &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {
main { .sidenav-content {
padding-top: $notificationHeight; padding-top: $notificationHeight;
} }
} }
@ -104,7 +106,8 @@ aio-notification {
.sidenav-content { .sidenav-content {
transition: padding-top 250ms ease; transition: padding-top 250ms ease;
} }
mat-sidenav.mat-sidenav.sidenav, .toc-container {
mat-sidenav.sidenav, .toc-container {
transition: top 250ms ease; transition: top 250ms ease;
} }
} }