honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(docs-infra): fix top menu item clickable area (#27633) 

the clickable region of the top menu item is expanded beyond the focused area, so the clickable area is spans the entire height of the navigation

fixes #27618

PR Close #27633
This commit is contained in:
Esteban Marin 2018-12-12 07:51:50 +01:00 committed by Miško Hevery
parent 1cc08b4a4a
commit e3a2ca5ad9
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
aio/src/app/layout/top-menu/top-menu.component.ts
View File

@ -5,7 +5,11 @@ import { NavigationNode } from 'app/navigation/navigation.service';
selector: 'aio-top-menu', selector: 'aio-top-menu',
template: ` template: `
<ul role="navigation"> <ul role="navigation">
<li *ngFor="let node of nodes"><a class="nav-link" [href]="node.url" [title]="node.title">{{ node.title }}</a></li> <li *ngFor="let node of nodes">
<a class="nav-link" [href]="node.url" [title]="node.title">
<span class="nav-link-inner">{{ node.title }}</span>
</a>
</li>
</ul>` </ul>`
}) })
export class TopMenuComponent { export class TopMenuComponent {

15
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -147,13 +147,20 @@ aio-top-menu {
a.nav-link { a.nav-link {
margin: 0; margin: 0;
padding: 8px 16px; padding: 24px 0px;
cursor: pointer; cursor: pointer;
border-radius: 4px;
.nav-link-inner {
padding: 8px 16px;
}
&:focus { &:focus {
background: rgba($white, 0.15);
outline: none; outline: none;
.nav-link-inner {
background: rgba($white, 0.15);
border-radius: 4px;
}
} }
} }
} }