mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
a31274c793
* Refactor branding of post ribbons * Refactor chat to be more brandable * Refine avatar menu logout item to have danger color * Change login menu item color to '$text-color-link'
55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<dropdown class="login-button" offset="8" :placement="placement">
|
|
<template #default="{ toggleMenu }">
|
|
<base-button icon="sign-in" circle ghost @click.prevent="toggleMenu" />
|
|
</template>
|
|
<template #popover>
|
|
<div class="login-button-menu-popover">
|
|
<nuxt-link class="login-link" :to="{ name: 'login' }">
|
|
<base-icon name="sign-in" />
|
|
{{ $t('login.login') }}
|
|
</nuxt-link>
|
|
</div>
|
|
</template>
|
|
</dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import Dropdown from '~/components/Dropdown'
|
|
|
|
export default {
|
|
components: {
|
|
Dropdown,
|
|
},
|
|
props: {
|
|
placement: { type: String, default: 'top-end' },
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scope>
|
|
.login-button {
|
|
color: $color-secondary;
|
|
}
|
|
|
|
.login-button-menu-popover {
|
|
padding-top: $space-x-small;
|
|
padding-bottom: $space-x-small;
|
|
hr {
|
|
color: $color-neutral-90;
|
|
background-color: $color-neutral-90;
|
|
}
|
|
.login-link {
|
|
color: $text-color-link;
|
|
padding-top: $space-xx-small;
|
|
&:hover {
|
|
color: $text-color-link-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
.invite-code {
|
|
left: 50%;
|
|
}
|
|
</style>
|