josedario87
639a4c44c4
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 54s
- Cambiar botones de quick-actions a variant solid con efectos 3D - Agregar box-shadow multicapa con inset shadows a botones - Implementar efectos hover y active en botones de sesión - Cambiar badges de grupos a variant solid - Agregar efectos 3D a badges con sombras y hover - Mejorar color del email en modo oscuro (negro en lugar de gris) - Aumentar peso de fuente del email en modo oscuro para mejor legibilidad
51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<template>
|
|
<UButton
|
|
color="error"
|
|
size="lg"
|
|
variant="solid"
|
|
class="solid-button"
|
|
@click="handleClick"
|
|
>
|
|
<template #leading>
|
|
<UIcon name="i-heroicons-arrow-right-on-rectangle" />
|
|
</template>
|
|
Cerrar Sesión
|
|
</UButton>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { logout } = useAuthentik()
|
|
|
|
const handleClick = () => {
|
|
logout()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.solid-button {
|
|
box-shadow:
|
|
0 4px 12px 0 rgba(239, 68, 68, 0.3),
|
|
0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
|
inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.solid-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 6px 16px 0 rgba(239, 68, 68, 0.4),
|
|
0 4px 8px 0 rgba(0, 0, 0, 0.25),
|
|
inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.solid-button:active {
|
|
transform: translateY(0);
|
|
box-shadow:
|
|
0 2px 8px 0 rgba(239, 68, 68, 0.3),
|
|
0 1px 2px 0 rgba(0, 0, 0, 0.2),
|
|
inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
</style>
|