Skip to content

.is-light.is-outlined button class combination no longer working since v.1.x #4020

@bluefantail

Description

@bluefantail

Prior to v1, the combination of light and outlined button classes produced a light coloured button with the addition of an outline:

Image

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:

Image

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)));
  }
Image

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 🙂.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions