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

Style: Aplicar tema personalizado a todos los filtros InputMenu
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s
Details

Browse Source 
Se aplica el mismo tema café/dorado a todos los InputMenu de filtros:
- Tipo de café
- Estado
- Ubicación
- Calidad

Estilos aplicados (igual que ClienteMultiSelector):
- Fondo: --brand-surface (#1f180f)
- Borde: --brand-border (#3a2a16)
- Focus ring: ring-1 con --brand-primary (#e0c080)
- Item highlighted: rgba(224,192,128,0.12)
- Tags: color --brand-primary con bordes dorados
- Transición suave en el borde de focus

Todos los filtros ahora mantienen la coherencia visual
con el resto de la aplicación.
This commit is contained in:
josedario87
2025-10-30 14:02:15 -06:00
parent 4837de1262
commit 87ec3b1eb3
1 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
nuxt4-app/app/components/informe-ingresos/FiltrosPanel.vue
View File

@@ -62,6 +62,17 @@
size="xs"
icon="i-lucide-coffee"
class="w-full"
:ui="{
root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow',
base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]',
placeholder: 'placeholder-[var(--brand-text-muted)]',
leadingIcon: 'text-[var(--brand-text-muted)]',
content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]',
item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]',
tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]',
tagsItemText: 'text-[var(--brand-primary)]',
tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]'
}"
/>
</div>
</Transition>
@@ -86,6 +97,17 @@
size="xs"
icon="i-lucide-check-circle"
class="w-full"
:ui="{
root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow',
base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]',
placeholder: 'placeholder-[var(--brand-text-muted)]',
leadingIcon: 'text-[var(--brand-text-muted)]',
content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]',
item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]',
tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]',
tagsItemText: 'text-[var(--brand-primary)]',
tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]'
}"
/>
</div>
</Transition>
@@ -110,6 +132,17 @@
size="xs"
icon="i-lucide-map-pin"
class="w-full"
:ui="{
root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow',
base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]',
placeholder: 'placeholder-[var(--brand-text-muted)]',
leadingIcon: 'text-[var(--brand-text-muted)]',
content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]',
item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]',
tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]',
tagsItemText: 'text-[var(--brand-primary)]',
tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]'
}"
/>
</div>
</Transition>
@@ -134,6 +167,17 @@
size="xs"
icon="i-lucide-star"
class="w-full"
:ui="{
root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow',
base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]',
placeholder: 'placeholder-[var(--brand-text-muted)]',
leadingIcon: 'text-[var(--brand-text-muted)]',
content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]',
item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]',
tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]',
tagsItemText: 'text-[var(--brand-primary)]',
tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]'
}"
/>
</div>
</Transition>