Styles for NSS heatmap

Fixes #1791

platform/commonUI/general/res/sass/plots/_plots-main.scss

@@ -277,10 +277,14 @@
 	}
 }
 
+.s-tick-label {
+    font-size: 0.7rem;
+}
+
 .gl-plot-tick,
 .tick-label {
+    @extend .s-tick-label;
     @include reverseEllipsis();
-	font-size: 0.7rem;
 	position: absolute;
 	&.gl-plot-x-tick-label,
 	&.tick-label-x {
@@ -320,3 +324,76 @@
 		right: 0; left: 0;
 	}
 }
+
+/********************************************* HEATMAPS */
+.l-heatmap {
+    right: $interiorMargin; // Fend off from the scrollbar
+}
+
+.h-heatmap-legend {
+    flex: 1 1 1%; // Pertains to the width of legend area
+    height: 50%;
+    min-height: 100px !important;
+    canvas.heatmap-legend {
+        width: 10px;
+    }
+    .h-heatmap-legend-ticks {
+       justify-content: space-between;
+       margin-left: $interiorMarginSm;
+    }
+}
+
+.h-heatmap-grid-outer {
+    $ticksYW: 40px;
+    flex: 1 1 100% !important;
+    margin-left: $ticksYW + $interiorMarginLg;
+
+    .h-heatmap-grid-and-ticks {
+        position: relative;
+        height: 0;
+        width: 100%;
+        padding-bottom: 100%;
+        .heatmap-grid {
+            width: 100%;
+            height:100%;
+            position: absolute;
+        }
+
+        .s-tick-label {
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+        }
+
+        .l-heatmap-ticks-x,
+        .l-heatmap-ticks-y {
+            justify-content: stretch;
+            position: absolute;
+            top: 0; right: 0; bottom: 0; left: 0;
+            z-index: 2;
+        }
+
+        .l-heatmap-ticks-x {
+            @extend .l-flex-row;
+            bottom: auto;
+            top: 100%;
+            transform: translateY($interiorMargin);
+            .s-tick-label {
+                text-align: center;
+            }
+        }
+
+        .l-heatmap-ticks-y {
+            @extend .l-flex-col;
+            left: auto;
+            right: 100%;
+            text-align: right;
+            transform: translateX($interiorMargin * -1);
+            .s-tick-label {
+                display: flex;
+                align-items: center;
+                text-align: right;
+            }
+        }
+    }
+}