Comment supprimer l'effet de dégradé du bouton ?

Dev
1

Salut !

Ce soir, j’ai cherché à rendre l’effet de clic sur les boutons optionnel via un réglage. Personnellement, je trouve que ça rend mal, mais il y a probablement des gens qui aiment vraiment ça.
Voici ce que je veux dire, vous pouvez le voir en cliquant et en maintenant enfoncé la plupart des boutons.
image
Ça rend encore plus mal sur certains boutons ;
image

Je ne pense pas que l’équipe cherche à le supprimer complètement, alors j’allais chercher à créer un réglage sur le site, puis y accéder via le SCSS des boutons.

Je ne pense pas qu’il existe un fichier simple pour créer un réglage et lui donner une propriété. Est-ce le cas ? Sinon, comment faire et comment l’intégrer dans le fichier SCSS ?

Merci pour votre aide !

2

N’est-ce pas quelque chose qui peut être remplacé via un composant de thème ?

3 « J'aime »
3

Je suppose que j’ai oublié les composants pour ce problème en particulier lol

Mais pour l’avenir, est-il possible de créer des paramètres ? Je vais corriger le problème de mon côté dans un instant

EDIT : Je viens d’essayer de le corriger de mon côté et ça n’a pas fonctionné.

4

Bonjour,

Si j’ai bien compris, c’est le statut :active du bouton que vous souhaitez modifier.

Il existe un mixin linear-gradient pour la transition de couleur.

linear-gradient utilisé lorsque le bouton est actif. Comme vous pouvez le voir dans buttons.css

L’ensemble est le mixin de bouton par défaut.

Et seules les variables de couleur changent sur l’autre bouton comme .btn-primary et ci-dessous :

Vous pouvez donc remplacer la sortie du mixin linear-gradient en ciblant les classes active.

Quelque chose comme ceci devrait fonctionner. :slightly_smiling_face:

Nous devons cibler les classes de types de boutons car les variables de couleur sont différentes, nous ne pouvons donc pas les cibler globalement.

// Bouton par défaut

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

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

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

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

Avant

Après

5 « J'aime »
5

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