Come rimuovo l'effetto gradiente del pulsante?

Ciao!

Stasera stavo pensando di fare una PR per rendere l’effetto click sui pulsanti opzionale tramite un’impostazione. Personalmente penso che sia piuttosto brutto, ma probabilmente ci sono persone a cui piace davvero.
Questo è quello che intendo, puoi vederlo cliccando e tenendo premuto sulla maggior parte dei pulsanti
image
Sembra ancora peggio su alcuni pulsanti;
image

Non credo che il team stia pensando di rimuoverlo completamente, quindi stavo pensando di creare un’impostazione del sito, per poi accedervi tramite il pulsante scss.

Non credo ci sia un file semplice per creare un’impostazione e assegnarle una proprietà. C’è? In caso contrario, come posso farlo e poi inserirlo nel file SCSS?

Grazie per qualsiasi aiuto!

Non è qualcosa che può essere sovrascritto tramite un componente tema?

3 Mi Piace

Credo di aver dimenticato i componenti per questo problema in particolare lol

Ma per il futuro è possibile creare delle impostazioni? Risolverò il problema da solo a breve

EDIT: Ho appena provato a risolverlo da solo e non ha funzionato.

Ciao,

Se ho capito bene, è lo stato :active del pulsante che vuoi modificare.

Esiste un mixin linear-gradient per la transizione del colore.

linear-gradient utilizzato quando il pulsante è attivo. Come puoi vedere in buttons.css

Tutto questo è il mixin del pulsante predefinito.

E solo le variabili di colore cambiano sull’altro pulsante come .btn-primary e sotto:


Quindi puoi sovrascrivere l’output del mixin linear-gradient prendendo di mira le classi active.

Qualcosa del genere dovrebbe funzionare. :slightly_smiling_face:

Dobbiamo prendere di mira le classi dei tipi di pulsante perché le variabili di colore sono diverse, quindi non possiamo prenderle di mira a livello globale.

// Pulsante predefinito

.btn {
  &:active,
  &.btn-active {
    background-image: none;
    border-bottom-color: transparent;
    background-color: var(--primary-medium);
  }
  
  // Pulsante primario

  &.btn-primary {
    &:active,
    &.btn-active {
      background-color: var(--tertiary-hover);
    }
  }
  
  // Pulsante Danger e ✘

  &.btn-danger,
  &.cancel {
    &:active,
    &.btn-active {
      background-color: var(--danger-hover);
    }
  }
  
  // Pulsante ✔

  &.ok {
    &:active,
    &.btn-active {
      background-color: var(--success-hover);
    }
  }
}

Prima

Dopo

5 Mi Piace

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.