/** * Menu mobile. * Elemento hi-ggu-menu-mobile — vedi includes/styles/class-hi-ggu-style-menu-mobile.php * * Correzioni grafiche al menu mobile di Impreza. A differenza degli altri fogli * di stile del plugin la classe va applicata a mano: si scrive `hi-menu-mobile` * fra le classi CSS aggiuntive dell'elemento Menu, nella sua configurazione per * mobile. Senza quella classe questo foglio non tocca niente. * * Il markup su cui lavora è quello dell'elemento Menu di Impreza in versione * mobile, che è un menu WordPress normale: * * div.w-nav.type_mobile.hi-menu-mobile <- elemento, classe a mano * ul.w-nav-list.level_1 <- voci di primo livello * li.menu-item.level_1 * a.w-nav-anchor.level_1 * ul.w-nav-list.level_2 <- sottomenu, si apre al tocco * li.menu-item.level_2 * a.w-nav-anchor.level_2 * li.menu-item.level_1.wpml-ls-item <- voce lingua, da WPML * .wpml-ls-current-language sulla lingua corrente * * LE VOCI SONO `.menu-item`, non `.w-nav-item`: quel nome di classe non esiste * in Impreza — zero occorrenze in css/style.min.css della 8.42 — ed è il motivo * per cui le regole di questo foglio agganciate ad esso non hanno mai fatto * niente. I selettori qui sotto non nominano mai il tag, così valgono sia per i * li del menu mobile sia per i div che Impreza usa in altre liste. * * DUE CORREZIONI, INDIPENDENTI FRA LORO. * * 1. IL SOTTOMENU STA SOTTO LA VOCE CHE LO APRE, A SINISTRA. Due cose lo * allontanavano: il rientro del blocco, che era di metà larghezza, e il CSS * personalizzato del tema, che centra il testo delle voci di secondo livello * su tutti i menu del sito — `a.w-nav-anchor.level_2 { text-align: center }`. * Quella regola serve al menu a griglia del desktop, che infatti se la * rimette dopo averla annullata, ma nessuno l'aveva mai tolta al mobile: le * sottovoci restavano centrate in mezzo alla riga e non si leggevano più come * figlie della voce sopra. Qui il testo torna a sinistra, il rientro scende a * --hi-mm-sub-indent e le righe si stringono a --hi-mm-sub-row-pad. * * Il rientro sta sul blocco, non sulle voci: così si cumula da solo sui * livelli più profondi, che sono blocchi annidati, e le tre regole del tema * che rientrano le voci di 1rem, 2rem e 3rem vengono annullate tutte insieme. * * 2. LE LINGUE STANNO SU UNA RIGA SOLA. Le voci lingua sono le ultime del menu e * di default si impilano come tutte le altre. Non vengono agganciate per * posizione ma per la classe che ci mette WPML, quindi passare da due lingue a * tre non richiede di toccare niente: la riga si allunga da sola. * * Le sole voci lingua si dimensionano sul proprio contenuto, così finiscono * una accanto all'altra; le altre voci restano una per riga. Funziona in * entrambi i modi in cui Impreza può impaginare la lista: se il layout del * menu mobile è "fullscreen" la lista è flex e le lingue si affiancano come * flex item, se è "panel" o "dropdown" è un blocco normale e si affiancano * come inline-block. Lo spazio fra una lingua e l'altra è un margine, non un * column-gap, perché il gap esiste solo nel primo dei due casi. * * Il numero delle lingue non compare da nessuna parte: due, tre o sei stanno * sulla stessa riga finché ci entrano, e quando non ci entrano più vanno a capo * fra loro, restando comunque separate dalle voci normali del menu. * * `justify-content` non viene toccato di proposito: le voci normali sono larghe * quanto la riga, quindi su di loro non ha effetto, e le lingue ereditano * l'allineamento che il menu ha già. Se il menu è centrato lo sono anche loro. * * I COLORI DELLE LINGUE arrivano dalla palette del tema: la corrente prende il * colore di hover dell'header — l'arancione, lo stesso di [HI_language_switcher] — * le altre il fondo alternativo del contenuto. Anche le altre diventano arancioni * al passaggio del dito, quindi la corrente non cambia stato al tocco. La lingua * corrente si riconosce da `wpml-ls-current-language`; se quella classe non arriva * le lingue restano tutte dello stesso colore, ma la riga non si scompone. * * AGGANCIO DELLE VOCI LINGUA. Nessun selettore nomina una lingua, uno slot o una * posizione: le voci vengono prese dal marchio che WPML lascia sulla voce di menu, * in tutte e tre le forme in cui può arrivare fino al markup del tema. * * [class*="wpml-ls"] classi dello switcher: wpml-ls-item, wpml-ls-slot-74, * wpml-ls-item-it, wpml-ls-menu-item * [class*="wpml_ls"] classi che WordPress deriva dal tipo della voce: * menu-item-type-wpml_ls_menu_item, menu-item-object-… * [id*="menu-item-wpml-ls-"] l'id della voce * * Ne basta una. Il primo aggancio era la sola `.wpml-ls-item`, con l'id come * ripiego, e nel menu mobile non ne arrivava nessuno dei due: le voci lingua * ricadevano nella regola delle voci normali, che le tiene larghe quanto la riga, * e restavano impilate. I selettori non nominano mai il tag, così valgono sia per * i li del menu mobile sia per i div che Impreza usa in altre liste. * * QUELLO CHE NON SI TOCCA. Il sottomenu si apre e si chiude da JavaScript * (us.core.js, switchMobileSubMenu → slideDownCSS/slideUpCSS), e l'animazione * scrive sul blocco, in stile inline, `display`, `height`, `overflow`, `opacity`, * `padding-top` e `padding-bottom`. Una dichiarazione !important su una di * quelle proprietà batte lo stile inline e lascia il sottomenu aperto per * sempre: qui il blocco viene toccato solo sui lati — `padding-inline` — e mai * su display o padding verticale. Lo stesso vale per la lista di primo livello, * che nel layout "dropdown" viene aperta e chiusa nello stesso modo: il suo * `display` non compare in questo foglio. * * SPECIFICITÀ — i selettori ripetono la classe dell'elemento * (.hi-menu-mobile.hi-menu-mobile) per prevalere sulle regole del tema senza * dipendere dall'ordine di caricamento: quelle da battere arrivano a tre classi, * e sull'hover a quattro. La classe compare una volta sola nel markup: ripeterla * nel selettore alza il peso senza cambiare cosa viene selezionato. * * !IMPORTANT DOVE SERVE, E SOLO LÌ. Le regole di colore non ne hanno bisogno e non * ce l'hanno. Le regole di impaginazione sì: il CSS personalizzato del tema viene * stampato in fondo alla pagina, dopo questo foglio, e usa anche selettori con ID * (`#hi-primary-menu.type_desktop …`); per le regole di specificità nessun numero * di classi batte un ID — quattro classi valgono (0,4,0), un ID vale (1,0,0). * Senza !important queste dichiarazioni perderebbero comunque. Le uniche * alternative sarebbero nominare a mia volta quell'ID, legando il foglio a un * elemento specifico, o spostare quel CSS personalizzato qui dentro: la seconda è * la cosa giusta da fare, ma è un lavoro a sé e va fatto guardando cosa quelle * regole reggono altrove. * * L'aspetto si regola dalle variabili qui sotto, senza toccare le regole. */ /* -------------------------------------------------------------------------- * Valori dell'elemento * ------------------------------------------------------------------------ */ .hi-menu-mobile { /* Rientro del blocco delle sottovoci rispetto alla voce che lo apre */ --hi-mm-sub-indent: .8rem; /* Spazio sopra e sotto il testo di ogni sottovoce: tiene strette le righe del sottomenu e lo avvicina alla voce superiore. Le voci di primo livello non lo usano, restano quelle del tema. */ --hi-mm-sub-row-pad: .35rem; /* Distanza del testo dal bordo sinistro del menu: è il valore che il tema dà a tutte le voci mobile, le sottovoci lo riprendono per allinearsi a quelle di primo livello e sommare il solo rientro qui sopra. */ --hi-mm-item-pad: .7rem; /* Spazio fra una lingua e l'altra sulla loro riga */ --hi-mm-lang-gap: 1.5em; /* Colori delle voci lingua */ --hi-mm-lang-color: var(--color-content-bg-alt); --hi-mm-lang-color-current: var(--color-header-middle-text-hover); } /* -------------------------------------------------------------------------- * 1. Sottomenu sotto la voce che lo apre, accostato a sinistra * ------------------------------------------------------------------------ */ /* Il blocco: rientro piccolo a sinistra, niente a destra, testo a sinistra. */ .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_2, .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_3, .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_4 { padding-inline: var(--hi-mm-sub-indent) 0 !important; text-align: left !important; } /* Le sottovoci prendono la riga intera e non vengono spostate da margini automatici, che è il modo in cui si finisce centrati senza averlo chiesto. */ .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_2 > .menu-item, .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_3 > .menu-item, .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_4 > .menu-item { margin-inline: 0 !important; text-align: left !important; } /* Il testo parte da sinistra — vedi la nota 1 sul CSS personalizzato del tema — alla stessa distanza dal bordo delle voci di primo livello, e le righe si stringono. Il rientro del livello lo dà il blocco, non questo padding. */ .hi-menu-mobile.hi-menu-mobile .w-nav-anchor.level_2, .hi-menu-mobile.hi-menu-mobile .w-nav-anchor.level_3, .hi-menu-mobile.hi-menu-mobile .w-nav-anchor.level_4 { text-align: left !important; padding-left: var(--hi-mm-item-pad) !important; padding-block: var(--hi-mm-sub-row-pad) !important; } /* -------------------------------------------------------------------------- * 2. Voci lingua sulla stessa riga * ------------------------------------------------------------------------ */ /* Se il layout del menu rende la lista flex, le righe vanno a capo e si impilano dall'alto. Se la lista è un blocco normale queste dichiarazioni sono inerti e l'affiancamento lo fa l'inline-block più sotto. */ .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_1 { flex-flow: row wrap !important; align-content: flex-start; } /* Le voci normali restano una per riga: occupano tutta la larghezza. */ .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_1 > .menu-item { flex: 0 0 100% !important; max-width: 100%; } /* Le sole voci lingua si dimensionano sul proprio contenuto e si affiancano. * width va riportata ad auto perché il tema la mette al 100% su tutte le voci, e * con flex-basis auto è proprio width a decidere la larghezza: senza questa riga * la voce continuerebbe a prendersi la riga intera. * * inline-block e flex fanno lo stesso lavoro in due impaginazioni diverse — vedi * la nota 2 — e stanno insieme senza darsi fastidio: in una lista flex il display * dei figli viene comunque riportato a block, in una lista normale flex è inerte. */ .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_1 .menu-item[class*="wpml-ls"], .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_1 .menu-item[class*="wpml_ls"], .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_1 [id*="menu-item-wpml-ls-"] { display: inline-block !important; vertical-align: top; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin-inline-end: var(--hi-mm-lang-gap) !important; } /* Lo spazio sta fra una lingua e l'altra, non dopo l'ultima: così la riga resta allineata come il resto del menu anche se il menu è centrato. */ .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_1 .menu-item[class*="wpml-ls"]:last-child, .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_1 .menu-item[class*="wpml_ls"]:last-child, .hi-menu-mobile.hi-menu-mobile .w-nav-list.level_1 [id*="menu-item-wpml-ls-"]:last-child { margin-inline-end: 0 !important; } /* -------------------------------------------------------------------------- * Colori delle voci lingua * L'hover viene dopo lo stato corrente e ne condivide il colore, così la lingua * corrente non cambia al tocco e le altre ci arrivano. * ------------------------------------------------------------------------ */ .hi-menu-mobile.hi-menu-mobile [class*="wpml-ls"] .w-nav-anchor, .hi-menu-mobile.hi-menu-mobile [class*="wpml_ls"] .w-nav-anchor, .hi-menu-mobile.hi-menu-mobile [id*="menu-item-wpml-ls-"] .w-nav-anchor { color: var(--hi-mm-lang-color); } .hi-menu-mobile.hi-menu-mobile [class*="wpml-ls-current"] .w-nav-anchor, .hi-menu-mobile.hi-menu-mobile [class*="wpml-ls"] .w-nav-anchor:hover, .hi-menu-mobile.hi-menu-mobile [class*="wpml-ls"] .w-nav-anchor:focus, .hi-menu-mobile.hi-menu-mobile [class*="wpml_ls"] .w-nav-anchor:hover, .hi-menu-mobile.hi-menu-mobile [class*="wpml_ls"] .w-nav-anchor:focus, .hi-menu-mobile.hi-menu-mobile [id*="menu-item-wpml-ls-"] .w-nav-anchor:hover, .hi-menu-mobile.hi-menu-mobile [id*="menu-item-wpml-ls-"] .w-nav-anchor:focus { color: var(--hi-mm-lang-color-current); }