R&I Misc UI 3 (#2253)

* Limits-related changes; WIP

- Renamed CSS classes: `s-limit-*` > `is-limit--*`;
- Removed load of legacy _status.scss and added new _status.scss file;
- Minor re-org of limit/status constants in theme files;
- Limit colors in theme constants all updated;

* Fixes for s-selected always displaying the move cursor

- Mod s-selected;
- Reinstitute `.is-moveable` class;

* Layout-related cleanup and refinements

- LineView cleaned up;
- Selection, hover, etc. classes for c-frame cleaned up;
- Constant names normalized, theme files updated;

* Fixes for editing plot options

- Color palette now more flexible;
- Styles for color palette button refined;
- c-input--flex added for more flexible inputs;

* Various swatch-related changes

- Swatch refinements, new .c-click-swatch class;
- Added .c-click-icon--major modifier style, applied in markup;

* Local controls class application and behavior cleanup

- Remmoved .has-local-controls from selected markup;
- Refined CSS selector for better hover behavior;

* Misc UI tweaks

- click-icon--major in Notebook;
- .test mixin improved;

* Update _constants-espresso.scss

* Update _constants-maelstrom.scss

example/generator/SinewaveLimitProvider.js

@@ -37,25 +37,25 @@ define([
         },
         LIMITS = {
             rh: {
-                cssClass: "s-limit-upr s-limit-red",
+                cssClass: "is-limit--upr is-limit--red",
                 low: RED,
                 high: Number.POSITIVE_INFINITY,
                 name: "Red High"
             },
             rl: {
-                cssClass: "s-limit-lwr s-limit-red",
+                cssClass: "is-limit--lwr is-limit--red",
                 high: -RED,
                 low: Number.NEGATIVE_INFINITY,
                 name: "Red Low"
             },
             yh: {
-                cssClass: "s-limit-upr s-limit-yellow",
+                cssClass: "is-limit--upr is-limit--yellow",
                 low: YELLOW,
                 high: RED,
                 name: "Yellow High"
             },
             yl: {
-                cssClass: "s-limit-lwr s-limit-yellow",
+                cssClass: "is-limit--lwr is-limit--yellow",
                 low: -RED,
                 high: -YELLOW,
                 name: "Yellow Low"

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -77,7 +77,7 @@
     .l-shell__main-container {
         > .l-layout {
             [s-selected] {
-                border: $browseBorderSelected;
+                border: $browseSelectedBorder;
             }
         }
     }

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 <template>
-    <div class="l-layout__frame c-frame has-local-controls"
+    <div class="l-layout__frame c-frame"
          :class="{
              'no-frame': !item.hasFrame,
              'u-inspectable': inspectable,

src/plugins/displayLayout/components/LineView.vue

@@ -21,10 +21,9 @@
  *****************************************************************************/
 
 <template>
-    <div class="l-layout__frame c-frame has-local-controls no-frame"
+    <div class="l-layout__frame c-frame no-frame"
          :style="style">
-        <svg width="100%"
+        <svg width="100%" height="100%">
-             height="100%">
             <line v-bind="linePosition"
                   :stroke="item.stroke"
                   stroke-width="2">
@@ -101,9 +100,6 @@
                     top: `${top}px`,
                     width: `${width}px`,
                     height: `${height}px`,
-                    minWidth: `${width}px`,
-                    minHeight: `${height}px`,
-                    position: 'absolute'
                 };
             },
             startHandleClass() {

src/plugins/notebook/res/templates/entry.html

@@ -28,7 +28,7 @@
     </div>
 
     <div class="c-ne__local-controls--hidden">
-        <button class="c-click-icon icon-trash"
+        <button class="c-click-icon c-click-icon--major icon-trash"
            title="Delete this entry"
            v-on:click="deleteEntry"></button>
     </div>

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

@@ -70,17 +70,9 @@
                     <div class="grid-cell label"
                          title="The plot line and marker color for this series.">Color</div>
                     <div class="grid-cell value">
-                        <!-- TODO: get this into a class -->
+                         <span class="c-color-swatch"
-                         <span class="color-swatch"
                                   ng-style="{
-                                  'background': series.get('color').asHexString(),
+                                  'background': series.get('color').asHexString()
-                                  'display': 'inline-block',
-                                  'border': '1px solid rgba(255, 255, 255, 0.2)',
-                                  'height': '10px',
-                                  'width': '10px',
-                                  'vertical-align': 'middle',
-                                  'margin-left': '3px',
-                                  'margin-top': -'2px'
                                }">
                          </span>
                     </div>

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

@@ -78,7 +78,7 @@
                 <li class="grid-row" ng-show="form.markers || form.alarmMarkers">
                     <div class="grid-cell label"
                          title="The size of regular and alarm markers for this series.">Marker Size:</div>
-                    <div class="grid-cell value"><input class="sm" type="text" ng-model="form.markerSize"/></div>
+                    <div class="grid-cell value"><input class="c-input--flex" type="text" ng-model="form.markerSize"/></div>
                 </li>
                 <li class="grid-row"
                     ng-controller="ClickAwayController as toggle"
@@ -86,14 +86,14 @@
                     <div class="grid-cell label"
                          title="Manually set the plot line and marker color for this series.">Color</div>
                     <div class="grid-cell value">
-                        <div class="s-menu-button" ng-click="toggle.toggle()">
+                        <div class="c-click-swatch c-click-swatch--menu" ng-click="toggle.toggle()">
-                            <span class="color-swatch" ng-style="{ background: series.get('color').asHexString() }">
+                            <span class="c-color-swatch"
+                                  ng-style="{ background: series.get('color').asHexString() }">
                             </span>
                         </div>
-                        <div class="l-inline-palette" ng-show="toggle.isActive()">
+                        <div class="c-palette--inline c-palette__items" ng-show="toggle.isActive()">
-                            <!-- TODO: redo this as a grid -->
+                            <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
-                            <div class="l-palette-row" ng-repeat="group in config.series.palette.groups()">
+                                <div class="c-palette__item"
-                                <div class="l-palette-item s-palette-item"
                                      ng-repeat="color in group"
                                      ng-class="{ 'selected': series.get('color').equalTo(color) }"
                                      ng-style="{ background: color.asHexString() }"
@@ -115,7 +115,7 @@
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="Manually override how the Y axis is labeled.">Label</div>
-                <div class="grid-cell value"><input class="control" type="text" ng-model="form.label"/></div>
+                <div class="grid-cell value"><input class="c-input--flex" type="text" ng-model="form.label"/></div>
             </li>
         </ul>
         <ul class="l-inspector-part">
@@ -130,7 +130,7 @@
                      title="Percentage of padding above and below plotted min and max values. 0.1, 1.0, etc.">
                     Padding</div>
                 <div class="grid-cell value">
-                    <input class="sm" type="text" ng-model="form.autoscalePadding"/>
+                    <input class="c-input--flex" type="text" ng-model="form.autoscalePadding"/>
                 </div>
             </li>
         </ul>
@@ -143,13 +143,13 @@
                 <div class="grid-cell label"
                      title="Minimum Y axis value.">Minimum Value</div>
                 <div class="grid-cell value">
-                    <input class="sm" type="number" ng-model="form.range.min"/>
+                    <input class="c-input--flex" type="number" ng-model="form.range.min"/>
                 </div>
             </li>
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="Maximum Y axis value.">Maximum Value</div>
-                <div class="grid-cell value"><input class="sm" type="number" ng-model="form.range.max"/></div>
+                <div class="grid-cell value"><input class="c-input--flex" type="number" ng-model="form.range.max"/></div>
             </li>
         </ul>
     </div>

src/styles-new/_constants-espresso.scss

@@ -110,6 +110,7 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 // Base Colors
 $dlSpread: 20%;
 $editColor: #00c7c3;
+$editColorAlt: #9971ff;
 $editColorBgBase: darken($editColor, $dlSpread);
 $editColorBg: rgba($editColorBgBase, 0.2);
 $editColorFg: lighten($editColor, $dlSpread);
@@ -126,16 +127,17 @@ $editSelectableColorSelected: $editSelectableColorHov;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
 $editSelectableColorFg: darken($editSelectableColor, 40%);
 $editSelectableBorder: 1px dotted $editSelectableColor;
-$editSelectableBorderHov: 1px dotted $editColor;
+$editSelectableBorderHov: 1px dotted $editColorAlt;
 $editSelectableBorderSelected: 1px solid $editColor;
+$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
 $editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
-$editBorderDrilledIn: 1px dashed #9971ff;
+$editBorderDrilledIn: 1px dashed $editColorAlt;
 $colorGridLines: rgba($editColor, 0.2);
 
 /************************************************** BROWSING */
-$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
+$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
-$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
+$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
 
 // Icons
 $colorIconAlias: #4af6f3;
@@ -221,18 +223,31 @@ $overlayBrightnessAdjust: brightness(1.3);
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
-$colorIndicatorDisabled: #444;
+$colorIndicatorDisabled: #555555;
 $colorIndicatorOn: $colorOk;
-$colorIndicatorOff: #666;
+$colorIndicatorOff: #777777;
 
-// Limits and staleness colors//
+// Staleness
 $colorTelemFresh: lighten($colorBodyFg, 20%);
 $colorTelemStale: darken($colorBodyFg, 20%);
 $styleTelemStale: italic;
-$colorLimitYellowBg: rgba(#ffaa00, 0.3);
+
-$colorLimitYellowIc: #ffaa00;
+// Limits
-$colorLimitRedBg: rgba(red, 0.3);
+$colorLimitYellowBg: #ac7300;
-$colorLimitRedIc: red;
+$colorLimitYellowFg: #ffe64d;
+$colorLimitYellowIc: #ffb607;
+$colorLimitRedBg: #940000;
+$colorLimitRedFg: #ffa489;
+$colorLimitRedIc: #ff4222;
+
+// Status
+$colorAlert: #ff3c00;
+$colorWarningHi: #990000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
 
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
@@ -354,14 +369,16 @@ $createBtnTextTransform: uppercase;
 }
 
 /**************************************************** NOT USED, LEAVE FOR NOW */
-
+// Slider controls, not in use
-// Content status
 /*
-$colorAlert: #ff3c00;
+$sliderColorBase: $colorKey;
-$colorWarningHi: #990000;
+$sliderColorRangeHolder: rgba(black, 0.07);
-$colorWarningLo: #ff9900;
+$sliderColorRange: rgba($sliderColorBase, 0.2);
-$colorDiagnostic: #a4b442;
+$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$colorCommand: #3693bd;
+$sliderColorKnob: darken($sliderColorBase, 20%);
-$colorInfo: #2294a2;
+$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$colorOk: #33cc33;
+$sliderColorRangeValHovBg: $sliderColorRange;
+$sliderColorRangeValHovFg: $colorBodyFg;
+$sliderKnobW: 15px;
+$sliderKnobR: 2px;
 */

src/styles-new/_constants-maelstrom.scss

@@ -114,6 +114,7 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 // Base Colors
 $dlSpread: 20%;
 $editColor: #00c7c3;
+$editColorAlt: #9971ff;
 $editColorBgBase: darken($editColor, $dlSpread);
 $editColorBg: rgba($editColorBgBase, 0.2);
 $editColorFg: lighten($editColor, $dlSpread);
@@ -130,16 +131,17 @@ $editSelectableColorSelected: $editSelectableColorHov;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
 $editSelectableColorFg: darken($editSelectableColor, 40%);
 $editSelectableBorder: 1px dotted $editSelectableColor;
-$editSelectableBorderHov: 1px dotted $editColor;
+$editSelectableBorderHov: 1px dotted $editColorAlt;
 $editSelectableBorderSelected: 1px solid $editColor;
+$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
 $editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
-$editBorderDrilledIn: 1px dashed #9971ff;
+$editBorderDrilledIn: 1px dashed $editColorAlt;
 $colorGridLines: rgba($editColor, 0.2);
 
 /************************************************** BROWSING */
-$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
+$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
-$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
+$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
 
 // Icons
 $colorIconAlias: #4af6f3;
@@ -225,18 +227,31 @@ $overlayBrightnessAdjust: brightness(1.3);
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
-$colorIndicatorDisabled: #444;
+$colorIndicatorDisabled: #555555;
 $colorIndicatorOn: $colorOk;
-$colorIndicatorOff: #666;
+$colorIndicatorOff: #777777;
 
-// Limits and staleness colors//
+// Staleness
 $colorTelemFresh: lighten($colorBodyFg, 20%);
 $colorTelemStale: darken($colorBodyFg, 20%);
 $styleTelemStale: italic;
-$colorLimitYellowBg: rgba(#ffaa00, 0.3);
+
-$colorLimitYellowIc: #ffaa00;
+// Limits
-$colorLimitRedBg: rgba(red, 0.3);
+$colorLimitYellowBg: #ac7300;
-$colorLimitRedIc: red;
+$colorLimitYellowFg: #ffe64d;
+$colorLimitYellowIc: #ffb607;
+$colorLimitRedBg: #940000;
+$colorLimitRedFg: #ffa489;
+$colorLimitRedIc: #ff4222;
+
+// Status
+$colorAlert: #ff3c00;
+$colorWarningHi: #990000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
 
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
@@ -371,4 +386,4 @@ $createBtnTextTransform: uppercase;
         border-right: $bLR !important;;
         padding: 5px 10px 10px 10px !important;
     }
-}
+}

