Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

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

Merged
merged 3 commits into from
Jun 15, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
711feee
fix(material/api-theme): fix nav items hover/focus contrast
kian23kpt Jun 2, 2021
6cecd15
Merge branch 'angular:master' into nav-items-hover/focus-contrast
kian23kpt Jun 13, 2021
e29609a
Update _navbar-theme.scss
kian23kpt Jun 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/app/shared/navbar/_navbar-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just want to make sure that 200 here isn't too dark to meet the contrast guidelines.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the purpose of using the accent color here instead of just inheriting the color? Was the shade of the background not enough to differentiate selected versus hovered/focus states? or was there a contrast issue?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the purpose of using the accent color here instead of just inheriting the color? Was the shade of the background not enough to differentiate selected versus hovered/focus states? or was there a contrast issue?

Used only to differentiate, similar to the sidebar. but by removing it, there is no problem of contrast.

}

.docs-navbar-header-item-selected {
background: rgba(0, 0, 0, 0.2);
}
}
}
}
5 changes: 3 additions & 2 deletions src/app/shared/navbar/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down