NO BUG: CSS class variables are not rendering

Bugs
1

In a class (my case .user-role-colour) I add a CSS variable, in my case: {mb_question_asker_role:value} (which is a radio field with the values: team, contributor, practitioner).

In the .user-role-colour css editor, I add the different styles eg:

%root% .contributor {
border-color: var(–accent)!important;
color: red!important;
}

%root% .practitioner {
border-color: var(–secondary-dark)!important;
color: red!important;
}

%root% .team {
border-color: var(–primary)!important;
color: red!important;
}

But nothing happens. When I look in the code, I can see .user-role-colour (the utility parent class) but I do not see the dynamic class I tried to add - %root% .contributor

image

Yet the value definitely exists !

2

Hi Yasmine,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue in 2.0 alpha. Can you provide a live link? However, I suspect that the blank character between %root% and your custom class is the cause of the problem. Try this:

%root%.contributor {
border-color: var(–accent)!important;
color: red!important;
}

%root%.practitioner {
border-color: var(–secondary-dark)!important;
color: red!important;
}

%root%.team {
border-color: var(–primary)!important;
color: red!important;
}

Best regards,
timmse

3

Hello! I found the issue now. (The blank character was an additional issue )

If I added {mb_question_asker_role:value} as a class within the CSS variable .user-role-colour, then {mb_question_asker_role:value} did not render.

If I add the dynamic class {mb_question_asker_role:value} OUTSIDE the CSS variable, then it renders