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

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;
   }