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
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 6a3989d..b155412 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -202,6 +202,9 @@
</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 @@
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 @@
height: $header-height;
}
- &:focus {
- outline: 0;
- }
-
.helper-menu {
@include media-breakpoint-down(sm) {
background-color: gray('800');
@@ -257,6 +257,11 @@
.btn {
padding: $spacer / 1.125 $spacer / 2;
}
+
+ .nav-link:focus,
+ .btn:focus {
+ @include focus-box-shadow($gray-800);
+ }
}
.responsive-text {
@@ -275,9 +280,6 @@
.nav-link {
transition: $focus-transition;
}
- &:focus {
- outline: 0;
- }
}
.nav-trigger {