Misc ui 2 (#2248)

* Create button disabled when editing
* New disabled mixin;
* Tree styling
* Fixed icons for fullscreen toggle button
* Local controls fixed for Imagery and Plots
* Range control styling updated;
* Plot styling, significant mods
* Disclosure controls improved;
* New _legacy-plots.scss file added, no longer loads legacy plot SCSS
files;
* Removed 12px crosshair cursor in legend hover;
* Inspector tree styling in plot options
* Fix z-indexing related to Overlays

src/plugins/plot/res/templates/mct-plot.html

@@ -20,13 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
-    <div class="gl-plot-legend flex-elem l-flex-row"
+    <div class="gl-plot-legend"
          ng-class="{ 'hover-on-plot': !!highlights.length }"
          ng-show="legend.get('position') !== 'hidden'">
-        <span class="view-control flex-elem"
+        <div class="gl-plot-legend__view-control c-disclosure-triangle is-enabled"
-            ng-class="{ expanded: legend.get('expanded') }"
+            ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
             ng-click="legend.set('expanded', !legend.get('expanded'));">
-        </span>
+        </div>
 
         <!-- COLLAPSED PLOT LEGEND -->
         <div class="plot-wrapper-collapsed-legend">
@@ -52,7 +52,7 @@
         </div>
 
         <!-- EXPANDED PLOT LEGEND -->
-        <div class="plot-wrapper-expanded-legend flex-elem grows">
+        <div class="plot-wrapper-expanded-legend">
             <table>
                 <thead>
                     <tr>
@@ -133,7 +133,9 @@
              ng-style="{
                      left: (tickWidth + 30) + 'px'
                  }">
-            <span class="t-object-alert t-alert-unsynced" title="This plot is not currently displaying the latest data. Reset Pan/zoom to return to view latest data."></span>
+            <span class="t-object-alert t-alert-unsynced"
+                  title="This plot is not currently displaying the latest data.
+                Reset Pan/zoom to return to view latest data."></span>
             <div class="gl-plot-display-area">
                 <mct-ticks axis="xAxis">
                     <div class="gl-plot-hash hash-v"

src/plugins/plot/res/templates/plot-options-browse.html

@@ -20,20 +20,20 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree">
+    <ul class="tree c-tree">
         <h2 title="Plot series display properties in this object">Plot Series</h2>
         <li ng-repeat="series in config.series.models">
-            <span class="tree-item menus-to-left">
+            <div class="c-tree__item menus-to-left">
-                <span class='ui-symbol view-control flex-elem'
+                <span class='c-disclosure-triangle is-enabled flex-elem'
-                      ng-class="{ expanded: series.expanded }"
+                      ng-class="{ 'c-disclosure-triangle--expanded': series.expanded }"
                       ng-click="series.expanded = !series.expanded">
                 </span>
                 <mct-representation
-                        class="rep-object-label"
+                        class="rep-object-label c-tree__item__label"
                         key="'label'"
                         mct-object="series.oldObject">
                 </mct-representation>
-            </span>
+            </div>
             <ul class="grid-properties" ng-show="series.expanded">
                 <li class="grid-row">
                     <div class="grid-cell label"

src/plugins/plot/res/templates/plot-options-edit.html

@@ -20,21 +20,21 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree l-inspector-part">
+    <ul class="tree c-tree">
-        <h2 title="Display properties for this object">Plot Series Options</h2>
+        <h2 title="Display properties for this object">Plot Series</h2>
         <li ng-repeat="series in plotSeries"
             ng-controller="PlotSeriesFormController"
             form-model="series">
-            <span class="tree-item menus-to-left">
+            <div class="c-tree__item menus-to-left">
-                <span class='ui-symbol view-control flex-elem'
+                <span class='c-disclosure-triangle is-enabled flex-elem'
-                      ng-class="{ expanded: expanded }"
+                      ng-class="{ 'c-disclosure-triangle--expanded': expanded }"
                       ng-click="expanded = !expanded">
                 </span>
-                <mct-representation class="rep-object-label"
+                <mct-representation class="rep-object-label c-tree__item__label"
                                     key="'label'"
                                     mct-object="series.oldObject">
                 </mct-representation>
-            </span>
+            </div>
             <ul class="grid-properties" ng-show="expanded">
                 <li class="grid-row">
                 <!-- Value to be displayed -->

