Remove `!important` from btn-transparent

Boilerplate discourse code is using an !important, please remove this so I can override it… without also having to use an important. Buttons should have a focus/hover state for accessibility.

Hey there! These transparent buttons force transparency because they should remain transparent. Can you point me to where you are trying to change that functionality? Is the button staying transparent on hover for you at the moment as well?

Yes, they are forcing transparency even on hover and active. We do not want transparent buttons and want buttons to have a hover/focus and active state.

Screenshot shows btn location, but this is true for all buttons:

I have brought back the focus ring but I expect the background color and icon color to change as well so a user can tell when their mouse is hovering it.

https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance
https://webaim.org/temp/1-4-11examples.htm

The icon color does change on hover, but the background will not change as it is a transparent button.

I will loop in more input here. It’s possible we might need to change this.

We want the background and color to change, so having the important restricts us. I also try to never use important in codes unless I absolutely have to, so I would prefer not to have to fight to override boilerplate code.

1 Like

Looks like removing !important is ok here, I’ve opened a pull request for it DEV: remove !important from btn-transparent background by awesomerobot · Pull Request #29809 · discourse/discourse · GitHub

4 Likes