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

fix(docs-infra): improve focus styles in topnav and footer (#33255) 

Fixes #33239

PR Close #33255
This commit is contained in:
Stefanie Fluin 2019-10-18 10:45:06 -07:00 committed by Alex Rickabaugh
parent a756161dc2
commit 1997b86a00
8 changed files with 98 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
aio/src/styles/0-base/_typography.scss
View File

@ -138,7 +138,6 @@ a {
color: $white;
font-family: $main-font;
text-transform: uppercase;
padding: 21px 0;
}
strong {

23
aio/src/styles/1-layouts/_footer.scss
View File

@ -26,16 +26,26 @@ footer {
text-decoration: none;
z-index: 20;
position: relative;
&:hover {
text-decoration: underline;
}
&:visited {
text-decoration: none;
}
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid rgba($white, 0.8);
outline-offset: 2px;
}
}
a.action {
cursor: pointer;
}
h3 {
@include font-size(16);
text-transform: uppercase;
@ -43,6 +53,7 @@ footer {
margin: 8px 0 12px;
color: $white;
}
p {
text-align: center;
margin: 10px 0px 5px;
@ -56,9 +67,7 @@ footer {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
text-align: left;
margin: 0 0 40px;
@ -76,6 +85,7 @@ footer {
@media (max-width: 480px) {
flex-direction: column;
.footer-block {
margin: 8px 24px;
}
@ -90,16 +100,17 @@ footer {
}
footer::after {
content: '';
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:
url('/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 0 left 0 repeat,
url('/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 160px repeat;
background: url("/assets/images/logos/angular/angular_whiteTransparent_withMargin.png")
top 0 left 0 repeat,
url("/assets/images/logos/angular/angular_whiteTransparent_withMargin.png")
top 80px left 160px repeat;
opacity: 0.05;
background-size: 320px auto;
}

2
aio/src/styles/1-layouts/_marketing-layout.scss
View File

@ -132,7 +132,7 @@ section#intro {
box-sizing: border-box;
transition: all 0.3s ease-in;
@media (max-width: 992px) {
@media (max-width: 991px) {
flex-direction: column;
text-align: center;
padding: 32px 16px;

2
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -79,7 +79,7 @@ mat-sidenav-container div.mat-sidenav-content {
}
&:focus {
outline: $accentblue auto 2px;
outline: $focus-outline-onlight auto 2px;
}
&.selected {

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

@ -87,7 +87,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
}
& .mat-icon {
color: white;
color: $white;
position: inherit;
}
}
@ -96,7 +96,17 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
.nav-link.home {
cursor: pointer;
margin: 0 16px 0 0;
padding: 21px 0;
padding: 8px 0;
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid $focus-outline-ondark;
outline-offset: 4px;
}
@media screen and (max-width: 991px) {
padding: 4px 0;
}
@media screen and (max-width: 480px) {
margin-right: 8px;
@ -108,7 +118,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
top: 12px;
height: 40px;
@media (max-width: 992px) {
@media (max-width: 991px) {
&:hover {
transform: scale(1.1);
}
@ -136,29 +146,36 @@ aio-top-menu {
list-style-type: none;
cursor: pointer;
&:hover {
opacity: 0.7;
}
&:focus {
background-color: $accentblue;
outline: none;
}
}
}
a.nav-link {
margin: 0;
padding: 24px 0px;
margin: 0 4px;
padding: 0px;
cursor: pointer;
.nav-link-inner {
padding: 8px 16px;
&:hover {
background: rgba($white, 0.15);
border-radius: 4px;
}
}
&:focus {
outline: none;
.nav-link-inner {
background: rgba($white, 0.15);
border-radius: 1px;
box-shadow: 0 0 1px 2px $focus-outline-ondark;
}
}
&:active {
.nav-link-inner {
background: rgba($white, 0.15);
border-radius: 4px;
@ -167,6 +184,8 @@ aio-top-menu {
}
}
}
// SEARCH BOX
aio-search-box.search-container {
display: flex;
@ -175,6 +194,7 @@ aio-search-box.search-container {
width: 100%;
min-width: 150px;
height: 100%;
margin-right: 16px;
input {
color: $darkgray;
@ -220,10 +240,18 @@ aio-search-box.search-container {
a {
display: flex;
align-items: center;
margin-left: 16px;
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-left: 8px;
margin: 0 0 0 8px;
padding: 0;
}
&:hover {

6
aio/src/styles/_constants.scss
View File

@ -54,8 +54,12 @@ $purple-600: #8E24AA;
$teal-500: #009688;
$lightgrey: #F5F6F7;
// STATE COLORS
$focus-outline-ondark: rgba($white, 0.8);
$focus-outline-onlight: $accentblue;
// GRADIENTS
$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
$bluegradient: linear-gradient(145deg,$blue-900,$blue-400);
$redgradient: linear-gradient(145deg,$darkred,$brightred);
// API LABEL COLOR AND SYMBOLS MAP

3
aio/tests/e2e/src/scroll.e2e-spec.ts
View File

@ -40,7 +40,8 @@ describe('site auto-scrolling', () => {
expect(await page.getScrollTop()).not.toBe(0);
await page.docsMenuLink.click();
expect(await page.getScrollTop()).toBe(0);
// On some environments (e.g. CI) it takes some time for the page to load (and scroll to top).
await browser.wait(async () => await page.getScrollTop() === 0, 1000);
});
it('should scroll to top when navigating to the same page via a link', async () => {