-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Description
Prior to v1, the combination of light and outlined button classes produced a light coloured button with the addition of an outline:
But since v1, this combination now knocks out the background colour to transparent resulting in the exact same style for is-light is-outlined and is-outlined buttons:
This means any buttons with those class combinations don't really work as expected in their context anymore, so as a workaround I've implemented a little local override:
.button.is-light.is-outlined {
color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l));
background-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-background-l) + var(--bulma-button-background-l-delta)));
}
I can't remember if the old documentation ever documented this specific class combination or not, but regardless of whether it was an intentional design I wonder if it might still be nice for it to work in v1?
Codepen links here with the examples above:
Bulma v0.9.4 .is-light.is-outlined class combination
Patch for Bulma v1.x .is-light.is-outlined class combination
Happy to open a PR with a change suggestion 🙂.