From 013f7be0bc6da61e2f548bc145b70ecd4cebfa73 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 13 Feb 2021 16:01:56 +0200
Subject: [PATCH] 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
---
 aio/src/styles/2-modules/_notification.scss | 22 +++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/_notification.scss
index daef41c4fa..4e1fc91837 100644
--- a/aio/src/styles/2-modules/_notification.scss
+++ b/aio/src/styles/2-modules/_notification.scss
@@ -69,6 +69,14 @@ aio-notification {
 // Here are all the hacks to make the content and sidebars the right height
 // when the notification is visible
 .aio-notification-show {
+  .toc-container {
+    top: 76px + $notificationHeight;
+  }
+
+  .search-results {
+    padding-top: $notificationHeight;
+  }
+
   mat-sidenav-container.sidenav-container {
     .sidenav-content {
       padding-top: 80px + $notificationHeight;
@@ -83,17 +91,11 @@ aio-notification {
     }
   }
 
-  .toc-container {
-    top: 76px + $notificationHeight;
-  }
-
-  .search-results {
-    padding-top: $notificationHeight;
-  }
-
   &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute  {
-    .sidenav-content {
-      padding-top: $notificationHeight;
+    mat-sidenav-container.sidenav-container {
+      .sidenav-content {
+        padding-top: $notificationHeight;
+      }
     }
   }
 }