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:
Code Block |
---|
: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:
Code Block | ||
---|---|---|
| ||
.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.
...
Code Block |
---|
.selector { fill: var(--c-accent-blend); } |
...
Other variables
Code Block | ||
---|---|---|
| ||
:root { --margin-dl-items: 42px; // change the spacing between --dynamic-margin-dl-items: 42px; } |
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
Code Block |
---|
.languages__listItem .nl,
.languages__listItem .wa {
width: 65px;
height: 115px;
visibility: hidden;
}
.languages__listItem .nl::before,
.languages__listItem .wa::before {
visibility: visible;
white-space: pre;
display: inline-block;
}
.languages__listItem .nl::before {
content: "BE \a NL";
}
.languages__listItem .wa::before {
content: "BE \a FR";
} |