jws-frontend/src/components/ButtonAddCompoent.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>