iSharkFly-Docs
/
angular-docs-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; color: $white;
font-family: $main-font; font-family: $main-font;
text-transform: uppercase; text-transform: uppercase;
padding: 21px 0;
} }
strong { strong {

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

@ -26,16 +26,26 @@ footer {
text-decoration: none; text-decoration: none;
z-index: 20; z-index: 20;
position: relative; position: relative;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
&:visited { &:visited {
text-decoration: none; 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 { a.action {
cursor: pointer; cursor: pointer;
} }
h3 { h3 {
@include font-size(16); @include font-size(16);
text-transform: uppercase; text-transform: uppercase;
@ -43,6 +53,7 @@ footer {
margin: 8px 0 12px; margin: 8px 0 12px;
color: $white; color: $white;
} }
p { p {
text-align: center; text-align: center;
margin: 10px 0px 5px; margin: 10px 0px 5px;
@ -56,9 +67,7 @@ footer {
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: left; text-align: left;
margin: 0 0 40px; margin: 0 0 40px;
@ -76,6 +85,7 @@ footer {
@media (max-width: 480px) { @media (max-width: 480px) {
flex-direction: column; flex-direction: column;
.footer-block { .footer-block {
margin: 8px 24px; margin: 8px 24px;
} }
@ -90,16 +100,17 @@ footer {
} }
footer::after { footer::after {
content: ''; content: "";
position: absolute; position: absolute;
z-index: -1; z-index: -1;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: background: url("/assets/images/logos/angular/angular_whiteTransparent_withMargin.png")
url('/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 0 left 0 repeat, top 0 left 0 repeat,
url('/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 160px repeat; url("/assets/images/logos/angular/angular_whiteTransparent_withMargin.png")
top 80px left 160px repeat;
opacity: 0.05; opacity: 0.05;
background-size: 320px auto; 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; box-sizing: border-box;
transition: all 0.3s ease-in; transition: all 0.3s ease-in;
@media (max-width: 992px) { @media (max-width: 991px) {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
padding: 32px 16px; 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 { &:focus {
outline: $accentblue auto 2px; outline: $focus-outline-onlight auto 2px;
} }
&.selected { &.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 { & .mat-icon {
color: white; color: $white;
position: inherit; position: inherit;
} }
} }
@ -96,7 +96,17 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
.nav-link.home { .nav-link.home {
cursor: pointer; cursor: pointer;
margin: 0 16px 0 0; 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) { @media screen and (max-width: 480px) {
margin-right: 8px; margin-right: 8px;
@ -108,7 +118,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
top: 12px; top: 12px;
height: 40px; height: 40px;
@media (max-width: 992px) { @media (max-width: 991px) {
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
} }
@ -136,35 +146,44 @@ aio-top-menu {
list-style-type: none; list-style-type: none;
cursor: pointer; cursor: pointer;
&:hover {
opacity: 0.7;
}
&:focus { &:focus {
background-color: $accentblue;
outline: none; outline: none;
} }
} }
}
a.nav-link { a.nav-link {
margin: 0; margin: 0 4px;
padding: 24px 0px; padding: 0px;
cursor: pointer; cursor: pointer;
.nav-link-inner { .nav-link-inner {
padding: 8px 16px; padding: 8px 16px;
&:hover {
background: rgba($white, 0.15);
border-radius: 4px;
}
} }
&:focus { &:focus {
outline: none; 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 { .nav-link-inner {
background: rgba($white, 0.15); background: rgba($white, 0.15);
border-radius: 4px; border-radius: 4px;
} }
} }
} }
}
} }
// SEARCH BOX // SEARCH BOX
@ -175,6 +194,7 @@ aio-search-box.search-container {
width: 100%; width: 100%;
min-width: 150px; min-width: 150px;
height: 100%; height: 100%;
margin-right: 16px;
input { input {
color: $darkgray; color: $darkgray;
@ -220,10 +240,18 @@ aio-search-box.search-container {
a { a {
display: flex; display: flex;
align-items: center; 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) { @media screen and (max-width: 480px) {
margin-left: 8px; margin: 0 0 0 8px;
padding: 0;
} }
&:hover { &:hover {

4
aio/src/styles/2-modules/_contributor.scss
View File

@ -1,12 +1,12 @@
aio-contributor-list { aio-contributor-list {
@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) { @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
.grid-fluid{ .grid-fluid {
width: auto; width: auto;
} }
} }
@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) { @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
.grid-fluid{ .grid-fluid {
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
float: none; float: none;

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

@ -54,8 +54,12 @@ $purple-600: #8E24AA;
$teal-500: #009688; $teal-500: #009688;
$lightgrey: #F5F6F7; $lightgrey: #F5F6F7;
// STATE COLORS
$focus-outline-ondark: rgba($white, 0.8);
$focus-outline-onlight: $accentblue;
// GRADIENTS // GRADIENTS
$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5); $bluegradient: linear-gradient(145deg,$blue-900,$blue-400);
$redgradient: linear-gradient(145deg,$darkred,$brightred); $redgradient: linear-gradient(145deg,$darkred,$brightred);
// API LABEL COLOR AND SYMBOLS MAP // 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); expect(await page.getScrollTop()).not.toBe(0);
await page.docsMenuLink.click(); 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 () => { it('should scroll to top when navigating to the same page via a link', async () => {