koel/resources/assets/js/components/ui/BtnCloseModal.vue
2022-07-15 16:48:06 +02:00

30 lines
608 B
Vue

<template>
<button data-testid="close-modal-btn" type="button" @click.prevent="$emit('click')">
<icon :icon="faTimes"/>
</button>
</template>
<script lang="ts" setup>
import { faTimes } from '@fortawesome/free-solid-svg-icons'</script>
<style lang="scss" scoped>
button {
display: flex;
place-content: center;
place-items: center;
position: absolute;
right: 0;
top: 0;
background: var(--color-red);
width: 24px;
height: 24px;
border-radius: 0;
padding: 0;
color: var(--color-text-primary);
transition: opacity .3s;
@media (hover: none) {
opacity: 1;
}
}
</style>