fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fe-heatmap): add css class heated for heatmap elements

Browse Source 
relates to #405
This commit is contained in:
Felix Hamann 2019-06-14 22:13:00 +02:00
parent 09e681eeb1
commit b09b876969
1 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
templates/default-layout.lucius
View File

@ -606,3 +606,29 @@ section {
.notification__content {
color: var(--color-font);
}
/*
"Heated" element.
Set custom property "--hotness" to a value from 0 to 1 to turn
the element's background to a color on a gradient from green to red.
TBD:
- move to a proper place
- think about font-weight...
Example:
<div .heated style="--hotness: 0.2">Lorem ipsum
*/
.heated {
--hotness: 0;
--red: calc(var(--hotness) * 200);
--green: calc(255 - calc(var(--hotness) * 255));
--opacity: calc(calc(var(--red) / 600) + 0.1);
font-weight: var(--weight, 600);
background-color: rgba(var(--red), var(--green), 0, var(--opacity));
}