30 lines
674 B
Vue
30 lines
674 B
Vue
<script setup lang="ts"></script>
|
|
|
|
<template>
|
|
<q-page-sticky position="bottom-right" :offset="[8, 8]">
|
|
<q-fab
|
|
id="btn-add"
|
|
padding="sm"
|
|
icon="mdi-plus"
|
|
direction="up"
|
|
class="color-btn"
|
|
>
|
|
<slot>
|
|
<q-fab-action padding="xs" color="primary" icon="mdi-account-plus" />
|
|
</slot>
|
|
</q-fab>
|
|
</q-page-sticky>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.color-btn {
|
|
color: white;
|
|
background: hsla(var(--blue-10-hsl) / 0.5);
|
|
transition: background 0.3s ease-in-out;
|
|
}
|
|
|
|
:deep(:where(.q-hoverable:hover, .q-fab--opened)) {
|
|
transition: background 0.3s ease-in-out;
|
|
background: hsla(var(--blue-10-hsl) / 1) !important;
|
|
}
|
|
</style>
|