fixup! fix(docs-infra): improve focus styles in topnav and footer

sonukapoor · sonukapoor · commit 1977441ce3fa · 2020-01-18T16:35:08.000-05:00
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
@@ -38,6 +38,8 @@ footer {
     &:focus {
       outline-color: rgba($white, 0.8);
       outline-offset: 2px;
+      // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+      outline-style: solid;
     }
   }
 
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -133,7 +133,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;
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
@@ -96,10 +96,13 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
 .nav-link.home {
   cursor: pointer;
   margin: 0 16px 0 0;
-
+  padding: 8px 0;
+  
   &:focus {
     outline-color: $focus-outline-ondark;
     outline-offset: 4px;
+    // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+    outline-style: solid;
   }
 
   @media screen and (max-width: 480px) {
@@ -112,7 +115,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);
       }
@@ -147,7 +150,7 @@ aio-top-menu {
 
     a.nav-link {
       margin: 0 4px;
-      padding: 0px;
+      padding: 24px 0;
       cursor: pointer;
 
       .nav-link-inner {
@@ -163,7 +166,6 @@ aio-top-menu {
         outline: none;
 
         .nav-link-inner {
-          background: rgba($white, 0.15);
           border-radius: 1px;
           box-shadow: 0 0 1px 2px $focus-outline-ondark;
         }
@@ -188,7 +190,7 @@ aio-search-box.search-container {
   width: 100%;
   min-width: 150px;
   height: 100%;
-  margin-right: 16px;
+  margin-right: 10px;
 
   input {
     color: $darkgray;
@@ -240,10 +242,11 @@ aio-search-box.search-container {
       &:focus {
         outline-color: $focus-outline-ondark;
         outline-offset: -16px;
+        outline-style: solid;
       }
 
       @media screen and (max-width: 480px) {
-        margin-left: 8px;
+        margin-left: 0 0 0 8px;
         padding: 0;
       }
 
diff --git a/aio/tests/e2e/src/scroll.e2e-spec.ts b/aio/tests/e2e/src/scroll.e2e-spec.ts
@@ -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 environment (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 () => {

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,8 @@ footer {`
`38`	`38`	`&:focus {`
`39`	`39`	`outline-color: rgba($white, 0.8);`
`40`	`40`	`outline-offset: 2px;`
	`41`	+ // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
	`42`	`+ outline-style: solid;`
`41`	`43`	`}`
`42`	`44`	`}`
`43`	`45`