Control properties for free-form rules and linked values

Free-form rules and linked values are great.

image

But without the ability to control where to apply and where not, this gets in the way quickly.

Linked Values:

  • Row/Column Gap
  • Margin / Padding
  • Position
  • Border radius
  • Border width

Free-Form

  • Box-Shadow
  • Transitions
  • Relative Styling

And any property that also applies but has been overlooked…

1 Like

Hey @Marius , I still have issues figuring out the syntax/how to use this free form relative styling. Hope you can help.
Technically, the idea is that:
.blockclass — is the selected block and it auto detect the class there like cc-btn?, or do I need to write something after?)
then the :pseudos — say if we want it to be :hover/:active/ :focus etc, correct?

So basically if I want to target an accordion svg icon, I would need to select the accordion block, enable relative styling, and the free form rule would be:
.blockclass svg :pseudos

So technically this works to target the svg icon of the accordion.
The issue is that I need it to work while the accordion is in active state. I thought about the :active in the pseudo selection, but in the video tutorial they target the cc-accordion-active?

CleanShot 2024-09-17 at 14.19.12
CleanShot 2024-09-17 at 14.21.23

I got mine to work with the visual builder after 1.5 hours lol so I’m hoping that if I can understand free-form rules better it will help my workflow :slight_smile:
Thanks for the help in advance

Hello @Aizat,

You’ll want to keep the :pseudos class attached to its anchor element when using free-form rules, just like in CSS (it seems like there is a space between svg and :pseudos).

I don’t believe the :active state is what you’re looking for here because it refers to a user interactions with the anchor element. You can see more about that here: :active - CSS: Cascading Style Sheets | MDN

That’s why the video on the accordion block refers to the .cc-accordion-active class, as it provides the state of the accordion instead of the element the user might have interacted with.

Hope that clears things up a little.

1 Like

The .blockclass always refers to either the block class or the selected global class:

image

The default classes that are attached to blocks like .cc-btn are not connected in a direct way when it comes to Relative Styling, although you can use it as a combinator.

1 Like

Thanks, @Louis @Marius, you guys are awesome!