italia / developers.italia.it

The developer community designing and developing public digital services in Italy
https://developers.italia.it
BSD 3-Clause "New" or "Revised" License
231 stars 116 forks source link

Outline buttons are styled incorrectly #1457

Closed smonolo closed 5 months ago

smonolo commented 5 months ago

Describe the bug

It looks like that buttons on variant primary outline are styled incorrectly when it comes to hovering. Instead of switching background to the correct blue and text to white, a weird lighter blue is showing up and text remains the same.

Another unexpected behavior occurs when the button is pressed and the cursor moves a bit. The background becomes white again when it's actually supposed to remain blue.

I believe this might be related to the version of Bootstrap Italia in use, but there's a workaround that fixes the problem by keeping the same version.

To Reproduce

  1. Go to /it/riuso/dichiarazione
  2. Scroll down to the very button
  3. Hover the "Registrati su Slack" button

Expected behavior

According to Boostrap Italia's documentation, the background should become dark blue and the text white, which is not happening.

Screenshots

https://cdn.smnl.it/hJIKFxyTrD.gif

smonolo commented 5 months ago

The best way to fix this issue is to couple btn-outline-primary with btn-white, just like the "Maggiori informazioni" one at /it/software. It doesn't have the same behavior, bit at least the text remains always clearly visible and there are no strange transitions.

smonolo commented 5 months ago

I'll go ahead and open up a PR that fixes a few of these buttons around. Let me know if this makes sense.