Como remover o efeito gradiente do botão?

Dev
1

Olá!

Esta noite eu estava pensando em fazer um PR para tornar o efeito de clique em botões opcional através de uma configuração. Eu pessoalmente acho que fica muito ruim, mas provavelmente há pessoas que realmente gostam.
É a isso que me refiro, você pode vê-lo clicando e segurando em quase qualquer botão
image
Fica ainda pior em alguns botões;
image

Eu não acho que a equipe esteja querendo removê-lo completamente, então eu estava pensando em criar uma configuração do site e acessá-la através do SCSS do botão.

Eu não acho que exista um arquivo fácil para apenas criar uma configuração e dar a ela uma propriedade. Existe? Se não, como eu faço isso e depois o obtenho no arquivo SCSS?

Obrigado por qualquer ajuda!

2

Isto não é algo que pode ser substituído por meio de um componente de tema?

3 curtidas
3

Acho que esqueci dos componentes para este problema em específico, lol

Mas para o futuro, é possível criar configurações? Vou corrigir o problema por aqui em um instante

EDIT: Acabei de tentar corrigir por aqui e não funcionou.

4

Olá,

Se entendi corretamente, é o status :active do botão que você deseja alterar.

Existe um mixin linear-gradient para transição de cores.

linear-gradient usado quando o botão está ativo. Como você pode ver no buttons.css

Todo isso é o mixin de botão padrão.

E apenas as variáveis de cores mudam nos outros botões como .btn-primary e abaixo:

Portanto, você pode substituir a saída do mixin linear-gradient direcionando as classes active.

Algo como isto deve funcionar. :slightly_smiling_face:

Temos que direcionar as classes dos tipos de botão porque as variáveis de cores são diferentes, então não podemos direcioná-las globalmente.

// Botão padrão

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

  &.btn-primary {
    &:active,
    &.btn-active {
      background-color: var(--tertiary-hover);
    }
  }
  
  // Botão de perigo e ✘

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

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

Antes

Depois

5 curtidas
5

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