90 lines
1.7 KiB
Vue
90 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
isClose?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="offers-container" :class="{ 'is-close': isClose }">
|
|
<div class="loader">
|
|
<div class="box">
|
|
<span class="material-icons offer-icon">{{ isClose ? 'close' : 'local_offer' }}</span>
|
|
</div>
|
|
<!-- Anillos de energía flotantes -->
|
|
<div class="energy-ring"></div>
|
|
<div class="energy-ring delayed"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.offers-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.loader {
|
|
--color-main: #fee715;
|
|
--color-glow: rgba(254, 231, 21, 0.5);
|
|
position: relative;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 15px;
|
|
background: #101820;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
box-shadow: 0 0 20px var(--color-glow);
|
|
border: 2px solid var(--color-main);
|
|
overflow: visible;
|
|
}
|
|
|
|
.is-close .loader {
|
|
--color-main: #ef4444;
|
|
--color-glow: rgba(239, 68, 68, 0.5);
|
|
transform: rotate(90deg);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.offer-icon {
|
|
color: var(--color-main);
|
|
font-size: 28px;
|
|
z-index: 5;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.is-close .offer-icon {
|
|
color: white;
|
|
}
|
|
|
|
/* Anillos orbitales tecnológicos */
|
|
.energy-ring {
|
|
position: absolute;
|
|
top: -5px;
|
|
left: -5px;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
border: 2px solid var(--color-main);
|
|
border-radius: inherit;
|
|
opacity: 0.3;
|
|
animation: pulse-ring 2s infinite;
|
|
}
|
|
|
|
.energy-ring.delayed {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(1); opacity: 0.5; }
|
|
100% { transform: scale(1.4); opacity: 0; }
|
|
}
|
|
|
|
.loader:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
</style>
|