src/styles-new/_constants-snow.scss

@@ -110,6 +110,7 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 // Base Colors
 $dlSpread: 20%;
 $editColor: #00c7c3;
+$editColorAlt: #9971ff;
 $editColorBgBase: darken($editColor, $dlSpread);
 $editColorBg: darken($editColor, $dlSpread);
 $editColorFg: lighten($editColor, $dlSpread);
@@ -122,20 +123,21 @@ $editSelectableColor: #acdad6;
 $editSelectableColorFg: darken($editSelectableColor, 20%);
 $editSelectableColorHov: darken($editSelectableColor, 10%);
 // Selectable selected
-$editSelectableColorSelected: $editColor; //$editSelectableColorHov;
+$editSelectableColorSelected: $editColor;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 50%);
 $editSelectableColorFg: darken($editSelectableColor, 40%);
 $editSelectableBorder: 1px dotted $editSelectableColor;
-$editSelectableBorderHov: 1px dotted $editColor;
+$editSelectableBorderHov: 1px dotted $editColorAlt;
 $editSelectableBorderSelected: 1px solid $editColor;
+$editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
 $editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
-$editBorderDrilledIn: 1px dashed #9971ff;
+$editBorderDrilledIn: 1px dashed $editColorAlt;
 $colorGridLines: rgba($editColor, 0.2);
 
 /************************************************** BROWSING */
