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/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 5f05406..6a3989d 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -26,13 +26,13 @@
/>
</b-button>
<b-navbar-nav>
- <b-nav-item to="/" data-test-id="appHeader-container-overview">
+ <b-navbar-brand to="/" data-test-id="appHeader-container-overview">
<img
class="header-logo"
src="@/assets/images/logo-header.svg"
:alt="altLogo"
/>
- </b-nav-item>
+ </b-navbar-brand>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto helper-menu">
@@ -214,12 +214,21 @@
transition-timing-function: $entrance-easing--expressive;
}
}
- .navbar-dark {
- .navbar-text,
- .nav-link,
- .btn-link {
- color: theme-color('light') !important;
- fill: currentColor;
+ .navbar-text,
+ .nav-link,
+ .btn-link {
+ color: color('white') !important;
+ fill: currentColor;
+ padding: 0.68rem 1rem !important;
+
+ &:hover {
+ background-color: theme-color-level(light, 10);
+ }
+ &:active {
+ background-color: theme-color-level(light, 9);
+ }
+ &:focus {
+ box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
}
}
@@ -234,14 +243,8 @@
height: $header-height;
}
- .btn-link {
- padding: $spacer / 2;
- }
-
- .header-logo {
- width: auto;
- height: $header-height;
- padding: $spacer/2 0;
+ &:focus {
+ outline: 0;
}
.helper-menu {
@@ -266,6 +269,15 @@
.navbar-nav {
padding: 0 $spacer;
+ align-items: center;
+
+ .navbar-brand,
+ .nav-link {
+ transition: $focus-transition;
+ }
+ &:focus {
+ outline: 0;
+ }
}
.nav-trigger {
@@ -273,6 +285,9 @@
width: $header-height;
height: $header-height;
transition: none;
+ display: inline-flex;
+ flex: 0 0 20px;
+ align-items: center;
svg {
margin: 0;
@@ -280,7 +295,7 @@
&:hover {
fill: theme-color('light');
- background-color: theme-color('dark');
+ background-color: theme-color-level(light, 10);
}
&.open {
@@ -292,12 +307,11 @@
}
}
- .dropdown {
- .dropdown-menu {
- margin-top: 0;
- @include media-breakpoint-up(md) {
- margin-top: 7px;
- }
+ .dropdown-menu {
+ margin-top: 0;
+
+ @include media-breakpoint-only(md) {
+ margin-top: 4px;
}
}
@@ -307,4 +321,14 @@
}
}
}
+
+.navbar-brand {
+ padding: $spacer/2;
+ height: $header-height;
+ line-height: 1;
+ &:focus {
+ box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
+ outline: 0;
+ }
+}
</style>