/** * Accordion — aspetto. COPIA NOSTRA, indipendente da Elementor. * * PROVENIENZA. Le 19 regole vengono da themes/hello-theme-child-master/style.css, sezione * "ANCHOR: ACCORDION". Non sono una dipendenza: sono una copia presa una volta. Il widget * Accordion di elewidget non ha CSS proprio (il suo accordion.css contiene una sola regola, * che è di TextImage e ci è finita per errore) — tutto il suo aspetto viveva nel tema. * * PERCHÉ COPIARLE INVECE DI LASCIARLE NEL TEMA. Il tema non muore con Elementor, quindi sul * frontend le regole originali continuerebbero a funzionare. Ma il componente deve essere * padrone del proprio aspetto: se domani qualcuno ripulisce il tema dalle regole dei widget * Elementor — cosa che a migrazione finita è esattamente quello che si vorrà fare — le * pagine SE Builder non devono cambiare di una virgola. * * LO SCOPE. Ogni regola è prefissata `.se-gjs-page`, che esiste in entrambi i posti: * - frontend → il
del filtro the_content * - canvas → la classe messa sull' dell'iframe da se-builder-glue.js * Ne segue, senza dover fare altro: sulle pagine del builder queste regole vincono per * specificità (0,2,0 contro lo 0,1,0 del tema); sulle pagine Elementor non arrivano * affatto, perché `.se-gjs-page` non c'è. Le due copie non si pestano i piedi in nessuno * dei due versi. * * LA FRECCIA. L'originale era ``, cioè il * font icone di ELEMENTOR. Il componente usa un SVG inline: taglia l'ultima dipendenza da * Elementor dell'Accordion, e i selettori qui puntano alla sola `.accordionIcona`. * * ⚠ VARIABILI DEL TEMA. Le regole usano --spacing--small, --color--primary, --color--blue2, * --text--big, --text--normal, tutte definite nel tema figlio. È una dipendenza VOLUTA e * legittima: sono i token di design del sito, non roba di Elementor, e il tema resta. Se un * domani il plugin dovesse girare su un altro tema, sono le cinque righe da fornire. */ .se-gjs-page .accordion { list-style: none; padding: 0; margin-top: 1rem; width: 100%; } .se-gjs-page .accordion-item { margin-top: .5rem; margin-bottom: calc(var(--spacing--small) * 1); box-shadow: 0 0 4px #eaeaea; } .se-gjs-page .accordion-item .accordion-header { background: #fff; padding: 1rem; border-radius: 10px; } .se-gjs-page .accordion-item.active { padding-bottom: calc(var(--spacing--small) * 2); } .se-gjs-page .accordion-header { cursor: pointer; display: flex; justify-content: flex-start; align-items: center; font-size: 23px; gap: .5rem; } .se-gjs-page .accordion-header span { font-size: var(--text--big); } .se-gjs-page .active .accordion-header { margin-top: .5rem; } /* La freccia. Nell'originale era il glifo di un font Elementor ruotato; qui è un SVG. `margin-left:auto` la spinge a fine riga, la rotazione segna aperto/chiuso. */ .se-gjs-page .accordion-item .accordionIcona { color: var(--color--blue2); margin-left: auto; display: inline-flex; flex: 0 0 auto; transform: rotate(0deg); transition: transform 0.3s ease-in-out; } .se-gjs-page .accordion-item.active .accordionIcona { transform: rotate(90deg); } /* L'SVG non ha dimensione propria: gliela diamo qui, e il colore lo prende da currentColor, cioè dal `color` della regola sopra. */ .se-gjs-page .accordion-item .accordionIcona svg { width: 1em; height: 1em; display: block; } /* max-height:0 + overflow:hidden è il meccanismo dell'apri/chiudi: il comportamento (assets/js/widgets/accordion.js) scrive max-height in pixel per aprire e 0 per chiudere. Se si toglie una di queste due proprietà, il contenuto resta sempre visibile. */ .se-gjs-page .accordion-content { overflow: hidden; margin-top: 0; transition: max-height 0.3s ease-out; max-height: 0; padding: 0 1rem; margin-left: 10px; } .se-gjs-page .accordion-item .accordion-content p { font-size: 18px; line-height: 1.5; margin: 0; margin-top: .5rem; font-weight: 200; } .se-gjs-page .accordion-item .accordion-content ul { margin-top: .5rem; } /* Classe libera del trait `accordion_content_class`: nell'originale serviva a mettere il contenuto su due colonne. Vale la pena tenerla perché è già usata sul sito. */ .se-gjs-page .accordion-content.colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .se-gjs-page .accordion-content ul { list-style: disc; padding-left: 2rem; } .se-gjs-page .accordion-content ul li { font-size: 18px; } .se-gjs-page .accordion-content ul li::marker { color: var(--color--primary); } .se-gjs-page .accordion-button { display: inline-block; font-size: var(--text--normal); padding: 10px 20px; background-color: var(--color--primary); color: #fff; border: none; border-radius: 20px; cursor: pointer; min-width: 100px; text-align: center; margin: 1rem auto; } /* La numerazione, quando l'accordion è "lista ordinata". Nell'originale il numero lo stampava PHP nel markup (`1.`) e non c'era CSS a riguardo: eredita da .accordion-header. Qui resta lo stesso, la regola serve solo a non farlo schiacciare dal flex. */ .se-gjs-page .accordion-number { flex: 0 0 auto; } /* ========================================================================== DENTRO L'EDITOR: tutte le voci aperte ========================================================================== Sul sito il contenuto di una voce chiusa è alto zero (`max-height: 0` + `overflow: hidden`): è così che funziona l'apri/chiudi. Nel canvas però il comportamento non gira — e non deve girare, perché nell'editor cliccare una domanda seleziona la FAQ e il doppio clic apre la scrittura sul posto: se in mezzo si aprisse e chiudesse anche la voce, i due gesti si pesterebbero. Risultato: le risposte erano nel markup ma alte zero pixel, e non c'era modo di scriverci. In editing quindi si apre tutto. Non è una scorciatoia: un editor deve mostrare il contenuto che c'è, e nascondere metà del testo dietro un'interazione che nell'editor non esiste significa contenuto non modificabile. `.se-gjs-canvas` è la classe che il builder mette sull' dell'iframe: esiste SOLO nel canvas, quindi queste regole non arrivano mai sulla pagina pubblicata. Servono gli !important perché battono le regole qui sopra a specificità maggiore (.se-gjs-page …) e perché il comportamento scrive max-height inline. ========================================================================== */ .se-gjs-canvas .accordion-content { max-height: none !important; overflow: visible !important; } /* La freccia punta come se la voce fosse aperta, che nel canvas è la verità: una freccia chiusa sopra un contenuto visibile è solo un'informazione sbagliata. */ .se-gjs-canvas .accordion-item .accordionIcona { transform: rotate(90deg); } /* Un filo di separazione fra le voci, che sul sito non serve — lì le chiuse sono già distinte — ma nel canvas, con tutto aperto, dice dove finisce una risposta e comincia la domanda dopo. */ .se-gjs-canvas .accordion-content { border-top: 1px dashed #d7dbe2; padding-top: .25rem; } /* Da @media screen and (max-width:440px) del tema figlio. */ @media screen and (max-width: 440px) { .se-gjs-page .accordion-header { font-size: 18px; gap: .5rem; line-height: 1.3; } .se-gjs-page .accordion-item .accordion-content p { font-size: 17px; } }