diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 70 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 28 |
2 files changed, 70 insertions, 28 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> 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; } |