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

fix(docs-infra): fix top padding of main content when a notification is visible (#40802) 

This commit fixes the top padding of the main content on the homepage
and other pages when a notification is visible at the top of the page.
The problem was particularly obvious on the homepage (see images below).

Before: ![homepage top-right before][1]
After: ![homepage top-right after][2]

[1]: https://user-images.githubusercontent.com/8604205/107394349-74e2e480-6b04-11eb-8853-71a153cdc459.png
[2]: https://user-images.githubusercontent.com/8604205/107394336-71e7f400-6b04-11eb-9ef0-ff82f6f27875.png

PR Close #40802
This commit is contained in:
George Kalpakas 2021-02-13 16:01:56 +02:00 committed by Joey Perrott
parent fae0f1f213
commit 013f7be0bc
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,6 +69,14 @@ 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 {
.toc-container {
top: 76px + $notificationHeight;
}
.search-results {
padding-top: $notificationHeight;
}
mat-sidenav-container.sidenav-container { mat-sidenav-container.sidenav-container {
.sidenav-content { .sidenav-content {
padding-top: 80px + $notificationHeight; padding-top: 80px + $notificationHeight;
@ -83,20 +91,14 @@ aio-notification {
} }
} }
.toc-container {
top: 76px + $notificationHeight;
}
.search-results {
padding-top: $notificationHeight;
}
&.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute { &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {
mat-sidenav-container.sidenav-container {
.sidenav-content { .sidenav-content {
padding-top: $notificationHeight; padding-top: $notificationHeight;
} }
} }
} }
}
// Animate the content when the notification bar is dismissed // Animate the content when the notification bar is dismissed
// this should be kept in sync with the animation durations in // this should be kept in sync with the animation durations in