Layne Heiny

Color Variables

Discussion created by Layne Heiny on Mar 11, 2018
Latest reply on Mar 11, 2018 by Stuart Ryan

In looking at the style guide, there is an option to use color variables. The problem is that the guide stops short of explaining how to implement the variables.

 

As an example, an easy way to change the background color of a button is to add the style within the anchor tag. 

 

<div style="width: 100%; padding: 1%; text-align: center;"><a class="btn border-round" style="background: #585546; color: white;" href="#1">Motion and Forces</a>

 

 

In the above example, though, the color is provided with a #585546 and I'd like to try with a color variable such as $ic-bg-light-success

 

Adding the $variable within a class or style gets stripped out by the rich text editor. Is there another way?

Outcomes