Update button focus state for small screen

The focus state uses the box-shadow and two inset values. The first
should match the background of the button or link container. The
second is the actual color of the outline focus state. On smaller
viewports, the menu stacks and is a different color.

- Add mixin with optional color param for setting the color of the
inset  box-shadow that matches the container's background color
- Add a focus state for the helper-menu at the smaller breakpoint
- Remove the multiple :focus pseudo-selector declarations that
remove the outline and set it when we set the initial focus state

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I8eb046f892b395baba41dd62460d2a771bd1f92a

1 files changed, 10 insertions, 8 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 6a3989d5..b1554121 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -202,6 +202,9 @@ export default {
 </script>
 
 <style lang="scss">
+@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
+  box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
+}
 .app-header {
   .link-skip-nav {
     position: absolute;
@@ -228,7 +231,8 @@ export default {
       background-color: theme-color-level(light, 9);
     }
     &:focus {
-      box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
+      @include focus-box-shadow;
+      outline: 0;
     }
   }
 
@@ -243,10 +247,6 @@ export default {
       height: $header-height;
     }
 
-    &:focus {
-      outline: 0;
-    }
-
     .helper-menu {
       @include media-breakpoint-down(sm) {
         background-color: gray('800');
@@ -257,6 +257,11 @@ export default {
         .btn {
           padding: $spacer / 1.125 $spacer / 2;
         }
+
+        .nav-link:focus,
+        .btn:focus {
+          @include focus-box-shadow($gray-800);
+        }
       }
 
       .responsive-text {
@@ -275,9 +280,6 @@ export default {
     .nav-link {
       transition: $focus-transition;
     }
-    &:focus {
-      outline: 0;
-    }
   }
 
   .nav-trigger {