diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-10-26 23:17:31 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-10-30 07:04:05 +0300 |
commit | 59569d8f93842933e8b135cc13a9c15e0278af4c (patch) | |
tree | 2d3270e2cb22a46455ec33331449a19e596647a6 /src/components/AppNavigation/AppNavigation.vue | |
parent | 7d4b53bc2f561409b38ecabcbc6d2678a5ce119c (diff) | |
download | webui-vue-59569d8f93842933e8b135cc13a9c15e0278af4c.tar.xz |
Fix app nav focus state on current link
- Removed :active psuedo-elements that were overriding default states
- Removed use of specific colors in place of theme-color or
theme-color-level to improve theming scalability
- Moved outline declaration to the primary :focus pseudo-element
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I2af984fd1b29ed21d9278f5ad65dc563c81afc29
Diffstat (limited to 'src/components/AppNavigation/AppNavigation.vue')
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 22 |
1 files changed, 9 insertions, 13 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 38ee4558..5d8a17f5 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -158,16 +158,15 @@ svg { background-color: theme-color-level(light, 0); box-shadow: inset 0 0 0 2px theme-color('primary'); color: theme-color('dark'); + outline: 0; } &:active { - background-color: gray('800'); + background-color: theme-color('secondary'); color: $white; } } -.btn-link:active, -.nav-link:active, .nav-link--current { font-weight: $headings-font-weight; background-color: theme-color('secondary'); @@ -184,15 +183,11 @@ svg { width: 4px; background-color: theme-color('primary'); } -} -.nav-link--current { - &:hover { - background-color: theme-color('dark'); - color: theme-color('light'); - } + + &:hover, &:focus { - box-shadow: inset 0 0 0 2px theme-color('primary'); - outline: 0; + background-color: theme-color('secondary'); + color: theme-color('light'); } } @@ -204,10 +199,11 @@ svg { left: 0; z-index: $zindex-fixed; overflow-y: auto; - background-color: gray('100'); + background-color: theme-color('light'); transform: translateX(-$navigation-width); transition: transform $exit-easing--productive $duration--moderate-02; - border-right: 1px solid gray('500'); + border-right: 1px solid theme-color-level('light', 2.85); + @include media-breakpoint-down(md) { z-index: $zindex-fixed + 2; } |