knowyt/client/src/components/QuoteCardActionButton.vue

37 lines
766 B
Vue

<template>
<button class="quote-card-action-button__button">
<Icon :name="icon" />
</button>
</template>
<script setup lang="ts">
defineProps<{
icon: string,
}>()
</script>
<style lang="scss">
@import '~/assets/css/components';
.quote-card-action-button {
&__button {
margin: 0 4px;
padding: 12px;
width: 48px;
height: 48px;
border: $quote-button-border;
border-radius: 48px;
background-color: $quote-button-background-color;
color: $quote-button-text-color;
font-family: $font-secondary;
font-size: 24px;
cursor: pointer;
&:hover {
border: $quote-button-hover-border;
background-color: $quote-button-hover-background-color;
color: $quote-button-hover-text-color;
}
}
}
</style>