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,17 +13,8 @@ mat-toolbar.mat-toolbar {
   z-index: 10;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
 
-  mat-toolbar-row {
-    padding: 0 16px 0 0;
-  }
-
-  mat-icon {
-    color: $white;
-  }
-}
-
   // HOME PAGE OVERRIDE: TOPNAV TOOLBAR
-aio-shell.page-home mat-toolbar.mat-toolbar {
+  aio-shell.page-home & {
     background-color: $blue;
 
     @media (min-width: 481px) {
@@ -35,10 +26,10 @@ aio-shell.page-home mat-toolbar.mat-toolbar {
   }
 
   // MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
-aio-shell.page-home mat-toolbar.mat-toolbar,
+  aio-shell.page-home &,
-aio-shell.page-features mat-toolbar.mat-toolbar,
+  aio-shell.page-features &,
-aio-shell.page-events mat-toolbar.mat-toolbar,
+  aio-shell.page-events &,
-aio-shell.page-resources mat-toolbar.mat-toolbar {
+  aio-shell.page-resources & {
     box-shadow: none;
 
     // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
@@ -48,23 +39,66 @@ aio-shell.page-resources mat-toolbar.mat-toolbar {
   }
 
   // DOCS PAGES OVERRIDE: HAMBURGER
-aio-shell.folder-api mat-toolbar.mat-toolbar,
+  aio-shell.folder-api &,
-aio-shell.folder-cli mat-toolbar.mat-toolbar,
+  aio-shell.folder-cli &,
-aio-shell.folder-docs mat-toolbar.mat-toolbar,
+  aio-shell.folder-docs &,
-aio-shell.folder-guide mat-toolbar.mat-toolbar,
+  aio-shell.folder-guide &,
-aio-shell.folder-errors mat-toolbar.mat-toolbar,
+  aio-shell.folder-errors &,
-aio-shell.folder-start mat-toolbar.mat-toolbar,
+  aio-shell.folder-start &,
-aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
+  aio-shell.folder-tutorial & {
     @media (min-width: $showTopMenuWidth) {
-    .hamburger.mat-button {
+      .hamburger {
         // Hamburger shown on non-marketing pages even on large screens.
         margin: $hamburgerShownMargin;
       }
     }
   }
 
+  mat-toolbar-row {
+    padding: 0 16px 0 0;
+  }
+
+  mat-icon {
+    color: $white;
+  }
+
+  // EXTERNAL LINK ICONS
+  .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;
+      }
+    }
+  }
+}
+
 // 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;