|
@@ -10,6 +10,13 @@
|
|
|
<span class="sr-only">Menu</span>
|
|
|
</template>
|
|
|
|
|
|
+ <b-dropdown-item
|
|
|
+ v-for="link in mainRoutes" :key="link.to"
|
|
|
+ :to="link.to" class="d-tb-none" :class="'dropdown-item-' + link.variant"
|
|
|
+ >
|
|
|
+ {{ $t('sections.' + link.to) }}
|
|
|
+ </b-dropdown-item>
|
|
|
+
|
|
|
<b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
|
|
|
{{ $t('sections.' + name) }}
|
|
|
</b-dropdown-item>
|
|
@@ -20,7 +27,7 @@
|
|
|
</b-navbar-brand>
|
|
|
</div>
|
|
|
|
|
|
- <nav class="nav-list">
|
|
|
+ <nav class="nav-list d-none d-tb-block">
|
|
|
<ul>
|
|
|
<li v-for="link in mainRoutes" :key="link.to">
|
|
|
<b-button :to="link.to" :active="$route.name === link.to" :variant="link.variant">
|
|
@@ -68,21 +75,38 @@ export default {
|
|
|
justify-content: stretch;
|
|
|
}
|
|
|
|
|
|
- @include media-breakpoint-up(sm) {
|
|
|
+ @include media-breakpoint-up(tb) {
|
|
|
height: $header-height;
|
|
|
padding: 0 $header-spacer;
|
|
|
}
|
|
|
|
|
|
- ::v-deep .dropdown-toggle {
|
|
|
- padding: 0;
|
|
|
- border: 0;
|
|
|
- line-height: 1;
|
|
|
- padding: 0 .5rem;
|
|
|
- margin-left: -.5rem;
|
|
|
+ ::v-deep {
|
|
|
+ .dropdown-toggle {
|
|
|
+ padding: 0;
|
|
|
+ border: 0;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0 .5rem;
|
|
|
+ margin-left: -.5rem;
|
|
|
|
|
|
- @include media-breakpoint-up(sm) {
|
|
|
- padding: 0 .75rem;
|
|
|
- margin-left: -.75rem;
|
|
|
+ @include media-breakpoint-up(tb) {
|
|
|
+ padding: 0 .75rem;
|
|
|
+ margin-left: -.75rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dropdown-menu {
|
|
|
+ @include media-breakpoint-down(sm) {
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ @each $variant in 'dark', 'kit', 'creation' {
|
|
|
+ .dropdown-item-#{$variant} {
|
|
|
+ background-color: theme-color($variant);
|
|
|
+ a:not(:hover):not(:focus) {
|
|
|
+ color: if($variant == 'dark', $white, $black);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -97,7 +121,7 @@ export default {
|
|
|
stroke-linecap: round;
|
|
|
}
|
|
|
|
|
|
- @include media-breakpoint-up(sm) {
|
|
|
+ @include media-breakpoint-up(tb) {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
|
|
@@ -110,10 +134,6 @@ export default {
|
|
|
&-brand {
|
|
|
display: flex;
|
|
|
|
|
|
- @include media-breakpoint-down(xs) {
|
|
|
- padding-bottom: $header-spacer-sm;
|
|
|
- }
|
|
|
-
|
|
|
.navbar-brand {
|
|
|
font-size: inherit;
|
|
|
font-weight: $font-weight-bold;
|
|
@@ -121,7 +141,7 @@ export default {
|
|
|
line-height: 1;
|
|
|
padding: 0;
|
|
|
|
|
|
- @include media-breakpoint-up(sm) {
|
|
|
+ @include media-breakpoint-up(tb) {
|
|
|
font-size: 1.3125rem;
|
|
|
}
|
|
|
}
|
|
@@ -177,7 +197,7 @@ export default {
|
|
|
.btn {
|
|
|
font-size: inherit;
|
|
|
|
|
|
- @include media-breakpoint-up(sm) {
|
|
|
+ @include media-breakpoint-up(tb) {
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
}
|