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
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index b29b575..38ee455 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -150,23 +150,30 @@
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 @@
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 @@
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;
}