Update application navigation colors

- Current navigation color did not match mockup
- Replace color variables with theme variables in .vue file
- Add $gray-500
- Delete the map-remove functions. Maps are based on the added
properties
- Increase navigaton icon size
- Add _variables.scss file for overrides to Bootstrap Sass
variables and adding custom variables

Testing:
1. Navigation item for current page will have a dark background,
light text, and a blue border.
2. Hovering over an active navigation item will display the cursor as
the default arrow.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Id391364ee74ece59ba7b20d49fda859de0c12b17

1 files changed, 14 insertions, 6 deletions

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index cc024c86..62ffe982 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -142,7 +142,9 @@ export default {
 
 <style scoped lang="scss">
 svg {
-  fill: $gray-900;
+  fill: currentColor;
+  height: 1.2rem;
+  width: 1.2rem;
   margin-left: 0 !important; //!important overriding button specificity
   vertical-align: text-bottom;
   &:not(.icon-expand) {
@@ -192,20 +194,26 @@ svg {
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: $gray-900 !important; //using important to avoid styling states
+  color: $secondary-dark;
 
   &:hover {
-    background-color: $gray-300;
+    background-color: $primary-nav-hover;
+    color: $secondary-dark;
   }
 
   &:focus {
     box-shadow: $btn-focus-box-shadow;
+    color: $secondary-dark;
   }
 }
 
-.nav-link--current {
+.nav-link--current,
+.nav-link--current:hover,
+.nav-link--current:focus {
   font-weight: $headings-font-weight;
-  background-color: $gray-300;
+  background-color: $secondary-dark;
+  color: $secondary-light;
+  cursor: default;
 
   &::before {
     content: '';
@@ -226,7 +234,7 @@ svg {
   left: 0;
   z-index: $zindex-fixed;
   overflow-y: auto;
-  background-color: $gray-200;
+  background-color: $container-bgd;
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;