diff options
Diffstat (limited to 'src/components/desktop_nav')
| -rw-r--r-- | src/components/desktop_nav/desktop_nav.scss | 35 | ||||
| -rw-r--r-- | src/components/desktop_nav/desktop_nav.vue | 5 |
2 files changed, 35 insertions, 5 deletions
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 71202244..c7e02936 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -1,4 +1,4 @@ -@import '../../_variables.scss'; +@import "../../variables"; .DesktopNav { width: 100%; @@ -23,13 +23,37 @@ max-width: 980px; } + &.-column-stretch .inner-nav { + --miniColumn: 25rem; + --maxiColumn: 45rem; + --columnGap: 1em; + + max-width: + calc( + var(--sidebarColumnWidth, var(--miniColumn)) + + var(--contentColumnWidth, var(--maxiColumn)) + + var(--columnGap) + ); + } + &.-logoLeft .inner-nav { grid-template-columns: auto 2fr 2fr; grid-template-areas: "logo sitename actions"; } + &.-column-stretch.-wide .inner-nav { + max-width: + calc( + var(--sidebarColumnWidth, var(--miniColumn)) + + var(--contentColumnWidth, var(--maxiColumn)) + + var(--notifsColumnWidth, var(--miniColumn)) + + var(--columnGap) + ); + } + .button-default { - &, svg { + &, + svg { color: $fallback--text; color: var(--btnTopBarText, $fallback--text); } @@ -50,7 +74,7 @@ color: $fallback--text; color: var(--btnToggledTopBarText, $fallback--text); background-color: $fallback--fg; - background-color: var(--btnToggledTopBar, $fallback--fg) + background-color: var(--btnToggledTopBar, $fallback--fg); } } @@ -62,6 +86,7 @@ transition-duration: 100ms; @media all and (min-width: 800px) { + /* stylelint-disable-next-line declaration-no-important */ opacity: 1 !important; } @@ -117,4 +142,8 @@ text-align: right; } } + + .spacer { + width: 1em; + } } diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue index f352c78c..07bf8005 100644 --- a/src/components/desktop_nav/desktop_nav.vue +++ b/src/components/desktop_nav/desktop_nav.vue @@ -38,7 +38,7 @@ /> <button class="button-unstyled nav-icon" - @click="openSettingsModal" + @click.stop="openSettingsModal" > <FAIcon fixed-width @@ -61,10 +61,11 @@ :title="$t('nav.administration')" /> </a> + <span class="spacer" /> <button v-if="currentUser" class="button-unstyled nav-icon" - @click.prevent="logout" + @click.stop.prevent="logout" > <FAIcon fixed-width |