fix(MainHeader): button bottom border flicker#1193
fix(MainHeader): button bottom border flicker#1193marvin-j97 wants to merge 12 commits intosolidjs:mainfrom
Conversation
|
|
✅ Deploy Preview for solid-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Feel free to close in favour of #1194 |
amirhhashemi
left a comment
amirhhashemi
left a comment
There was a problem hiding this comment.
My only concern is that the border color is defined in two places simultaneously, which could lead to conflicts. Currently, border-b-blue-500 is defined after border-transparent in the Tailwind output CSS file, so it overrides border-transparent. However, if we change border-transparent to something else in the future, this could cause some confusion.
I suggest using inactiveClass to apply border-transparent only when the link is not active.
| "transition-all duration-250": | ||
| project() === "solid" && !translatedLocale(), | ||
| }} | ||
| addLocale |
There was a problem hiding this comment.
With the last commit, the "core" link is always active.
You can't rely solely on inactiveClass and activeClass for this specific link. You should use classList to apply the relevant border classes, like the original code.
|
Hey! I needed to modify the same section of code that your PR touches. Given that this PR has been inactive for a while, I've gone ahead and applied your changes directly into that PR. I hope that's okay with you. Thanks again for your contribution. |
2 participants
Description(required)
Fixes flicker because border starts off being 0px, now it is transparent, so only the color transitions.