From b09b876969f43cc0d21af9f9c0057c1285811e3c Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Fri, 14 Jun 2019 22:13:00 +0200
Subject: [PATCH] feat(fe-heatmap): add css class heated for heatmap elements

relates to #405
---
 templates/default-layout.lucius | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 8e9b86452..ed7950f98 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -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));
+}