diff options
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 18 |
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 { |