src/plugins/telemetryTable/components/table.vue

@@ -106,7 +106,6 @@
 
 <style lang="scss">
     @import "~styles/sass-base";
-    @import "~styles/table";
 
     .c-telemetry-table__drop-target {
         position: absolute;
@@ -128,6 +127,10 @@
             vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
         }
 
+        td {
+            color: $colorTelemFresh;
+        }
+
         /******************************* WRAPPERS */
         &__headers-w {
             // Wraps __headers table

src/styles-new/_constants-espresso.scss

@@ -165,6 +165,8 @@ $colorDropHint: $colorKey;
 $colorDropHintBg: darken($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
 $colorDropHintFg: lighten($colorDropHint, 40%);
+$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
+$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 
 // Menus
 $colorMenuBg: lighten($colorBodyBg, 15%);
@@ -261,7 +263,6 @@ $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: darken($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
@@ -277,8 +278,8 @@ $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
 $colorItemTreeEditingBg: darken($editColor, 20%);
 $colorItemTreeEditingFg: $editColorFg;
 $colorItemTreeEditingIcon: $editColorFg;
-$colorItemTreeVC: rgba($colorBodyFg, 0.5);
+$colorItemTreeVC: $colorDisclosureCtrl;
-$colorItemTreeVCHover: $colorKey;
+$colorItemTreeVCHover: $colorDisclosureCtrlHov;
 $shdwItemTreeIcon: none;
 
 // Images
@@ -353,19 +354,6 @@ $createBtnTextTransform: uppercase;
 }
 
 /**************************************************** NOT USED, LEAVE FOR NOW */
-// Slider controls, not in use
-/*
-$sliderColorBase: $colorKey;
-$sliderColorRangeHolder: rgba(black, 0.07);
-$sliderColorRange: rgba($sliderColorBase, 0.2);
-$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: darken($sliderColorBase, 20%);
-$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange;
-$sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: 15px;
-$sliderKnobR: 2px;
-*/
 
 // Content status
 /*

src/styles-new/_constants-maelstrom.scss

@@ -114,12 +114,13 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 // Base Colors
 $dlSpread: 20%;
 $editColor: #00c7c3;
-$editColorBg: darken($editColor, $dlSpread);
+$editColorBgBase: darken($editColor, $dlSpread);
+$editColorBg: rgba($editColorBgBase, 0.2);
 $editColorFg: lighten($editColor, $dlSpread);
 $editColorHov: lighten($editColor, 20%);
 // Canvas
-$editCanvasColorBg: #002524;
+$editCanvasColorBg: $editColorBg; //#002524;
-$editCanvasColorGrid: darken($editCanvasColorBg, 2%);
+$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
 // Selectable
 $editSelectableColor: #006563;
 $editSelectableColorFg: lighten($editSelectableColor, 20%);
@@ -168,6 +169,8 @@ $colorDropHint: $colorKey;
 $colorDropHintBg: darken($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
 $colorDropHintFg: lighten($colorDropHint, 40%);
+$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
+$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 
 // Menus
 $colorMenuBg: lighten($colorBodyBg, 15%);
@@ -264,7 +267,6 @@ $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: darken($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
@@ -280,8 +282,8 @@ $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
 $colorItemTreeEditingBg: darken($editColor, 20%);
 $colorItemTreeEditingFg: $editColorFg;
 $colorItemTreeEditingIcon: $editColorFg;
-$colorItemTreeVC: rgba($colorBodyFg, 0.5);
+$colorItemTreeVC: $colorDisclosureCtrl;
-$colorItemTreeVCHover: $colorKey;
+$colorItemTreeVCHover: $colorDisclosureCtrlHov;
 $shdwItemTreeIcon: none;
 
 // Images

src/styles-new/_constants-snow.scss

@@ -165,6 +165,8 @@ $colorDropHint: $colorKey;
 $colorDropHintBg: lighten($colorDropHint, 30%);
 $colorDropHintBgHov: lighten($colorDropHint, 40%);
 $colorDropHintFg: lighten($colorDropHint, 0);
+$colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
+$colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 
 // Menus
 $colorMenuBg: lighten($colorBodyBg, 10%);
@@ -261,7 +263,6 @@ $opacityPlotHash: 0.2;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: lighten($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
@@ -277,8 +278,8 @@ $colorItemTreeSelectedIcon: $colorItemTreeSelectedFg;
 $colorItemTreeEditingBg: $editColor;
 $colorItemTreeEditingFg: $editColorFg;
 $colorItemTreeEditingIcon: $editColorFg;
-$colorItemTreeVC: rgba($colorBodyFg, 0.5);
+$colorItemTreeVC: $colorDisclosureCtrl;
-$colorItemTreeVCHover: $colorKey;
+$colorItemTreeVCHover: $colorDisclosureCtrlHov;
 $shdwItemTreeIcon: none;
 
 // Images
@@ -353,19 +354,6 @@ $createBtnTextTransform: uppercase;
 
 
 /**************************************************** NOT USED, LEAVE FOR NOW */
-// Slider controls, not in use
-/*
-$sliderColorBase: $colorKey;
-$sliderColorRangeHolder: rgba(black, 0.07);
-$sliderColorRange: rgba($sliderColorBase, 0.2);
-$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: lighten($sliderColorBase, 20%);
-$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange;
-$sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: 15px;
-$sliderKnobR: 2px;
-*/
 
 // Content status
 /*

src/styles-new/_constants.scss

@@ -50,6 +50,15 @@ $gridItemMobile: 32px;
 $tabularHeaderH: 22px;
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 2px;
+/*************** Plots */
+$plotYBarW: 60px;
+$plotYLabelMinH: 20px;
+$plotYLabelW: 10px;
+$plotXBarH: 20px;
+$plotLegendH: 20px;
+$plotSwatchD: 8px;
+$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
+$plotMinH: 95px;
 
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used

src/styles-new/_controls.scss

@@ -101,9 +101,10 @@ button {
 }
 /********* Disclosure Triangle */
 // Provides an arrow icon that when clicked expands an element to reveal its contents.
-// Used in tree items. Always placed BEFORE an element.
+// Used in tree items, plot legends. Always placed BEFORE an element.
 .c-disclosure-triangle {
     $d: 12px;
+    color: $colorDisclosureCtrl;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -111,16 +112,23 @@ button {
     width: $d;
     position: relative;
 
-    &.is-enabled:before {
+    &.is-enabled {
+        cursor: pointer;
+
+        &:hover {
+            color: $colorDisclosureCtrlHov;
+        }
+
+        &:before {
             $s: .65;
             content: $glyph-icon-arrow-right-equilateral;
             display: block;
             font-family: symbolsfont;
             font-size: 1rem * $s;
-        position: absolute;
+            transform-origin: center;
-        transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
             transition: transform 100ms ease-in-out;
         }
+    }
 
     &--expanded {
         &:before {
@@ -497,6 +505,54 @@ input[type=number]::-webkit-outer-spin-button {
     > * + * { margin-left: $interiorMargin; }
 }
 
+
+/******************************************************** SLIDERS AND RANGE */
+@mixin sliderKnobRound() {
+    $h: 12px;
+    @include themedButton();
+    cursor: pointer;
+    width: $h;
+    height: $h;
+    border-radius: 50% !important;
+    transform: translateY(-42%);
+}
+
+input[type="range"] {
+    // HTML5 range inputs
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    background: transparent; /* Otherwise white in Chrome */
+    &:focus {
+        outline: none; /* Removes the blue border. */
+    }
+
+    // Thumb
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @include sliderKnobRound();
+    }
+    &::-moz-range-thumb {
+        border: none;
+        @include sliderKnobRound();
+    }
+    &::-ms-thumb {
+        border: none;
+        @include sliderKnobRound();
+    }
+
+    // Track
+    &::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+
+    &::-moz-range-track {
+        width: 100%;
+        height: 3px;
+        @include sliderTrack();
+    }
+}
+
 /***************************************************** DRAG AND DROP */
 .c-drop-hint {
     // Used in Tabs View, Flexible Grid Layouts
@@ -545,3 +601,27 @@ input[type=number]::-webkit-outer-spin-button {
         opacity: 0.9;
     }
 }
+
+/***************************************************** LEGACY */
+
+.l-btn-set {
+    // Fixes
+    display: flex;
+    align-items: center;
+}
+
+.h-local-controls {
+    &-overlay-content {
+        box-shadow: $colorBodyBg 0 0 0 2px;
+        display: inline-block;
+        position: absolute;
+        right: $interiorMargin; top: $interiorMargin;
+        z-index: 2;
+    }
+
+    &-trans {
+        // Has a translucent background plate
+        background: rgba($colorBodyBg, 0.8);
+        border-radius: $controlCr;
+    }
+}

src/styles-new/_global.scss

@@ -174,30 +174,6 @@ body.desktop .has-local-controls {
     }
 }
 
-//[class*="local-controls"] {
-//    // An explicit outer holder for controls. Typically placed in upper right.
-//    //font-size: 0.7rem;
-//    display: flex;
-//    align-items: center;
-//    justify-content: flex-end;
-//
-//
-//    &.h-local-controls-overlay-content {
-//        // Imagery controls
-//        $p: $interiorMargin;
-//        position: absolute;
-//        top: $p; right: $p;
-//        z-index: 2;
-//    }
-
-    //.l-btn-set,
-    //.s-button {
-    //    &:not(:first-child) {
-    //        margin-left: $interiorMargin;
-    //    }
-    //}
-//}
-
 /******************************************************** SELECTION AND EDITING */
 // Provides supporting styles for Display Layouts and augmented legacy Fixed Position view
 

src/styles-new/_legacy-plots.scss

@@ -0,0 +1,504 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+mct-plot {
+    display: contents;
+}
+
+/********************************************* STACKED PLOT LAYOUT */
+.t-plot-stacked {
+    .l-view-section {
+        //  Make this a flex container
+        display: flex;
+        flex-flow: column nowrap;
+        .gl-plot.child-frame {
+            mct-plot {
+                display: flex;
+                flex: 1 1 auto;
+                height: 100%;
+                position: relative;
+            }
+            flex: 1 1 auto;
+            &:not(:first-child) {
+                margin-top: $interiorMargin;
+            }
+        }
+    }
+
+    .s-status-timeconductor-unsynced .holder-plot {
+        .t-object-alert.t-alert-unsynced {
+            display: block;
+        }
+    }
+}
+
+.gl-plot {
+    color: $colorPlotFg;
+    display: flex;
+    font-size: 0.7rem;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: $plotMinH;
+
+    /********************************************* AXIS AND DISPLAY AREA */
+    .plot-wrapper-axis-and-display-area {
+        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
+        position: relative;
+        flex: 1 1 auto;
+        .t-object-alert {
+            position: absolute;
+            display: block;
+            font-size: 1.5em;
+            top: $interiorMarginSm;
+            left: $interiorMarginSm;
+            z-index: 2;
+        }
+    }
+
+    .gl-plot-wrapper-display-area-and-x-axis {
+        // Holds the plot area and the X-axis only
+        position: absolute;
+        top: nth($plotDisplayArea, 1);
+        right:0; //nth($plotDisplayArea, 2);
+        bottom: 0;
+        left: nth($plotDisplayArea, 4);
+
+        .gl-plot-display-area {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: nth($plotDisplayArea, 3);
+            left: 0;
+        }
+
+        .gl-plot-axis-area.gl-plot-x {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            height: $plotXBarH;
+            width: auto;
+            overflow: hidden;
+        }
+    }
+
+    .gl-plot-axis-area {
+        position: absolute;
+        &.gl-plot-y {
+            top: nth($plotDisplayArea, 1);
+            right: auto;
+            bottom: nth($plotDisplayArea, 3);
+            left: 0;
+            width: $plotYBarW;
+        }
+    }
+
+    .gl-plot-coords {
+        box-sizing: border-box;
+        border-radius: $controlCr;
+        background: black;
+        color: lighten($colorBodyFg, 30%);
+        padding: 2px 5px;
+        position: absolute;
+        top: nth($plotDisplayArea,1) + $interiorMarginLg;
+        right: auto;
+        bottom: auto;
+        left: nth($plotDisplayArea,4) + $interiorMarginLg;
+        z-index: 10;
+        &:empty {
+            display: none;
+        }
+    }
+
+    .gl-plot-label,
+    .l-plot-label {
+        color: $colorPlotLabelFg;
+        position: absolute;
+        text-align: center;
+
+        &.gl-plot-x-label,
+        &.l-plot-x-label {
+            top: auto;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            height: auto;
+        }
+
+        &.gl-plot-y-label,
+        &.l-plot-y-label {
+            $x: -50%;
+            $r: -90deg;
+            transform-origin: 50% 0;
+            transform: translateX($x) rotate($r);
+            display: inline-block;
+            margin-left: $interiorMargin; // Kick off the left edge
+            left: 0;
+            top: 50%;
+            white-space: nowrap;
+        }
+    }
+
+    .gl-plot-x-options,
+    .gl-plot-y-options {
+        $h: 24px;
+        position: absolute;
+        height: $h;
+        min-height: $h;
+        z-index: 2;
+    }
+
+    .gl-plot-x-options {
+        transform: translateX(-50%);
+        bottom: 0;
+        left: 50%;
+    }
+
+    .gl-plot-y-options {
+        transform: translateY(-50%);
+        min-width: 150px; // Need this due to enclosure of .select
+        top: 50%;
+        left: $plotYLabelW + $interiorMargin * 2;
+    }
+
+    .t-plot-display-controls {
+        position: absolute;
+        top: $interiorMargin;
+        right: $interiorMargin;
+    }
+
+    .gl-plot-hash {
+        position: absolute;
+        opacity: $opacityPlotHash;
+        &.hash-v {
+            border-right: 1px $colorPlotHash $stylePlotHash;
+            height: 100%;
+        }
+        &.hash-h {
+            border-bottom: 1px $colorPlotHash $stylePlotHash;
+            width: 100%;
+        }
+    }
+}
+
+.gl-plot-display-area,
+.plot-display-area {
+    @if $colorPlotBg != none {
+        background-color: $colorPlotBg;
+    }
+    cursor: crosshair;
+    border: 1px solid $colorPlotAreaBorder;
+}
+
+.tick {
+    position: absolute;
+    border: 0 $colorPlotHash solid;
+    &.tick-x {
+        border-right-width: 1px;
+        height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
+    }
+}
+
+.gl-plot-tick,
+.tick-label {
+    @include reverseEllipsis();
+    font-size: 0.7rem;
+    position: absolute;
+    &.gl-plot-x-tick-label,
+    &.tick-label-x {
+        right: auto;
+        bottom: auto;
+        left: auto;
+        height: auto;
+        width: 20%;
+        margin-left: -10%;
+        text-align: center;
+    }
+    &.gl-plot-y-tick-label,
+    &.tick-label-y {
+        top: auto;
+        height: 1em;
+        width: auto;
+        margin-bottom: -0.5em;
+        text-align: right;
+    }
+}
+
+.gl-plot-tick {
+    &.gl-plot-x-tick-label {
+        top: $interiorMargin;
+    }
+    &.gl-plot-y-tick-label {
+        right: $interiorMargin;
+        left: $interiorMargin;
+    }
+}
+
+.tick-label {
+    &.tick-label-x {
+        top: 0;
+    }
+    &.tick-label-y {
+        right: 0;
+        left: 0;
+    }
+}
+
+.export-plot {
+    $bg: white;
+    $fg: black;
+    $gry: #999;
+
+    background: $bg !important;
+    z-index: -10;
+
+    .l-view-section {
+        $m: $interiorMargin;
+        top: $m !important;
+        right: $m;
+        bottom: $m;
+        left: $m;
+
+        .s-status-timeconductor-unsynced .holder-plot {
+            .t-object-alert.t-alert-unsynced {
+                display: none;
+            }
+        }
+    }
+
+    .gl-plot-display-area {
+        background: none !important;
+        border-color: $gry !important;
+
+        .gl-plot-local-controls,
+        .h-local-controls {
+            opacity: 0;
+        }
+    }
+
+    .gl-plot {
+        color: $fg;
+
+        .gl-plot-hash {
+            opacity: 0.1;
+            border-color: $fg;
+        }
+    }
+
+    table {
+        thead {
+            border-bottom: none;
+
+            th {
+                background: #eee;
+                border-left-color: $bg;
+                color: #666;
+            }
+
+            tr {
+                border: none;
+            }
+        }
+        tbody {
+            tr {
+                border-top: 1px solid #ccc;
+            }
+
+            td {
+                color: $fg;
+            }
+        }
+    }
+}
+
+/*************************************************************************** _LEGEND.SCSS */
+.gl-plot-legend {
+    display: flex;
+    align-items: flex-start;
+
+    &__view-control {
+        padding-top: 2px;
+        margin-right: $interiorMarginSm;
+    }
+
+    table {
+        table-layout: fixed;
+        th,
+        td {
+            @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
+            padding: 1px 3px; // Tighter than standard tabular padding
+            //width: 1%;
+        }
+    }
+
+    &.hover-on-plot {
+        // User is hovering over the plot to get a value at a point
+        .hover-value-enabled {
+            background-color: $legendHoverValueBg;
+            border-radius: $smallCr;
+            padding: 0 $interiorMarginSm;
+
+            &.value-to-display-min:before {
+                content: 'MIN ';
+            }
+            &.value-to-display-max:before {
+                content: 'MAX ';
+            }
+        }
+    }
+}
+
+/***************** GENERAL STYLES, ALL STATES */
+.plot-legend-item {
+    // General styles for legend items, both expanded and collapsed legend states
+    .plot-series-color-swatch {
+        border-radius: $smallCr;
+        border: 1px solid $colorBodyBg;
+        display: inline-block;
+        height: $plotSwatchD;
+        width: $plotSwatchD;
+    }
+    .plot-series-name {
+        display: inline;
+    }
+
+    .plot-series-value {
+        @include ellipsize();
+    }
+}
+
+.plot-wrapper-expanded-legend {
+    flex: 1 1 auto;
+}
+
+.gl-plot {
+    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
+    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
+
+    /***************** GENERAL STYLES, COLLAPSED */
+    &.plot-legend-collapsed {
+        // .plot-legend-item is a span of spans.
+        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
+        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
+        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
+        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
+
+        .plot-legend-item {
+            display: flex;
+            align-items: center;
+            justify-content: stretch;
+            &:not(:first-child) {
+                margin-left: $interiorMarginLg;
+            }
+            .plot-series-swatch-and-name,
+            .plot-series-value {
+                @include ellipsize();
+                flex: 1 1 auto;
+            }
+
+            .plot-series-swatch-and-name {
+                margin-right: $interiorMarginSm;
+            }
+
+            .plot-series-value {
+                text-align: left;
+            }
+        }
+    }
+
+    /***************** GENERAL STYLES, EXPANDED */
+    &.plot-legend-expanded {
+        .gl-plot-legend {
+            max-height: 70%;
+        }
+
+        .plot-wrapper-expanded-legend {
+            overflow-y: auto;
+        }
+    }
+
+    /***************** TOP OR BOTTOM */
+    &.plot-legend-top,
+    &.plot-legend-bottom {
+        // General styles when legend is on the top or bottom
+        flex-direction: column;
+
+        &.plot-legend-collapsed {
+            // COLLAPSED ON TOP OR BOTTOM
+            .plot-wrapper-collapsed-legend {
+                display: flex;
+                flex: 1 1 auto;
+                overflow: hidden;
+            }
+        }
+    }
+
+    /***************** EITHER SIDE */
+    &.plot-legend-left,
+    &.plot-legend-right {
+        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
+        &.plot-legend-expanded {
+            // EXPANDED, ON EITHER SIDE
+            flex-direction: column;
+        }
+
+        &.plot-legend-collapsed {
+            // COLLAPSED, ON EITHER SIDE
+            .gl-plot-legend {
+                max-height: inherit;
+                width: 25%;
+            }
+            .plot-wrapper-collapsed-legend {
+                display: flex;
+                flex-flow: column nowrap;
+                min-width: 0;
+                flex: 1 1 auto;
+                overflow-y: auto;
+            }
+            .plot-legend-item {
+                margin-bottom: 1px;
+                margin-left: 0;
+                flex-wrap: wrap;
+                .plot-series-swatch-and-name {
+                    flex: 0 1 auto;
+                    min-width: 20%;
+                }
+                .plot-series-value {
+                    flex: 0 1 auto;
+                    width: auto;
+                }
+            }
+        }
+    }
+
+    /***************** ON BOTTOM OR RIGHT */
+    &.plot-legend-right:not(.plot-legend-expanded),
+    &.plot-legend-bottom {
+        .gl-plot-legend {
+            order: 2;
+        }
+        .plot-wrapper-axis-and-display-area {
+            order: 1;
+        }
+    }
+}

src/styles-new/_mixins.scss

@@ -133,6 +133,12 @@
     background-repeat: $repeatDir;
 }
 
+@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
+    border-radius: 2px;
+    box-sizing: border-box;
+    background-color: $bg;
+}
+
 @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-90deg,
         rgba($c, $a) 0%, rgba($c, $a) 50%,

src/styles-new/_table.scss

@@ -21,10 +21,36 @@
  *****************************************************************************/
 
 /******************************************************** TABLE */
+table {
+    $minW: 50px;
+    width: 100%;
+
+    thead {
+        background: $colorTabHeaderBg;
+        th + th {
+            border-left: 1px solid $colorTabHeaderBorder;
+        }
+    }
+
+    tbody {
+        tr + tr {
+            border-top: 1px solid $colorTabBorder;
+        }
+    }
+
+    th, td {
+        white-space: nowrap;
+        min-width: $minW;
+        padding: $tabularTdPadTB $tabularTdPadLR;
+    }
+
+    td {
+        vertical-align: top;
+    }
+}
+
 .c-table {
     // Can be used by any type of table, scrolling, LAD, etc.
-    $min-w: 50px;
-
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
@@ -37,39 +63,11 @@
     }
 
     /******************************* ELEMENTS */
-    th, td {
-        white-space: nowrap;
-        min-width: $min-w;
-        padding: $tabularTdPadTB $tabularTdPadLR;
-    }
-
-    td {
-        color: $colorTelemFresh;
-        vertical-align: top;
-    }
 
     &__control-bar {
         margin-bottom: $interiorMarginSm;
     }
 
-    [class*="__header"] {
-        background: $colorTabHeaderBg;
-
-        th {
-            &:not(:first-child) {
-                border-left: 1px solid $colorTabHeaderBorder;
-            }
-        }
-    }
-
-    &__body {
-        tr {
-            &:not(:first-child) {
-                border-top: 1px solid $colorTabBorder;
-            }
-        }
-    }
-
     &--sortable {
         .is-sorting {
             &:after {

src/styles-new/core.scss

@@ -27,6 +27,8 @@
 @import "glyphs";
 @import "global";
 @import "controls";
+@import "table";
+@import "legacy-plots";
 
 /******************** LEGACY CSS */
 $output-bourbon-deprecation-warnings: false;

src/styles-new/legacy-styles.scss

@@ -57,8 +57,8 @@
 //!********************************* VIEWS *!
 @import "../styles/fixed-position";
 //@import "../styles/lists/tabular";
-@import "../styles/plots/plots-main";
+//@import "../styles/plots/plots-main";
-@import "../styles/plots/legend";
+//@import "../styles/plots/legend";
 @import "../styles/iframe";
 @import "../styles/views";
 @import "../styles/items/item";
@@ -75,5 +75,3 @@
 //!********************************* APP STARTUP *!
 //@import "../styles/app-start";
 
-@import "../styles/conductor/time-conductor-snow";
-//@import "../styles/notebook/notebook-snow";

src/styles/overlay/_overlay.scss

@@ -53,7 +53,7 @@
     }
 
     > .abs.outer-holder {
-        z-index: 72;
+        z-index: 70;
         > .abs.inner-holder {
             $m: $overlayMargin;
             top: $m;

src/ui/inspector/Inspector.vue

@@ -176,6 +176,27 @@
             }
         }
     }
+    /********************************************* LEGACY SUPPORT */
+    .c-inspector {
+        li.grid-row + li.grid-row {
+            > * {
+                border-top: 1px solid $colorInspectorSectionHeaderBg;
+            }
+        }
+
+        li.grid-row .label {
+            color: $colorInspectorPropName;
+        }
+
+        li.grid-row .value {
+            color: $colorInspectorPropVal;
+            word-break: break-all;
+            &:first-child {
+                // If there is no preceding .label element, make value span columns
+                grid-column: 1 / 3;
+            }
+        }
+    }
 </style>
 
 <script>

src/ui/layout/mct-tree.vue

@@ -71,7 +71,6 @@
             }
 
             &__view-control {
-                color: $colorItemTreeVC;
                 margin-right: $interiorMarginSm;
             }