fix(docs-infra): improve focus styles in topnav and footer (#33255)
Fixes #33239 PR Close #33255
This commit is contained in:
Stefanie Fluin
Alex Rickabaugh
parent
a756161dc2
commit
1997b86a00
@ -138,7 +138,6 @@ a {
|
||||
color: $white;
|
||||
font-family: $main-font;
|
||||
text-transform: uppercase;
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
|
||||
@ -22,20 +22,30 @@ footer {
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
z-index: 20;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
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: '';
|
||||
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;
|
||||
opacity: 0.05;
|
||||
background-size: 320px auto;
|
||||
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;
|
||||
opacity: 0.05;
|
||||
background-size: 320px auto;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -79,7 +79,7 @@ mat-sidenav-container div.mat-sidenav-content {
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: $accentblue auto 2px;
|
||||
outline: $focus-outline-onlight auto 2px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
@ -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,35 +146,44 @@ 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;
|
||||
cursor: pointer;
|
||||
|
||||
.nav-link-inner {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
a.nav-link {
|
||||
margin: 0 4px;
|
||||
padding: 0px;
|
||||
cursor: pointer;
|
||||
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
border-radius: 4px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// SEARCH BOX
|
||||
@ -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 {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
aio-contributor-list {
|
||||
@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
|
||||
.grid-fluid{
|
||||
.grid-fluid {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
|
||||
.grid-fluid{
|
||||
.grid-fluid {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
float: none;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user