ボタンのグラデーション効果を削除するにはどうすればよいですか?

こんにちは!

今夜、設定でボタンのクリックエフェクトをオプションにするためのPRを作成することを検討していました。個人的にはかなり見栄えが悪いと思いますが、本当に気に入っている人もいるでしょう。
これが意味するところです。ほとんどのボタンでクリックして押し続けると確認できます。
image
一部のボタンではさらに悪く見えます。
image

チームが完全に削除するつもりはないと思うので、サイト設定を作成し、ボタンのSCSS経由でアクセスすることを検討していました。

設定を作成してプロパティを付与する簡単なファイルはないと思います。ありますか?もしなければ、どうすればよいですか。そして、それをSCSSファイルに取得するにはどうすればよいですか?

どんな助けでも感謝します!

これはテーマコンポーネントで上書きできるものではありませんか?

「いいね!」 3

この問題のコンポーネントについては、完全に忘れていました(笑)

しかし、将来的には設定を作成することは可能でしょうか?すぐに自分で問題を修正します。

編集:自分で修正を試みましたが、うまくいきませんでした。

こんにちは。

正しく理解していれば、これはボタンの :active 状態を変更したいということですね。

色遷移には linear-gradient ミキシンがあります。

linear-gradient はボタンがアクティブなときに使用されます。buttons.css で確認できます。

これは、デフォルトのボタンミキシン全体です。

そして、.btn-primary 以下のような他のボタンでは、色変数のみが変更されます。


したがって、:active クラスをターゲットにすることで、linear-gradient ミキシン出力をオーバーライドできます。

以下のようなものでうまくいくはずです。 :slightly_smiling_face:

色変数が異なるため、ボタンタイプクラスをターゲットにする必要があります。グローバルにターゲットすることはできません。

// デフォルトボタン

.btn {
  &:active,
  &.btn-active {
    background-image: none;
    border-bottom-color: transparent;
    background-color: var(--primary-medium);
  }
  
  // プライマリボタン

  &.btn-primary {
    &:active,
    &.btn-active {
      background-color: var(--tertiary-hover);
    }
  }
  
  // 危険および ✘ ボタン

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

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

変更前

変更後

「いいね!」 5

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