fix(material/api-theme): fix nav items hover/focus contrast (#1004)

- fix hover and focus indicators on header nav items to have sufficient contrast Fixes #759
angular · Jun 15, 2021 · 057ed37 · 057ed37
1 parent 84b3139
commit 057ed37
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/material.angular.io/src/app/shared/navbar/_navbar-theme.scss b/material.angular.io/src/app/shared/navbar/_navbar-theme.scss
@@ -13,6 +13,15 @@
 
     .docs-navbar, .docs-navbar-header {
       background: mat.get-color-from-palette($primary);
+
+      & a:hover, & a:focus {
+        background: rgba(0, 0, 0, 0.4);
+        color: mat.get-color-from-palette($accent, 200);
+      }
+
+      .docs-navbar-header-item-selected {
+        background: rgba(0, 0, 0, 0.2);
+      }
     }
   }
 }
diff --git a/material.angular.io/src/app/shared/navbar/navbar.html b/material.angular.io/src/app/shared/navbar/navbar.html
@@ -14,8 +14,9 @@
   </a>
   <a mat-button class="docs-navbar-hide-small docs-button"
      *ngFor="let key of sectionKeys"
-     [routerLink]="key">{{sections[key].name}}</a>
-  <a mat-button class="docs-navbar-hide-small docs-button" routerLink="guides">Guides</a>
+     [routerLink]="key"
+     routerLinkActive="docs-navbar-header-item-selected">{{sections[key].name}}</a>
+  <a mat-button class="docs-navbar-hide-small docs-button" routerLink="guides" routerLinkActive="docs-navbar-header-item-selected">Guides</a>
   <div class="flex-spacer"></div>
   <version-picker></version-picker>
   <theme-picker></theme-picker>