Markup changes WIP

* Added telemetry filters to the API

* Support multiple inspector views

* Renamed InspectorView.vue to InspectorViews.vue

* first cut of filter inspector plugin

* abstract for better readability

* third times the charm

* working persist checkbox selections

* fix typo

* working persisted filters from inspector

* add prop validations for FitlerValue and FilterObject

* enable filter inspector view for overlay and stacked plots

* remove object from persisted filter when object is removed from composition

* update filterValue to filterField for clarity

* Added filter code to tables

* add filter support to Telemetry Tables

* fix errors when old domainObject does not have configuration property

* working filters on overlay plots

* make requested changes

* Add filters as 'options' object on subscribe

* Significant mods to Filtering
- Styling;
- Added Browse view in Inspector;
- Added .c-checkbox-list class;
- "PLOT SERIES" header changed to "PLOT SERIES OPTIONS" for clarity;

* make filter update pass updated filters to telemetry adapter

* Tolerate undefined configuration

* Conditionally destroy filters listener

* use @change event instead of @blur'

example/generator/GeneratorMetadataProvider.js

@@ -33,12 +33,19 @@ define([
                     formatString: '%0.2f',
                     hints: {
                         range: 1
-                    }
+                    },
+                    filters: [
+                        {
+                            comparator: 'equals',
+                            possibleValues: [1,2,3,4]
+                        }
+                    ]
                 },
                 {
                     key: "cos",
                     name: "Cosine",
                     formatString: '%0.2f',
+                    filters: ['equals'],
                     hints: {
                         range: 2
                     }

index.html

@@ -27,7 +27,7 @@
         <meta name="apple-mobile-web-app-capable" content="yes">
         <title></title>
         <script src="dist/openmct.js"></script>
-        <link rel="stylesheet" href="dist/openmct.css">
+        <link rel="stylesheet" href="dist/styles/openmct.css">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96">
         <link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16">
@@ -81,6 +81,8 @@
         openmct.install(openmct.plugins.Tabs());
         openmct.install(openmct.plugins.FlexibleLayout());
         openmct.install(openmct.plugins.LADTable());
+        openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
+        openmct.install(openmct.plugins.ObjectMigration());
         openmct.start();
     </script>
 </html>

package.json

@@ -25,7 +25,7 @@
     "eventemitter3": "^1.2.0",
     "exports-loader": "^0.7.0",
     "express": "^4.13.1",
-    "fast-sass-loader": "^1.4.5",
+    "fast-sass-loader": "1.4.6",
     "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "git-rev-sync": "^1.4.0",

platform/commonUI/dialog/res/templates/dialog.html

@@ -19,24 +19,24 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs top-bar">
-    <div class="dialog-title">{{ngModel.title}}</div>
-    <div class="hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
+<div class="c-overlay__top-bar">
+    <div class="c-overlay__dialog-title">{{ngModel.title}}</div>
+    <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
 </div>
-<div class='abs editor'>
+<div class='c-overlay__contents-main'>
     <mct-form ng-model="ngModel.value"
               structure="ngModel.structure"
               class="validates"
               name="createForm">
     </mct-form>
 </div>
-<div class="abs bottom-bar">
-    <a class='s-button major'
+<div class="c-overlay__button-bar">
+    <a class='c-button c-button--major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='s-button'
+    <a class='c-button  '
        ng-click="ngModel.cancel()">
         Cancel
     </a>

platform/commonUI/dialog/res/templates/overlay-options.html

@@ -19,18 +19,18 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<mct-container key="overlay">
-    <div class="abs top-bar">
-        <div class="dialog-title">{{ngModel.dialog.title}}</div>
-        <div class="hint">{{ngModel.dialog.hint}}</div>
+<mct-container key="c-overlay__contents">
+    <div class=c-overlay__top-bar">
+        <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
+        <div class="c-overlay__dialog-hint hint">{{ngModel.dialog.hint}}</div>
     </div>
-    <div class='abs editor'>
+    <div class='c-overlay__contents-main'>
         <mct-include key="ngModel.dialog.template"
                      parameters="ngModel.dialog.parameters"
                      ng-model="ngModel.dialog.model">
         </mct-include>
     </div>
-    <div class="abs bottom-bar">
+    <div class="c-overlay__button-bar">
         <a ng-repeat="option in ngModel.dialog.options"
            href=''
            class="s-button lg"

platform/commonUI/dialog/res/templates/overlay.html

@@ -19,12 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
-    <div class="abs blocker"></div>
-    <div class="abs outer-holder">
+<div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
+    <div class="c-overlay__blocker"></div>
+    <div class="c-overlay__outer">
         <a ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="close icon-x-in-circle"></a>
-        <div class="abs inner-holder contents" ng-transclude></div>
+           class="c-click-icon c-overlay__close-button icon-x-in-circle"></a>
+        <div class="c-overlay__contents" ng-transclude></div>
     </div>
 </div>

platform/commonUI/edit/bundle.js

@@ -160,7 +160,7 @@ define([
                 },
                 {
                     "key": "remove",
-                    "category": "contextual",
+                    "category": "legacy",
                     "implementation": RemoveAction,
                     "cssClass": "icon-trash",
                     "name": "Remove",

platform/commonUI/edit/src/actions/RemoveAction.js

@@ -23,11 +23,7 @@
 /**
  * Module defining RemoveAction. Created by vwoeltje on 11/17/14.
  */
-define([
-    './RemoveDialog'
-], function (
-    RemoveDialog
-) {
+define([], function () {
 
     /**
      * Construct an action which will remove the provided object manifestation.
@@ -114,12 +110,7 @@ define([
             return parent.useCapability('mutation', doMutate);
         }
 
-        /*
-         * Pass in the function to remove the domain object so it can be
-         * associated with an 'OK' button press
-         */
-        dialog = new RemoveDialog(this.openmct, domainObject, removeFromContext);
-        dialog.show();
+        removeFromContext();
     };
 
     // Object needs to have a parent for Remove to be applicable

platform/commonUI/edit/src/actions/RemoveDialog.js

@@ -1,72 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, 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.
- *****************************************************************************/
-
-define([], function () {
-
-    /**
-     * @callback removeCallback
-     * @param {DomainObject} domainObject the domain object to be removed
-     */
-
-    /**
-     * Construct a new Remove dialog.
-     *
-     * @param {DialogService} dialogService the service that shows the dialog
-     * @param {DomainObject} domainObject the domain object to be removed
-     * @param {removeCallback} removeCallback callback that handles removal of the domain object
-     * @memberof platform/commonUI/edit
-     * @constructor
-     */
-    function RemoveDialog(openmct, domainObject, removeCallback) {
-        this.openmct = openmct;
-        this.domainObject = domainObject;
-        this.removeCallback = removeCallback;
-    }
-
-    /**
-     * Display a dialog to confirm the removal of a domain object.
-     */
-    RemoveDialog.prototype.show = function () {
-        let dialog = this.openmct.overlays.dialog({
-            title: 'Remove ' + this.domainObject.getModel().name,
-            iconClass: 'alert',
-            message: 'Warning! This action will permanently remove this object. Are you sure you want to continue?',
-            buttons: [
-                {
-                    label: 'OK',
-                    callback: () => {
-                        this.removeCallback();
-                        dialog.dismiss();
-                    }
-                },
-                {
-                    label: 'Cancel',
-                    callback: () => {
-                        dialog.dismiss();
-                    }
-                }
-            ]
-        });
-    };
-
-    return RemoveDialog;
-});

platform/commonUI/edit/src/actions/SaveAsAction.js

@@ -92,16 +92,7 @@ function (
          * @memberof platform/commonUI/edit.SaveAction#
          */
     SaveAsAction.prototype.perform = function () {
-        // Discard the current root view (which will be the editing
-        // UI, which will have been pushed atop the Browse UI.)
-        function returnToBrowse(object) {
-            if (object) {
-                object.getCapability("action").perform("navigate");
-            }
-            return object;
-        }
-
-        return this.save().then(returnToBrowse);
+        return this.save();
     };
 
     /**
@@ -192,7 +183,7 @@ function (
             if (reason !== "user canceled") {
                 self.notificationService.error("Save Failed");
             }
-            return false;
+            throw reason;
         }
 
         return getParent(domainObject)

platform/commonUI/edit/src/creation/CreateAction.js

@@ -67,20 +67,29 @@ define(
                 openmct = this.openmct,
                 newObject;
 
-            function onSave() {
-                // openmct.editor.save();
-            }
-
             function onCancel() {
                 openmct.editor.cancel();
             }
 
+            function navigateAndEdit(object) {
+                let objectPath = object.getCapability('context').getPath(),
+                    url = '#/browse/' + objectPath
+                        .map(function (o) {
+                            return o && openmct.objects.makeKeyString(o.getId())
+                        })
+                        .join('/');
+
+                window.location.href = url;
+
+                openmct.editor.edit();
+            }
+
             newModel.type = this.type.getKey();
             newModel.location = this.parent.getId();
             newObject = this.parent.useCapability('instantiation', newModel);
 
             openmct.editor.edit();
-            newObject.getCapability("action").perform("save-as").then(onSave, onCancel);
+            newObject.getCapability("action").perform("save-as").then(navigateAndEdit, onCancel);
             // TODO: support editing object without saving object first.
             // Which means we have to toggle createwizard afterwards.  For now,
             // We will disable this.

platform/commonUI/general/res/templates/label.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="t-object-label l-flex-row flex-elem grows">
-    <div class="t-item-icon flex-elem {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
-    <div class='t-title-label flex-elem grows'>{{model.name}}</div>
+<div class="c-object-label">
+    <div class="c-object-label__type-icon {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
+    <div class='c-object-label__name'>{{model.name}}</div>
 </div>

platform/commonUI/general/res/templates/tree-node.html

@@ -20,14 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ToggleController as toggle">
-    <span ng-controller="TreeNodeController as treeNode">
-        <span
-            class="tree-item menus-to-left"
-            ng-class="{selected: treeNode.isSelected()}"
-            >
-            <span
-                class='ui-symbol view-control flex-elem'
-                ng-class="{ 'has-children': model.composition !== undefined, expanded: toggle.isActive() }"
+    <div class="u-contents" ng-controller="TreeNodeController as treeNode">
+        <div class="c-tree__item menus-to-left"
+            ng-class="{selected: treeNode.isSelected()}">
+            <span class='c-disclosure-triangle c-tree__item__view-control'
+                ng-class="{ 'is-enabled': model.composition !== undefined, 'c-disclosure-triangle--expanded': toggle.isActive() }"
                 ng-click="toggle.toggle(); treeNode.trackExpansion()"
                 >
             </span>
@@ -39,19 +36,15 @@
                 ng-click="treeNode.select()"
                 >
             </mct-representation>
-        </span>
-        <span
-            class="tree-item-subtree"
+        </div>
+        <div class="u-contents"
             ng-show="toggle.isActive()"
-            ng-if="model.composition !== undefined"
-            >
-
+            ng-if="model.composition !== undefined">
             <mct-representation key="'subtree'"
                                 ng-model="ngModel"
                                 parameters="parameters"
                                 mct-object="treeNode.hasBeenExpanded() && domainObject">
             </mct-representation>
-
-        </span>
-    </span>
+        </div>
+    </div>
 </span>

platform/commonUI/general/res/templates/tree.html

@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<ul class="tree">
-    <li>
+<ul class="c-tree">
+    <li class="c-tree__item-h">
         <mct-representation key="'tree-node'"
                             mct-object="domainObject"
                             ng-model="ngModel"

platform/commonUI/general/res/templates/tree/node.html

@@ -1,4 +1,2 @@
-<span class="tree-item menus-to-left">
-</span>
-<span class="tree-item-subtree">
-</span>
+<span class="c-tree__item js-tree__item"></span>
+<span class="c-tree__item-subtree"></span>

platform/commonUI/general/res/templates/tree/toggle.html

@@ -1,2 +1 @@
-<span class='ui-symbol view-control flex-elem'>
-</span>
+<span class='c-disclosure-triangle c-tree__item__view-control'></span>

platform/commonUI/general/res/templates/tree/tree-label.html

@@ -1,6 +1,4 @@
-<span class="rep-object-label">
-    <div class="t-object-label l-flex-row flex-elem grows">
-        <div class="t-item-icon flex-elem"></div>
-        <div class='t-title-label flex-elem grows'></div>
-    </div>
-</span>
+<div class="rep-object-label c-object-label c-tree__item__label">
+    <div class="c-object-label__type-icon c-tree__item__type-icon t-item-icon"></div>
+    <div class="c-object-label__name c-tree__item__name t-title-label"></div>
+</div>

platform/commonUI/general/src/ui/ToggleView.js

@@ -37,9 +37,9 @@ define([
         this.expanded = state;
 
         if (state) {
-            this.el.addClass('expanded');
+            this.el.addClass('c-disclosure-triangle--expanded');
         } else {
-            this.el.removeClass('expanded');
+            this.el.removeClass('c-disclosure-triangle--expanded');
         }
 
         this.callbacks.forEach(function (callback) {

platform/commonUI/general/src/ui/TreeNodeView.js

@@ -28,7 +28,7 @@ define([
 ], function ($, nodeTemplate, ToggleView, TreeLabelView) {
 
     function TreeNodeView(gestureService, subtreeFactory, selectFn, openmct) {
-        this.li = $('<li>');
+        this.li = $('<li class="c-tree__item-h">');
         this.openmct = openmct;
         this.statusClasses = [];
 
@@ -38,7 +38,7 @@ define([
                 if (!this.subtreeView) {
                     this.subtreeView = subtreeFactory();
                     this.subtreeView.model(this.activeObject);
-                    this.li.find('.tree-item-subtree').eq(0)
+                    this.li.find('.c-tree__item-subtree').eq(0)
                         .append($(this.subtreeView.elements()));
                 }
                 $(this.subtreeView.elements()).removeClass('hidden');
@@ -85,9 +85,9 @@ define([
             var obj = domainObject.useCapability('adapter');
             var hasComposition =  this.openmct.composition.get(obj) !== undefined;
             if (hasComposition) {
-                $(this.toggleView.elements()).removeClass('no-children');
+                $(this.toggleView.elements()).addClass('is-enabled');
             } else {
-                $(this.toggleView.elements()).addClass('no-children');
+                $(this.toggleView.elements()).removeClass('is-enabled');
             }
         }
 
@@ -120,7 +120,7 @@ define([
             selectedIdPath = getIdPath(domainObject);
 
         if (this.onSelectionPath) {
-            this.li.find('.tree-item').eq(0).removeClass('selected');
+            this.li.find('.js-tree__item').eq(0).removeClass('is-selected');
             if (this.subtreeView) {
                 this.subtreeView.value(undefined);
             }
@@ -136,7 +136,7 @@ define([
 
         if (this.onSelectionPath) {
             if (activeIdPath.length === selectedIdPath.length) {
-                this.li.find('.tree-item').eq(0).addClass('selected');
+                this.li.find('.js-tree__item').eq(0).addClass('is-selected');
             } else {
                 // Expand to reveal the selection
                 this.toggleView.value(true);

platform/commonUI/general/src/ui/TreeView.js

@@ -27,7 +27,7 @@ define([
 ], function ($, TreeNodeView, spinnerTemplate) {
 
     function TreeView(gestureService, openmct, selectFn) {
-        this.ul = $('<ul class="tree"></ul>');
+        this.ul = $('<ul class="c-tree"></ul>');
         this.nodeViews = [];
         this.callbacks = [];
         this.selectFn = selectFn || this.value.bind(this);

platform/features/imagery/res/templates/imagery.html

@@ -33,14 +33,14 @@
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="l-datetime-w flex-elem grows">
-                <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
+                <a class="c-button show-thumbs sm hidden icon-thumbs-strip"
                     ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
                 <span class="l-time">{{imagery.getTime()}}</span>
             </div>
             <div class="h-local-controls flex-elem">
-                <a class="s-button pause-play"
+                <a class="c-button icon-pause pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
-                    ng-class="{ paused: imagery.paused() }"></a>
+                    ng-class="{ 'is-paused': imagery.paused() }"></a>
                 <a href=""
                     class="s-button l-mag s-mag vsm icon-reset"
                     ng-click="clipped = false"

platform/forms/res/templates/form.html

@@ -19,13 +19,13 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<form name="mctForm" novalidate class="form l-flex-col">
+<form name="mctForm" novalidate class="form c-form" autocomplete="off">
     <span ng-repeat="section in structure.sections"
-          class="l-form-section l-flex-col flex-elem {{ section.cssClass }}">
-        <h2 class="section-header flex-elem" ng-if="section.name">
+          class="l-form-section c-form__section {{ section.cssClass }}">
+        <h2 class="c-form__header" ng-if="section.name">
             {{section.name}}
         </h2>
-        <ng-form class="form-row validates l-flex-row flex-elem {{ section.cssClass }}"
+        <ng-form class="form-row c-form__row validates {{ section.cssClass }}"
                  ng-class="{
                  first:$index < 1,
                  req: row.required,
@@ -37,11 +37,11 @@
                  }"
                  name="mctFormInner"
                  ng-repeat="row in section.rows">
-            <div class='label flex-elem' title="{{row.description}}">
+            <div class='c-form__row__label label flex-elem' title="{{row.description}}">
                 {{row.name}}
             </div>
-            <div class='controls flex-elem'>
-                <div class="wrapper" ng-if="row.control">
+            <div class='c-form__row__controls controls flex-elem'>
+                <div class="c-form__controls-wrapper wrapper" ng-if="row.control">
                     <mct-control key="row.control"
                                  ng-model="ngModel"
                                  ng-required="row.required"

platform/forms/src/controllers/SnapshotPreviewController.js

@@ -29,12 +29,13 @@ define(
         function SnapshotPreviewController($scope, openmct) {
 
             $scope.previewImage = function (imageUrl) {
-                let image = document.createElement('img');
-                image.src = imageUrl;
+                let imageDiv = document.createElement('div');
+                imageDiv.classList = 'image-main s-image-main';
+                imageDiv.style.backgroundImage = `url(${imageUrl})`;
 
                 let previewImageOverlay = openmct.overlays.overlay(
                     {
-                        element: image,
+                        element: imageDiv,
                         size: 'large',
                         buttons: [
                             {

platform/search/res/templates/search.html

@@ -45,7 +45,7 @@
                 </mct-include>
             </div>
 
-            <a class="s-button c-search__btn-cancel"
+            <a class="c-button c-search__btn-cancel"
                ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
                ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
                 Cancel</a>

src/MCT.js

@@ -44,6 +44,7 @@ define([
     '../platform/core/src/objects/DomainObjectImpl',
     '../platform/core/src/capabilities/ContextualDomainObject',
     './ui/preview/plugin',
+    './plugins/remove/plugin',
     'vue'
 ], function (
     EventEmitter,
@@ -69,6 +70,7 @@ define([
     DomainObjectImpl,
     ContextualDomainObject,
     PreviewPlugin,
+    RemoveActionPlugin,
     Vue
 ) {
     /**
@@ -233,6 +235,7 @@ define([
         this.install(this.plugins.TelemetryTable());
         this.install(this.plugins.DisplayLayout());
         this.install(PreviewPlugin.default());
+        this.install(RemoveActionPlugin.default());
 
         if (typeof BUILD_CONSTANTS !== 'undefined') {
             this.install(buildInfoPlugin(BUILD_CONSTANTS));

src/adapter/runs/LegacyTelemetryProvider.js

@@ -158,7 +158,7 @@ define([
 
         return {
             evaluate: function (datum, property) {
-                return limitEvaluator.evaluate(datum, property.key);
+                return limitEvaluator.evaluate(datum, property && property.key);
             }
         };
     };

src/api/composition/DefaultCompositionProvider.js

@@ -178,8 +178,12 @@ define([
      * @method remove
      */
     DefaultCompositionProvider.prototype.remove = function (domainObject, childId) {
-        // TODO: this needs to be synchronized via mutation.
-        throw new Error('Default Provider does not implement removal.');
+        let composition = domainObject.composition.filter(function (child) {
+            return !(childId.namespace === child.namespace &&
+                childId.key === child.key);
+        });
+
+        this.publicAPI.objects.mutate(domainObject, 'composition', composition);
     };
 
     /**

src/api/overlays/components/OverlayComponent.vue

@@ -64,8 +64,34 @@
         }
 
         &__contents {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__top-bar {
+            flex: 0 0 auto;
+            flex-direction: column;
+            display: flex;
+
+            > * {
+                flex: 0 0 auto;
+                margin-bottom: $interiorMargin;
+            }
+        }
+
+        &__dialog-title {
+            @include ellipsize();
+            font-size: 1.5em;
+            line-height: 120%;
+        }
+
+        &__contents-main {
+            display: flex;
+            flex-direction: column;
             flex: 1 1 auto;
             overflow: auto;
+            padding-right: $interiorMargin; // fend off scroll bar
         }
 
         &__button-bar {
@@ -89,7 +115,7 @@
         .c-overlay {
             &__blocker {
                 @include abs();
-                background: rgba(black, 0.7);
+                background: $colorOvrBlocker;
                 cursor: pointer;
                 display: block;
             }

src/api/telemetry/TelemetryAPI.js

@@ -297,7 +297,7 @@ define([
      * @returns {Function} a function which may be called to terminate
      *          the subscription
      */
-    TelemetryAPI.prototype.subscribe = function (domainObject, callback) {
+    TelemetryAPI.prototype.subscribe = function (domainObject, callback, options) {
         var provider = this.findSubscriptionProvider(domainObject);
 
         if (!this.subscribeCache) {
@@ -316,7 +316,7 @@ define([
                         subscriber.callbacks.forEach(function (cb) {
                             cb(value);
                         });
-                    });
+                    }, options);
             } else {
                 subscriber.unsubscribe = function () {};
             }

src/api/telemetry/TelemetryMetadataManager.js

@@ -124,6 +124,10 @@ define([
         return sortedMetadata;
     };
 
+    TelemetryMetadataManager.prototype.getFilterableValues = function () {
+        return this.valueMetadatas.filter(metadatum => metadatum.filters && metadatum.filters.length > 0);
+    }
+
     TelemetryMetadataManager.prototype.getDefaultDisplayValue = function () {
         let valueMetadata = this.valuesForHints(['range'])[0];
 

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -1,4 +1,4 @@
-/*****************************************************************************
+    /*****************************************************************************
  * Open MCT, Copyright (c) 2014-2018, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.

src/plugins/filters/components/FilterField.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="u-contents c-filter-settings">
+        <li class="grid-row c-filter-settings__setting"
+            v-for="(filter, index) in filterField.filters"
+            :key="index">
+            <div class="grid-cell label">
+                {{ filterField.name }} =
+            </div>
+            <div class="grid-cell value">
+                <!-- EDITING -->
+                <!-- String input, editing -->
+                <template v-if="!filter.possibleValues && isEditing">
+                    <input class="c-input--flex"
+                           type="text"
+                           placeholder="Enter Value"
+                           :id="`${filter}filterControl`"
+                           :value="persistedValue(filter)"
+                           @change="updateFilterValue($event, filter)">
+                </template>
+
+                <!-- Checkbox list, editing -->
+                <template v-if="filter.possibleValues && isEditing">
+                    <div class="c-checkbox-list__row"
+                         v-for="value in filter.possibleValues"
+                         :key="value">
+                        <input class="c-checkbox-list__input"
+                               type="checkbox"
+                               :id="`${value}filterControl`"
+                               @change="onUserSelect($event, filter.comparator, value)"
+                               :checked="isChecked(filter.comparator, value)">
+                        <span class="c-checkbox-list__value">
+                            {{ value }}
+                        </span>
+                    </div>
+                </template>
+
+                <!-- BROWSING -->
+                <!-- String input, NOT editing -->
+                <template v-if="!filter.possibleValues && !isEditing">
+                    {{ persistedValue(filter) }}
+                </template>
+
+                <!-- Checkbox list, NOT editing -->
+                <template v-if="filter.possibleValues && !isEditing">
+                    <span>{{persistedFilters[filter.comparator].join(', ')}}</span>
+                </template>
+            </div>
+        </li>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-filter-settings {
+        &__setting {
+            .grid-cell.label {
+                white-space: nowrap;
+            }
+        }
+    }
+</style>
+
+
+<script>
+export default {
+    inject: [
+        'openmct'
+    ],
+    props: {
+        filterField: Object, 
+        persistedFilters: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            expanded: false,
+            isEditing: this.openmct.editor.isEditing()
+        }
+    },
+    methods: {
+        toggleIsEditing(isEditing) {
+            this.isEditing = isEditing;
+        },
+        onUserSelect(event, comparator, value){
+            this.$emit('onUserSelect', this.filterField.key, comparator, value, event.target.checked);
+        },
+        isChecked(comparator, value) {
+            if (this.persistedFilters[comparator] && this.persistedFilters[comparator].includes(value)) {
+                return true;
+            } else {
+                return false;
+            }
+        },
+        persistedValue(comparator) {
+            return this.persistedFilters && this.persistedFilters[comparator];
+        },
+        updateFilterValue(event, comparator) {
+            this.$emit('onTextEnter', this.filterField.key, comparator, event.target.value);
+        }
+    },
+    mounted() {
+        this.openmct.editor.on('isEditing', this.toggleIsEditing);
+    },
+    beforeDestroy() {
+        this.openmct.editor.off('isEditing', this.toggleIsEditing);
+    }
+}
+</script>

src/plugins/filters/components/FilterObject.vue

@@ -0,0 +1,93 @@
+<template>
+    <li>
+        <div class="c-tree__item menus-to-left"
+             @click="toggleExpanded">
+            <span class="c-disclosure-triangle is-enabled flex-elem"
+              :class="{'c-disclosure-triangle--expanded': expanded}"></span>
+            <div class="c-tree__item__label">
+                <div class="t-object-label l-flex-row flex-elem grows">
+                    <div class="t-item-icon flex-elem"
+                         :class="objectCssClass">
+                    </div>
+                    <div class="t-title-label flex-elem grows">{{ filterObject.name }}</div>
+                </div>
+            </div>
+        </div>
+        <ul class="grid-properties" v-if="expanded">
+            <filter-field
+                    v-for="field in filterObject.valuesWithFilters"
+                    :key="field.key"
+                    :filterField="field"
+                    :persistedFilters="persistedFilters[field.key]"
+                    @onUserSelect="collectUserSelects"
+                    @onTextEnter="updateTextFilter">
+            </filter-field>
+        </ul>
+    </li>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script>
+import FilterField from './FilterField.vue';
+
+export default {
+    inject: ['openmct'],
+    components: {
+        FilterField
+    },
+    props: {
+        filterObject: Object, 
+        persistedFilters: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            expanded: false,
+            objectCssClass: undefined,
+            updatedFilters: this.persistedFilters
+        }
+    },
+    methods: {
+        toggleExpanded() {
+            this.expanded = !this.expanded;
+        },
+        collectUserSelects(key, comparator, valueName, value) {
+            let filterValue = this.updatedFilters[key];
+
+            if (filterValue && filterValue[comparator]) {
+                if (value === false) {
+                    filterValue[comparator] = filterValue[comparator].filter(v => v !== valueName);
+                } else {
+                    filterValue[comparator].push(valueName);
+                }
+            } else {
+                if (!this.updatedFilters[key]) {
+                    this.updatedFilters[key] = {};
+                }
+                this.updatedFilters[key][comparator] = [value ? valueName : undefined];
+            }
+
+            this.$emit('updateFilters', this.keyString, this.updatedFilters);
+        },
+        updateTextFilter(key, comparator, value) {
+            if (!this.updatedFilters[key]) {
+                this.updatedFilters[key] = {};
+            }
+            this.updatedFilters[key][comparator] = value;
+            this.$emit('updateFilters', this.keyString, this.updatedFilters);
+        }
+    },
+    mounted() {
+        let type = this.openmct.types.get(this.filterObject.domainObject.type) || {};
+        this.keyString = this.openmct.objects.makeKeyString(this.filterObject.domainObject.identifier);
+        this.objectCssClass = type.definition.cssClass;
+    }
+}
+</script>

src/plugins/filters/components/FiltersView.vue

@@ -0,0 +1,85 @@
+<template>
+    <ul class="tree c-tree c-properties__section" v-if="Object.keys(children).length">
+        <h2 class="c-properties__header">Filters</h2>
+        <filter-object 
+            v-for="(child, key) in children"
+            :key="key"
+            :filterObject="child"
+            :persistedFilters="persistedFilters[key]"
+            @updateFilters="persistFilters">
+        </filter-object>
+    </ul>
+</template>
+
+<style lang="scss">
+
+</style>
+
+<script>
+import FilterObject from './FilterObject.vue';
+
+export default {
+    components: {
+        FilterObject
+    },
+    inject: [
+        'openmct',
+        'providedObject'
+    ],
+    data() {
+        let persistedFilters = {};
+
+        if (this.providedObject.configuration && this.providedObject.configuration.filters) {
+            persistedFilters = this.providedObject.configuration.filters;
+        }
+
+        return {
+            persistedFilters,
+            children: {}
+        }
+    },
+    methods: {
+        addChildren(child) {
+            let keyString = this.openmct.objects.makeKeyString(child.identifier),
+                metadata = this.openmct.telemetry.getMetadata(child),
+                valuesWithFilters = metadata.valueMetadatas.filter((value) => value.filters),
+                childObject = {
+                    name: child.name,
+                    domainObject: child,
+                    valuesWithFilters
+                };
+
+            if (childObject.valuesWithFilters.length) {
+                this.$set(this.children, keyString, childObject);
+            } else {
+                return;
+            }
+        },
+        removeChildren(identifier) {
+            let keyString = this.openmct.objects.makeKeyString(identifier);
+            this.$delete(this.children, keyString);
+            this.persistFilters(keyString);
+        },
+        persistFilters(keyString, userSelects) {
+            this.persistedFilters[keyString] = userSelects;
+            this.openmct.objects.mutate(this.providedObject, 'configuration.filters', this.persistedFilters);
+        },
+        updatePersistedFilters(filters) {
+            this.persistedFilters = filters;
+        }
+    },
+    mounted(){
+        this.composition = this.openmct.composition.get(this.providedObject);
+        this.composition.on('add', this.addChildren);
+        this.composition.on('remove', this.removeChildren);
+        this.composition.load();
+
+        this.unobserve = this.openmct.objects.observe(this.providedObject, 'configuration.filters', this.updatePersistedFilters);
+    },
+    beforeDestroy() {
+        this.composition.off('add', this.addChildren);
+        this.composition.off('remove', this.removeChildren);
+        this.unobserve();
+    }
+}
+</script>

src/plugins/filters/filtersInspectorViewProvider.js

@@ -0,0 +1,73 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define([
+    './components/FiltersView.vue',
+    'vue'
+], function (
+    FiltersView,
+    Vue
+) {
+
+    function FiltersInspectorViewProvider(openmct, supportedObjectTypesArray) {
+        return {
+            key: 'filters-inspector',
+            name: 'Filters Inspector View',
+            canView: function (selection) {
+                if (selection.length === 0) {
+                    return false;
+                }
+                let object = selection[0].context.item;
+
+                return object && supportedObjectTypesArray.some(type => object.type === type);
+            },
+            view: function (selection) {
+                let component;
+                let providedObject = selection[0].context.item;
+
+                return {
+                    show: function (element) {
+                        component = new Vue({
+                            provide: {
+                                openmct,
+                                providedObject
+                            },
+                            components: {
+                                FiltersView: FiltersView.default
+                            },
+                            template: '<filters-view></filters-view>',
+                            el: element
+                        });
+                    },
+                    destroy: function () {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            },
+            priority: function () {
+                return 1;
+            }
+        }
+    }
+    return FiltersInspectorViewProvider;
+});

src/plugins/filters/plugin.js

@@ -20,6 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-@import "vendor/normalize.min.css";
-@import "startup-base";
-@import "openmct";
+define([
+    './filtersInspectorViewProvider'
+], function (
+    FiltersInspectorViewProvider
+) {
+    return function plugin(supportedObjectTypesArray) {
+        return function install(openmct) {
+            openmct.inspectorViews.addProvider(new FiltersInspectorViewProvider(openmct, supportedObjectTypesArray));
+        };
+    };
+});

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -506,9 +506,27 @@ export default {
             this.persist();
         },
         deleteContainer(containerId) {
-            let container = this.containers.filter(c => c.id === containerId)[0];
-            let containerIndex = this.containers.indexOf(container);
+            let container = this.containers.filter(c => c.id === containerId)[0],
+                containerIndex = this.containers.indexOf(container);
+
+            /*
+                remove associated domainObjects from composition
+            */
+            container.frames.forEach(f => {
+                this.composition.remove({identifier: f.domainObjectIdentifier});
+            });
+
             this.containers.splice(containerIndex, 1);
+
+            /*
+                add a container when there are no containers in the FL,
+                to prevent user from not being able to add a frame via
+                drag and drop. 
+            */
+            if (this.containers.length === 0) {
+                this.containers.push(new Container(100));
+            }
+
             sizeToFill(this.containers);
             this.persist();
         },
@@ -548,6 +566,12 @@ export default {
                 .frames
                 .filter((f => f.id === frameId))[0];
             let frameIndex = container.frames.indexOf(frame);
+
+            /*
+                remove associated domainObject from composition
+            */
+            this.composition.remove({identifier: frame.domainObjectIdentifier});
+
             container.frames.splice(frameIndex, 1);
             sizeToFill(container.frames);
             this.persist(containerIndex);
@@ -620,7 +644,7 @@ export default {
             } else {
                 this.containers.splice(toIndex, 0, container);
             }
-            this.persist(index);
+            this.persist();
         },
         removeChildObject(identifier) {
             let removeIdentifier = this.openmct.objects.makeKeyString(identifier);

src/plugins/flexibleLayout/flexibleLayoutViewProvider.js

@@ -57,7 +57,7 @@ define([
                                 layoutObject: domainObject
                             },
                             el: element,
-                            template: '<flexible-layout-component ref="flexibleLayout"></flexible-layout-component>'
+                            template: '<flexible-layout-component ref="flexibleLayout" :isEditing="isEditing"></flexible-layout-component>'
                         });
                     },
                     getSelectionContext: function () {

src/plugins/flexibleLayout/toolbarProvider.js

@@ -204,7 +204,7 @@ function ToolbarProvider(openmct) {
                 addContainer,
                 toggleFrame ? separator: undefined,
                 toggleFrame,
-                deleteFrame || deleteContainer ? separator: undefined,
+                deleteFrame || deleteContainer ? separator : undefined,
                 deleteFrame,
                 deleteContainer
             ];

src/plugins/objectMigration/Migrations.js

@@ -0,0 +1,200 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+define([
+    'uuid'
+], function (
+    uuid
+) {
+    function isTelemetry(domainObject) {
+        if (openmct.telemetry.isTelemetryObject(domainObject)
+            && domainObject.type !== 'summary-widget'
+            && domainObject.type !== 'example.imagery') {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    function migrateDisplayLayout(domainObject, childObjects) {
+        const DEFAULT_GRID_SIZE = [32, 32];
+        let migratedObject = Object.assign({}, domainObject);
+        let panels = migratedObject.configuration.layout.panels;
+        let items = [];
+
+        Object.keys(panels).forEach(key => {
+            let panel = panels[key];
+            let domainObject = childObjects[key];
+
+            if (isTelemetry(domainObject)) {
+                items.push({
+                    width: panel.dimensions[0],
+                    height: panel.dimensions[1],
+                    x: panel.position[0],
+                    y: panel.position[1],
+                    useGrid: true,
+                    identifier: domainObject.identifier,
+                    id: uuid(),
+                    type: 'telemetry-view',
+                    displayMode: 'all',
+                    value: openmct.telemetry.getMetadata(domainObject).getDefaultDisplayValue(),
+                    stroke: "transparent",
+                    fill: "",
+                    color: "",
+                    size: "13px"
+                });
+            } else {
+                items.push({
+                    width: panel.dimensions[0],
+                    height: panel.dimensions[1],
+                    x: panel.position[0],
+                    y: panel.position[1],
+                    useGrid: true,
+                    identifier: domainObject.identifier,
+                    id: uuid(),
+                    type: 'subobject-view',
+                    hasFrame: panel.hasFrame
+                });
+            }
+        });
+
+        migratedObject.configuration.items = items;
+        migratedObject.configuration.layoutGrid = migratedObject.layoutGrid || DEFAULT_GRID_SIZE;
+        delete migratedObject.layoutGrid;
+        delete migratedObject.configuration.layout;
+        return migratedObject;
+    }
+
+    function migrateFixedPositionConfiguration(elements, telemetryObjects) {
+        const DEFAULT_STROKE = "transparent";
+        const DEFAULT_SIZE = "13px";
+        const DEFAULT_COLOR = "";
+        const DEFAULT_FILL = "";
+        let items = [];
+
+        elements.forEach(element => {
+            let item = {
+                x: element.x,
+                y: element.y,
+                width: element.width,
+                height: element.height,
+                useGrid: element.useGrid,
+                id: uuid()
+            };
+
+            if (element.type === "fixed.telemetry") {
+                item.type = "telemetry-view";
+                item.stroke = element.stroke || DEFAULT_STROKE;
+                item.fill = element.fill || DEFAULT_FILL;
+                item.color = element.color || DEFAULT_COLOR;
+                item.size = element.size || DEFAULT_SIZE;
+                item.identifier = telemetryObjects[element.id].identifier;
+                item.displayMode = element.titled ? 'all' : 'value';
+                item.value = openmct.telemetry.getMetadata(telemetryObjects[element.id]).getDefaultDisplayValue();
+            } else if (element.type === 'fixed.box') {
+                item.type = "box-view";
+                item.stroke = element.stroke || DEFAULT_STROKE;
+                item.fill = element.fill || DEFAULT_FILL;
+            } else if (element.type === 'fixed.line') {
+                item.type = "line-view";
+                item.x2 = element.x2;
+                item.y2 = element.y2;
+                item.stroke = element.stroke || DEFAULT_STROKE;
+                delete item.height;
+                delete item.width;
+            } else if (element.type === 'fixed.text') {
+                item.type = "text-view";
+                item.text = element.text;
+                item.stroke = element.stroke || DEFAULT_STROKE;
+                item.fill = element.fill || DEFAULT_FILL;
+                item.color = element.color || DEFAULT_COLOR;
+                item.size = element.size || DEFAULT_SIZE;
+            } else if (element.type === 'fixed.image') {
+                item.type = "image-view";
+                item.url =element.url;
+                item.stroke = element.stroke || DEFAULT_STROKE;
+            }
+
+            items.push(item);
+        });
+
+        return items;
+    }
+
+    return [
+        {
+            check(domainObject) {
+                return domainObject.type === 'layout' && domainObject.configuration.layout;
+            },
+            migrate(domainObject) {
+                let childObjects = {};
+                let promises = Object.keys(domainObject.configuration.layout.panels).map(key => {
+                    return openmct.objects.get(key)
+                        .then(object => {
+                            childObjects[key] = object;
+                        });
+                });
+
+                return Promise.all(promises)
+                    .then(function () {
+                        return migrateDisplayLayout(domainObject, childObjects);
+                    });
+            },
+        },
+        {
+            check(domainObject) {
+                return domainObject.type === 'telemetry.fixed' && domainObject.configuration['fixed-display'];
+            },
+            migrate(domainObject) {
+                const DEFAULT_GRID_SIZE = [64, 16];
+                let newLayoutObject = {
+                    identifier: domainObject.identifier,
+                    location: domainObject.location,
+                    name: domainObject.name,
+                    type: "layout"
+                };
+                let layoutType = openmct.types.get('layout');
+                layoutType.definition.initialize(newLayoutObject);
+                newLayoutObject.composition = domainObject.composition;
+                newLayoutObject.configuration.layoutGrid = domainObject.layoutGrid || DEFAULT_GRID_SIZE;
+
+                let elements = domainObject.configuration['fixed-display'].elements;
+                let telemetryObjects = {};
+                let promises = elements.map(element => {
+                    if (element.id) {
+                        return openmct.objects.get(element.id)
+                            .then(object => {
+                                telemetryObjects[element.id] = object;
+                            });
+                    }
+                });
+
+                return Promise.all(promises)
+                    .then(function () {
+                        newLayoutObject.configuration.items =
+                            migrateFixedPositionConfiguration(elements, telemetryObjects);
+                        return newLayoutObject;
+                    });
+            }
+        }
+    ];
+});

src/plugins/objectMigration/plugin.js

@@ -19,40 +19,33 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@mixin labelValidate($sym, $c) {
-    > .label {
-        @include glyphAfter($sym);
-        &:after {
-            color: $c;
-            margin-left: $interiorMargin;
-        }
+
+import migrations from './Migrations.js'
+
+export default function () {
+    function needsMigration(domainObject) {        
+        return migrations.some(m => m.check(domainObject));
     }
-}
 
-
-mct-form.validates {
-    .form-row.validates {
-        > .label {
-            padding-right: $reqSymbolM; // Keep room for validation element
-            &:after {
-                font-size: $reqSymbolFontSize;
-            }
-        }
-        &.invalid,
-        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
-
-        &.valid,
-        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
-
-        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
+    function migrateObject(domainObject) {
+        return migrations.filter(m => m.check(domainObject))[0]
+            .migrate(domainObject);
     }
-}
 
-body.desktop .form-row.validates > .label {
-    &:after {
-        position: absolute;
-        right: $interiorMargin;
-        height: 100%;
-        line-height: 200%;
-    }
-}
+    return function (openmct) {
+        let wrappedFunction = openmct.objects.get;
+        openmct.objects.get = function migrate(identifier) {
+            return wrappedFunction.apply(openmct.objects, [identifier])
+                .then(function (object) {
+                    if (needsMigration(object)) {
+                        migrateObject(object)
+                            .then(newObject => {
+                                openmct.objects.mutate(newObject, 'persisted', Date.now());
+                                return newObject;
+                            });
+                    }
+                    return object;
+                });
+        }        
+    };
+ }

src/plugins/plot/plugin.js

@@ -250,7 +250,8 @@ define([
                                 {"has": "telemetry"}
                             ],
                             "model": {
-                                "composition": []
+                                "composition": [],
+                                "configuration": {}
                             },
                             "properties": [],
                             "priority": 890

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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
+    <ul class="c-tree">
         <h2 title="Plot series display properties in this object">Plot Series</h2>
         <li ng-repeat="series in config.series.models">
             <div class="c-tree__item menus-to-left">

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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
+    <ul class="c-tree">
         <h2 title="Display properties for this object">Plot Series</h2>
         <li ng-repeat="series in plotSeries"
             ng-controller="PlotSeriesFormController"
@@ -87,13 +87,15 @@
                                   ng-style="{ background: series.get('color').asHexString() }">
                             </span>
                         </div>
-                        <div class="c-palette--inline c-palette__items" ng-show="toggle.isActive()">
-                            <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
-                                <div class="c-palette__item"
-                                     ng-repeat="color in group"
-                                     ng-class="{ 'selected': series.get('color').equalTo(color) }"
-                                     ng-style="{ background: color.asHexString() }"
-                                     ng-click="setColor(color)">
+                        <div class="c-palette c-palette--color">
+                            <div class="c-palette__items" ng-show="toggle.isActive()">
+                                <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
+                                    <div class="c-palette__item"
+                                         ng-repeat="color in group"
+                                         ng-class="{ 'selected': series.get('color').equalTo(color) }"
+                                         ng-style="{ background: color.asHexString() }"
+                                         ng-click="setColor(color)">
+                                    </div>
                                 </div>
                             </div>
                         </div>

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

@@ -26,16 +26,16 @@
     }"
     >
     <div class="l-control-bar" ng-show="!controller.hideExportButtons">
-         <span class="l-btn-set">
-            <a class="s-button t-export labeled icon-download"
+         <span class="c-button-set c-button-set--strip">
+            <a class="c-button icon-download"
                ng-click="controller.exportPNG()"
                title="Export This View's Data as PNG">
-                PNG
+                 <span class="c-button__label">PNG</span>
             </a>
-            <a class="s-button t-export labeled"
+            <a class="c-button"
                ng-click="controller.exportJPG()"
                title="Export This View's Data as JPG">
-                JPG
+                 <span class="c-button__label">JPG</span>
             </a>
         </span>
     </div>

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

@@ -26,16 +26,16 @@
       }">
 
     <div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
-       <span class="l-btn-set">
-          <a class="s-button t-export labeled icon-download"
+       <span class="c-button-set c-button-set--strip">
+          <a class="c-button icon-download"
              ng-click="stackedPlot.exportPNG()"
              title="Export This View's Data as PNG">
-              PNG
+              <span class="c-button__label">PNG</span>
           </a>
-          <a class="s-button t-export labeled"
+          <a class="c-button"
              ng-click="stackedPlot.exportJPG()"
              title="Export This View's Data as JPG">
-              JPG
+              <span class="c-button__label">JPG</span>
           </a>
       </span>
     </div>

src/plugins/plot/src/configuration/PlotConfigurationModel.js

@@ -101,6 +101,19 @@ define([
                     seriesConfig.identifier.namespace === identifier.namespace;
             })[0];
         },
+        /**
+         * Retrieve the persisted filters for a given identifier.
+         */
+        getPersistedFilters: function (identifier) {
+            var domainObject = this.get('domainObject'),
+                keystring = this.openmct.objects.makeKeyString(identifier);
+
+            if (!domainObject.configuration || !domainObject.configuration.filters) {
+                return;
+            }
+
+            return domainObject.configuration.filters[keystring];
+        },
         /**
          * Update the domain object with the given value.
          */

src/plugins/plot/src/configuration/PlotSeries.js

@@ -84,6 +84,7 @@ define([
             this.listenTo(this, 'change:xKey', this.onXKeyChange, this);
             this.listenTo(this, 'change:yKey', this.onYKeyChange, this);
             this.persistedConfig = options.persistedConfig;
+            this.filters = options.filters;
 
             Model.apply(this, arguments);
             this.onXKeyChange(this.get('xKey'));
@@ -139,13 +140,16 @@ define([
          * @returns {Promise}
          */
         fetch: function (options) {
-            options = _.extend({}, {size: 1000, strategy: 'minmax'}, options || {});
+            options = _.extend({}, {size: 1000, strategy: 'minmax', filters: this.filters}, options || {});
             if (!this.unsubscribe) {
                 this.unsubscribe = this.openmct
                     .telemetry
                     .subscribe(
                         this.domainObject,
-                        this.add.bind(this)
+                        this.add.bind(this),
+                        {
+                            filters: this.filters
+                        }
                     );
             }
 
@@ -360,6 +364,19 @@ define([
                 }
             }
 
+        },
+        /**
+         * Updates filters, clears the plot series, unsubscribes and resubscribes
+         * @public
+         */
+        updateFiltersAndRefresh: function (updatedFilters) {
+            this.filters = updatedFilters;
+            this.reset();
+            if (this.unsubscribe) {
+                this.unsubscribe();
+                delete this.unsubscribe;
+            }
+            this.fetch();
         }
     });
 

src/plugins/plot/src/configuration/SeriesCollection.js

@@ -66,6 +66,7 @@ define([
         },
         addTelemetryObject: function (domainObject, index) {
             var seriesConfig = this.plot.getPersistedSeriesConfig(domainObject.identifier);
+            var filters = this.plot.getPersistedFilters(domainObject.identifier);
             var plotObject = this.plot.get('domainObject');
 
             if (!seriesConfig) {
@@ -92,7 +93,8 @@ define([
                 collection: this,
                 openmct: this.openmct,
                 persistedConfig: this.plot
-                    .getPersistedSeriesConfig(domainObject.identifier)
+                    .getPersistedSeriesConfig(domainObject.identifier),
+                filters: filters
             }));
         },
         removeTelemetryObject: function (identifier) {

src/plugins/plot/src/services/ExportImageService.js

@@ -30,7 +30,7 @@ define(
     ],
     function (
         html2canvas,
-        saveAs
+        { saveAs }
     ) {
 
         /**

src/plugins/plot/src/telemetry/PlotController.js

@@ -71,6 +71,14 @@ define([
         this.config.series.forEach(this.addSeries, this);
 
         this.followTimeConductor();
+
+        this.newStyleDomainObject = $scope.domainObject.useCapability('adapter');
+
+        this.filterObserver = this.openmct.objects.observe(
+            this.newStyleDomainObject,
+            'configuration.filters',
+            this.updateFiltersAndResubscribe.bind(this)
+        );
     }
 
     eventHelpers.extend(PlotController.prototype);
@@ -154,6 +162,9 @@ define([
             clearInterval(this.checkForSize);
             delete this.checkForSize;
         }
+        if (this.filterObserver) {
+            this.filterObserver();
+        }
     };
 
     PlotController.prototype.loadMoreData = function (range, purge) {
@@ -244,6 +255,12 @@ define([
                           xRange.max === xDisplayRange.max);
     };
 
+    PlotController.prototype.updateFiltersAndResubscribe = function (updatedFilters) {
+        this.config.series.forEach(function (series) {
+            series.updateFiltersAndRefresh(updatedFilters[series.keyString]);
+        })
+    }
+
     /**
      * Export view as JPG.
      */

src/plugins/plugins.js

@@ -39,7 +39,9 @@ define([
     './folderView/plugin',
     './flexibleLayout/plugin',
     './tabs/plugin',
-    './LADTable/plugin'
+    './LADTable/plugin',
+    './filters/plugin',
+    './objectMigration/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -59,7 +61,9 @@ define([
     FolderView,
     FlexibleLayout,
     Tabs,
-    LADTable
+    LADTable,
+    Filters,
+    ObjectMigration
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -74,26 +78,6 @@ define([
         };
     });
 
-    plugins.Snow = function () {
-        return function install(openmct) {
-            openmct.legacyExtension('constants', {
-                key: "THEME",
-                value: "snow"
-            });
-            import('snow' /* webpackChunkName: "theme-snow" */);
-        };
-    };
-
-    plugins.Espresso = function () {
-        return function install(openmct) {
-            openmct.legacyExtension('constants', {
-                key: "THEME",
-                value: "espresso"
-            });
-            import('espresso' /* webpackChunkName: "theme-espresso" */);
-        };
-    };
-
     plugins.UTCTimeSystem = UTCTimeSystem;
 
     plugins.ImportExport = ImportExport;
@@ -174,6 +158,8 @@ define([
     plugins.Tabs = Tabs;
     plugins.FlexibleLayout = FlexibleLayout;
     plugins.LADTable = LADTable;
+    plugins.Filters = Filters;
+    plugins.ObjectMigration = ObjectMigration.default;
 
     return plugins;
 });

src/plugins/remove/RemoveAction.js

@@ -0,0 +1,101 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, 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.
+ *****************************************************************************/
+
+export default class RemoveAction {
+    constructor(openmct) {
+        this.name = 'Remove';
+        this.description = 'Remove this object from its containing object.';
+        this.cssClass = "icon-trash";
+
+        this.openmct = openmct;
+    }
+
+    invoke(objectPath) {
+        let object = objectPath[0];
+        let parent = objectPath[1];
+        this.showConfirmDialog(object).then(() => {
+            this.removeFromComposition(parent, object);
+            if (this.inNavigationPath(object)) {
+                this.navigateTo(objectPath.slice(1));
+            }
+        }).catch(() =>{});
+    }
+
+    showConfirmDialog(object) {
+        return new Promise((resolve, reject) => {
+            let dialog = this.openmct.overlays.dialog({
+                title: `Remove ${object.name}`,
+                iconClass: 'alert',
+                message: 'Warning! This action will remove this object. Are you sure you want to continue?',
+                buttons: [
+                    {
+                        label: 'OK',
+                        callback: () => {
+                            dialog.dismiss();
+                            resolve();
+                        }
+                    },
+                    {
+                        label: 'Cancel',
+                        callback: () => {
+                            dialog.dismiss();
+                            reject();
+                        }
+                    }
+                ]
+            })
+        })
+    }
+
+    inNavigationPath(object) {
+        return this.openmct.router.path
+            .some(objectInPath => this.openmct.objects.areIdsEqual(objectInPath.identifier, object.identifier));
+    }
+
+    navigateTo(objectPath) {
+        let urlPath = objectPath.reverse()
+            .map(object => this.openmct.objects.makeKeyString(object.identifier))
+            .join("/");
+
+        window.location.href = '#/browse/' + urlPath;
+    }
+
+    removeFromComposition(parent, child) {
+        let composition = parent.composition.filter(id =>
+            !this.openmct.objects.areIdsEqual(id, child.identifier)
+        );
+
+        this.openmct.objects.mutate(parent, 'composition', composition);
+    }
+
+    appliesTo(objectPath) {
+        let object = objectPath[0];
+        let objectType = object && this.openmct.types.get(object.type);
+        let parent = objectPath[1];
+        let parentType = parent && this.openmct.types.get(parent.type);
+
+        return objectType.definition.creatable &&
+            parentType &&
+            parentType.definition.creatable &&
+            Array.isArray(parent.composition);
+    }
+}

src/plugins/remove/plugin.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2019, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -19,13 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* Styles for the iframe EmbeddedPageController element */
+import RemoveAction from "./RemoveAction";
 
-.l-iframe {
-    iframe {
-        display: block;
-        height: 100%;
-        width: 100%;
-        border: none;
+export default function () {
+    return function (openmct) {
+        openmct.contextMenu.registerAction(new RemoveAction(openmct));
     }
 }

src/plugins/summaryWidget/res/input/paletteTemplate.html

@@ -1,4 +1,4 @@
-<a class="e-control s-button s-menu-button menu-element">
+<!--a class="e-control s-button s-menu-button menu-element">
    <span class="l-click-area"></span>
    <span class="t-swatch"></span>
    <div class="menu l-palette">
@@ -7,4 +7,15 @@
            <span class="l-palette-item-label">None</span>
        </div>
    </div>
-</a>
+</a-->
+<div class="c-ctrl-wrapper">
+    <button class="c-button--menu c-button--swatched js-button">
+        <div class="c-swatch t-swatch"></div>
+    </button>
+    <div class="c-menu c-palette">
+        <div class="c-palette__item-none">
+            <div class="c-palette__item"></div>
+        </div>
+        <div class="c-palette__items"></div>
+    </div>
+</div>

src/plugins/summaryWidget/res/input/selectTemplate.html

@@ -1,4 +1,4 @@
-<div class="e-control select">
+<span>
     <select>
     </select>
- </div>
+ </span>

src/plugins/summaryWidget/res/ruleTemplate.html

@@ -1,21 +1,20 @@
-<div>
-    <div class="l-compact-form has-local-controls l-widget-rule s-widget-rule">
-        <div class="widget-rule-header">
-            <span class="flex-elem l-widget-thumb-wrapper">
-                <span class="grippy-holder">
-                    <span class="t-grippy grippy local-control local-controls-hidden"></span>
-                </span>
-                <span class="view-control expanded"></span>
-                <span class="t-widget-thumb widget-thumb">
-                    <span class="widget-label">DEF</span>
-                </span>
-            </span>
-            <span class="flex-elem rule-title">Default Title</span>
-            <span class="flex-elem rule-description grows">Rule description goes here</span>
-            <span class="flex-elem local-control local-controls-hidden l-rule-action-buttons-wrapper">
+<div class="c-sw-rule">
+    <div class="c-sw-rule__ui l-compact-form has-local-controls l-widget-rule s-widget-rule">
+        <div class="c-sw-rule__ui__header widget-rule-header">
+            <div class="c-sw-rule__grippy-wrapper">
+                <div class="c-sw-rule__grippy t-grippy local-control local-controls-hidden"></div>
+            </div>
+            <div class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled js-disclosure"></div>
+            <div class="t-widget-thumb widget-thumb c-sw c-sw--thumb">
+                <div class="c-sw__icon js-sw__icon"></div>
+                <div class="c-sw__label js-sw__label"></div>
+            </div>
+            <div class="flex-elem rule-title">Default Title</div>
+            <div class="flex-elem rule-description grows">Rule description goes here</div>
+            <div class="flex-elem local-control local-controls-hidden l-rule-action-buttons-wrapper">
                 <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
                 <a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
-            </span>
+            </div>
         </div>
         <div class="widget-rule-content expanded">
             <ul>
@@ -28,7 +27,7 @@
                 <li class="connects-to-previous">
                     <label>Label:</label>
                     <span class="controls t-label-input">
-                        <input class="e-control t-rule-label-input" type="text" />
+                        <input class="t-rule-label-input" type="text" />
                     </span>
                 </li>
                 <li class="connects-to-previous">
@@ -40,26 +39,25 @@
                 </li>
                 <li class="connects-to-previous">
                     <label>Style:</label>
-                    <span class="controls t-style-input">
-                    </span>
+                    <span class="controls t-style-input"></span>
                 </li>
             </ul>
             <ul class="t-widget-rule-config">
                 <li>
                     <label>Trigger when</label>
                     <span class="controls">
-                        <div class="e-control select">
-                            <select class="t-trigger">
-                                <option value="any">any condition is met</option>
-                                <option value="all">all conditions are met</option>
-                            </select>
-                         </div>
+                        <select class="t-trigger">
+                            <option value="any">any condition is met</option>
+                            <option value="all">all conditions are met</option>
+                        </select>
                     </span>
                 </li>
                 <li>
                     <label></label>
                     <span class="controls">
-                        <a class="e-control s-button labeled add-condition icon-plus">Add Condition</a>
+                        <button class="c-button add-condition icon-plus">
+                            <span class="c-button__label">Add Condition</span>
+                        </button>
                     </span>
                 </li>
             </ul>

src/plugins/summaryWidget/res/testDataTemplate.html

@@ -8,7 +8,9 @@
         </div>
         <div class="t-test-data-config w-widget-test-data-items">
             <div class="holder add-rule-button-wrapper align-right">
-                <a id="addRule" class="e-control s-button major labeled add-test-condition icon-plus">Add Test Value</a>
+                <button id="addRule" class="c-button c-button--major add-test-condition icon-plus">
+                    <span class="c-button__label">Add Test Value</span>
+                </button>
             </div>
         </div>
     </div>

src/plugins/summaryWidget/res/widgetTemplate.html

@@ -1,22 +1,31 @@
-<div class="w-summary-widget s-status-no-data">
-    <a id="widget" class="t-summary-widget l-summary-widget s-summary-widget labeled">
-        <span id="widgetLabel" class="label widget-label">Default Static Name</span>
+<div class="c-sw-edit w-summary-widget s-status-no-data">
+    <a id="widget" class="t-summary-widget l-summary-widget s-summary-widget labeled c-sw">
+        <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
+        <div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">Default Static Name</div>
     </a>
-    <div class="holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
+    <div class="c-summary-widget__message holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
         <div class="w-message-contents l-message-body-only">
             <div class="message-body">
                 You must add at least one telemetry object to edit this widget.
             </div>
         </div>
     </div>
-    <div class="holder l-flex-col l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">
-        <div class="section-header"><span class="view-control t-view-control-test-data expanded"></span>Test Data Values</div>
-        <div class="widget-test-data flex-accordion-holder"></div>
-        <div class="section-header"><span class="view-control t-view-control-rules expanded"></span>Rules</div>
-        <div class="holder widget-rules-wrapper flex-elem expanded">
-            <div id="ruleArea" class="widget-rules"></div>
+    <div class="c-sw-edit__ui holder l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">
+        <div class="c-sw-edit__ui__header">
+            <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-test-data"></span>
+            <span class="c-sw-edit__ui__header-label">Test Data Values</span>
+        </div>
+        <div class="c-sw-edit__ui__test-data widget-test-data flex-accordion-holder"></div>
+        <div class="c-sw-edit__ui__header">
+            <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-rules"></span>
+            <span class="c-sw-edit__ui__header-label">Rules</span>
+        </div>
+        <div class="c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded">
+            <div id="ruleArea" class="c-sw-editui__rules widget-rules"></div>
             <div class="holder add-rule-button-wrapper align-right">
-                <a id="addRule" class="s-button major labeled add-rule-button icon-plus">Add Rule</a>
+                <button id="addRule" class="c-button c-button--major add-rule-button icon-plus">
+                    <span class="c-button__label">Add Rule</span>
+                </button>
             </div>
         </div>
     </div>

src/plugins/summaryWidget/src/Rule.js

@@ -32,6 +32,7 @@ define([
     function Rule(ruleConfig, domainObject, openmct, conditionManager, widgetDnD, container) {
         eventHelpers.extend(this);
         var self = this;
+        const THUMB_ICON_CLASS = 'c-sw__icon js-sw__icon';
 
         this.config = ruleConfig;
         this.domainObject = domainObject;
@@ -50,11 +51,12 @@ define([
         this.duplicate = this.duplicate.bind(this);
 
         this.thumbnail = $('.t-widget-thumb', this.domElement);
-        this.thumbnailLabel = $('.widget-label', this.domElement);
+        this.thumbnailIcon = $('.js-sw__icon', this.domElement);
+        this.thumbnailLabel = $('.c-sw__label', this.domElement);
         this.title = $('.rule-title', this.domElement);
         this.description = $('.rule-description', this.domElement);
         this.trigger = $('.t-trigger', this.domElement);
-        this.toggleConfigButton = $('.view-control', this.domElement);
+        this.toggleConfigButton = $('.js-disclosure', this.domElement);
         this.configArea = $('.widget-rule-content', this.domElement);
         this.grippy = $('.t-grippy', this.domElement);
         this.conditionArea = $('.t-widget-rule-config', this.domElement);
@@ -79,7 +81,7 @@ define([
         this.colorInputs = {
             'background-color': new ColorPalette('icon-paint-bucket', container),
             'border-color': new ColorPalette('icon-line-horz', container),
-            'color': new ColorPalette('icon-T', container)
+            'color': new ColorPalette('icon-font', container)
         };
 
         this.colorInputs.color.toggleNullOption();
@@ -92,7 +94,7 @@ define([
         function onIconInput(icon) {
             self.config.icon = icon;
             self.updateDomainObject('icon', icon);
-            self.thumbnailLabel.removeClass().addClass('label widget-label ' + icon);
+            self.thumbnailIcon.removeClass().addClass(THUMB_ICON_CLASS + ' ' + icon);
             self.eventEmitter.emit('change');
         }
 
@@ -168,7 +170,7 @@ define([
          */
         function toggleConfig() {
             self.configArea.toggleClass('expanded');
-            self.toggleConfigButton.toggleClass('expanded');
+            self.toggleConfigButton.toggleClass('c-disclosure-triangle--expanded');
             self.config.expanded = !self.config.expanded;
         }
 
@@ -179,7 +181,7 @@ define([
         });
 
         // Initialize thumbs when first loading
-        this.thumbnailLabel.removeClass().addClass('label widget-label ' + self.config.icon);
+        this.thumbnailIcon.removeClass().addClass(THUMB_ICON_CLASS + ' ' + self.config.icon);
         this.thumbnailLabel.html(self.config.label);
 
         Object.keys(this.colorInputs).forEach(function (inputKey) {
@@ -227,7 +229,7 @@ define([
 
         if (!this.config.expanded) {
             this.configArea.removeClass('expanded');
-            this.toggleConfigButton.removeClass('expanded');
+            this.toggleConfigButton.removeClass('c-disclosure-triangle--expanded');
         }
 
         if (this.domainObject.configuration.ruleOrder.length === 2) {

src/plugins/summaryWidget/src/SummaryWidget.js

@@ -22,8 +22,8 @@ define([
 
     //default css configuration for new rules
     var DEFAULT_PROPS = {
-        'color': '#ffffff',
-        'background-color': '#38761d',
+        'color': '#cccccc',
+        'background-color': '#666666',
         'border-color': 'rgba(0,0,0,0)'
     };
 
@@ -74,15 +74,12 @@ define([
         this.show = this.show.bind(this);
         this.destroy = this.destroy.bind(this);
         this.addRule = this.addRule.bind(this);
-        this.onEdit = this.onEdit.bind(this);
 
         this.addHyperlink(domainObject.url, domainObject.openNewTab);
         this.watchForChanges(openmct, domainObject);
 
         var id = objectUtils.makeKeyString(this.domainObject.identifier),
-            self = this,
-            oldDomainObject,
-            statusCapability;
+            self = this;
 
         /**
          * Toggles the configuration area for test data in the view
@@ -90,7 +87,7 @@ define([
          */
         function toggleTestData() {
             self.outerWrapper.toggleClass('expanded-widget-test-data');
-            self.toggleTestDataControl.toggleClass('expanded');
+            self.toggleTestDataControl.toggleClass('c-disclosure-triangle--expanded');
         }
         this.listenTo(this.toggleTestDataControl, 'click', toggleTestData);
 
@@ -100,22 +97,12 @@ define([
          */
         function toggleRules() {
             self.outerWrapper.toggleClass('expanded-widget-rules');
-            self.toggleRulesControl.toggleClass('expanded');
+            self.toggleRulesControl.toggleClass('c-disclosure-triangle--expanded');
         }
         this.listenTo(this.toggleRulesControl, 'click', toggleRules);
 
         openmct.$injector.get('objectService')
-            .getObjects([id])
-            .then(function (objs) {
-                oldDomainObject = objs[id];
-                statusCapability = oldDomainObject.getCapability('status');
-                self.editListenerUnsubscribe = statusCapability.listen(self.onEdit);
-                if (statusCapability.get('editing')) {
-                    self.onEdit(['editing']);
-                } else {
-                    self.onEdit([]);
-                }
-            });
+            .getObjects([id]);
     }
 
     /**
@@ -172,7 +159,6 @@ define([
         });
         this.refreshRules();
         this.updateWidget();
-        this.updateView();
 
         this.listenTo(this.addRuleButton, 'click', this.addRule);
         this.conditionManager.on('receiveTelemetry', this.executeRules, this);
@@ -196,37 +182,6 @@ define([
         this.stopListening();
     };
 
-    /**
-     * A callback function for the Open MCT status capability listener. If the
-     * view representing the domain object is in edit mode, update the internal
-     * state and widget view accordingly.
-     * @param {string[]} status an array containing the domain object's current status
-     */
-    SummaryWidget.prototype.onEdit = function (status) {
-        if (status && status.includes('editing')) {
-            this.editing = true;
-        } else {
-            this.editing = false;
-        }
-        this.updateView();
-    };
-
-    /**
-     * If this view is currently in edit mode, show all rule configuration interfaces.
-     * Otherwise, hide them.
-     */
-    SummaryWidget.prototype.updateView = function () {
-        if (this.editing) {
-            this.ruleArea.show();
-            this.testDataArea.show();
-            this.addRuleButton.show();
-        } else {
-            this.ruleArea.hide();
-            this.testDataArea.hide();
-            this.addRuleButton.hide();
-        }
-    };
-
     /**
      * Update the view from the current rule configuration and order
      */
@@ -260,11 +215,14 @@ define([
      * Update the widget's appearance from the configuration of the active rule
      */
     SummaryWidget.prototype.updateWidget = function () {
+        const WIDGET_CLASS = 'c-sw js-sw',
+            WIDGET_LABEL_CLASS = 'c-sw__label js-sw__label',
+            WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
         var activeRule = this.rulesById[this.activeId];
         this.applyStyle($('#widget', this.domElement), activeRule.getProperty('style'));
         $('#widget', this.domElement).prop('title', activeRule.getProperty('message'));
         $('#widgetLabel', this.domElement).html(activeRule.getProperty('label'));
-        $('#widgetLabel', this.domElement).removeClass().addClass('label widget-label c-summary-widget__label ' + activeRule.getProperty('icon'));
+        $('#widgetIcon', this.domElement).removeClass().addClass(WIDGET_ICON_CLASS + ' ' + activeRule.getProperty('icon'));
     };
 
     /**

src/plugins/summaryWidget/src/input/ColorPalette.js

@@ -36,11 +36,11 @@ function (
         var domElement = $(this.palette.getDOM()),
             self = this;
 
-        $('.s-menu-button', domElement).addClass('t-color-palette-menu-button');
+        $('.c-button--menu', domElement).addClass('c-button--swatched');
         $('.t-swatch', domElement).addClass('color-swatch');
-        $('.l-palette', domElement).addClass('l-color-palette');
+        $('.c-palette', domElement).addClass('c-palette--color');
 
-        $('.s-palette-item', domElement).each(function () {
+        $('.c-palette__item', domElement).each(function () {
             var elem = this;
             $(elem).css('background-color', elem.dataset.item);
         });

src/plugins/summaryWidget/src/input/IconPalette.js

@@ -51,11 +51,11 @@ define([
         var domElement = $(this.palette.getDOM()),
             self = this;
 
-        $('.s-menu-button', domElement).addClass('t-icon-palette-menu-button');
+        $('.c-button--menu', domElement).addClass('c-button--swatched');
         $('.t-swatch', domElement).addClass('icon-swatch');
-        $('.l-palette', domElement).addClass('l-icon-palette');
+        $('.c-palette', domElement).addClass('c-palette--icon');
 
-        $('.s-palette-item', domElement).each(function () {
+        $('.c-palette-item', domElement).each(function () {
             var elem = this;
             $(elem).addClass(elem.dataset.item);
         });

src/plugins/summaryWidget/src/input/Palette.js

@@ -30,33 +30,34 @@ define([
 
         this.domElement = $(paletteTemplate);
         this.itemElements = {
-            nullOption: $('.l-option-row .s-palette-item', this.domElement)
+            nullOption: $('.c-palette__item-none .c-palette__item', this.domElement)
         };
         this.eventEmitter = new EventEmitter();
         this.supportedCallbacks = ['change'];
         this.value = this.items[0];
         this.nullOption = ' ';
+        this.button = $('.js-button', this.domElement);
+        this.menu = $('.c-menu', this.domElement);
 
         this.hideMenu = this.hideMenu.bind(this);
 
-        self.domElement.addClass(this.cssClass);
+        self.button.addClass(this.cssClass);
         self.setNullOption(this.nullOption);
 
-        $('.l-palette-row', self.domElement).after('<div class = "l-palette-row"> </div>');
         self.items.forEach(function (item) {
-            var itemElement = $('<div class = "l-palette-item s-palette-item"' +
-                                ' data-item = ' + item + '> </div>');
-            $('.l-palette-row:last-of-type', self.domElement).append(itemElement);
+            var itemElement = $('<div class = "c-palette__item ' + item + '"' +
+                                ' data-item = ' + item + '></div>');
+            $('.c-palette__items', self.domElement).append(itemElement);
             self.itemElements[item] = itemElement;
         });
 
-        $('.menu', self.domElement).hide();
+        $('.c-menu', self.domElement).hide();
 
         this.listenTo($(document), 'click', this.hideMenu);
-        this.listenTo($('.l-click-area', self.domElement), 'click', function (event) {
+        this.listenTo($('.js-button', self.domElement), 'click', function (event) {
             event.stopPropagation();
-            $('.menu', self.container).hide();
-            $('.menu', self.domElement).show();
+            $('.c-menu', self.container).hide();
+            $('.c-menu', self.domElement).show();
         });
 
         /**
@@ -69,10 +70,10 @@ define([
             var elem = event.currentTarget,
                 item = elem.dataset.item;
             self.set(item);
-            $('.menu', self.domElement).hide();
+            $('.c-menu', self.domElement).hide();
         }
 
-        this.listenTo($('.s-palette-item', self.domElement), 'click', handleItemClick);
+        this.listenTo($('.c-palette__item', self.domElement), 'click', handleItemClick);
     }
 
     /**
@@ -90,7 +91,7 @@ define([
     };
 
     Palette.prototype.hideMenu = function () {
-        $('.menu', this.domElement).hide();
+        $('.c-menu', this.domElement).hide();
     };
 
     /**
@@ -139,8 +140,8 @@ define([
      * Update the view assoicated with the currently selected item
      */
     Palette.prototype.updateSelected = function (item) {
-        $('.s-palette-item', this.domElement).removeClass('selected');
-        this.itemElements[item].addClass('selected');
+        $('.c-palette__item', this.domElement).removeClass('is-selected');
+        this.itemElements[item].addClass('is-selected');
         if (item === 'nullOption') {
             $('.t-swatch', this.domElement).addClass('no-selection');
         } else {
@@ -162,7 +163,7 @@ define([
      * Hides the 'no selection' option to be hidden in the view if it doesn't apply
      */
     Palette.prototype.toggleNullOption = function () {
-        $('.l-option-row', this.domElement).toggle();
+        $('.c-palette__item-none', this.domElement).toggle();
     };
 
     return Palette;

src/plugins/summaryWidget/src/views/SummaryWidgetView.js

@@ -3,6 +3,8 @@ define([
 ], function (
     summaryWidgetTemplate
 ) {
+    const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
+
     function SummaryWidgetView(domainObject, openmct) {
         this.openmct = openmct;
         this.domainObject = domainObject;
@@ -18,7 +20,7 @@ define([
         this.widget.title = datum.message;
         this.label.title = datum.message;
         this.label.innerHTML = datum.ruleLabel;
-        this.label.className = 'label widget-label c-summary-widget__label ' + datum.icon;
+        this.icon.className = WIDGET_ICON_CLASS + ' ' + datum.icon;
     };
 
     SummaryWidgetView.prototype.render = function () {
@@ -29,7 +31,8 @@ define([
 
         this.container.innerHTML = summaryWidgetTemplate;
         this.widget = this.container.querySelector('a');
-        this.label = this.container.querySelector('.widget-label');
+        this.icon = this.container.querySelector('#widgetIcon');
+        this.label = this.container.querySelector('.js-sw__label');
 
 
         if (this.domainObject.url) {

src/plugins/summaryWidget/src/views/summary-widget.html

@@ -1,5 +1,4 @@
-<div class="w-summary-widget s-status-no-data c-widget-wrapper u-contents">
-    <a class="t-summary-widget c-button c-summary-widget u-links u-fills-container">
-        <span class="label widget-label c-summary-widget__label">Loading...</span>
-    </a>
-</div>
+<a class="t-summary-widget c-summary-widget js-sw u-links u-fills-container">
+    <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
+    <div id="widgetLabel" class="c-sw__label js-sw__label">Loading...</div>
+</a>

src/plugins/telemetryTable/TableConfigurationViewProvider.js

@@ -46,7 +46,7 @@ define([
             view: function (selection) {
                 let component;
                 let domainObject = selection[0].context.item;
-                const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+                let tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
                 return {
                     show: function (element) {
                         component = new Vue({
@@ -64,6 +64,7 @@ define([
                     destroy: function () {
                         component.$destroy();
                         component = undefined;
+                        tableConfiguration = undefined;
                     }
                 }
             },

src/plugins/telemetryTable/TelemetryTable.js

@@ -53,6 +53,10 @@ define([
             this.isTelemetryObject = this.isTelemetryObject.bind(this);
             this.refreshData = this.refreshData.bind(this);
             this.requestDataFor = this.requestDataFor.bind(this);
+            this.updateFilters = this.updateFilters.bind(this);
+            this.buildOptionsFromConfiguration = this.buildOptionsFromConfiguration.bind(this);
+
+            this.filterObserver = undefined;
 
             this.createTableRowCollections();
             openmct.time.on('bounds', this.refreshData);
@@ -60,6 +64,7 @@ define([
 
         initialize() {
             if (this.domainObject.type === 'table') {
+                this.filterObserver = this.openmct.objects.observe(this.domainObject, 'configuration.filters', this.updateFilters);
                 this.loadComposition();
             } else {
                 this.addTelemetryObject(this.domainObject);
@@ -81,6 +86,7 @@ define([
             this.tableComposition = this.openmct.composition.get(this.domainObject);
             if (this.tableComposition !== undefined) {
                 this.tableComposition.load().then((composition) => {
+
                     composition = composition.filter(this.isTelemetryObject);
 
                     this.configuration.addColumnsForAllObjects(composition);
@@ -101,6 +107,15 @@ define([
             this.emit('object-added', telemetryObject);
         }
 
+        updateFilters() {
+            this.filteredRows.clear();
+            this.boundedRows.clear();
+            Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
+
+            this.telemetryObjects.forEach(this.requestDataFor.bind(this));
+            this.telemetryObjects.forEach(this.subscribeTo.bind(this));
+        }
+
         removeTelemetryObject(objectIdentifier) {
             this.configuration.removeColumnsForObject(objectIdentifier, true);
             let keyString = this.openmct.objects.makeKeyString(objectIdentifier);
@@ -113,8 +128,8 @@ define([
 
         requestDataFor(telemetryObject) {
             this.incrementOutstandingRequests();
-
-            return this.openmct.telemetry.request(telemetryObject)
+            let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
+            return this.openmct.telemetry.request(telemetryObject, requestOptions)
                 .then(telemetryData => {
                     let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
                     let columnMap = this.getColumnMapForObject(keyString);
@@ -165,19 +180,29 @@ define([
         }
 
         subscribeTo(telemetryObject) {
+            let subscribeOptions = this.buildOptionsFromConfiguration(telemetryObject);
             let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
             let columnMap = this.getColumnMapForObject(keyString);
             let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
 
             this.subscriptions[keyString] = this.openmct.telemetry.subscribe(telemetryObject, (datum) => {
                 this.boundedRows.add(new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
-            });
+            }, subscribeOptions);
         }
 
         isTelemetryObject(domainObject) {
             return domainObject.hasOwnProperty('telemetry');
         }
 
+        buildOptionsFromConfiguration(telemetryObject) {
+            let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier),
+                filters = this.domainObject.configuration &&
+                    this.domainObject.configuration.filters &&
+                    this.domainObject.configuration.filters[keyString];
+
+            return {filters} || {};
+        }
+
         unsubscribe(keyString) {
             this.subscriptions[keyString]();
             delete this.subscriptions[keyString];
@@ -188,6 +213,9 @@ define([
             this.filteredRows.destroy();
             Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
             this.openmct.time.off('bounds', this.refreshData);
+            if (this.filterObserver) {
+                this.filterObserver();
+            }
 
             if (this.tableComposition !== undefined) {
                 this.tableComposition.off('add', this.addTelemetryObject);

src/plugins/telemetryTable/TelemetryTableRow.js

@@ -44,7 +44,7 @@ define([], function () {
 
         getRowLimitClass() {
             if (!this.rowLimitClass) {
-                let limitEvaluation = this.limitEvaluator.evaluate(this.datum); 
+                let limitEvaluation = this.limitEvaluator.evaluate(this.datum);
                 this.rowLimitClass = limitEvaluation && limitEvaluation.cssClass;
             }
             return this.rowLimitClass;

src/plugins/telemetryTable/components/table-configuration.vue

@@ -1,19 +1,21 @@
 <template>
-<div class="c-properties" v-if="isEditing">
-    <div class="c-properties__header">Table Column Size</div>
-    <ul class="c-properties__section">
-        <li class="c-properties__row">
-            <div class="c-properties__label" title="Show or Hide Column"><label for="AutoSizeControl">Auto-size</label></div>
-            <div class="c-properties__value"><input type="checkbox" id="AutoSizeControl" :checked="configuration.autosize !== false" @change="toggleAutosize()"></div>            
-        </li>
-    </ul>
-    <div class="c-properties__header">Table Column Visibility</div>
-    <ul class="c-properties__section">
-        <li class="c-properties__row" v-for="(title, key) in headers">
-            <div class="c-properties__label" title="Show or Hide Column"><label :for="key + 'ColumnControl'">{{title}}</label></div>
-            <div class="c-properties__value"><input type="checkbox" :id="key + 'ColumnControl'" :checked="configuration.hiddenColumns[key] !== true" @change="toggleColumn(key)"></div>
-        </li>
-    </ul>
+<div class="c-properties">
+    <template v-if="isEditing">
+        <div class="c-properties__header">Table Column Size</div>
+        <ul class="c-properties__section">
+            <li class="c-properties__row">
+                <div class="c-properties__label" title="Show or Hide Column"><label for="AutoSizeControl">Auto-size</label></div>
+                <div class="c-properties__value"><input type="checkbox" id="AutoSizeControl" :checked="configuration.autosize !== false" @change="toggleAutosize()"></div>            
+            </li>
+        </ul>
+        <div class="c-properties__header">Table Column Visibility</div>
+        <ul class="c-properties__section">
+            <li class="c-properties__row" v-for="(title, key) in headers">
+                <div class="c-properties__label" title="Show or Hide Column"><label :for="key + 'ColumnControl'">{{title}}</label></div>
+                <div class="c-properties__value"><input type="checkbox" :id="key + 'ColumnControl'" :checked="configuration.hiddenColumns[key] !== true" @change="toggleColumn(key)"></div>
+            </li>
+        </ul>
+    </template>
 </div>
 </template>
 

src/plugins/telemetryTable/components/table.vue

@@ -23,10 +23,10 @@
 <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
      :class="{'loading': loading}">
     <div class="c-table__control-bar c-control-bar">
-        <a class="s-button t-export icon-download labeled"
+        <a class="c-button icon-download labeled"
            v-on:click="exportAsCSV()"
            title="Export This View's Data">
-            Export As CSV
+            <span class="c-button__label">Export As CSV</span>
         </a>
     </div>
     <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>

src/plugins/timeConductor/Conductor.vue

@@ -366,8 +366,8 @@ export default {
             }
         },
         setViewFromClock(clock) {
-            this.isFixed = clock === undefined;
             this.clearAllValidation();
+            this.isFixed = clock === undefined;
         },
         setViewFromBounds(bounds) {
             this.formattedBounds.start = this.timeFormatter.format(bounds.start);
@@ -387,10 +387,15 @@ export default {
             }
         },
         clearAllValidation() {
-            [this.$refs.startDate, this.$refs.endDate, this.$refs.startOffset, this.$refs.endOffset].forEach((input) => {
-                input.setCustomValidity('');
-                input.title = '';
-            });
+            if (this.isFixed) {
+                [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
+            } else {
+                [this.$refs.startOffset, this.$refs.endOffset].forEach(this.clearValidationForInput);
+            }
+        },
+        clearValidationForInput(input){
+            input.setCustomValidity('');
+            input.title = '';
         },
         validateAllBounds() {
             return [this.$refs.startDate, this.$refs.endDate].every((input) => {

src/styles-new/_animations.scss

@@ -1,18 +1,18 @@
-@include keyframes(rotation) {
+@keyframes rotation {
     100% { transform: rotate(360deg); }
 }
 
-@include keyframes(rotation-centered) {
+@keyframes rotation-centered {
     0%   { transform: translate(-50%, -50%) rotate(0deg); }
     100% { transform: translate(-50%, -50%) rotate(360deg); }
 }
 
-@include keyframes(clock-hands) {
+@keyframes clock-hands {
     0% { transform: translate(-50%, -50%) rotate(0deg); }
     100% { transform: translate(-50%, -50%) rotate(360deg);  }
 }
 
-@include keyframes(clock-hands-sticky) {
+@keyframes clock-hands-sticky {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

src/styles-new/_constants-espresso.scss

@@ -60,6 +60,8 @@ $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
 $colorBodyBg: #393939;
@@ -180,6 +182,7 @@ $colorDropHintBgHov: $colorDropHint;
 $colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
+$btnStdH: 24px;
 
 // Menus
 $colorMenuBg: pullForward($colorBodyBg, 15%);
@@ -198,7 +201,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -207,7 +210,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.1);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -217,6 +221,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.4) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -227,8 +235,11 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $overlayColorFg: $colorMenuFg;
+$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
+$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);
 
@@ -261,8 +272,11 @@ $colorInfo: #2294a2;
 $colorOk: #33cc33;
 
 // Bubble colors
-$colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleBg: #dddddd;
 $colorInfoBubbleFg: #666;
+$colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: buttonBg($colorBtnBg);
@@ -295,7 +309,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(white, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
@@ -324,6 +338,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterHandleD: 2px;
+$splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorBodyBg, 10%);

src/styles-new/_constants-maelstrom.scss

@@ -64,6 +64,8 @@ $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
 $colorBodyBg: #393939;
@@ -184,6 +186,7 @@ $colorDropHintBgHov: $colorDropHint;
 $colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
+$btnStdH: 24px;
 
 // Menus
 $colorMenuBg: pullForward($colorBodyBg, 15%);
@@ -202,7 +205,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -211,7 +214,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.1);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -221,6 +225,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.4) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -231,8 +239,11 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $overlayColorFg: $colorMenuFg;
+$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
+$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);
 
@@ -265,8 +276,11 @@ $colorInfo: #2294a2;
 $colorOk: #33cc33;
 
 // Bubble colors
-$colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleBg: #dddddd;
 $colorInfoBubbleFg: #666;
+$colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: buttonBg($colorBtnBg);
@@ -299,7 +313,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(white, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
@@ -328,6 +342,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterHandleD: 2px;
+$splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorBodyBg, 10%);

src/styles-new/_constants-snow.scss

@@ -55,11 +55,13 @@ $bodyFont: $heroFont;
     @return lighten($val, $amt);
 }
 
-// Constants
+// General
 $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: none;
+$shdwBtnsOverlay: none;
 
 // Base colors
 $colorBodyBg: #fcfcfc;
@@ -180,6 +182,7 @@ $colorDropHintBgHov: pushBack($colorDropHint, 40%);
 $colorDropHintFg: pushBack($colorDropHint, 0);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
+$btnStdH: 24px;
 
 // Menus
 $colorMenuBg: pushBack($colorBodyBg, 10%);
@@ -198,7 +201,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -207,7 +210,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.05);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.5);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -217,6 +221,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.7) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -227,8 +235,11 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $overlayColorFg: $colorMenuFg;
+$colorOvrBtnBg: pullForward($overlayColorBg, 40%);
+$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);
 
@@ -263,6 +274,8 @@ $colorOk: #33cc33;
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: pushBack($colorBtnBg, 20%);
@@ -295,7 +308,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(black, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 10%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used

src/styles-new/_constants.scss

@@ -59,6 +59,27 @@ $plotLegendH: 20px;
 $plotSwatchD: 8px;
 $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
 $plotMinH: 95px;
+$controlBarH: 25px;
+/*************** Imagery */
+$imageMainControlBarH: 25px;
+$imageThumbsD: 100px;
+$imageThumbsWrapperH: 155px;
+$imageThumbPad: 1px;
+/*************** Bubbles */
+$bubbleArwSize: 10px;
+$bubblePad: $interiorMargin;
+$bubbleMinW: 100px;
+$bubbleMaxW: 300px;
+/*************** Menus */
+$paletteMenuMinW: 128px; // Min-width of palettes when in a dropdown menu
+/*************** Forms */
+$formLabelMinW: 120px;
+$formLabelW: 30%;
+/*************** Wait Spinner */
+$waitSpinnerD: 32px;
+$waitSpinnerTreeD: 20px;
+$waitSpinnerBorderW: 5px;
+$waitSpinnerTreeBorderW: 4px;
 
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used

src/styles-new/_controls.scss

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/********* Buttons */
+/******************************************************** BUTTONS */
 // Optionally can include icon in :before via markup
 button {
     @include htmlInputReset();
@@ -39,6 +39,15 @@ button {
             opacity: 0.5;
         }
     }
+
+    &--swatched {
+        // Used with c-button--menu: a visual button with a larger swatch element adjacent to an icon
+        .c-swatch {
+            $d: 12px;
+            margin-left: $interiorMarginSm;
+            height: $d; width: $d;
+        }
+    }
 }
 
 .c-compact-button {
@@ -236,7 +245,19 @@ select {
     background-position: right .4em top 80%, 0 0;
     border: none;
     border-radius: $controlCr;
-    padding: 1px 20px 1px $interiorMargin;
+    padding: 4px 20px 4px $interiorMargin;
+}
+
+// CHECKBOX LISTS
+// __input followed by __label
+.c-checkbox-list {
+    // Rows
+    &__row + &__row { margin-top: $interiorMarginSm; }
+
+    // input and label in each __row
+    &__row {
+        > * + * { margin-left: $interiorMargin; }
+    }
 }
 
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
@@ -360,33 +381,37 @@ select {
 .c-palette {
     display: flex;
     flex-flow: column nowrap;
+    line-height: normal;
 
     &__items {
-        flex: 1 1 auto;
         display: grid;
-        grid-template-columns: repeat(auto-fill, 12px);
         grid-gap: 1px;
+        grid-template-columns: repeat(auto-fill, 12px);
+        flex: 1 1 auto;
+
+        .c-menu & {
+            min-width: $paletteMenuMinW;
+        }
     }
 
     &__item {
         $d: 12px;
-
         border: 1px solid transparent;
         cursor: pointer;
-        min-width: $d; min-height: $d;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        width: $d;
+        height: $d;
+        text-align: center;
         transition: $transOut;
 
         &:hover {
             transition: $transIn;
-            $o: 0.7;
-            border-color: rgba($paletteItemBorderOuterColorSelected, $o);
-            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, $o) 0 0 0 1px;
         }
 
         &.is-selected {
-            border-color: $paletteItemBorderOuterColorSelected !important;
-            border-width: 2px;
-            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+            border-width: 1px;
         }
     }
 
@@ -402,6 +427,44 @@ select {
             margin-right: $interiorMarginSm;
         }
     }
+
+    &--color {
+        .c-palette__item {
+            &:hover {
+                border-color: rgba($paletteItemBorderOuterColorSelected, 0.7);
+                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 0.7) 0 0 0 1px;
+            }
+
+            &.is-selected {
+                border-color: $paletteItemBorderOuterColorSelected !important;
+                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+            }
+        }
+    }
+
+    &--icon {
+        .c-palette__items {
+            grid-gap: 3px;
+        }
+
+        .c-palette__item {
+            border-radius: $smallCr;
+            font-size: 0.6rem;
+
+            &:before {
+                display: block;
+                width: 100%;
+            }
+
+            &:hover {
+                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.3) 0 0 0 1px;
+            }
+
+            &.is-selected {
+                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.6) 0 0 0 1px;
+            }
+        }
+    }
 }
 
 /******************************************************** SWATCHES */
@@ -431,12 +494,6 @@ select {
 }
 
 .c-toolbar {
-    $p: $interiorMargin;
-    background: $editUIBaseColor;
-    border-radius: $basicCr;
-    height: $p + 24px; // Need to standardize the height
-    padding: $p;
-
     > * + * {
         margin-left: 2px;
     }
@@ -490,10 +547,6 @@ select {
             margin-left: $interiorMargin;
         }
     }
-
-    .c-palette {
-        min-width: 136px;
-    }
 }
 
 /********* Button Sets */
@@ -519,7 +572,7 @@ select {
         // Buttons are smashed together with minimal margin
         // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
         // c-click-icons get grouped more closely together
-        &[class^="c-button"] {
+        [class^="c-button"] {
             // Only apply the following to buttons that have background, eg. c-button
             border-radius: 0;
 
@@ -644,9 +697,7 @@ input[type="range"] {
 }
 
 /***************************************************** LEGACY */
-
 .l-btn-set {
-    // Fixes
     display: flex;
     align-items: center;
 }

src/styles-new/_forms.scss

@@ -19,9 +19,34 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+.c-form {
+    display: flex;
+    flex-direction: column;
+
+    &__section {
+        display: inherit;
+        flex-direction: column;
+    }
+
+    &__row {
+        display: flex;
+    }
+
+    &__header {
+        border-radius: $basicCr;
+        background: $colorFormSectionHeaderBg;
+        color: $colorFormSectionHeaderFg;
+        font-size: inherit;
+        font-weight: normal;
+        margin: $interiorMargin 0;
+        padding: $formTBPad $formLRPad;
+        text-transform: uppercase;
+    }
+}
+
+/***************************************************** LEGACY */
 .section-header {
     border-radius: $basicCr;
-    background: $colorFormSectionHeader;
     color: lighten($colorBodyFg, 20%);
     font-size: inherit;
     margin: $interiorMargin 0;
@@ -36,7 +61,7 @@
 }
 
 .form {
-	color: $colorFormText;
+    color: $colorFormText;
     height: 100%;
     width: 100%;
 
@@ -54,69 +79,69 @@
         }
     }
 
-	.form-row {
-		$m: $interiorMargin;
-		box-sizing: border-box;
-		border-top: 1px solid $colorFormLines;
-		padding: $formTBPad 0;
-		position: relative;
+    .form-row {
+        $m: $interiorMargin;
+        box-sizing: border-box;
+        border-top: 1px solid $colorFormLines;
+        padding: $formTBPad 0;
+        position: relative;
 
-		&.first {
-			border-top: none;
-		}
+        &.first {
+            border-top: none;
+        }
 
-		>.label,
-		>.controls {
-			box-sizing: border-box;
-			font-size: 0.8rem;
-		}
+        >.label,
+        >.controls {
+            box-sizing: border-box;
+            font-size: 0.8rem;
+        }
 
-		>.label {
-			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
-			min-width: 120px;
+        >.label {
+            // Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
+            min-width: 120px;
             order: 1;
             position: relative;
-			white-space: nowrap;
-			width: $formLabelW;
-		}
+            white-space: nowrap;
+            width: $formLabelW;
+        }
 
-		.value {
-			color: $colorInputFg;
-		}
+        .value {
+            color: $colorInputFg;
+        }
 
-		.controls {
+        .controls {
             order: 2;
             position: relative;
             flex: 1 1 auto;
 
-			.l-composite-control {
-				&.l-checkbox {
-					display: inline-block;
-					line-height: $formRowCtrlsH;
-					margin-right: 5px;
-				}
-			}
-			.select {
-				margin-right: $interiorMargin;
-			}
-		}
+            .l-composite-control {
+                &.l-checkbox {
+                    display: inline-block;
+                    line-height: $formRowCtrlsH;
+                    margin-right: 5px;
+                }
+            }
+            .select {
+                margin-right: $interiorMargin;
+            }
+        }
 
-		.hint, .field-hints {  color: $colorFieldHint;  }
+        .hint, .field-hints {  color: $colorFieldHint;  }
 
-		.selector-list {
-			// Used in create overlay to display tree view
-			@include nice-input();
+        .selector-list {
+            // Used in create overlay to display tree view
+            @include nice-input();
             padding: $interiorMargin;
-			position: relative;
+            position: relative;
             min-height: 150px;
-			height: 100%;
-			>.wrapper {
-				$p: $interiorMargin;
+            height: 100%;
+            >.wrapper {
+                $p: $interiorMargin;
                 box-sizing: border-box;
-				overflow: auto;
-			}
-		}
-	}
+                overflow: auto;
+            }
+        }
+    }
 }
 
 .l-controls-first .form .form-row,
@@ -148,36 +173,59 @@
     }
 }
 
-.hint,
-.s-hint {
-	font-size: 0.9em;
-    .req {
-        color: $colorFormRequired;
-        font-size: 0.7rem;
+.l-composite-control {
+    vertical-align: middle;
+    &:not(.l-inline) {
+        margin-bottom: $interiorMargin;
+    }
+    &.l-inline {
+        display: inline-block;
+    }
+    &.l-checkbox {
+        .composite-control-label {
+            line-height: 18px;
+        }
     }
 }
 
-.l-result {
-	// Used in /vista/channel-query.html and evr-query.html as of 2/24/15
-	display: inline-block;
-	min-width: 32px; min-height: 32px;
-	position: relative;
-	vertical-align: top;
-
-	div.s-hint {
-		border-radius: $basicCr;
-		background: rgba($colorFormInvalid, 0.8);
-		display: block;
-		color: lighten($colorFormInvalid, 30%);
-		padding: $interiorMargin;
-	}
+.autocomplete {
+    input {
+        width: 226px;
+        padding: 5px 0px 5px 7px;
+    }
+    .icon-arrow-down {
+        position: absolute;
+        top: 8px;
+        left: 210px;
+        font-size: 10px;
+        cursor: pointer;
+    }
+    .autocompleteOptions {
+        border: 1px solid $colorFormLines;
+        border-radius: 5px;
+        width: 224px;
+        max-height: 170px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        li {
+            border: 1px solid $colorFormLines;
+            padding: 8px 0px 8px 5px;
+            .optionText {
+                cursor: pointer;
+            }
+        }
+        .optionPreSelected {
+            background-color: $colorInspectorSectionHeaderBg;
+            color: $colorInspectorSectionHeaderFg;
+        }
+    }
 }
 
-/**************************************************************************** COMPACT FORM */
+/********* COMPACT FORM */
 // ul > li > label, control
 // Make a new UL for each form section
 // Allow control-first, controls-below
-// TO-DO: migrate work in branch ch-plot-styling that users .inspector-config to use classes below instead
+// 3/8/19: Used by Summary Widgets edit UI
 
 .l-compact-form .tree ul li,
 .l-compact-form ul li {
@@ -186,39 +234,41 @@
 
 
 .l-compact-form {
+    $h: $btnStdH;
     $labelW: 40%;
     $minW: $labelW;
     ul {
-        margin-bottom: $interiorMarginLg;
         li {
             display: flex;
-            flex-wrap: wrap;
-            align-items: center;
+            align-items: stretch;
+            padding: $interiorMargin 0;
+
             label,
             .control {
                 display: flex;
             }
             label {
-                line-height: inherit;
+                line-height: $h;
                 width: $labelW;
             }
             .controls {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: flex-start;
                 flex-grow: 1;
                 margin-left: $interiorMargin;
+                min-height: $h;
+                line-height: $h;
                 input[type="text"],
                 input[type="search"],
                 input[type="number"],
-                .select {
-                    height: $btnStdH;
-                    line-height: $btnStdH;
-                    vertical-align: middle;
+                button,
+                select {
+                    min-height: $h;
                 }
 
-                .e-control {
-                    // Individual form controls
-                    &:not(:first-child) {
-                        margin-left: $interiorMarginSm;
-                    }
+                > * + * {
+                    margin-left: $interiorMarginSm;
                 }
             }
 
@@ -261,6 +311,7 @@
     }
 }
 
+/******** VALIDATION */
 .form-error {
     // Block element that visually flags an error and contains a message
     background-color: $colorFormFieldErrorBg;
@@ -275,3 +326,42 @@
         margin-right: $interiorMarginSm;
     }
 }
+
+
+@mixin labelValidate($sym, $c) {
+    > .label {
+        @include glyphAfter($sym);
+        &:after {
+            color: $c;
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+
+mct-form.validates {
+    .form-row.validates {
+        > .label {
+            padding-right: 1em; // Keep room for validation element
+            &:after {
+                font-size: .8em;
+            }
+        }
+        &.invalid,
+        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
+
+        &.valid,
+        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
+
+        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
+    }
+}
+
+body.desktop .form-row.validates > .label {
+    &:after {
+        position: absolute;
+        right: $interiorMargin;
+        height: 100%;
+        line-height: 200%;
+    }
+}

src/styles-new/_global.scss

@@ -301,6 +301,7 @@ a.disabled {
             $c $e,
             transparent $e + 5%
     );
+    box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
     background-repeat: no-repeat;
     background-size: contain;
 }

src/styles-new/_mixins.scss

@@ -49,6 +49,37 @@
     }
 }
 
+/************************** EFFECTS */
+@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @include keyframes($animName) {
+        0%   { opacity: $opacity0; }
+        100% { opacity: $opacity100; }
+    }
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-direction(alternate);
+    @include animation-iteration-count($iteration);
+    @include animation-timing-function(ease-in-out);
+}
+
+@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
+    @include keyframes($animName) {
+        from { #{propName}: $propValStart; }
+        to { #{$propName}: $propValEnd; }
+    }
+    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
+}
+
+@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-delay($delay);
+    @include animation-fill-mode(both);
+    @include animation-direction($dir);
+    @include animation-iteration-count($count);
+    @include animation-timing-function(ease-in-out);
+}
+
 /************************** VISUALS */
 @mixin ancillaryIcon($d, $c) {
     // Used for small icons used in combination with larger icons,
@@ -164,6 +195,30 @@
     background-color: $bg;
 }
 
+@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
+    width: 0;
+    height: 0;
+    $slopedB: $size/$ratio solid transparent;
+    $straightB: $size solid $color;
+    @if $dir == "up" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-bottom: $straightB;
+    } @else if $dir == "right" {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-left: $straightB;
+    } @else if $dir == "down" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-top: $straightB;
+    } @else {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-right: $straightB;
+    }
+}
+
 @mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-90deg,
         rgba($c, $a) 0%, rgba($c, $a) 50%,
@@ -184,7 +239,7 @@
     background-color: $colorInspectorSectionHeaderBg;
     color: $colorInspectorSectionHeaderFg;
     font-weight: normal;
-    margin: 0 0 $interiorMarginSm 0;
+    margin: $interiorMarginSm 0;
     padding: $interiorMarginSm $interiorMargin;
     text-transform: uppercase;
 }
@@ -553,3 +608,9 @@
     background-color: rgba($c, $a) !important;
     box-shadow: deeppink 0 0 10px 1px !important;
 }
+
+
+@mixin sUnsynced() {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+}

src/styles-new/core.scss

@@ -21,18 +21,13 @@
  *****************************************************************************/
 
 @import "vendor/normalize.min.css";
-@import "sass-base.scss";
+@import "sass-base";
 
 /******************** RENDERS CSS */
 @import "glyphs";
 @import "global";
 @import "status";
 @import "controls";
+@import "forms";
 @import "table";
 @import "legacy";
-
-/******************** LEGACY CSS */
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "legacy-styles";
-

src/styles-new/legacy-styles.scss

@@ -1,76 +0,0 @@
-@import "../styles/mixins";
-@import "../styles/mobile/mixins";
-@import "../styles/themes/snow/mixins";
-
-@import "../styles/constants";
-@import "../styles/mobile/constants";
-@import "../styles/themes/snow/constants";
-
-@import "../styles/animations";
-@import "../styles/effects";
-// @import "../styles/glyphs";
-@import "../styles/animations";
-@import "../styles/archetypes";
-//@import "../styles/about";
-//@import "../styles/text";
-@import "../styles/icons";
-//@import "../styles/status";
-@import "../styles/data-status";
-@import "../styles/helpers/bubbles";
-@import "../styles/helpers/splitter";
-@import "../styles/helpers/wait-spinner";
-//@import "../styles/inspector";
-//
-//!********************************* CONTROLS *!
-//@import "../styles/controls/breadcrumb";
-@import "../styles/controls/buttons";
-//@import "../styles/controls/palette";
-//@import "../styles/controls/controls";
-@import "../styles/controls/lists";
-@import "../styles/controls/menus";
-@import "../styles/controls/messages";
-@import "../styles/controls/indicators";
-@import "../styles/mobile/controls/menus";
-//
-//!********************************* FORMS *!
-@import "../styles/forms/elems";
-@import "../styles/forms/channel-selector";
-@import "../styles/forms/datetime";
-@import "../styles/forms/validation";
-@import "../styles/forms/filter";
-//
-//!********************************* USER ENVIRON *!
-@import "../styles/user-environ/layout";
-@import "../styles/mobile/layout";
-@import "../styles/edit/editor";
-//@import "../styles/search/search";
-//@import "../styles/mobile/search/search";
-@import "../styles/overlay/overlay";
-@import "../styles/tree/tree"; // TEMP - NEED FOR TREE IN INSPECTOR
-@import "../styles/object-label";
-//@import "../styles/mobile/tree";
-@import "../styles/user-environ/frame";
-@import "../styles/user-environ/top-bar";
-@import "../styles/user-environ/tool-bar";
-@import "../styles/user-environ/selecting";
-//
-//!********************************* VIEWS *!
-//@import "../styles/lists/tabular";
-//@import "../styles/plots/plots-main";
-//@import "../styles/plots/legend";
-@import "../styles/iframe";
-@import "../styles/views";
-@import "../styles/items/item";
-@import "../styles/mobile/item";
-@import "../styles/table";
-//@import "../styles/notebook/notebook";
-//
-//!********************************* TO BE MOVED *!
-@import "../styles/autoflow";
-@import "../styles/features/imagery";
-//@import "../styles/features/time-display";
-@import "../styles/widgets";
-//
-//!********************************* APP STARTUP *!
-//@import "../styles/app-start";
-

src/styles-new/sass-base.scss

@@ -27,4 +27,5 @@
 @import "constants-espresso"; // TEMP
 //@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
-@import "mixins";
+@import "mixins";
+@import "animations";

src/styles/_about.scss

@@ -1,88 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-// General About dialog styling
-// Depends on styles loaded via /platform/commonUI/general/res/sass/startup-base.scss
-.l-about {
-	&.abs {
-		overflow: auto;
-	}
-	$contentH: 200px;
-	.l-splash {
-		position: relative;
-		height: 45%;
-	}
-	.l-content {
-		position: relative;
-		margin-top: $interiorMarginLg;
-	}
-}
-
-.s-about {
-	line-height: 120%;
-
-	a {
-		color: $colorAboutLink;
-	}
-
-    h1, h2, h3 {
-        color: pullForward($colorBodyFg, 20%);
-        margin-bottom: 1em;
-    }
-
-    h1 {
-        font-size: 2.25em;
-    }
-
-    h2 {
-        border-top: 1px solid $colorInteriorBorder;
-        font-size: 1.5em;
-        margin-top: 2em;
-        padding-top: 1em;
-    }
-
-    h3 {
-        margin-top: 2em;
-    }
-
-	.s-description,
-	.s-button {
-		line-height: 2em;
-	}
-	.l-licenses-software {
-		.l-license-software {
-			border-top: 1px solid $colorInteriorBorder;
-			padding: 0.5em 0;
-			&:first-child {
-				border-top: none;
-			}
-			em {
-				color: pushBack($colorBodyFg, 20%);
-			}
-			h3 {
-				font-size: 1.25em;
-			}
-			.s-license-text {
-				font-size: 0.9em;
-			}
-		}
-	}
-}

src/styles/_app-start.scss

@@ -1,11 +0,0 @@
-// At the last, hide .l-splash-holder and show .holder-all
-.l-splash-holder.fadeout {
-    @include trans-prop-nice($props: opacity, $dur: 1000ms);
-    opacity: 0;
-    pointer-events: none;
-}
-
-.user-environ .holder-all {
-    opacity: 1;
-    pointer-events: inherit;
-}

src/styles/_archetypes.scss

@@ -1,213 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-/********************************************* COLUMN LAYOUTS STYLES */
-@mixin cols($totalCols, $span) {
-    $cw: 100% / $totalCols;
-    min-width: (500px / $totalCols) * $span;
-    @if ($totalCols != $span) {
-        width: ($cw * $span) - $ueColMargin;
-    } @else {
-        width: $cw;
-    }
-}
-
-.cols {
-    @include clearfix;
-    .col {
-        box-sizing: border-box;
-        @include clearfix;
-        float: left;
-        margin-left: $ueColMargin;
-        padding-left: $interiorMargin;
-        position: relative;
-        &:first-child {
-            margin-left: 0;
-            padding-left: 0;
-        }
-    }
-    &.cols-2 {
-        $nc: 2;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-2-ff {
-        // 2 columns, first column is fixed, second is fluid
-        .col-100px {
-            width: 100px;
-        }
-    }
-
-    &.cols-6 {
-        $nc: 6;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-16 {
-        $nc: 16;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-7 {
-            @include cols($nc, 7);
-        }
-    }
-    &.cols-32 {
-        $nc: 32;
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-15 {
-            @include cols($nc, 15);
-        }
-    }
-    .l-row {
-        @include clearfix;
-        padding: $interiorMargin 0;
-    }
-}
-
-/********************************************* FLEX STYLES */
-.l-flex-row,
-.l-flex-col {
-    display: flex;
-    flex-wrap: nowrap;
-    .flex-elem {
-        min-height: 0; // Needed to allow element to shrink within parent
-        position: relative;
-        &:not(.grows) {
-            flex: 0 0 auto;
-            &.flex-can-shrink {
-                flex: 0 1 auto;
-            }
-        }
-        &.grows {
-            flex: 1 1 auto;
-        }
-        &.contents-align-right {
-            text-align: right;
-        }
-    }
-    .flex-container {
-        // Apply to wrapping elements, mct-includes, etc.
-        display: flex;
-        flex-wrap: nowrap;
-        flex: 1 1 auto;
-        min-height:0;
-    }
-}
-
-.l-flex-row {
-    flex-direction: row;
-    &.flex-elem { flex: 1 1 auto; }
-    > .flex-elem {
-        min-width: 0;
-        &.holder:not(:last-child) { margin-right: $interiorMargin; }
-    }
-    .flex-container { flex-direction: row; }
-}
-
-.l-flex-col {
-    flex-direction: column;
-    > .flex-elem {
-        min-height: 0;
-        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
-    }
-    &.l-flex-accordion .flex-accordion-holder {
-        display: flex;
-        flex-direction: column;
-        //overflow: hidden !important;
-    }
-    .flex-container { flex-direction: column; }
-}
-
-.flex-fixed {
-    flex: 0 0 auto;
-}
-
-.flex-justify-end {
-    justify-content: flex-end;
-}
-
-/********************************************* POPUPS */
-.t-popup {
-    z-index: 75;
-}
-
-/********************************************* GRID STYLES */
-.grid-two-column {
-    display: grid;
-    grid-row-gap: 0;
-    grid-template-columns: 1fr 2fr;
-    align-items: top;
-}
-
-.grid-two-column-span-cols {
-    grid-column: 1 / 3;
-}
-
-.grid-elem {
-    &:not(:first-child) {
-        border-top: 1px solid $colorInteriorBorder;
-    }
-    &.label {
-        background-color: rgba(0,0,128,0.2);
-    }
-    &.value {
-        background-color: rgba(0,128,0,0.2);
-    }
-}
-
-// Properties grids
-.grid-properties {
-    @extend .grid-two-column;
-}
-
-.grid-row {
-    display: contents;
-}
-
-.grid-span-all {
-    @extend .grid-two-column-span-cols;
-}
-
-.grid-row {
-    .grid-cell {
-        padding: 3px $interiorMarginLg 3px 0;
-        &[title] {
-            // When a cell has a title, assume it's helpful text
-            cursor: help;
-        }
-    }
-    &.force-border,
-    &:not(:first-of-type) {
-        // Row borders, effected via border-top on child elements of the row
-        .grid-cell {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
-    }
-}

src/styles/_autoflow.scss

@@ -1,137 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-.autoflow {
-	$headerH: $formInputH;
-	$colMargin: $interiorMargin;
-	$colW: 225px;
-	$valW: 70px;
-	$valPad: 5px;
-	$rowH: 15px;
-	font-size: 0.75rem;
-
-	&:hover {
-		.l-autoflow-header .s-button.change-column-width {
-			@include trans-prop-nice-fade(50ms);
-			opacity: 1;
-		}
-	}
-
-	.l-autoflow-header {
-		bottom: auto;
-		height: $headerH;
-		line-height: $headerH;
-        min-width: $colW;
-        .t-last-update {
-            overflow: hidden;
-        }
-		.s-button.change-column-width {
-			@include trans-prop-nice-fade(500ms);
-			opacity: 0;
-		}
-		.l-filter {
-            display: block;
-			margin-right: $interiorMargin;
-			input.t-filter-input {
-				width: 150px;
-			}
-		}
-	}
-
-	.l-autoflow-items {
-		//		@include test(green);
-		overflow-x: scroll;
-		overflow-y: hidden;
-		top: $headerH + $interiorMargin * 2;
-		white-space: nowrap;
-		.l-autoflow-col {
-//			@include test();
-			box-sizing: border-box;
-			border-left: 1px solid $colorInteriorBorder;
-			display: inline-block;
-//			height: 100%;
-			padding-left: $colMargin;
-			padding-right: $colMargin;
-			vertical-align: top;
-			width: $colW;
-			.l-autoflow-row {
-				//				@include test(red);
-				box-sizing: border-box;
-				border-bottom: 1px solid rgba(#fff,0.05);
-				display: block;
-				height: $rowH;
-				line-height: $rowH;
-				margin-bottom: 1px; margin-top: 1px;
-				position: relative;
-				&:first-child {
-					border-top: none;
-				}
-				&:hover {
-					background: rgba(#fff, 0.1);
-				}
-				&.s-stale {
-					//color: darken($colorBodyFg, 20%);
-					.l-autoflow-item.l { @include s-stale(0.3); };
-					.l-autoflow-item.r { @include s-stale(); };
-				}
-				&:not(.s-stale) {
-					.l-autoflow-item.r {
-						color: lighten($colorBodyFg, 10%);
-					}
-				}
-				&.first-in-group {
-					border-top: 1px solid lighten($colorInteriorBorder, 20%);
-				}
-				.l-autoflow-item {
-					display: block;
-					&.l {
-						float: none;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						width: auto;
-					}
-					&.r {
-						border-radius: $smallCr;
-						float: right;
-						margin-left: $interiorMargin;
-						padding-left: $valPad;
-						padding-right: $valPad;
-						text-align: right;
-					}
-				}
-			}
-
-			&:first-child {
-				border-left: none;
-				padding-left: 0;
-			}
-		}
-	}
-}
-
-.frame {
-    &.child-frame.panel {
-        .autoflow .l-autoflow-header .l-filter {
-            display: none;
-        }
-    }
-}

src/styles/_badges.scss

@@ -1,45 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-.badge {
-    @include background-image(linear-gradient(lighten($colorAlt1, 10%), $colorAlt1));
-    color: $colorBodyBg;
-    display: inline-block;
-    text-align: center;
-}
-
-.top-bar .badge {
-    border-radius: $controlCr * 1.5;
-    $h: $btnStdH; //$ueTopBarBtnH; // - 5px;
-    font-size: 1.4em;
-    height: $h;
-    line-height: $h;
-    margin-right: $interiorMargin;
-    width: $badgeW;
-    vertical-align: middle;
-}
-
-.super-menu .badge {
-    @include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
-    border-radius: $controlCr;
-    @include boxShdwSubtle();
-    padding: 2px 7px;
-}

src/styles/_constants.scss

@@ -1,146 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-/************************** FEATURES */
-$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported
-
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-$bodyMargin: 10px;
-$interiorMargin: 5px;
-$interiorMarginLg: $interiorMargin * 2;
-$interiorMarginSm: 3px;
-$badgeW: 35px;
-
-/************************** RATIOS */
-$ltGamma: 20%;
-$btnFontSizeToH: 0.45;
-
-/************************** LAYOUT */
-$ueTopBarH: 24px;
-$ueTopBarEditH: 30px;
-$ueTopBarBtnH: 35px;
-$ueFooterH: 25px;
-$ueColMargin: 1.5%;
-$ueAppLogoW: 80px;
-$ueEditToolBarH: 25px;
-$ueCollapsedPaneEdgeM: 22px;
-$uePaneMiniTabH: 36px;
-$uePaneMiniTabW: 10px;
-$uePaneMiniTabFontSize: 9px;
-$uePaneMiniTabCollapsedW: 22px;
-$ueEditLeftPaneW: 75%;
-$treeSearchInputBarH: 25px;
-/*************** Panes */
-$ueBrowseLeftPaneTreeMinW: 150px;
-$ueBrowseLeftPaneTreeMaxW: 35%;
-$ueBrowseLeftPaneTreeW: 25%;
-$ueBrowseRightPaneInspectMinW: 200px;
-$ueBrowseRightPaneInspectMaxW: 35%;
-$ueBrowseRightPaneInspectW: 20%;
-$ueDesktopMinW: 600px;
-/*************** Overlay */
-$ovrTopBarH: 45px;
-$ovrFooterH: 24px;
-$overlayMargin: 25px;
-/*************** Progress Overlay */
-$durEntryMs: 50ms;
-$delayEntryMs: 100ms;
-/*************** Items */
-$ueBrowseGridItemLg: 200px;
-$ueBrowseGridItemTopBarH: 20px;
-$ueBrowseGridItemBottomBarH: 30px;
-$itemPadLR: 5px;
-/*************** Tree */
-$treeVCW: 16px;
-$treeTypeIconH: 1.4em; // was 16px
-$treeTypeIconHPx: 16px;
-$treeTypeIconW: 18px;
-$treeContextTriggerW: 20px;
-/*************** Tabular */
-$tabularHeaderH: 22px;
-$tabularTdPadLR: $itemPadLR;
-$tabularTdPadTB: 2px;
-/*************** Imagery */
-$imageMainControlBarH: 25px;
-$imageThumbsD: 100px;
-$imageThumbsWrapperH: 155px;
-$imageThumbPad: 1px;
-/*************** Ticks */
-$ticksH: 25px;
-$tickLblVMargin: 3px;
-$tickLblH: 15px;
-$tickLblW: 50px;
-$tickH: $ticksH - $tickLblVMargin - $tickLblH;
-$tickW: 1px;
-/*************** Plots */
-$plotYBarW: 60px;
-$plotYLabelMinH: 20px;
-$plotYLabelW: 10px;
-$plotXBarH: 32px;
-$plotLegendH: 20px;
-$plotSwatchD: 8px;
-// 1: Top, 2: right, 3: bottom, 4: left
-$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW);
-/* min plot height is based on user testing to find minimum useful height */
-$plotMinH: 95px;
-/*************** Bubbles */
-$bubbleArwSize: 10px;
-$bubblePad: $interiorMargin;
-$bubbleMinW: 100px;
-$bubbleMaxW: 300px;
-/*************** Forms */
-$reqSymbolW: 15px;
-$reqSymbolM: $interiorMargin * 2;
-$reqSymbolFontSize: 0.75em;
-$inputTextPTopBtm: 2px;
-$inputTextPLeftRight: 5px;
-$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
-/*************** Wait Spinner Defaults */
-$waitSpinnerD: 32px;
-$waitSpinnerTreeD: 20px;
-$waitSpinnerBorderW: 5px;
-$waitSpinnerTreeBorderW: 4px;
-
-/************************** CONTROLS */
-$controlDisabledOpacity: 0.3;
-$formLabelW: 30%;
-$formInputH: 22px;
-$formRowCtrlsH: 14px;
-$formTBPad: $interiorMargin;
-$formLRPad: $interiorMargin;
-$menuLineH: 1.5rem;
-$menuLineHPx: 24px;
-$btnStdH: 25px;
-$btnToolbarH: $btnStdH;
-$controlBarH: $btnStdH;
-$btnFrameH: 18px;
-
-/************************** PATHS */
-// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
-$dirCommonRes: '../';
-$dirFonts: $dirCommonRes + 'fonts/';
-$dirImgs: $dirCommonRes + 'images/';
-
-/************************** TIMINGS */
-$controlFadeMs: 100ms;
-$browseToEditAnimMs: 400ms;
-$editBorderPulseMs: 500ms;

src/styles/_data-status.scss

@@ -1,6 +0,0 @@
-.s-stale {
-	@include s-stale();
-	.td {
-		@include s-stale();
-	}
-}

src/styles/_effects.scss

@@ -1,58 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-    @include keyframes($animName) {
-        0%   { opacity: $opacity0; }
-        100% { opacity: $opacity100; }
-    }
-	@include animation-name($animName);
-	@include animation-duration($dur);
-	@include animation-direction(alternate);
-	@include animation-iteration-count($iteration);
-	@include animation-timing-function(ease-in-out);
-}
-
-.pulse {
-	@include pulse($animName: pulse, $dur: 750ms);
-}
-
-.pulse-subtle {
-    @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
-}
-
-@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include keyframes($animName) {
-        from { #{propName}: $propValStart; }
-        to { #{$propName}: $propValEnd; }
-    }
-    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
-}
-
-@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include animation-name($animName);
-    @include animation-duration($dur);
-    @include animation-delay($delay);
-    @include animation-fill-mode(both);
-    @include animation-direction($dir);
-    @include animation-iteration-count($count);
-    @include animation-timing-function(ease-in-out);
-}

src/styles/_global.scss

@@ -1,247 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-/************************** HTML ENTITIES */
-a {
-    color: $colorA;
-    cursor: pointer;
-    text-decoration: none;
-    &:hover {
-        color: $colorAHov;
-    }
-}
-
-body, html {
-    -webkit-font-smoothing: subpixel-antialiased;
-    background-color: $colorBodyBg;
-    color: $colorBodyFg;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 100%;
-    font-weight: normal;
-    height: 100%;
-    width: 100%;
-}
-
-em {
-    font-style: normal;
-}
-
-input, textarea {
-    font-family: inherit;
-    font-weight: inherit;
-    letter-spacing: inherit;
-}
-
-h1, h2, h3 {
-    letter-spacing: 0.04em;
-    margin: 0;
-}
-
-h1 {
-    font-size: 1.7em;
-    font-weight: normal !important;
-    letter-spacing: 0.04em;
-    line-height: 120%;
-    margin-bottom: 20px;
-    margin-top: 0;
-}
-
-p {
-    margin-bottom: $interiorMarginLg;
-}
-
-ol, ul {
-    list-style: none;
-    margin: 0;
-    padding-left: 0;
-}
-
-mct-container {
-    display: block;
-}
-
-.abs {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: auto;
-    width: auto;
-}
-
-.code {
-    font-family: "Lucida Console", monospace;
-    font-size: 0.7em;
-    line-height: 150%;
-    white-space: pre;
-}
-
-.codehilite {
-    @extend .code;
-    background-color: rgba($colorBodyFg, 0.1);
-    padding: 1em;
-}
-
-.disabled,
-a.disabled {
-    opacity: $controlDisabledOpacity;
-    pointer-events: none !important;
-    cursor: default !important;
-}
-
-.s-status-missing {
-    // Labels. Expects .s-status-missing to be applied to mct-representation that contains
-    .t-object-label .t-item-icon:before {
-        content: $glyph-icon-object-unknown;
-    }
-
-    // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
-    .item .t-item-icon-glyph:before {
-        content: $glyph-icon-object-unknown;
-    }
-
-    // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
-    &.object-header {
-        .type-icon:before {
-            content: $glyph-icon-object-unknown;
-        }
-    }
-
-    // Tree item. Expects .s-status-missing to be applied to .tree-item,
-    // and mct-representation.search-item
-    &.tree-item,
-    &.search-item {
-        > .rep-object-label .t-item-icon:before {
-            content: $glyph-icon-object-unknown;
-        }
-    }
-}
-
-.align-right {
-    text-align: right;
-}
-
-.centered {
-    text-align: center;
-}
-
-.ellipsis {
-    @include ellipsize();
-}
-
-.no-selection {
-    // aka selection = "None". Used in palettes and their menu buttons.
-    $c: red; $s: 48%; $e: 52%;
-    @include background-image(linear-gradient(-45deg,
-        transparent $s - 5%,
-        $c $s,
-        $c $e,
-        transparent $e + 5%
-    ));
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
-
-.scrolling,
-.scroll {
-    overflow: auto;
-}
-
-.vscroll {
-    overflow-x: hidden;
-    overflow-y: auto;
-    &.scroll-pad {
-        padding-right: $interiorMargin;
-    }
-}
-
-.vscroll--persist {
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-
-.slidable {
-    cursor: move; // Fallback
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-    &.horz {
-        cursor: col-resize;
-    }
-    &.vert {
-        cursor: row-resize;
-    }
-}
-
-.no-margin {
-    margin: 0;
-}
-
-.ds {
-    box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
-}
-
-.capitalize {
-    text-transform: capitalize;
-}
-
-.hide,
-.hidden,
-.t-main-view .hide-in-t-main-view {
-    display: none !important;
-}
-
-.hide-nice {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.invisible {
-    display: block;
-    visibility: hidden;
-    height: 0;
-    padding: 0;
-    border: 0;
-    margin: 0 !important;
-    transform: scale(0);
-    pointer-events: none;
-    position: absolute;
-}
-
-.sep {
-    color: rgba(#fff, 0.2);
-}
-
-.comma-list span {
-    &:not(:first-child) {
-        &:before { content: ', '; }
-    }
-}
-
-.test-stripes {
-    @include bgDiagonalStripes();
-}
-
-.test {
-    @include test();
-}

src/styles/_glyphs.scss

@@ -1,280 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-@mixin glyphBefore($unicode, $family: 'symbolsfont') {
-    &:before {
-        content: $unicode;
-        font-family: $family;
-    }
-}
-
-@mixin glyphAfter($unicode, $family: 'symbolsfont') {
-    &:after {
-        content: $unicode;
-        font-family: $family;
-    }
-}
-
-[class*="icon-"].labeled {
-    // Moved from .s-button and generalized
-    &:before {
-        // Fend off label from icon when it's included
-        margin-right: $interiorMarginSm;
-    }
-}
-
-/************************** CHAR UNICODES */
-
-$glyph-icon-alert-rect: '\e900';
-$glyph-icon-alert-triangle: '\e901';
-$glyph-icon-arrow-down: '\e902';
-$glyph-icon-arrow-left: '\e903';
-$glyph-icon-arrow-right: '\e904';
-$glyph-icon-arrow-double-up: '\e905';
-$glyph-icon-arrow-tall-up: '\e906';
-$glyph-icon-arrow-tall-down: '\e907';
-$glyph-icon-arrow-double-down: '\e908';
-$glyph-icon-arrow-up: '\e909';
-$glyph-icon-asterisk: '\e910';
-$glyph-icon-bell: '\e911';
-$glyph-icon-box: '\e912';
-$glyph-icon-box-with-arrow: '\e913';
-$glyph-icon-check: '\e914';
-$glyph-icon-connectivity: '\e915';
-$glyph-icon-database-in-brackets: '\e916';
-$glyph-icon-eye-open: '\e917';
-$glyph-icon-gear: '\e918';
-$glyph-icon-hourglass: '\e919';
-$glyph-icon-info: '\e920';
-$glyph-icon-link: '\e921';
-$glyph-icon-lock: '\e922';
-$glyph-icon-minus: '\e923';
-$glyph-icon-people: '\e924';
-$glyph-icon-person: '\e925';
-$glyph-icon-plus: '\e926';
-$glyph-icon-trash: '\e927';
-$glyph-icon-x: '\e928';
-$glyph-icon-brackets: '\e929';
-$glyph-icon-crosshair: '\e930';
-$glyph-icon-grippy: '\e931';
-$glyph-icon-arrow-right-equilateral: '\e932';
-$glyph-icon-arrows-out: '\e1000';
-$glyph-icon-arrows-right-left: '\e1001';
-$glyph-icon-arrows-up-down: '\e1002';
-$glyph-icon-bullet: '\e1004';
-$glyph-icon-calendar: '\e1005';
-$glyph-icon-chain-links: '\e1006';
-$glyph-icon-collapse-pane-left: '\e1007';
-$glyph-icon-collapse-pane-right: '\e1008';
-$glyph-icon-download: '\e1009';
-$glyph-icon-duplicate: '\e1010';
-$glyph-icon-folder-new: '\e1011';
-$glyph-icon-fullscreen-collapse: '\e1012';
-$glyph-icon-fullscreen-expand: '\e1013';
-$glyph-icon-layers: '\e1014';
-$glyph-icon-line-horz: '\e1015';
-$glyph-icon-magnify: '\e1016';
-$glyph-icon-magnify-in: '\e1017';
-$glyph-icon-magnify-out: '\e1018';
-$glyph-icon-menu-hamburger: '\e1019';
-$glyph-icon-move: '\e1020';
-$glyph-icon-new-window: '\e1021';
-$glyph-icon-paint-bucket: '\e1022';
-$glyph-icon-pause: '\e1023';
-$glyph-icon-pencil: '\e1024';
-$glyph-icon-play: '\e1025';
-$glyph-icon-plot-resource: '\e1026';
-$glyph-icon-pointer-left: '\e1027';
-$glyph-icon-pointer-right: '\e1028';
-$glyph-icon-refresh: '\e1029';
-$glyph-icon-save: '\e1030';
-$glyph-icon-sine: '\e1031';
-$glyph-icon-T: '\e1032';
-$glyph-icon-thumbs-strip: '\e1033';
-$glyph-icon-two-parts-both: '\e1034';
-$glyph-icon-two-parts-one-only: '\e1035';
-$glyph-icon-resync: '\e1036';
-$glyph-icon-reset: '\e1037';
-$glyph-icon-x-in-circle: '\e1038';
-$glyph-icon-brightness: '\e1039';
-$glyph-icon-contrast: '\e1040';
-$glyph-icon-expand: '\e1041';
-$glyph-icon-list-view: '\e1042';
-$glyph-icon-grid-snap-to: '\e1043';
-$glyph-icon-grid-snap-no: '\e1044';
-$glyph-icon-frame-show: '\e1045';
-$glyph-icon-frame-hide: '\e1046';
-$glyph-icon-import: '\e1047';
-$glyph-icon-export: '\e1048';
-$glyph-icon-activity: '\e1100';
-$glyph-icon-activity-mode: '\e1101';
-$glyph-icon-autoflow-tabular: '\e1102';
-$glyph-icon-clock: '\e1103';
-$glyph-icon-database: '\e1104';
-$glyph-icon-database-query: '\e1105';
-$glyph-icon-dataset: '\e1106';
-$glyph-icon-datatable: '\e1107';
-$glyph-icon-dictionary: '\e1108';
-$glyph-icon-folder: '\e1109';
-$glyph-icon-image: '\e1110';
-$glyph-icon-layout: '\e1111';
-$glyph-icon-object: '\e1112';
-$glyph-icon-object-unknown: '\e1113';
-$glyph-icon-packet: '\e1114';
-$glyph-icon-page: '\e1115';
-$glyph-icon-plot-overlay: '\e1116';
-$glyph-icon-plot-stacked: '\e1117';
-$glyph-icon-session: '\e1118';
-$glyph-icon-tabular: '\e1119';
-$glyph-icon-tabular-lad: '\e1120';
-$glyph-icon-tabular-lad-set: '\e1121';
-$glyph-icon-tabular-realtime: '\e1122';
-$glyph-icon-tabular-scrolling: '\e1123';
-$glyph-icon-telemetry: '\e1124';
-$glyph-icon-telemetry-panel: '\e1125';
-$glyph-icon-timeline: '\e1126';
-$glyph-icon-timer: '\e1127';
-$glyph-icon-topic: '\e1128';
-$glyph-icon-box-with-dashed-lines: '\e1129';
-$glyph-icon-summary-widget: '\e1130';
-$glyph-icon-notebook: '\e1131';
-
-/************************** 16 PX CLASSES */
-
-.icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
-.icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
-.icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
-.icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
-.icon-arrow-right {  @include glyphBefore($glyph-icon-arrow-right); }
-.icon-arrow-double-up {  @include glyphBefore($glyph-icon-arrow-double-up); }
-.icon-arrow-tall-up {  @include glyphBefore($glyph-icon-arrow-tall-up); }
-.icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
-.icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
-.icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
-.icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
-.icon-bell {  @include glyphBefore($glyph-icon-bell); }
-.icon-box {  @include glyphBefore($glyph-icon-box); }
-.icon-box-with-arrow {  @include glyphBefore($glyph-icon-box-with-arrow); }
-.icon-check {  @include glyphBefore($glyph-icon-check); }
-.icon-connectivity {  @include glyphBefore($glyph-icon-connectivity); }
-.icon-database-in-brackets {  @include glyphBefore($glyph-icon-database-in-brackets); }
-.icon-eye-open {  @include glyphBefore($glyph-icon-eye-open); }
-.icon-gear {  @include glyphBefore($glyph-icon-gear); }
-.icon-hourglass {  @include glyphBefore($glyph-icon-hourglass); }
-.icon-info {  @include glyphBefore($glyph-icon-info); }
-.icon-link {  @include glyphBefore($glyph-icon-link); }
-.icon-lock {  @include glyphBefore($glyph-icon-lock); }
-.icon-minus {  @include glyphBefore($glyph-icon-minus); }
-.icon-people {  @include glyphBefore($glyph-icon-people); }
-.icon-person {  @include glyphBefore($glyph-icon-person); }
-.icon-plus {  @include glyphBefore($glyph-icon-plus); }
-.icon-trash {  @include glyphBefore($glyph-icon-trash); }
-.icon-x {  @include glyphBefore($glyph-icon-x); }
-.icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
-.icon-crosshair {  @include glyphBefore($glyph-icon-crosshair); }
-.icon-grippy {  @include glyphBefore($glyph-icon-grippy); }
-.icon-arrow-right-equilateral {  @include glyphBefore($glyph-icon-arrow-right-equilateral); }
-.icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
-.icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
-.icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
-.icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
-.icon-calendar {  @include glyphBefore($glyph-icon-calendar); }
-.icon-chain-links {  @include glyphBefore($glyph-icon-chain-links); }
-.icon-collapse-pane-left {  @include glyphBefore($glyph-icon-collapse-pane-left); }
-.icon-collapse-pane-right {  @include glyphBefore($glyph-icon-collapse-pane-right); }
-.icon-download {  @include glyphBefore($glyph-icon-download); }
-.icon-duplicate {  @include glyphBefore($glyph-icon-duplicate); }
-.icon-folder-new {  @include glyphBefore($glyph-icon-folder-new); }
-.icon-fullscreen-collapse {  @include glyphBefore($glyph-icon-fullscreen-collapse); }
-.icon-fullscreen-expand {  @include glyphBefore($glyph-icon-fullscreen-expand); }
-.icon-layers {  @include glyphBefore($glyph-icon-layers); }
-.icon-line-horz {  @include glyphBefore($glyph-icon-line-horz); }
-.icon-magnify {  @include glyphBefore($glyph-icon-magnify); }
-.icon-magnify-in {  @include glyphBefore($glyph-icon-magnify-in); }
-.icon-magnify-out {  @include glyphBefore($glyph-icon-magnify-out); }
-.icon-menu-hamburger {  @include glyphBefore($glyph-icon-menu-hamburger); }
-.icon-move {  @include glyphBefore($glyph-icon-move); }
-.icon-new-window {  @include glyphBefore($glyph-icon-new-window); }
-.icon-paint-bucket {  @include glyphBefore($glyph-icon-paint-bucket); }
-.icon-pause {  @include glyphBefore($glyph-icon-pause); }
-.icon-pencil {  @include glyphBefore($glyph-icon-pencil); }
-.icon-play {  @include glyphBefore($glyph-icon-play); }
-.icon-plot-resource {  @include glyphBefore($glyph-icon-plot-resource); }
-.icon-pointer-left {  @include glyphBefore($glyph-icon-pointer-left); }
-.icon-pointer-right {  @include glyphBefore($glyph-icon-pointer-right); }
-.icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
-.icon-save {  @include glyphBefore($glyph-icon-save); }
-.icon-sine {  @include glyphBefore($glyph-icon-sine); }
-.icon-T {  @include glyphBefore($glyph-icon-T); }
-.icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
-.icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
-.icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
-.icon-resync {  @include glyphBefore($glyph-icon-resync); }
-.icon-reset {  @include glyphBefore($glyph-icon-reset); }
-.icon-x-in-circle {  @include glyphBefore($glyph-icon-x-in-circle); }
-.icon-brightness {  @include glyphBefore($glyph-icon-brightness); }
-.icon-contrast {  @include glyphBefore($glyph-icon-contrast); }
-.icon-expand {  @include glyphBefore($glyph-icon-expand); }
-.icon-list-view {  @include glyphBefore($glyph-icon-list-view); }
-.icon-grid-snap-to {  @include glyphBefore($glyph-icon-grid-snap-to); }
-.icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
-.icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
-.icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
-.icon-import {  @include glyphBefore($glyph-icon-import); }
-.icon-export {  @include glyphBefore($glyph-icon-export); }
-.icon-activity {  @include glyphBefore($glyph-icon-activity); }
-.icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
-.icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
-.icon-clock {  @include glyphBefore($glyph-icon-clock); }
-.icon-database {  @include glyphBefore($glyph-icon-database); }
-.icon-database-query {  @include glyphBefore($glyph-icon-database-query); }
-.icon-dataset {  @include glyphBefore($glyph-icon-dataset); }
-.icon-datatable {  @include glyphBefore($glyph-icon-datatable); }
-.icon-dictionary {  @include glyphBefore($glyph-icon-dictionary); }
-.icon-folder {  @include glyphBefore($glyph-icon-folder); }
-.icon-image {  @include glyphBefore($glyph-icon-image); }
-.icon-layout {  @include glyphBefore($glyph-icon-layout); }
-.icon-object {  @include glyphBefore($glyph-icon-object); }
-.icon-object-unknown {  @include glyphBefore($glyph-icon-object-unknown); }
-.icon-packet {  @include glyphBefore($glyph-icon-packet); }
-.icon-page {  @include glyphBefore($glyph-icon-page); }
-.icon-plot-overlay {  @include glyphBefore($glyph-icon-plot-overlay); }
-.icon-plot-stacked {  @include glyphBefore($glyph-icon-plot-stacked); }
-.icon-session {  @include glyphBefore($glyph-icon-session); }
-.icon-tabular {  @include glyphBefore($glyph-icon-tabular); }
-.icon-tabular-lad {  @include glyphBefore($glyph-icon-tabular-lad); }
-.icon-tabular-lad-set {  @include glyphBefore($glyph-icon-tabular-lad-set); }
-.icon-tabular-realtime {  @include glyphBefore($glyph-icon-tabular-realtime); }
-.icon-tabular-scrolling {  @include glyphBefore($glyph-icon-tabular-scrolling); }
-.icon-telemetry {  @include glyphBefore($glyph-icon-telemetry); }
-.icon-telemetry-panel {  @include glyphBefore($glyph-icon-telemetry-panel); }
-.icon-timeline {  @include glyphBefore($glyph-icon-timeline); }
-.icon-timer {  @include glyphBefore($glyph-icon-timer); }
-.icon-topic {  @include glyphBefore($glyph-icon-topic); }
-.icon-box-with-dashed-lines {  @include glyphBefore($glyph-icon-box-with-dashed-lines); }
-.icon-summary-widget {  @include glyphBefore($glyph-icon-summary-widget); }
-.icon-notebook {  @include glyphBefore($glyph-icon-notebook); }
-
-/************************** 12 PX CLASSES */
-.icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
-.icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
-.icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
-.icon-grippy-12px {  @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }

src/styles/_icons.scss

@@ -1,91 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-.triangle {
-	$myColor: $colorKey;
-	$mySize: 10px;
-	@include triangle-right($mySize, $myColor);
-	&.triangle-down {
-		@include triangle-down($mySize, $myColor);
-	}
-}
-
-.ui-symbol {
-    font-family: 'symbolsfont';
-    -webkit-font-smoothing: antialiased;
-}
-
-.ui-symbol.icon {
-    color: $colorKey;
-    font-size: inherit;
-    &.alert {
-        color: $colorAlert;
-        &:hover {
-            color: lighten($colorAlert, $ltGamma);
-        }
-    }
-}
-
-
-.t-alert-unsynced {
-    @extend .icon-alert-triangle;
-    color: $colorPausedBg;
-}
-
-.bar .ui-symbol {
-	display: inline-block;
-}
-
-.invoke-menu {
-	text-shadow: none;
-	display: inline-block;
-}
-
-.s-menu-button .invoke-menu,
-.icon.major .invoke-menu {
-	margin-left: $interiorMarginSm;
-}
-
-.menu .type-icon,
-.tree-item .type-icon,
-.super-menu.menu .menu-item-a:before {
-	position: absolute;
-}
-
-.t-item-icon {
-	// Used in grid-item.html, tree-item, inspector location
-	@extend .ui-symbol;
-    @extend .icon;
-    line-height: inherit;
-    position: relative;
-    &.l-icon-link {
-        &:after {
-            color: $colorIconLink;
-            content: $glyph-icon-link;
-            height: auto; width: auto;
-            position: absolute;
-            left: 0; top: 0; right: 0; bottom: 20%;
-            transform-origin: bottom left;
-            transform: scale(0.3);
-            z-index: 2;
-        }
-    }
-}

src/styles/_inspector.scss

@@ -1,191 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-/* New grid layout for the Inspector pane */
-.l-inspect {
-    // Overall layout
-    @extend .abs;
-    background: $colorInspectorBg;
-    color: $colorInspectorFg;
-    line-height: 140%;
-
-    .pane-header {
-        color: pushBack($colorInspectorFg, 20%);
-        font-size: 0.8rem;
-    }
-
-    .split-layout {
-        .split-pane-component.pane {
-            &.bottom {
-                height: 30%;
-                min-height: 20%;
-                max-height: 80%;
-            }
-        }
-    }
-
-    .l-inspector-part {
-        display: contents;
-    }
-
-    .tree {
-        .grid-properties {
-            margin-left: $treeVCW + $interiorMarginLg;
-        }
-    }
-
-    .grid-properties {
-        .label {
-            color: $colorInspectorPropName;
-        }
-        .value {
-            color: $colorInspectorPropVal;
-            word-break: break-all;
-            &:first-child {
-                // If there is no preceding .label element, make value span columns
-                @extend .grid-two-column-span-cols;
-            }
-        }
-    }
-
-    .inspector-location {
-        display: inline-block;
-    }
-
-    h2 {
-        // Headers for .l-inspector-part elements
-        @extend .grid-two-column-span-cols;
-        border-radius: $controlCr;
-        background-color: $colorInspectorSectionHeaderBg;
-        color: $colorInspectorSectionHeaderFg;
-        font-size: 0.8rem;
-        font-weight: normal;
-        margin: $interiorMarginLg 0 $interiorMarginSm 0;
-        padding: floor($formTBPad * .75) $formLRPad;
-        text-transform: uppercase;
-        &.first {
-            margin-top: 0;
-        }
-    }
-
-    .inspector-location {
-        .location-item {
-            $h: 1.2em;
-            box-sizing: border-box;
-            cursor: pointer;
-            display: inline-block;
-            line-height: $h;
-            position: relative;
-            padding: 2px 4px;
-            .t-object-label {
-                .t-item-icon {
-                    height: $h;
-                    width: 0.7rem;
-                }
-            }
-            &:hover {
-                background: $colorItemTreeHoverBg;
-                color: $colorItemTreeHoverFg;
-                .icon {
-                    color: $colorItemTreeIconHover;
-                }
-            }
-        }
-        &:not(.last) .t-object-label .t-title-label:after {
-            color: pushBack($colorInspectorFg, 15%);
-            content: '\e904';
-            display: inline-block;
-            font-family: symbolsfont;
-            font-size: 8px;
-            font-style: normal !important;
-            line-height: inherit;
-            margin-left: $interiorMarginSm;
-            width: 4px;
-        }
-    }
-
-    // Elements pool
-    .holder-elements {
-        .current-elements {
-            position: relative;
-            .tree-item {
-                .t-object-label {
-                    // Elements pool is a flat list, so don't indent items.
-                    font-size: 0.75rem;
-                    left: 0;
-                }
-            }
-        }
-    }
-}
-
-/* Styles for the Inspector pane */
-
-.l-inspect,
-.l-inspect table tr td {
-    font-size: 0.75rem;
-}
-
-.l-inspect {
-    .flex-elem.holder:not(:last-child) {
-        margin-bottom: $interiorMargin;
-    }
-
-    .holder-elements {
-        .current-elements {
-            position: relative;
-            .tree-item {
-                .t-object-label {
-                    // Elements pool is a flat list, so don't indent items.
-                    font-size: 0.75rem;
-                    left: 0;
-                }
-            }
-        }
-    }
-}
-
-.l-inspect {
-    .splitter-inspect-panel,
-    .split-pane-component.pane.bottom {
-        @include trans-prop-nice(opacity, 250ms); // Not working as desired currently; entire inspector seems to be destroyed and recreated when switching into and out of edit mode.
-        opacity: 0;
-        pointer-events: none;
-    }
-}
-
-mct-representation:not(.s-status-editing) .l-inspect {
-    .split-pane-component.pane.top {
-        bottom: 0 !important;
-    }
-}
-
-.s-status-editing .l-inspect {
-    .location-item {
-        pointer-events: none;
-    }
-    .splitter-inspect-panel,
-    .split-pane-component.pane.bottom {
-        opacity: 1;
-        pointer-events: inherit;
-    }
-}

src/styles/_logo-and-bg.scss

@@ -1,64 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-.l-splash,
-.l-splash:before,
-.l-splash:after {
-    background-position: center;
-    background-repeat: no-repeat;
-    position: absolute;
-}
-
-.l-splash {
-    background-size: cover;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    &:before,
-    &:after {
-        background-size: contain;
-        content: '';
-    }
-
-    &:before {
-        // NASA logo, dude
-        $w: 5%;
-        $m: 10px;
-        background-image: url('../images/logo-nasa.svg');
-        top: $m;
-        right: auto;
-        bottom: auto;
-        left: $m;
-        height: auto;
-        width: $w * 2;
-        padding-bottom: $w;
-        padding-top: $w;
-    }
-
-    &:after {
-        // App logo
-        top: 0;
-        right: 15%;
-        bottom: 0;
-        left: 15%;
-    }
-}

src/styles/_main.scss

@@ -1,88 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-@import "effects";
-@import "glyphs";
-@import "animations";
-@import "global";
-@import "archetypes";
-@import "about";
-@import "text";
-@import "icons";
-@import "status";
-@import "data-status";
-@import "helpers/bubbles";
-@import "helpers/splitter";
-@import "helpers/wait-spinner";
-@import "inspector";
-
-/********************************* CONTROLS */
-@import "controls/breadcrumb";
-@import "controls/buttons";
-@import "controls/palette";
-@import "controls/controls";
-@import "controls/lists";
-@import "controls/menus";
-@import "controls/messages";
-@import "controls/indicators";
-@import "mobile/controls/menus";
-
-/********************************* FORMS */
-@import "forms/elems";
-@import "forms/channel-selector";
-@import "forms/datetime";
-@import "forms/validation";
-@import "forms/filter";
-
-/********************************* USER ENVIRON */
-@import "user-environ/layout";
-@import "mobile/layout";
-@import "edit/editor";
-@import "search/search";
-@import "mobile/search/search";
-@import "overlay/overlay";
-@import "tree/tree";
-@import "object-label";
-@import "mobile/tree";
-@import "user-environ/frame";
-@import "user-environ/top-bar";
-@import "user-environ/tool-bar";
-@import "user-environ/selecting";
-
-/********************************* VIEWS */
-@import "lists/tabular";
-@import "plots/plots-main";
-@import "plots/legend";
-@import "iframe";
-@import "views";
-@import "items/item";
-@import "mobile/item";
-@import "table";
-@import "notebook/notebook";
-
-/********************************* TO BE MOVED */
-@import "autoflow";
-@import "features/imagery";
-@import "features/time-display";
-@import "widgets";
-
-/********************************* APP STARTUP */
-@import "app-start";

src/styles/_mixins.scss

@@ -1,447 +0,0 @@
-/*****************************************************************************
- * 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.
- *****************************************************************************/
-
-@mixin absPosDefault($offset: 0px, $overflow: hidden) {
-    overflow: $overflow;
-    position: absolute;
-    top: $offset;
-    right: $offset;
-    bottom: $offset;
-    left: $offset;
-    width: auto;
-    height: auto;
-}
-
-@mixin ancillaryIcon($d, $c) {
-    // Used for small icons used in combination with larger icons,
-    // like the link and alert icons in tree items.
-    color: $c;
-    font-size: $d;
-    line-height: $d;
-    height: $d;
-    width: $d;
-}
-
-@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
-    // Multiple $props must be in parans like this: (left, right)
-    @if $dur == 0 {
-        @include transition-property(none);
-    } @else {
-        @include transition-property($props);
-        @include transition-duration($dur);
-        @include transition-timing-function(ease-in-out);
-        @include transition-delay($delay);
-    }
-}
-
-@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
-    @if $dur == 0 {
-        @include transition-property(none);
-    } @else {
-        @include transition-property(opacity, background-color, border-color, color);
-        @include transition-duration($dur);
-        @include transition-timing-function(ease-in-out);
-        @include transition-delay($delay);
-    }
-}
-
-@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
-    @include transition-property(height, width, top, right, bottom, left, opacity);
-    @include transition-duration($t);
-    @include transition-timing-function($tf);
-}
-
-@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
-    @include transition-property(height, bottom, top);
-    @include transition-duration($dur);
-    @include transition-timing-function(ease-in-out);
-    @include transition-delay($delay);
-}
-
-@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
-    @include transition-property(width, left, right);
-    @include transition-duration($dur);
-    @include transition-timing-function(ease-in-out);
-    @include transition-delay($delay);
-}
-
-@mixin triangle-right($size, $color) {
-    $size: $size/2;
-    $ratio: 1;
-    width: 0;
-    height: 0;
-    border-top: $size/$ratio solid transparent;
-    border-left: $size solid $color;
-    border-bottom: $size/$ratio solid transparent;
-}
-
-@mixin triangle-down($size, $color) {
-    $size: $size/2;
-    $ratio: 1;
-    width: 0;
-    height: 0;
-    border-left: $size/$ratio solid transparent;
-    border-top: $size solid $color;
-    border-right: $size/$ratio solid transparent;
-}
-
-@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-    width: 0;
-    height: 0;
-    $slopedB: $size/$ratio solid transparent;
-    $straightB: $size solid $color;
-    @if $dir == "up" {
-        border-left: $slopedB;
-        border-right: $slopedB;
-        border-bottom: $straightB;
-    } @else if $dir == "right" {
-        border-top: $slopedB;
-        border-bottom: $slopedB;
-        border-left: $straightB;
-    } @else if $dir == "down" {
-        border-left: $slopedB;
-        border-right: $slopedB;
-        border-top: $straightB;
-    } @else {
-        border-top: $slopedB;
-        border-bottom: $slopedB;
-        border-right: $straightB;
-    }
-}
-
-@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
-    @include background-image(linear-gradient(-45deg,
-        rgba($c, $a) 25%, transparent 25%,
-        transparent 50%, rgba($c, $a) 50%,
-        rgba($c, $a) 75%, transparent 75%,
-        transparent 100%
-    ));
-    background-repeat: repeat;
-    background-size: $d $d;
-}
-
-@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
-    @include background-image(linear-gradient($angle,
-        rgba($c, $a) 25%, transparent 25%,
-        transparent 50%, rgba($c, $a) 50%,
-        rgba($c, $a) 75%, transparent 75%,
-        transparent 100%
-    ));
-    background-repeat: repeat;
-    background-size: $bgsize $bgsize;
-}
-
-@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
-    @include background-image(linear-gradient(-90deg,
-        rgba($c, $a) 0%, rgba($c, $a) 50%,
-        transparent 50%, transparent 100%
-    ));
-    background-repeat: repeat;
-    background-size: $d $d;
-}
-
-@mixin bgVertFuzzyStripes($c: yellow, $a: 0.1, $d: 40px) {
-    @include background-image(linear-gradient(-90deg,
-        rgba($c, $a) 0%, transparent 50%,
-        transparent 50%, rgba($c, $a) 100%
-    ));
-    background-repeat: repeat;
-    background-size: $d $d;
-}
-
-@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
-    $deg: 90deg;
-    @if ($repeatDir != 'x') {
-        $deg: 0deg;
-        $repeatDir: repeat-y;
-    } @else {
-        $repeatDir: repeat-x;
-    }
-
-    @include background-image(linear-gradient($deg,
-        $c 1px, transparent 1px,
-        transparent 100%
-    ));
-    background-repeat: $repeatDir;
-}
-
-@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    border-radius: 2px;
-    box-sizing: border-box;
-    @include boxIncised(0.7);
-    background-color: $bg;
-}
-
-@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-    content: '';
-    display: block;
-    pointer-events: none;
-    position: absolute;
-    z-index: 2;
-
-    @if $direction == "horizontal" {
-        border-top: $w $style darken($b, 15%);
-        top: 2px;
-        left: 5px;
-        right: 5px;
-        height: 1px;
-
-    } @else if $direction == "vertical" {
-        border-left: $w $style darken($b, 15%);
-        left: 2px;
-        bottom: 5px;
-        top: 5px;
-        width: 1px;
-    }
-}
-
-@mixin boxIncised($sVal: 0.6, $inset: 5px) {
-    box-shadow: inset rgba(black, $sVal) 0 1px $inset;
-}
-
-@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
-    border: 1px solid $c;
-}
-
-@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
-	@if $sVal != 'none' {
-		box-shadow: $sVal;
-	}
-}
-
-@mixin boxShdwSubtle($sVal: 0.2) {
-	@if $sVal != 'none' {
-		box-shadow: rgba(black, $sVal) 0 1px 2px;
-	}
-}
-
-@mixin boxShdwLarge($sVal: 0.7) {
-	@if $sVal != 'none' {
-		box-shadow: rgba(black, $sVal) 0 3px 10px;
-	}
-}
-
-@mixin outerGlow($color: #fff, $sVal: 0.3) {
-    box-shadow: rgba($color, $sVal) 0 0 30px;
-}
-
-@mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
-    @include background-image(linear-gradient($deg, rgba($c, 0), rgba($c, $a) 100%));
-}
-
-@mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
-    @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
-}
-
-@mixin txtShdw($sVal) {
-	//@if $sVal != 'none' {
-		text-shadow: $sVal;
-	//}
-}
-
-@mixin txtShdwSubtle($sVal: 0.1) {
-	@if $sVal != 'none' {
-	    text-shadow: rgba(black, $sVal) 0 1px 2px;
-	}
-}
-
-@mixin txtShdwLarge($sVal: 0.7) {
-    text-shadow: rgba(black, $sVal) 0 3px 7px;
-}
-
-@function percentToDecimal($p) {
-	@return $p / 100%;
-}
-
-@function decimalToPercent($d) {
-	@return percentage($d);
-}
-
-@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
-    // Space to either side of the handle
-    @return ($splitterD - $splitterHandleD) / 2;
-}
-
-/*********************************************** CONTROLS, FORM ELEMENTS */
-
-@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	background-color: $bg;
-	//border-radius: $controlCr;
-	box-sizing: border-box;
-	color: $fg;
-}
-
-@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
-	@include user-select(none);
-    border-radius: $controlCr;
-    color: $fg;
-	.icon,
-    &:before {
-		color: $ic;
-	}
-  @if $bgHov != none {
-      &:not([disabled="true"]):not(.disabled):hover {
-          background: $bgHov;
-          color: $fgHov;
-          >.icon,
-          &:before {
-              color: $icHov;
-          }
-      }
-  }
-}
-
-@mixin btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
-    @include containerSubtle($bg, $fg);
-    @include btnBase($bgHov: $bgHov, $fg: $fg, $fgHov: $fgHov, $ic: $ic, $icHov: $icHov);
-    text-shadow: $shdwItemText;
-}
-
-@mixin input-base() {
-	@include appearance(none);
-	border-radius: $controlCr;
-	box-sizing: border-box;
-    &:focus { outline: 0; }
-	&.error {
-		background-color: $colorFormFieldErrorBg;
-        color: $colorFormFieldErrorFg;
-	}
-}
-
-@mixin s-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
-    @include input-base();
-    background: $bg;
-    box-shadow: inset $shdw;
-    color: $fg;
-}
-
-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
-    @include s-input($bg, $fg, $shdw);
-    border: none;
-    outline: none;
-}
-
-@mixin contextArrow() {
-	text-shadow: none;
-	content: $glyph-icon-arrow-down;
-	display: inline-block;
-	font-family: 'symbolsfont';
-	margin-left: $interiorMarginSm;
-}
-
-@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include nice-input($bg, $fg);
-    padding: $interiorMargin;
-}
-
-@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include nice-input($bg, $fg);
-    background: lighten($bg, 3%);
-    border-bottom: 1px solid lighten($bg, 10%);
-}
-
-@mixin menuUlReset() {
-    margin: 0;
-    padding: 0;
-    li {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-}
-
-@mixin cursorGrab() {
-    cursor: grab;
-    cursor: -webkit-grab;
-    &:active {
-        cursor: grabbing;
-        cursor: -webkit-grabbing;
-    }
-}
-
-@mixin verticalCenter {
-    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
-    //position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-@mixin verticalCenterBlock($holderH, $itemH) {
-    top: floor(($holderH - $itemH) / 2);
-    bottom: auto;
-    height: $itemH;
-}
-
-@mixin ellipsize() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-@mixin reverseEllipsis() {
-    direction: rtl;
-    unicode-bidi:bidi-override;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-@mixin scrollH($showBar: auto) {
-    overflow-x: $showBar;
-    overflow-y: hidden;
-}
-
-@mixin scrollV($showBar: auto) {
-    overflow-x: hidden;
-    overflow-y: $showBar;
-}
-
-@mixin test($c: #ffcc00, $a: 0.2) {
-    background-color: rgba($c, $a) !important;
-}
-
-@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
-    box-sizing: border-box;
-    border: 1px dotted rgba($c, $a);
-}
-
-@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
-    &:after {
-        box-sizing: border-box;
-        @include bgDiagonalStripes($c, $a);
-        color: rgba(white, 0.3);
-        font-style: italic;
-        content: "Test Object";
-        display: block;
-        padding: 20px;
-        position: relative;
-        width: $w;
-        height: $h;
-        transform: scaleX(1) scaleY(1) scaleZ(1);
-        transform-origin: 50% 50% 0;
-    }
-}
-
-@mixin s-stale($a: 0.5) {
-    color: rgba($colorTelemFresh, $a) !important;
-    font-style: italic;
-}