Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Update Button Style - Add Color Hover Support

オープン
#784 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
42/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
scss
領域
design, frontend

調査の方向性

まず、リポジトリの SCSS にあるボタンスタイルの定義を見つけ、デフォルト、hover、active、visited、disabled の各状態を issue と比較します。編集する前に、意図された逆転色の青とピンクの hover カラーを確認してください。文書化されたボタンのバリアントが合意された状態と一致し、関連するインタラクション全体で機能すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Design 🎨 Dev ready ⚙️
Button Style - Add Color Hover Support
Use Cases
  • Support for Error & Success States
  • Support for future Brands
What is Changing?

Black Button

  • Default, Fill: #000000; Border: 2px solid black;
  • Hover, Active, Visited Fill: transparent; Border: 2px solid black;
  • Disabled Opacity: 80%;

Inverse Button - #0060DF, should be whatever color link blue is

  • Default, Fill: #ffffff; Border: 2px solid #0060DF;
  • Hover, Active, Visited Fill: #0060DF; Border: 2px solid Blue;
  • Disabled Opacity: 80%;

Red Button

  • Default, Fill: #EF4056; Border: 2px solid #901424;
  • Hover, Active, Visited Fill: #EF4056; Border: 2px solid #901424;
  • Disabled Opacity: 80%;

Pink Button - Subject to Change Hover

  • Default, Fill: #FF4AA2; Border: 2px solid #FF4AA2;
  • Hover, Active, Visited Fill: #FD007B; Border: 2px solid #FD007B;
  • Disabled Opacity: 80%;
Screen Shot 2022-05-17 at 10 27 43 AM
主要言語
SCSS
スター
298
フォーク
83
平均マージ
9日 7時間
マージ済み PR(30日)
7

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

mozilla/protocol のほかの issue

mozilla/protocol の issue をすべて見る

似ている issue

Design の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。