From 1f8117f810a87e563aa2e33c67a7779dc0542a0d Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Tue, 22 Sep 2020 19:28:56 +0530
Subject: Add style to left sidebar and app header

- Updated hover, active and focus state for left sidebar menu items.
- Add style guide for top header navigation.
- Add new white color logo.
- Add focus and active state to current menu item.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ib97df4efda216f653ce0415c3f3ae9ae75bcb9cd
---
 src/components/AppNavigation/AppNavigation.vue | 28 +++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

(limited to 'src/components/AppNavigation/AppNavigation.vue')

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index b29b575d..38ee4558 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -150,23 +150,30 @@ svg {
   color: theme-color('secondary');
 
   &:hover {
-    background-color: gray('300');
+    background-color: theme-color-level(dark, -10.5);
     color: theme-color('dark');
   }
 
   &:focus {
-    box-shadow: $btn-focus-box-shadow;
+    background-color: theme-color-level(light, 0);
+    box-shadow: inset 0 0 0 2px theme-color('primary');
     color: theme-color('dark');
   }
+
+  &:active {
+    background-color: gray('800');
+    color: $white;
+  }
 }
 
-.nav-link--current,
-.nav-link--current:hover,
-.nav-link--current:focus {
+.btn-link:active,
+.nav-link:active,
+.nav-link--current {
   font-weight: $headings-font-weight;
   background-color: theme-color('secondary');
   color: theme-color('light');
   cursor: default;
+  box-shadow: none;
 
   &::before {
     content: '';
@@ -178,6 +185,16 @@ svg {
     background-color: theme-color('primary');
   }
 }
+.nav-link--current {
+  &:hover {
+    background-color: theme-color('dark');
+    color: theme-color('light');
+  }
+  &:focus {
+    box-shadow: inset 0 0 0 2px theme-color('primary');
+    outline: 0;
+  }
+}
 
 .nav-container {
   position: fixed;
@@ -190,6 +207,7 @@ svg {
   background-color: gray('100');
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
+  border-right: 1px solid gray('500');
   @include media-breakpoint-down(md) {
     z-index: $zindex-fixed + 2;
   }
-- 
cgit v1.2.3