[Frontend] WIP Style Guide

Fixes #1233
Refactoring to generalize plot styles

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

@@ -32,20 +32,6 @@
 	height: 100%;
     min-height: $plotMinH;
 
-    .gl-plot-local-controls {
-        @include trans-prop-nice(opacity, 150ms);
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    .gl-plot-display-area,
-    .gl-plot-axis-area {
-        &:hover .gl-plot-local-controls {
-            opacity: 1;
-            pointer-events: inherit;
-        }
-    }
-
     .gl-plot-wrapper-display-area-and-x-axis {
         // Holds the plot area and the X-axis only
         position: absolute;
@@ -55,17 +41,11 @@
         left: nth($plotDisplayArea, 4);
 
         .gl-plot-display-area {
-            //@include test(yellow);
-            @if $colorPlotBg != none {
-                background-color: $colorPlotBg;
-            }
             position: absolute;
             top: 0;
             right: 0;
             bottom: nth($plotDisplayArea, 3);
             left: 0;
-            cursor: crosshair;
-            border: 1px solid $colorPlotAreaBorder;
         }
 
         .gl-plot-axis-area.gl-plot-x {
@@ -232,6 +212,29 @@
 	}
 }
 
+.gl-plot-display-area,
+.plot-display-area,
+.gl-plot-axis-area {
+    .gl-plot-local-controls,
+    .l-local-controls {
+        @include trans-prop-nice(opacity, 150ms);
+        opacity: 0;
+        pointer-events: none;
+    }
+    &:hover .gl-plot-local-controls,
+    &:hover .l-local-controls {
+        opacity: 1;
+        pointer-events: inherit;
+    }
+}
+
+.gl-plot-display-area,
+.plot-display-area {
+    @if $colorPlotBg != none { background-color: $colorPlotBg; }
+    cursor: crosshair;
+    border: 1px solid $colorPlotAreaBorder;
+}
+
 .gl-plot-legend,
 .legend {
 	.plot-legend-item,