Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.

Fix 2964:英語のメニューリンクをホバーまたは押したときに文字幅が変わってしまう問題を修正 #7035

Merged

Conversation

hijikiman
Copy link
Contributor

👏 解決する issue / Resolved Issues

📝 関連する issue / Related Issues

⛏ 変更内容 / Details of Changes

  • メニューリンクに以下のスタイルがあたっているときに、文字をtext-shadowで擬似的に太くする
    • :hover
    • :active
    • .nuxt-link-exact-active

📸 スクリーンショット / Screenshots

before

covid19-menulink-hover-before

after

covid19-menulink-hover-after

動作確認環境

  • macOS BigSur
    • Safari バージョン15.2
    • Chrome 96.0.4664.110(Official Build)

Comment on lines 99 to 100
&.nuxt-link-exact-active {
font-weight: 600;
text-shadow: 0 0 1px $gray-1;
Copy link
Contributor

@Meiryo7743 Meiryo7743 Jan 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

99 行目からの .nuxt-link-exact-active に対しては,文字色に合わせて $green-1 を指定するのが良さそうです。あるいは,currentColor としても問題ないでしょう。

Suggested change
&.nuxt-link-exact-active {
font-weight: 600;
text-shadow: 0 0 1px $gray-1;
&.nuxt-link-exact-active {
text-shadow: 0 0 1px $green-1;

ご参考までに,その差異を以下に示します。

$gray-1 $green-1 または currentColor
before after

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

レビューありがとうございます!修正させていただきました

  • before
    image

  • after
    image

Copy link
Collaborator

@kaizumaki kaizumaki left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PRありがとうございます!素晴らしいですね。LGTMです!

@kaizumaki kaizumaki added the ready-for-merge コードレビューが終わり、マージができるもの label Jan 6, 2022
@nyagihime nyagihime merged commit 08d71bf into Tokyo-Metro-Gov:development Jan 6, 2022
This was referenced Jan 6, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
ready-for-merge コードレビューが終わり、マージができるもの
Projects
None yet
Development

Successfully merging this pull request may close these issues.

サイドバーのリンクをホバーするとレイアウトが崩れることがある
4 participants