Add Hover animations
For every element that has a hover treatment, we should add a nice transition animation. While this is subtle, it will help the entire experience feel more polished and professional.
This animation should be a 200ms linear
transition. See details and examples here: https://docs.gitlab.com/ce/development/ux_guide/animation.html#hover
I did a quick search for hover
in our CSS folder to try and compile a list, but I probably missed things. I suspect we won't get everything in the first pass, but I'm sure we can get a good start
-
Awards buttons -
Buttons -
Cell on User contributer Calendar (this works with svg and it therefore harder to animate.. will leave this for now) -
Dropdowns -
Rows in File list (under Repository) -
Links -
Navigation tabs -
Icon commands (such as bold, italic, etc. in a markdown comment field, edit, delete for a comment in an issue, copy to clipboard buttons) -
Cycle analytics stage tabs -
Text fields & Search fields -
Pipeline status badges -
labels (also add hover state)