fix(aio): topnav toolbar position styles

- Fixed topnav on all mobile
- Fixed topnav on all docs pages
- Absolute topnav on all marketing pages
- Cleanup and code consolidation for all top-menu styles
- Add styling to topnav links on focus

aio/src/app/app.component.html

@@ -12,7 +12,6 @@
   <a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
   <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
   <aio-search-box class="search-container" #searchBox (search)="doSearch($event)"></aio-search-box>
-  <span class="fill-remaining-space"></span>
 </md-toolbar>
 <aio-search-results #searchResults *ngIf="showSearchResults" (resultSelected)="hideSearchResults()"></aio-search-results>
 

aio/src/styles/1-layouts/_content-layout.scss

@@ -10,10 +10,6 @@ aio-shell.page-docs {
   padding: 6rem 3rem 1rem;
 }
 
-.fill-remaining-space {
-  flex: 1 1 auto;
-}
-
 @media (max-width: 600px) {
   aio-menu {
     display: none;

aio/src/styles/1-layouts/_marketing-layout.scss

@@ -302,16 +302,6 @@ aio-shell {
         padding-top: 0;
       }
     }
-
-    @media (min-width: 992px) {
-      md-toolbar {
-        padding-left: 24px;
-        
-        button.hamburger {
-          display: none;
-        }
-      }
-    }
   }
 
   .cta-bar .hero-cta {

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

@@ -1,17 +1,3 @@
-.fill-remaining-space {
-  flex: 1 1 auto;
-}
-
-aio-top-menu a.nav-link {
-  margin: 0;
-  padding: 24px 16px;
-  cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
-}
-
 .nav-link.home img {
   position: relative;
   margin-top: -21px;
@@ -20,22 +6,6 @@ aio-top-menu a.nav-link {
   height: 40px;
 }
 
-@media (max-width: 700px) {
-  .nav-link {
-    font-size: 80%;
-    margin-right: 8px;
-    margin-left: 0px;
-  }
-}
-
-@media (max-width: 600px) {
-  .nav-link {
-    font-size: 80%;
-    margin-right: 8px;
-    margin-left: 0px;
-  }
-}
-
 aio-top-menu {
   display: flex;
   flex-direction: row;
@@ -65,60 +35,114 @@ aio-top-menu {
       }
     }
   }
+
+  a.nav-link {
+    margin: 0;
+    padding: 24px 16px;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+      background: rgba($white, 0.15);
+      border-radius: 4px;
+      padding: 8px 16px;
+    }
+  }
 }
 
+// HOME PAGE OVERRIDE: TOPNAV TOOLBAR HAMBURGER MENU
 aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar {
   background-color: transparent;
+
+  @media (max-width: 480px) {
+    background-color: $blue;
+  }
 }
 
+// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
 md-toolbar.mat-toolbar {
-  position: absolute; 
-  perspective: 2000px;
+  position: fixed; 
   top: 0px;
   right: 0; 
   left: 0;
   z-index: 10;
   padding: 0 16px 0 0;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
 
-  .mat-toolbar-row {
-    @media (max-width: 600px) {
+  // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
+  @media (max-width: 480px) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
   }
+
+  md-icon {
+    color: $white;
   }
 }
 
-aio-shell.page-home.sidenav-open {
-  md-toolbar.mat-toolbar md-icon {
-    color: $mediumgray;
+// MARKETING PAGES OVERRIDE: ABSOLUTE TOPNAV TOOLBAR
+aio-shell.page-home md-toolbar.mat-toolbar,
+aio-shell.page-features md-toolbar.mat-toolbar,
+aio-shell.page-events md-toolbar.mat-toolbar,
+aio-shell.page-resources md-toolbar.mat-toolbar {
+  position: absolute;
+
+  @media (min-width: 992px) {
+    padding-left: 24px;
+    
+    button.hamburger {
+      display: none;
+    }
+  }
+
+  // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE
+  @media (max-width: 480px) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
   }
 }
 
-.search-container {
+// REMOVE BOX SHADOW ON CERTAIN MARKETING PAGES
+aio-shell.page-home md-toolbar.mat-toolbar,
+aio-shell.page-events md-toolbar.mat-toolbar,
+aio-shell.page-resources md-toolbar.mat-toolbar {
+  box-shadow: none;
+}
+
+
+// SEARCH BOX
+aio-search-box.search-container {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
   min-width: 150px;
   height: 100%;
-}
 
-aio-search-box input {
+  input {
     color: $darkgray;
     border: none;
     border-radius: 100px;
     background-color: $offwhite;
     padding: 5px 16px;
     margin-left: 8px;
-  width: 180px;
-  max-width: 240px;
-  height: 50%;
+    width: 150px;
+    height: 40%;
 
     @include bp(big) {
       transition: width 0.4s ease-in-out;
+
       &:focus {
         width: 50%;
+        max-width: 240px;
       }
     }
     @media (max-width: 480px) {
-    width: 150px;
+      width: 180px;
+    }
   }
 }