SOLVED: Bricks adds stuff to my custom CSS in modifier class

Browser: Chrome 130.0.6723.58
OS: Linux Mint 21.3
URL: https://staging.erasmus-campus.de/
Video: https://youtu.be/s-UhXEi5v8g

Steps to Reproduce:

  1. Make a class called, “.divider” with the following custom CSS:
%root%:after {
  content: "";
  margin-top: var(--content-gap);
  width: 100%;
  max-width: 40rem;
  min-width: 7rem;
  height: 6px;
  background-color: green;
  display: block;
}
  1. Make a class called, “.divider–center” with the following custom CSS:
%root%:after {
  margin-inline: auto;
}
  1. Assign .divider to an element
  2. Save the builder
  3. Refresh
  4. Add the .divider–center class to the same element from step 3
  5. Check out the custom CSS

Current Results:
The text “–center” gets added to the CSS in step 2 (in the class .divider–center), breaking the class.

Notes:
This may have to do with Advanced Themer. I’m giving Maxime a heads-up.
At the beginning of the video, I’m also showing a small UX bug in Bricks where the divider slips to the left when selecting the .divider–centered class.

Hi @mr.matt.eastwood,

thank you for this. At first, I was unable to reproduce the issue, but then I got the same bug as you.
I’ll record these steps and create an internal bug task for it. Actually, I got both errors, so I’ll record both, but they may be connected.

slika

Thanks again,
Matej

1 Like

Hi Matt,
We’ve fixed this issue in Bricks 1.11.1, now available as a one-click update in your WordPress Dashboard.

Changelog: Bricks 1.11.1 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse