I have created a spacing parameter for a section component. Options are none, xs, s, m, l, xl. these simply output those same values. I am trying to add the output to a variable I setup in CSS.
When I add the variable directly to the padding top or bottom like var(--space-m) it renders on the front end just fine.
When I try to add the parameter to the variable like this var(--space-{{dc.p.sectionPadding}}) everything starts getting output weirdly. it tries to add a style tag in the HTML markup to the section or tries to add the same style to all 4 (top, bottom, left and right) fields. I tried adding this in breakout mode and it still did not work.
What am I missing here? How can I add the parameter output to the var()?
I have also noticed that the 2 input fields (top padding and bottom padding) look different as well. One has an arrow with the dynamic content icon. the other does not. What is the difference in these 2 fields (icon vs no icon)?
Component parameter JSON
{
"sectionPadding": {
"type" : "choose",
"label" : "Padding",
"initial" : "m",
"options" : [
{ "value" : "none", "label" : "-" },
{ "value" : "xs", "label" : "XS" },
{ "value" : "s", "label" : "S" },
{ "value" : "m", "label" : "M" },
{ "value" : "l", "label" : "L" },
{ "value" : "xl", "label" : "XL" }
]
}
}
Global CSS
:root {
--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
--space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
--space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
--space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
}