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

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

It also makes similar changes to selectors in `_notification.scss` rules
that override top-menu styles (for consistency).

PR Close #40704

aio/src/styles/1-layouts/_top-menu.scss

@@ -5,7 +5,7 @@ $hamburgerShownMargin: 0 8px 0 0;
 $hamburgerHiddenMargin: 0 16px 0 -64px;
 
 // DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
-mat-toolbar.mat-toolbar {
+mat-toolbar.app-toolbar {
   position: fixed;
   top: 0;
   right: 0;
@@ -13,6 +13,47 @@ mat-toolbar.mat-toolbar {
   z-index: 10;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
 
+  // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
+  aio-shell.page-home & {
+    background-color: $blue;
+
+    @media (min-width: 481px) {
+      &:not(.transitioning) {
+        background-color: transparent;
+        transition: background-color 0.2s linear;
+      }
+    }
+  }
+
+  // MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
+  aio-shell.page-home &,
+  aio-shell.page-features &,
+  aio-shell.page-events &,
+  aio-shell.page-resources & {
+    box-shadow: none;
+
+    // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
+    @media (min-width: 481px) {
+      position: absolute;
+    }
+  }
+
+  // DOCS PAGES OVERRIDE: HAMBURGER
+  aio-shell.folder-api &,
+  aio-shell.folder-cli &,
+  aio-shell.folder-docs &,
+  aio-shell.folder-guide &,
+  aio-shell.folder-errors &,
+  aio-shell.folder-start &,
+  aio-shell.folder-tutorial & {
+    @media (min-width: $showTopMenuWidth) {
+      .hamburger {
+        // Hamburger shown on non-marketing pages even on large screens.
+        margin: $hamburgerShownMargin;
+      }
+    }
+  }
+
   mat-toolbar-row {
     padding: 0 16px 0 0;
   }
@@ -20,51 +61,44 @@ mat-toolbar.mat-toolbar {
   mat-icon {
     color: $white;
   }
-}
 
-// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
+  // EXTERNAL LINK ICONS
-aio-shell.page-home mat-toolbar.mat-toolbar {
+  .toolbar-external-icons-container {
-  background-color: $blue;
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
+    height: 100%;
 
-  @media (min-width: 481px) {
+    a {
-    &:not(.transitioning) {
+      display: flex;
-      background-color: transparent;
+      align-items: center;
-      transition: background-color 0.2s linear;
+      padding: 24px;
-    }
+      margin: 0 -16px;
-  }
-}
 
-// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
+      &:focus {
-aio-shell.page-home mat-toolbar.mat-toolbar,
+        // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-aio-shell.page-features mat-toolbar.mat-toolbar,
+        outline: 1px solid $focus-outline-ondark;
-aio-shell.page-events mat-toolbar.mat-toolbar,
+        outline-offset: -16px;
-aio-shell.page-resources mat-toolbar.mat-toolbar {
+      }
-  box-shadow: none;
 
-  // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
+      @media screen and (max-width: 480px) {
-  @media (min-width: 481px) {
+        margin: 0 0 0 8px;
-    position: absolute;
+        padding: 0;
-  }
+      }
-}
 
-// DOCS PAGES OVERRIDE: HAMBURGER
+      &:hover {
-aio-shell.folder-api mat-toolbar.mat-toolbar,
+        opacity: 0.8;
-aio-shell.folder-cli mat-toolbar.mat-toolbar,
+      }
-aio-shell.folder-docs mat-toolbar.mat-toolbar,
+
-aio-shell.folder-guide mat-toolbar.mat-toolbar,
+      img {
-aio-shell.folder-errors mat-toolbar.mat-toolbar,
+        height: 24px;
-aio-shell.folder-start mat-toolbar.mat-toolbar,
+      }
-aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
-  @media (min-width: $showTopMenuWidth) {
-    .hamburger.mat-button {
-      // Hamburger shown on non-marketing pages even on large screens.
-      margin: $hamburgerShownMargin;
     }
   }
 }
 
 // HAMBURGER BUTTON
-.hamburger.mat-button {
+.hamburger {
   height: 100%;
   margin: $hamburgerShownMargin;
   padding: 0;
@@ -239,39 +273,3 @@ aio-search-box.search-container {
     }
   }
 }
-
-// EXTERNAL LINK ICONS
-.app-toolbar {
-  .toolbar-external-icons-container {
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
-    height: 100%;
-
-    a {
-      display: flex;
-      align-items: center;
-      padding: 24px;
-      margin: 0 -16px;
-
-      &:focus {
-        // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
-        outline: 1px solid $focus-outline-ondark;
-        outline-offset: -16px;
-      }
-
-      @media screen and (max-width: 480px) {
-        margin: 0 0 0 8px;
-        padding: 0;
-      }
-
-      &:hover {
-        opacity: 0.8;
-      }
-
-      img {
-        height: 24px;
-      }
-    }
-  }
-}

aio/src/styles/2-modules/_notification.scss

@@ -1,7 +1,7 @@
 $notificationHeight: 56px;
 
 // we need to override some of the toolbar styling
-.mat-toolbar mat-toolbar-row.notification-container {
+.app-toolbar mat-toolbar-row.notification-container {
   padding: 0;
   height: auto;
   overflow: hidden;