/* ========================================================================== EDENAY SHOP CORE — core.css SOLO COMPORTAMENTO. Qui non c'e' il vestito: nessun colore di marca, nessun font, nessuna griglia, nessuna larghezza di colonna. Cosa c'e' dentro e perche' non puo' stare altrove: - il pannello filtri che sotto i 1024px e' un foglio che sale dal basso e sopra i 1024px torna un elemento normale nel flusso; - il velo e il blocco dello scorrimento; - la forzatura di [hidden], che molti temi annullano; - il focus visibile e il testo per soli lettori di schermo. DUE SCELTE CHE SEMBRANO STRANE E NON LO SONO: 1) Il foglio si attiva solo con la classe .is-js, che mette il JavaScript. Senza JavaScript non ci sarebbe modo di aprirlo: meglio allora lasciare il pannello nel flusso della pagina, scomodo ma usabile, che nasconderlo e renderlo irraggiungibile. 2) Le regole del pannello e del velo NON discendono da .esc-filtri. Divi assegna a ogni colonna position:relative e z-index:2, e un elemento fissato dentro una colonna resta prigioniero di quel contesto: la colonna dei prodotti, che nel documento viene dopo, gli passerebbe davanti. All'apertura il JavaScript sposta quindi pannello e velo in fondo a e li rimette dov'erano alla chiusura. Perche' lo stile continui a valere anche fuori dalla colonna, le regole si appoggiano alle classi degli elementi, non ai loro genitori. Tutto il resto — colori, tipografia, spaziature, colonne, posizione della sidebar — sta in skin.css (disattivabile) oppure lo decide Divi. ========================================================================== */ .esc-filtri, .esc-pannello, .esc-velo, .esc-chip, .esc-ordina, .esc-griglia, .esc-pag, .esc-vuoto{ --esc-tocco:44px; --esc-curva:cubic-bezier(.22,.61,.36,1); --esc-durata:.28s; box-sizing:border-box; } .esc-pannello *, .esc-pannello *::before, .esc-pannello *::after{ box-sizing:border-box; } /* -------------------------------------------------------------------------- PANNELLO: foglio dal basso sotto i 1024px, solo con JavaScript attivo -------------------------------------------------------------------------- */ .esc-pannello.is-js{ position:fixed; left:0; right:0; bottom:0; z-index:2147483000; /* sopra qualunque strato di Divi */ display:flex; flex-direction:column; max-height:86vh; margin:0; transform:translateY(101%); visibility:hidden; /* Nessuna transizione sulla visibilita' finche' il foglio non e' stato aperto almeno una volta. Il JavaScript aggiunge .is-js dopo che la pagina e' gia' disegnata: con la transizione attiva fin da subito, il passaggio da visibile a nascosto verrebbe ritardato di 0,28s e il pannello resterebbe in mezzo alla pagina per un istante. */ transition:transform var(--esc-durata) var(--esc-curva); } .esc-pannello.is-js.is-usato{ transition:transform var(--esc-durata) var(--esc-curva), visibility 0s linear var(--esc-durata); } .esc-pannello.is-js.is-aperto{ transform:translateY(0); visibility:visible; transition:transform var(--esc-durata) var(--esc-curva), visibility 0s; } .esc-velo{ position:fixed; inset:0; z-index:2147482999; opacity:0; transition:opacity var(--esc-durata) var(--esc-curva); } .esc-velo.is-aperto{ opacity:1; } /* molti temi danno ai div un display esplicito: [hidden] va imposto */ .esc-velo[hidden], .esc-filtri [hidden], .esc-pannello [hidden], .esc-chip [hidden]{ display:none !important; } .esc-pannello__corpo{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; } .esc-pannello__piede{ flex:0 0 auto; } /* -------------------------------------------------------------------------- Da 1024px il pannello smette di essere un foglio e torna nel flusso: dove finisce esattamente lo decide Divi, non questo file. -------------------------------------------------------------------------- */ @media (min-width:1024px){ .esc-pannello.is-js{ position:static; z-index:auto; max-height:none; transform:none; visibility:visible; transition:none; } .esc-btn--apri, .esc-chiudi, .esc-velo{ display:none !important; } } /* -------------------------------------------------------------------------- AREE DI TOCCO — requisito di usabilita', non di stile -------------------------------------------------------------------------- */ .esc-btn, .esc-chiudi, .esc-applica, .esc-azzera, .esc-select, .esc-input, .esc-num, .esc-scelta, .esc-rapida, .esc-chip__voce, .esc-pag a, .esc-pag span, .esc-vuoto__cta{ min-height:var(--esc-tocco); } .esc-chiudi{ min-width:var(--esc-tocco); } .esc-scelta{ display:flex; align-items:center; cursor:pointer; } /* -------------------------------------------------------------------------- DOPPIO CURSORE DEL PREZZO — serve a farlo funzionare, non a decorarlo -------------------------------------------------------------------------- */ .esc-slider{ position:relative; } .esc-slider__attivo{ position:absolute; } .esc-range{ position:absolute; left:0; top:0; width:100%; margin:0; background:none; pointer-events:none; /* passa il click al cursore sotto */ appearance:none; -webkit-appearance:none; } .esc-range::-webkit-slider-thumb{ pointer-events:auto; -webkit-appearance:none; } .esc-range::-moz-range-thumb{ pointer-events:auto; } /* -------------------------------------------------------------------------- ACCESSIBILITA' -------------------------------------------------------------------------- */ .esc-filtri a:focus-visible, .esc-filtri button:focus-visible, .esc-pannello a:focus-visible, .esc-pannello button:focus-visible, .esc-pannello select:focus-visible, .esc-pannello input:focus-visible, .esc-ordina select:focus-visible, .esc-chip a:focus-visible, .esc-pag a:focus-visible{ outline:2px solid currentColor; outline-offset:2px; } .esc-card .screen-reader-text, .esc-chip .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } @media (prefers-reduced-motion:reduce){ .esc-pannello, .esc-velo{ transition:none !important; } }