diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-10-26 20:14:16 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-10-29 18:04:38 +0300 |
commit | 7d4b53bc2f561409b38ecabcbc6d2678a5ce119c (patch) | |
tree | 9266236581f1719f1d1bcc329f294f8c5429e1fc /src/components/AppHeader | |
parent | a04d46f7cad356da22d794e994195e801f5998b7 (diff) | |
download | webui-vue-7d4b53bc2f561409b38ecabcbc6d2678a5ce119c.tar.xz |
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
Diffstat (limited to 'src/components/AppHeader')
-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 { |