SOLVED: Btn custom css applied to wrong area + typing variable issue

Bugs
1

2 things going on here:

  1. Variable seem to require me to input a unit before they work (first part of video)
  2. Button Custom CSS adds it to the under wrapper and not the button (also unsure why we’re using 2 divs for a button vs 1)

Bricks Version: 1.3.6
Browser: Chrome 90
OS: macOS

2

Hi Dean,

Thank you very much for your report!

  1. Almost every input field has been changed and improved in Bricks 1.3.7, and as far as I can see, there are no problems with adding variables in 1.3.7. Can you please check this in 1.3.7beta and let me know if the problem still exists?

  2. There are two spans in one div. This is because the button (span.bricks-button) itself is a flex item, so the span that wraps the text is necessary to make the space-between option possible when placing an icon next to the text.
    The root selector is always equal to the ID selector (e.g., #bricks-element-sxvgnn) and is always the outer wrapper of any element. This means, if you add styles to root, they will be applied to root. However, if you add styles via the style tab, they will commonly be applied to root .bricks-button, which is more specific than root itself, so your custom CSS applied to only gets overridden. So this is not a bug from my point of view :slight_smile:

Best regards,
timmse

3

  1. I wasn’t able to get variables to work on 1.3.7 beta as mentioned here -WIP: 1.3.7 Beta - Variables/Units not working correctly (I assume that’s fixed in your version)

  2. Got it! So just find the inner container if i want to target that with custom css (aka - root .bricks-button). That’s not a problem then. Not a bug afterall, but maybe some UX improvements in the future, once the big stuff has been focused on first :raised_hands:

Thanks

4

Hi Dean,

  1. Ah sorry, those were quite a few posts after the 1.3.7beta release - unfortunately, I didn’t have that one on my radar. But as far as I can see, the problem is fixed in my current dev version. Let’s assume that this will be the same for the stable :slight_smile:
  2. Ok cool!

I’ll mark this as solved for now.

Best regards,
timmse

5

@timmse can we do variables in the colour inputs or is that not supported atm?

I tried it but it didn’t work. Not sure if I’m am missing something. I know I could use bricks colour, but ACSS does shades and transparencies for you to use with variables

6

Hi Dean,

currently not supported, but we will see what we can do in one of the next versions. We definitely have the topic on our radar.