nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: hacer visible el indicador animado de tabs
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s
Details

Browse Source 
Cambios realizados:
- Tabs inactivos ahora tienen fondo transparente en lugar de #1c140c
- Indicador tiene z-10 para estar por encima del fondo
- Labels tienen z-20 para estar por encima del indicador
- Hover de tabs inactivos usa bg semi-transparente (#2a1f14/50)
- Agregada transición suave de colores (transition-colors duration-200)

Esto soluciona el problema donde el badge color cobre se ocultaba
durante la animación de deslizamiento entre tabs.
This commit is contained in:
josedario87
2025-10-30 11:21:19 -06:00
parent a10d39a179
commit 920b868f7a
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nuxt4-app/app/pages/metabase-debug.vue
View File

@@ -76,9 +76,9 @@
:ui="{
root: 'space-y-4',
list: 'border-b border-[var(--brand-border)] bg-[#1c140c]',
indicator: 'bg-[#c08040]',
trigger: 'data-[state=active]:text-[#1b1209] data-[state=active]:hover:text-black data-[state=inactive]:text-[var(--brand-text-muted)] data-[state=inactive]:bg-[#1c140c] data-[state=inactive]:hover:text-[var(--brand-text)] data-[state=inactive]:hover:bg-[#2a1f14] focus-visible:ring-2 focus-visible:ring-[#c08040]',
label: 'font-medium text-sm',
indicator: 'bg-[#c08040] z-10',
trigger: 'relative data-[state=active]:text-[#1b1209] data-[state=active]:hover:text-black data-[state=inactive]:text-[var(--brand-text-muted)] data-[state=inactive]:bg-transparent data-[state=inactive]:hover:text-[var(--brand-text)] data-[state=inactive]:hover:bg-[#2a1f14]/50 focus-visible:ring-2 focus-visible:ring-[#c08040] transition-colors duration-200',
label: 'font-medium text-sm relative z-20',
content: 'py-4'
}"
>