40 lines
745 B
Vue
40 lines
745 B
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
label?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="column items-center box" :class="{ dark: $q.dark.isActive }">
|
|
<div class="row">
|
|
<q-btn
|
|
unelevated
|
|
@click="$emit('trigger')"
|
|
size="lg"
|
|
class="color-btn"
|
|
icon="mdi-plus"
|
|
round
|
|
/>
|
|
</div>
|
|
<div class="row q-mt-sm color-text" v-if="label">{{ $t(label) }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.box {
|
|
--_btn-add-color: var(--cyan-6-hsl);
|
|
|
|
.color-btn {
|
|
color: hsl(var(--_btn-add-color));
|
|
background: hsla(var(--_btn-add-color) / 0.1) !important;
|
|
}
|
|
|
|
.color-text {
|
|
color: var(--cyan-6);
|
|
}
|
|
|
|
&.dark {
|
|
--_btn-add-color: var(--cyan-5-hsl);
|
|
}
|
|
}
|
|
</style>
|