WIP: Mobile-first SVG Color

Bricks Version: 1.6
Browser: Chrome 90
OS: macOS

Using the mobile-first approach, selecting a fill/stroke color for an SVG only applies to desktop. This applies to elements that have the ‘icon’ control (like Social Icons and the arrows in the nestable slider). Selecting a color at the base breakpoint (mobile), the CSS generated has a media query:

@media (min-width: 1279px) {
#brxe-uwwebx .repeater-item:nth-child(1) svg {stroke: var(--bricks-color-dnngjo); fill: var(--bricks-color-dnngjo)}

To reproduce:

  1. Set the base breakpoint to mobile
  2. Add the Social Icons element
  3. Set an icon to an SVG and set the fill/stroke
  4. View the CSS for the element on the frontend
1 Like

Hi Josh,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.

Best regards,

Any update on this?

Using mobile-first, the style gets applied to the ID, not the class, and takes effect at the highest breakpoint (and doesn’t cascade).


1 Like

seconding an update on this and long-term mobile-first support. surprising it’s not the default.

1 Like