-$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
+$browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
-$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
+$browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
 
 // Icons
 $colorIconAlias: #4af6f3;
@@ -225,14 +227,27 @@ $colorIndicatorDisabled: #444;
 $colorIndicatorOn: $colorOk;
 $colorIndicatorOff: #666;
 
-// Limits and staleness colors//
+// Staleness
 $colorTelemFresh: darken($colorBodyFg, 20%);
 $colorTelemStale: lighten($colorBodyFg, 20%);
 $styleTelemStale: italic;
-$colorLimitYellowBg: rgba(#ffaa00, 0.3);
+
-$colorLimitYellowIc: #ffaa00;
+// Limits
-$colorLimitRedBg: rgba(red, 0.3);
+$colorLimitYellowBg: #ffe64d;
-$colorLimitRedIc: red;
+$colorLimitYellowFg: #7f4f20;
+$colorLimitYellowIc: #e7a115;
+$colorLimitRedBg: #ff0000;
+$colorLimitRedFg: #fff;
+$colorLimitRedIc: #ffa99a;
+
+// Status
+$colorAlert: #ff3c00;
+$colorWarningHi: #990000;
+$colorWarningLo: #ff9900;
+$colorDiagnostic: #a4b442;
+$colorCommand: #3693bd;
+$colorInfo: #2294a2;
+$colorOk: #33cc33;
 
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;

src/styles-new/_controls.scss

@@ -31,11 +31,13 @@ button {
     @include cButton();
 }
 
-.c-button--menu {
+.c-button {
-    &:after {
+    &--menu {
-        content: $glyph-icon-arrow-down;
+        &:after {
-        font-family: symbolsfont;
+            content: $glyph-icon-arrow-down;
-        opacity: 0.5;
+            font-family: symbolsfont;
+            opacity: 0.5;
+        }
     }
 }
 
@@ -44,23 +46,25 @@ button {
 }
 
 /********* Icon Buttons */
-.c-click-icon {
+.c-click-icon,
+.c-click-swatch {
     @include cClickIcon();
 
-    .c-click-icon__label {
-        margin-left: $interiorMargin;
-    }
-
     &--menu {
-
         &:after {
             content: $glyph-icon-arrow-down;
             font-family: symbolsfont;
-            font-size: 0.6em;
+            font-size: 0.7em;
             margin-left: floor($interiorMarginSm * 0.8);
             opacity: 0.5;
         }
     }
+}
+
+.c-click-icon {
+    .c-click-icon__label {
+        margin-left: $interiorMargin;
+    }
 
     &--swatched {
         // Color control, show swatch element
@@ -162,6 +166,11 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .c-input {
+    &--flex {
+        width: 100%;
+        min-width: 20px;
+    }
+
     &--datetime {
         // Sized for values such as 2018-09-28 22:32:33.468Z
         width: 160px;
@@ -260,6 +269,7 @@ input[type=number]::-webkit-outer-spin-button {
                 color: $colorMenuHovIc;
             }
         }
+
         &:before {
             color: $colorMenuIc;
             font-size: 1em;
@@ -343,16 +353,16 @@ input[type=number]::-webkit-outer-spin-button {
     &__items {
         flex: 1 1 auto;
         display: grid;
-        grid-template-columns: repeat(10, [col] auto );
+        grid-template-columns: repeat(auto-fill, 12px);
         grid-gap: 1px;
     }
 
     &__item {
-        $d: 16px;
+        $d: 12px;
 
         border: 1px solid transparent;
         cursor: pointer;
-        width: 16px; height: 16px;
+        min-width: $d; min-height: $d;
         transition: $transOut;
 
         &:hover {
@@ -383,6 +393,12 @@ input[type=number]::-webkit-outer-spin-button {
     }
 }
 
+/******************************************************** SWATCHES */
+.c-color-swatch {
+    border: 1px solid rgba(#fff, 0.2);
+    box-shadow: rgba(#000, 0.2) 0 0 0 1px;
+}
+
 /******************************************************** TOOLBAR */
 .c-ctrl-wrapper {
     @include cCtrlWrapper();
@@ -449,6 +465,10 @@ input[type=number]::-webkit-outer-spin-button {
             margin-left: $interiorMargin;
         }
     }
+
+    .c-palette {
+        min-width: 136px;
+    }
 }
 
 /********* Button Sets */
@@ -461,10 +481,6 @@ input[type=number]::-webkit-outer-spin-button {
     > * {
         // Assume buttons are immediate descendants
         flex: 0 0 auto;
-
-        + * {
-            // margin-left: $interiorMarginSm;
-        }
     }
 
     + .c-button-set {

src/styles-new/_global.scss

@@ -141,17 +141,22 @@ li {
 // Local Controls: Controls placed in proximity to or overlaid on components and views
 body.desktop .has-local-controls {
     // Provides hover ability to show local controls
-    &:hover [class*="local-controls--hidden"] {
+    [class*='local-controls--hidden'] {
-        transition: opacity 50ms ease-in-out;
-        opacity: 1;
-        pointer-events: inherit;
-    }
-
-    [class*="local-controls--hidden"] {
         transition: opacity 500ms ease-in-out;
         opacity: 0;
         pointer-events: none;
     }
+
+    // Look down up to two levels and display hidden LC's on hover
+    &:hover {
+        > [class*='local-controls--hidden'],
+        > * > [class*='local-controls--hidden'],
+        > * > * > [class*='local-controls--hidden'] {
+            transition: opacity 50ms ease-in-out;
+            opacity: 1;
+            pointer-events: inherit;
+        }
+    }
 }
 
 /******************************************************** ICON BACKGROUNDS */
@@ -193,7 +198,7 @@ body.desktop .has-local-controls {
 /*************************** SELECTION */
 .u-inspectable {
     &:hover {
-        box-shadow: $browseShdwSelectableHov;
+        box-shadow: $browseSelectableShdwHov;
     }
 }
 
@@ -202,13 +207,14 @@ body.desktop .has-local-controls {
     *:not(.is-drilled-in).c-frame {
         border: $editSelectableBorder;
 
-        &:hover {
+        &:not([s-selected]) {
-            border: $editSelectableBorderHov;
+            &:hover {
+                border: $editSelectableBorderHov;
+            }
         }
 
-        &[s-selected],
+        &[s-selected] {
-        &.is-selected {
+            box-shadow: $editSelectableShdwSelected;
-            border: $editSelectableBorderSelected;
 
             > .c-frame-edit {
                 display: block; // Show the editing rect and handles
@@ -220,7 +226,7 @@ body.desktop .has-local-controls {
         border: $editBorderDrilledIn;
     }
 
-    *[s-selected] {
+    .is-moveable {
         cursor: move;
     }
 

src/styles-new/_mixins.scss

@@ -294,7 +294,7 @@
     padding: $interiorMargin floor($interiorMargin * 1.25);
 
     &:after,
-    > * {
+    > * + * {
         margin-left: $interiorMarginSm;
     }
 
@@ -333,7 +333,6 @@
     background: none;
     box-shadow: none;
     border-radius: $controlCr;
-    color: $colorKey;
     cursor: pointer;
     padding: $pTB $pLR ;
 
@@ -348,6 +347,10 @@
         // Needed for c-togglebutton.
         font-size: 1.25em;
     }
+
+    &[class*="--major"] {
+        color: $colorKey;
+    }
 }
 
 @mixin cCtrlWrapper {
@@ -506,5 +509,7 @@
 }
 
 @mixin test($c: deeppink, $a: 0.3) {
+    background: rgba($c, $a) !important;
     background-color: rgba($c, $a) !important;
+    box-shadow: deeppink 0 0 10px 1px !important;
 }

src/styles-new/_status.scss

@@ -0,0 +1,113 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/*************************************************** MIXINS */
+@mixin statusStyle($bg, $fg, $ic) {
+    background: $bg !important;
+    background-color: $bg !important;
+    color: $fg !important;
+    &:before {
+        color: $ic;
+        display: inline-block;
+        font-family: symbolsfont;
+        font-size: 0.7em;
+        margin-right: $interiorMargin;
+    }
+}
+
+@mixin elementStatusColors($c) {
+    // Sets bg and icon colors for elements
+    background: rgba($c, 0.5) !important;
+    &:before {
+        color: $c !important;
+    }
+}
+
+@mixin indicatorStatusColors($c) {
+    &:before, .count {
+        color: $c;
+    }
+}
+
+.is-limit--yellow {
+    @include statusStyle($colorLimitYellowBg, $colorLimitYellowFg, $colorLimitYellowIc);
+    &.is-limit--upr:before { content: $glyph-icon-arrow-up; }
+    &.is-limit--lwr:before { content: $glyph-icon-arrow-down; }
+}
+
+.is-limit--red {
+    @include statusStyle($colorLimitRedBg, $colorLimitRedFg, $colorLimitRedIc);
+    &.is-limit--upr:before { content: $glyph-icon-arrow-double-up; }
+    &.is-limit--lwr:before { content: $glyph-icon-arrow-double-down; }
+}
+
+/*************************************************** STATUS */
+[class*='s-status'] {
+    &:before {
+        margin-right: $interiorMargin;
+    }
+}
+
+.s-status-warning-hi, .s-status-icon-warning-hi {  @include elementStatusColors($colorWarningHi); }
+.s-status-warning-lo, .s-status-icon-warning-lo {  @include elementStatusColors($colorWarningLo); }
+.s-status-diagnostic, .s-status-icon-diagnostic {  @include elementStatusColors($colorDiagnostic); }
+.s-status-info, .s-status-icon-info {  @include elementStatusColors($colorInfo); }
+.s-status-ok, .s-status-icon-ok {  @include elementStatusColors($colorOk); }
+
+.s-status-icon-warning-hi:before { content: $glyph-icon-alert-triangle; }
+.s-status-icon-warning-lo:before { content: $glyph-icon-alert-rect; }
+.s-status-icon-diagnostic:before { content: $glyph-icon-eye-open; }
+.s-status-icon-info:before { content: $glyph-icon-info; }
+.s-status-icon-ok:before { content: $glyph-icon-check; }
+
+/*************************************************** INDICATOR COLORING */
+.ls-indicator {
+    &.s-status-info {
+        @include indicatorStatusColors($colorInfo);
+    }
+
+    &.s-status-disabled {
+        @include indicatorStatusColors($colorIndicatorDisabled);
+    }
+
+    &.s-status-available {
+        @include indicatorStatusColors($colorIndicatorAvailable);
+    }
+
+    &.s-status-on,
+    &.s-status-enabled {
+        @include indicatorStatusColors($colorIndicatorOn);
+    }
+
+    &.s-status-off {
+        @include indicatorStatusColors($colorIndicatorOff);
+    }
+
+    &.s-status-caution,
+    &.s-status-warning,
+    &.s-status-alert {
+        @include indicatorStatusColors($colorStatusAlert);
+    }
+
+    &.s-status-error {
+        @include indicatorStatusColors($colorStatusError);
+    }
+}

src/styles-new/core.scss

@@ -26,6 +26,7 @@
 /******************** RENDERS CSS */
 @import "glyphs";
 @import "global";
+@import "status";
 @import "controls";
 @import "table";
 @import "legacy-plots";

src/styles-new/legacy-styles.scss

@@ -14,7 +14,7 @@
 //@import "../styles/about";
 //@import "../styles/text";
 @import "../styles/icons";
-@import "../styles/status";
+//@import "../styles/status";
 @import "../styles/data-status";
 @import "../styles/helpers/bubbles";
 @import "../styles/helpers/splitter";

src/ui/components/ObjectFrame.vue

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-    <div class="u-contents c-so-view"
+    <div class="u-contents c-so-view has-local-controls"
         :class="{
             'c-so-view--no-frame': !hasFrame
         }">

src/ui/inspector/Inspector.vue

@@ -49,6 +49,14 @@
             }
         }
 
+        .c-color-swatch {
+            $d: 12px;
+            display: block;
+            flex: 0 0 auto;
+            width: $d;
+            height: $d;
+        }
+
         /************************************************************** LEGACY */
         // TODO: refactor when legacy properties markup can be converted
         .inspector-location {
@@ -128,9 +136,6 @@
             grid-column: 1 / 3;
         }
 
-
-
-
         + .c-properties {
             // Margin between components
             margin-top: $interiorMarginLg;

src/ui/layout/BrowseBar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
-            <button class="l-browse-bar__nav-to-parent-button c-click-icon icon-pointer-left"></button>
+            <button class="l-browse-bar__nav-to-parent-button c-click-icon c-click-icon--major icon-pointer-left"></button>
             <div class="l-browse-bar__object-name--w"
                  :class="type.cssClass">
                 <span

src/ui/layout/Layout.vue

@@ -5,11 +5,11 @@
         <div class="l-shell__head">
             <CreateButton class="l-shell__create-button"></CreateButton>
             <div class="l-shell__controls">
-                <button class="c-click-icon icon-new-window" title="Open in a new browser tab"
+                <button class="c-click-icon c-click-icon--major icon-new-window" title="Open in a new browser tab"
                     @click="openInNewTab"
                     target="_blank">
                 </button>
-                <button v-bind:class="['c-click-icon', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
+                <button v-bind:class="['c-click-icon c-click-icon--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
                     v-bind:title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
                     @click="fullScreenToggle">
                 </button>