diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-09-22 16:58:56 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-10-23 23:00:00 +0300 |
commit | 1f8117f810a87e563aa2e33c67a7779dc0542a0d (patch) | |
tree | 26b4059042ee1f28779bdcb298780df4bea6abf6 /src/components/AppHeader | |
parent | d624dae9d6727a09f6eb33b95c19986826359d6c (diff) | |
download | webui-vue-1f8117f810a87e563aa2e33c67a7779dc0542a0d.tar.xz |
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
Diffstat (limited to 'src/components/AppHeader')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 70 |
1 files changed, 47 insertions, 23 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 5f05406a..6a3989d5 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 @@ export default { 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 @@ export default { 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 @@ export default { .navbar-nav { padding: 0 $spacer; + align-items: center; + + .navbar-brand, + .nav-link { + transition: $focus-transition; + } + &:focus { + outline: 0; + } } .nav-trigger { @@ -273,6 +285,9 @@ export default { 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 @@ export default { &:hover { fill: theme-color('light'); - background-color: theme-color('dark'); + background-color: theme-color-level(light, 10); } &.open { @@ -292,12 +307,11 @@ export default { } } - .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 @@ export default { } } } + +.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> |