Sovrascrivi le variabili border-radius con il tema

Ciao,

Ho provato a sovrascrivere le nuove variabili border-radius con un tema remoto ma sembra che le variabili :root principali abbiano sempre la priorità. Posso sovrascriverle se creo un componente del tema nell’amministrazione. C’è un modo per sovrascriverle con un tema? Cosa mi sto perdendo? :slightly_smiling_face:

Questo piccolo cambiamento è così utile, grazie mille! :heart:


Ok, funziona come previsto, è solo il mio sito di test che mi stava prendendo in giro. :slightly_smiling_face:

3 Mi Piace

Uh, sembra che non fosse uno scherzo :grinning_face_with_smiling_eyes: Con un tema remoto posso sovrascriverlo solo se uso !important.

Se lo uso in questo modo:arrow_down_small:

$border-radius: 2em !important;

:root {
   --d-button-border-radius: #{$border-radius};
   --d-input-border-radius: #{$border-radius};
 }

Altrimenti, se provo in questo modo:arrow_down_small:

:root {
   --d-button-border-radius: 2em;
   --d-input-border-radius: 2em;
 }

Allora le variabili core :root hanno la priorità.

Cosa mi sto perdendo? :thinking: Grazie! :slightly_smiling_face:

2 Mi Piace

Funziona quando lo testo in un tema… la radice principale viene sovrascritta dalla radice del tema, come previsto.

Puoi mostrare altre informazioni? Dove definisci la tua radice? Come appare il tuo ispettore?

3 Mi Piace

Ciao Charlie,

Grazie per aver controllato :slightly_smiling_face:

Ho provato ad aggiungerlo in scss/custom-variables.scss e ad importarlo in common.scss. Ho anche provato ad aggiungerlo direttamente a common.scss.

Ho appena notato che ora funziona se non ci sono altri componenti (creati in admin) assegnati al tema. Se creo un componente in admin con del CSS nella sezione comune. Allora non sovrascrive le variabili root principali per me.

Funziona se il tema non ha componenti o se il componente Common / CSS è vuoto.

Screenshot 2022-11-24 at 18.22.24


Se creo un componente con del Common / CSS e lo attivo per il tema.

Allora non funziona per me.

Il d-default-border-radius e d-select-body-border-radius sono personalizzati.

Grazie per l’aiuto! :slightly_smiling_face:

3 Mi Piace

Capisco. Molto interessante. Grazie per i passaggi chiari.

Vedrò cosa mi viene in mente. Al momento sono scettico sul fatto che ci sarà una soluzione diversa da !important che stai già usando, ma sarà utile sapere come/perché funziona in questo modo.

2 Mi Piace

hmm sì, posso riprodurre questo… è un po’ strano.

Ho un tema remoto e tutto ciò che common.scss contiene è:

:root {
  --d-border-radius: 100px;
}

questo funziona e ottengo pulsanti arrotondati e altri elementi:

Una volta che aggiungo un componente tema locale che contiene CSS, si rompe. Ho creato un componente tema locale che contiene solo questo in common.scss:

body {
  background: red;
}

Ottengo lo sfondo rosso, ma il border-radius è sparito:

Lo stesso componente funziona bene da remoto. Ottengo sia lo sfondo rosso che i bordi arrotondati.

@david/@pmusaraj questo ha qualcosa a che fare con l’ordine in cui vengono compilati i temi remoti e locali?

5 Mi Piace

Penso che abbia a che fare con la nostra iniezione magica di variables.scss in ogni file CSS del tema. Ora, abbiamo questo in variables.scss:


:root {
  --topic-body-width: #{$topic-body-width};
  --topic-body-width-padding: #{$topic-body-width-padding};
  --topic-avatar-width: #{$topic-avatar-width};
  --d-border-radius: initial;
  --d-nav-pill-border-radius: var(--d-border-radius);
  --d-button-border-radius: var(--d-border-radius);
  --d-input-border-radius: var(--d-border-radius);
}

E poiché iniettiamo quel file SCSS in ogni file SCSS di tema e plugin, viene ripetuto più e più volte:

L’unico modo per sovrascriverlo attualmente è aggiungere la sovrascrittura all’ultimo foglio di stile del tema, solo allora viene emesso per ultimo.

Penso che dobbiamo spostare questa dichiarazione :root in un punto globale al di fuori di variables.scss nel core.

6 Mi Piace

Aha! grazie mille, non avevo mai veramente elaborato il motivo per cui questi si ripetono e li ho completamente trascurati.

Ho spostato questi in un altro file in modo che non si ripetano e ho confermato che risolve il problema.

6 Mi Piace