diff options
Diffstat (limited to 'src/components/AppHeader/AppHeader.vue')
-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> |