Fixed topbar positioning

This commit is contained in:
Grzegorz Leoniec 2019-02-19 13:54:59 +01:00
parent afe1890170
commit 92ee1448d7
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377
2 changed files with 18 additions and 3 deletions

View File

@ -12,11 +12,11 @@
@click.prevent="toggleMenu()" @click.prevent="toggleMenu()"
> >
<ds-icon <ds-icon
style="margin-top: -2px; margin-right: 2px;" style="margin-right: 2px;"
name="globe" name="globe"
/> {{ current.code.toUpperCase() }} /> {{ current.code.toUpperCase() }}
<ds-icon <ds-icon
style="margin-top: -2px; margin-left: 2px" style="margin-left: 2px"
size="xx-small" size="xx-small"
name="angle-down" name="angle-down"
/> />

View File

@ -1,10 +1,11 @@
<template> <template>
<div class="layout-default"> <div class="layout-default">
<div class="main-navigation"> <div class="main-navigation">
<ds-container style="padding: .5rem 2rem .2rem; display: flex;"> <ds-container class="main-navigation-container">
<div class="main-navigation-left"> <div class="main-navigation-left">
<a <a
v-router-link v-router-link
style="display: inline-flex"
href="/" href="/"
> >
<ds-logo /> <ds-logo />
@ -194,6 +195,8 @@ export default {
.topbar-locale-switch { .topbar-locale-switch {
display: flex; display: flex;
margin-right: $space-xx-small; margin-right: $space-xx-small;
align-self: center;
display: inline-flex;
} }
.main-navigation { .main-navigation {
@ -202,12 +205,23 @@ export default {
} }
} }
.main-navigation-container {
padding: $space-x-small $space-large !important;
width: 100%;
align-items: center;
display: flex;
}
.main-navigation-left { .main-navigation-left {
display: flex; display: flex;
flex: 1;
width: 100%;
align-items: center;
} }
.main-navigation-center { .main-navigation-center {
display: flex; display: flex;
flex: auto;
width: 100%; width: 100%;
padding-right: $space-large; padding-right: $space-large;
padding-left: $space-large; padding-left: $space-large;
@ -215,6 +229,7 @@ export default {
.main-navigation-right { .main-navigation-right {
display: flex; display: flex;
flex: 1;
} }
.avatar-menu-trigger { .avatar-menu-trigger {