WIP: Mobile-first SVG Color

Bugs
1

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
2

Hi Josh,
Thanks so much for your report!

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

Best regards,
timmse

3

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

Thanks

1 Like
4

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

1 Like
5

Thirding this- Still seeing multiple issues with a mobile-first approach and CSS styles not applying.

And for my project, I had mobile-first setup from the very beginning, so this is not an instance of old breakpoint styles being applied.