Instead of using colors with transparency (which I found impossible to animate correctly due to backgrounds messing with the foreground color), use SASS mix() to achieve basically the same colors. (I eyeballed it, so not super scientific, but it seems close.)
When animating the indicator, mutate the color of the wrapper around (behind) it
Refactor the CSS vars to make the code easier to understand (--nav-indicator-bg, --nav-indicator-bg-active, --nav-indicator-bg-hover).
I tested 3 methods: using the keyboard to change the page, using the mouse on desktop, and simulating touch on a mobile phone. They all look pretty good to me.
NickColley
commented
1 year ago
Fixes #2290.
https://user-images.githubusercontent.com/283842/205460527-0c795d55-436b-49c2-8606-b2821ff7cbd7.mp4
My solution was a few things:
mix()to achieve basically the same colors. (I eyeballed it, so not super scientific, but it seems close.)--nav-indicator-bg,--nav-indicator-bg-active,--nav-indicator-bg-hover).I tested 3 methods: using the keyboard to change the page, using the mouse on desktop, and simulating touch on a mobile phone. They all look pretty good to me.
FYI @NickColley