[PATCH yew-widget-toolkit-assets v2 1/1] charts: add necessary classes for Map

[Dominik Csapak <d.csapak@proxmox.com>]

these classes are used by the new Map<T> widget.

The map contains several widget that need some styling:
* map info: we need to set the z-index and reset transition in case this
  is set somewhere.

* the map itself: needs to disable touch actions and set it's width and
  height to 100%

* the map-location: is a circle with a color specified via the
  'pwt-location-color' variable (so it's easier to set in a nested
  element)

* the interaction-panel: is placed on the top right

* the location-pulse: a small animation that represents loading and
  highlights a selected element.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 scss/_charts.scss | 63 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/scss/_charts.scss b/scss/_charts.scss
index 0f5e87e..ad51b0e 100644
--- a/scss/_charts.scss
+++ b/scss/_charts.scss
@@ -12,3 +12,66 @@
 .pwt-legend-color {
     color: var(--pwt-legend-color)
 }
+
+/// Class `pwt-map-info`
+///
+/// This is used for the info panel when a point is clicked on a map
+.pwt-map-info {
+    transition: 0s;
+    z-index: 100;
+}
+
+/// Class `pwt-map`
+///
+/// This is used for the base SVG element of the map
+.pwt-map {
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+    display: block;
+}
+
+/// Class `pwt-location`
+///
+/// This is used for a location displayed on a `Map`
+/// It uses the `--pwt-location-color` so it can be easily
+/// overwritten via css.'
+.pwt-map-location {
+    --pwt-location-color: var(--pwt-color-primary);
+    cursor: pointer;
+
+    & > circle {
+        fill: color-mix(in lab, var(--pwt-location-color), transparent 80%);
+        stroke: var(--pwt-location-color);
+        stroke-width: 2px;
+        r: calc(var(--pwt-location-radius) - 2px);
+        vector-effect: non-scaling-stroke;
+    }
+}
+
+/// Class `pwt-map-interaction-panel`
+///
+/// Is used for positioning the panel containing the interactive elements of
+/// a map
+.pwt-map-interaction-panel {
+    position: absolute;
+    inset: var(--pwt-spacer-2) var(--pwt-spacer-2) auto auto;
+}
+
+/// Class `pwt-location-animated`
+///
+/// This is used for animating a selected Location
+.pwt-map-location-animated {
+    animation: pwt-location-pulse 1.2s infinite;
+}
+
+@keyframes pwt-location-pulse {
+    from {
+        r: var(--pwt-location-radius);
+        opacity:100%;
+    }
+    to {
+        r: calc(var(--pwt-location-radius) * 1.5);
+        opacity:0%;
+    }
+}
-- 
2.47.3