diff options
Diffstat (limited to 'src/components/mobile_nav/mobile_nav.vue')
| -rw-r--r-- | src/components/mobile_nav/mobile_nav.vue | 30 |
1 files changed, 26 insertions, 4 deletions
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 0f1fe621..c2746abe 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -88,13 +88,25 @@ ref="sideDrawer" :logout="logout" /> + <teleport to="#modal"> + <confirm-modal + v-if="showingConfirmLogout" + :title="$t('login.logout_confirm_title')" + :confirm-text="$t('login.logout_confirm_accept_button')" + :cancel-text="$t('login.logout_confirm_cancel_button')" + @accepted="doLogout" + @cancelled="hideConfirmLogout" + > + {{ $t('login.logout_confirm') }} + </confirm-modal> + </teleport> </div> </template> <script src="./mobile_nav.js"></script> <style lang="scss"> -@import '../../_variables.scss'; +@import "../../variables"; .MobileNav { z-index: var(--ZI_navbar); @@ -127,7 +139,7 @@ } .site-name { - padding: 0 .3em; + padding: 0 0.3em; display: inline-block; } @@ -156,7 +168,7 @@ position: fixed; top: 0; left: 0; - box-shadow: 1px 1px 4px rgba(0,0,0,.6); + box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); box-shadow: var(--panelShadow); transition-property: transform; transition-duration: 0.25s; @@ -182,7 +194,7 @@ color: var(--topBarText); background-color: $fallback--fg; background-color: var(--topBar, $fallback--fg); - box-shadow: 0px 0px 4px rgba(0,0,0,.6); + box-shadow: 0 0 4px rgb(0 0 0 / 60%); box-shadow: var(--topBarShadow); .spacer { @@ -235,6 +247,16 @@ } } } + + .confirm-modal.dark-overlay { + &::before { + z-index: 3000; + } + + .dialog-modal.panel { + z-index: 3001; + } + } } </style> |