koel/resources/assets/js/components/koel-plus/BtnUpgradeToPlus.vue
2024-07-06 17:44:43 +02:00

32 lines
731 B
Vue

<template>
<a href class="upgrade-to-plus-btn" @click.prevent="openModal">
<Icon :icon="faPlus" fixed-width/>
Upgrade to Plus
</a>
</template>
<script setup lang="ts">
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import { eventBus } from '@/utils'
const openModal = () => eventBus.emit('MODAL_SHOW_KOEL_PLUS')
</script>
<style scoped lang="scss">
a.upgrade-to-plus-btn {
@include inset-when-pressed();
background: linear-gradient(97.78deg, #671ce4 17.5%, #c62be8 113.39%);
border-radius: 5px;
border-style: solid;
padding: .65rem 1rem;
&:hover {
color: var(--color-text-primary) !important;
}
&:active {
padding: .65rem 1rem; // prevent layout jump in sidebar
}
}
</style>