Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
617a69d58a | ||
|
|
09a8698f7e | ||
|
|
23700c5b1d | ||
|
|
5c173d5f40 | ||
|
|
d0a3554959 |
No files matched your search
@@ -61,18 +61,21 @@ export function PredictiveSearch() {
|
|||||||
segundo ring visible al hacer foco. Mas simple y robusto no
|
segundo ring visible al hacer foco. Mas simple y robusto no
|
||||||
heredar clases de foco que hay que pelear despues.
|
heredar clases de foco que hay que pelear despues.
|
||||||
|
|
||||||
Sin outline-none: globals.css define un outline de
|
focus-visible:outline-none (no outline-none a secas): globals.css
|
||||||
accesibilidad global para foco por teclado
|
define un outline de accesibilidad global por teclado
|
||||||
(input:focus-visible, azul de marca) que le gana en
|
(input:focus-visible, azul de marca) que le gana en
|
||||||
especificidad a la utilidad outline-none de Tailwind -- no
|
especificidad a un outline-none plano. El wrapper de este
|
||||||
se debe quitar, es intencional. Se le agrega rounded-full
|
componente ya tiene su propio indicador de foco visible
|
||||||
aqui para que ese outline seguido el contorno del pill en
|
(focus-within:border-ari-marino + ring amarillo, mismo patron
|
||||||
vez de dibujarse como rectangulo recto. */}
|
que button.tsx) que cumple el mismo proposito de accesibilidad
|
||||||
|
sin duplicarlo -- variante focus-visible: en vez de la base
|
||||||
|
iguala la especificidad de la regla global (mismo truco que ya
|
||||||
|
usa button.tsx) y evita el doble indicador de foco. */}
|
||||||
<input
|
<input
|
||||||
value={query}
|
value={query}
|
||||||
onChange={(event) => setQuery(event.target.value)}
|
onChange={(event) => setQuery(event.target.value)}
|
||||||
placeholder="Busca juguetes, mochilas, personajes…"
|
placeholder="Busca juguetes, mochilas, personajes…"
|
||||||
className="h-[48px] w-full rounded-full border-0 bg-transparent p-0 text-sm text-slate-950"
|
className="h-[48px] w-full border-0 bg-transparent p-0 text-sm text-slate-950 focus-visible:outline-none"
|
||||||
/>
|
/>
|
||||||
{query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
|
{query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
|
||||||
<button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">
|
<button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ spec:
|
|||||||
runAsUser: 1001
|
runAsUser: 1001
|
||||||
containers:
|
containers:
|
||||||
- name: app
|
- name: app
|
||||||
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.192
|
image: gitea.cruzcloud.net/devops/ecommerce-frontend:v1.0.194
|
||||||
env:
|
env:
|
||||||
- name: HEADLESS_PROVIDER
|
- name: HEADLESS_PROVIDER
|
||||||
value: medusa
|
value: medusa
|
||||||
|
|||||||
Reference in new issue
Block a user