Feat: Agregar efecto hover sutil a filtros CheckboxGroup
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 46s

- Añadir hover con fondo color brand (#c08040) al 5% de opacidad
- Transición suave de 200ms en cambio de colores
- Bordes redondeados para mejor estética
- Sin cambios de tamaño ni desplazamiento
- Aplicado a todos los filtros: ubicaciones, tipos, estados y calidades
This commit is contained in:
2025-10-30 13:26:55 -06:00
parent 425e828083
commit 36c4f00436

View File

@@ -82,7 +82,8 @@
orientation="vertical"
size="sm"
:ui="{
fieldset: 'max-h-40 overflow-y-auto'
fieldset: 'max-h-40 overflow-y-auto',
container: 'hover:bg-[#c08040]/5 transition-colors duration-200 rounded-md px-2 -mx-2'
}"
/>
</div>
@@ -97,6 +98,9 @@
variant="list"
orientation="vertical"
size="sm"
:ui="{
container: 'hover:bg-[#c08040]/5 transition-colors duration-200 rounded-md px-2 -mx-2'
}"
/>
</div>
@@ -110,6 +114,9 @@
variant="list"
orientation="vertical"
size="sm"
:ui="{
container: 'hover:bg-[#c08040]/5 transition-colors duration-200 rounded-md px-2 -mx-2'
}"
/>
</div>
</div>
@@ -124,6 +131,9 @@
variant="list"
orientation="horizontal"
size="sm"
:ui="{
container: 'hover:bg-[#c08040]/5 transition-colors duration-200 rounded-md px-2 -mx-2'
}"
/>
</div>
</div>
@@ -255,7 +265,8 @@
orientation="vertical"
size="sm"
:ui="{
fieldset: 'max-h-40 overflow-y-auto'
fieldset: 'max-h-40 overflow-y-auto',
container: 'hover:bg-[#c08040]/5 transition-colors duration-200 rounded-md px-2 -mx-2'
}"
/>
</div>
@@ -270,6 +281,9 @@
variant="list"
orientation="vertical"
size="sm"
:ui="{
container: 'hover:bg-[#c08040]/5 transition-colors duration-200 rounded-md px-2 -mx-2'
}"
/>
</div>
@@ -283,6 +297,9 @@
variant="list"
orientation="vertical"
size="sm"
:ui="{
container: 'hover:bg-[#c08040]/5 transition-colors duration-200 rounded-md px-2 -mx-2'
}"
/>
</div>
</div>
@@ -297,6 +314,9 @@
variant="list"
orientation="horizontal"
size="sm"
:ui="{
container: 'hover:bg-[#c08040]/5 transition-colors duration-200 rounded-md px-2 -mx-2'
}"
/>
</div>
</div>