Code snippets: Basic variables
- Sofie Desombere
- Sarah Polfliet (Unlicensed)
Owned by Sofie Desombere
CSS Variables
CSS Variables can be used to insert the value of a custom property. You can use these anywhere in your custom styling. Some examples:
:root {
// margin between items in digital labels (use at own discretion)
--margin-dl-items: 30px;
--dynamic-margin-dl-items: 30px;
//
--blue: #004FA3;
--pink: #E4017E;
--green: #124F3E;
--grey: #D4D4D5;
--lightgrey: #F4F4F4;
}Base Color
In Themes it is possible to use a Base Color. We made it very easy to access that colour in your custom CSS. Some examples below:
.selector {
color: var(--c-accent);
background-color: var(--green);
border-color: var(--pink);
}Base Color - Blend
Besides the Base Color variable, it is possible to use the variable --c-accent-blend. This color is based on the Base Color and is an 'inverse' color.
When your Base Color is a darker color, the blend will show white.
When your Base Color is a lighter color, the blend will show black.
See the example below.
.selector {
fill: var(--c-accent-blend);
}
Other variables
We made a variable for the margin between grid items in the Digital Label module.
Before:
After:
Rename languages when name is too long to add in db