AppHeader.vue (1f8117f810a87e563aa2e33c67a7779dc0542a0d) AppHeader.vue (7d4b53bc2f561409b38ecabcbc6d2678a5ce119c)
1<template>
2 <div>
3 <header id="page-header">
4 <a role="link" class="link-skip-nav btn btn-light" href="#main-content">
5 {{ $t('appHeader.skipToContent') }}
6 </a>
7
8 <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">

--- 188 unchanged lines hidden (view full) ---

197 toggleNavigation() {
198 this.$root.$emit('toggle:navigation');
199 }
200 }
201};
202</script>
203
204<style lang="scss">
1<template>
2 <div>
3 <header id="page-header">
4 <a role="link" class="link-skip-nav btn btn-light" href="#main-content">
5 {{ $t('appHeader.skipToContent') }}
6 </a>
7
8 <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">

--- 188 unchanged lines hidden (view full) ---

197 toggleNavigation() {
198 this.$root.$emit('toggle:navigation');
199 }
200 }
201};
202</script>
203
204<style lang="scss">
205@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
206 box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
207}
205.app-header {
206 .link-skip-nav {
207 position: absolute;
208 top: -60px;
209 left: 0.5rem;
210 z-index: $zindex-popover;
211 transition: $duration--moderate-01 $exit-easing--expressive;
212 &:focus {

--- 10 unchanged lines hidden (view full) ---

223
224 &:hover {
225 background-color: theme-color-level(light, 10);
226 }
227 &:active {
228 background-color: theme-color-level(light, 9);
229 }
230 &:focus {
208.app-header {
209 .link-skip-nav {
210 position: absolute;
211 top: -60px;
212 left: 0.5rem;
213 z-index: $zindex-popover;
214 transition: $duration--moderate-01 $exit-easing--expressive;
215 &:focus {

--- 10 unchanged lines hidden (view full) ---

226
227 &:hover {
228 background-color: theme-color-level(light, 10);
229 }
230 &:active {
231 background-color: theme-color-level(light, 9);
232 }
233 &:focus {
231 box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
234 @include focus-box-shadow;
235 outline: 0;
232 }
233 }
234
235 .nav-item {
236 fill: theme-color('light');
237 }
238
239 .navbar {
240 padding: 0;
241 background-color: $navbar-color;
242 @include media-breakpoint-up($responsive-layout-bp) {
243 height: $header-height;
244 }
245
236 }
237 }
238
239 .nav-item {
240 fill: theme-color('light');
241 }
242
243 .navbar {
244 padding: 0;
245 background-color: $navbar-color;
246 @include media-breakpoint-up($responsive-layout-bp) {
247 height: $header-height;
248 }
249
246 &:focus {
247 outline: 0;
248 }
249
250 .helper-menu {
251 @include media-breakpoint-down(sm) {
252 background-color: gray('800');
253 width: 100%;
254 justify-content: flex-end;
255
256 .nav-link,
257 .btn {
258 padding: $spacer / 1.125 $spacer / 2;
259 }
250 .helper-menu {
251 @include media-breakpoint-down(sm) {
252 background-color: gray('800');
253 width: 100%;
254 justify-content: flex-end;
255
256 .nav-link,
257 .btn {
258 padding: $spacer / 1.125 $spacer / 2;
259 }
260
261 .nav-link:focus,
262 .btn:focus {
263 @include focus-box-shadow($gray-800);
264 }
260 }
261
262 .responsive-text {
263 @include media-breakpoint-down(xs) {
264 display: none;
265 }
266 }
267 }
268 }
269
270 .navbar-nav {
271 padding: 0 $spacer;
272 align-items: center;
273
274 .navbar-brand,
275 .nav-link {
276 transition: $focus-transition;
277 }
265 }
266
267 .responsive-text {
268 @include media-breakpoint-down(xs) {
269 display: none;
270 }
271 }
272 }
273 }
274
275 .navbar-nav {
276 padding: 0 $spacer;
277 align-items: center;
278
279 .navbar-brand,
280 .nav-link {
281 transition: $focus-transition;
282 }
278 &:focus {
279 outline: 0;
280 }
281 }
282
283 .nav-trigger {
284 fill: theme-color('light');
285 width: $header-height;
286 height: $header-height;
287 transition: none;
288 display: inline-flex;

--- 46 unchanged lines hidden --- 		283 }
284
285 .nav-trigger {
286 fill: theme-color('light');
287 width: $header-height;
288 height: $header-height;
289 transition: none;
290 display: inline-flex;

--- 46 unchanged lines hidden ---