50 lines
952 B
Vue
50 lines
952 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
hideIcon?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<q-page-sticky position="bottom-right" :offset="[8, 8]">
|
|
<q-fab
|
|
v-if="!hideIcon"
|
|
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"
|
|
v-if="!hideIcon"
|
|
/>
|
|
</slot>
|
|
</q-fab>
|
|
|
|
<q-btn
|
|
v-else
|
|
fab
|
|
id="btn-add"
|
|
padding="sm"
|
|
icon="mdi-plus"
|
|
direction="up"
|
|
class="color-btn"
|
|
/>
|
|
</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>
|