bulma icon indicating copy to clipboard operation
bulma copied to clipboard

Message body lost it background if parent use has/is-background-white

Open lorrydriveloper opened this issue 4 months ago • 1 comments

This is about Bulma.

Having a parent with class background change the behavior of the children's messages body as the variable now points to

[class*=has-background-white], [class*=is-background-white] {
    ...other code
    --bulma-background-l: var(--bulma-white-l);
}

that change the

.message-body {
    background-color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-background-l));
}

that point to

--bulma-message-background-l: var(--bulma-background-l);

Overview of the problem

I'm using Bulma version [1.0]

Description

Not sure if it is a bug or an overview, but even in the docs, the class is used. but not having the desired effect anymore.

Steps to Reproduce

Add has-background-white to any parent where a message is displayed.

Expected behavior

Screenshot 2024-04-05 at 12 19 25

Actual behavior

Screenshot 2024-04-05 at 12 19 40

lorrydriveloper avatar Apr 05 '24 11:04 lorrydriveloper

I have the same issue when using a message within modal overlay. The message color is inherited from the parent.


<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <article class="mt-5 message is-danger is-6">
              <div class="message-body">
                 Test
              </div>
            </article>
  </div>
</div>

tonprince avatar Apr 08 '24 23:04 tonprince