Migrate styles (#2307)

* Legacy style migration in progress

- Working bottom up, many legacy items commented out. Stopped at
controls/indicators;

* Further migrations and deprecating
- Legacy indicator styles moved;

* WIP Styles migration
- s-button converted to c-button, WIP;
- Other

* Significant progress on migration, but still very WIP

- Mostly constants and overlay styling;
- Also bubbles and splitter;
- TODO: fix tree in overlay and splitter in imagery!

* Fix Summary Widgets UI WIP

- Remove non-working status 'editing' checks;

* Fix Summary Widgets UI WIP

- Remove non-working status 'editing' checks;
- view-control > c-disclosure-triangle;

* Fix Summary Widgets UI WIP

- Markup changes;
- Migrate CSS to styles-new, remove old;

* Fix Summary Widgets UI WIP

- Rule formatting and layout;
- Refinement to _controls / select {} padding;

* Fix Summary Widgets UI WIP

- Toolbar styles made more portable;
- Palette style  migration;
- Very WIP;

* Fix Summary Widgets UI WIP

- Palettes all fixed and functional;
- Conditions layout;
- New c-button--swatched styles;

* Fix Summary Widgets UI WIP

- Clean up code;

* Fix Summary Widgets UI WIP

- Fix button in Test Data area;

* Fix layout in shell left pane due to elements being moved

- Styles fixed and refined;

* Fixed palettes

- Fixed icon palette;
- Significant refinement to general palette styles;

* Significant fixes for Summary Widgets

- Widget editing UI fixed;
- JS cleanups and improvements;
- CSS, JS code cleanup;

* Migrate tree view used in Locator

- Mods to legacy markup;
- Mods to current CSS;
- Removed import of legacy tree CSS in legacy-styles.scss;

* Migrate archetypes

- l-flex-row, l-flex-col, etc. moved to legacy;
- grid-* styles cleaned up and moved, @extends removed;
- WIP on c-object-label, move styles from mct-tree.vue into ObjectLabel
.vue;
- TODO: finish up c-object-label, cleanups in mct-tree.vue;

* Migrate effects and animation mixins

* Object labels, legacy cleanup

- Add and apply .c-object-label for tree node elements;
- Remove legacy class "tree" from markup;
- Tweak color of tree item hover for better contrast in Inspector;

* Fix palettes in Inspector

* Various

- Fix hover color in tree for better mechanics on a variety of bgs;
- Fix object label in Locator tree;
- Remove overlay blocker test color;

* Significant work for Summary Widgets, mctForm, compact form

- Forms in overlay dialogs fixed;
- form, compact-form, other classes migrated into new _forms.scss;
- Fixes for Summary Widgets;
- Theme constants files synced, add form values;
- Removed import of legacy forms/elems SCSS file;

* Migrate various

- Autoflow tabular;
- Datetime;
- Channel selector;
- Form validation;

* Migrate wait spinners, final cleanup

* Remove old src/styles directory

- Remove old Snow and Espresso plugins;
- Remove refs to old Snow and Espresso config'd aliases;

* Update Palette.js

* Update Palette.js

* Removed commented code

* Removed commented code

* Migrate About, startup and splash screen styles

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/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/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/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/plugins/plot/res/templates/plot-options-browse.html

@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
-        <h2 title="Plot series display properties in this object">Plot Series Options</h2>
+    <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">
                 <span class='c-disclosure-triangle is-enabled flex-elem'

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

@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
-        <h2 title="Display properties for this object">Plot Series Options</h2>
+    <ul class="c-tree">
+        <h2 title="Display properties for this object">Plot Series</h2>
         <li ng-repeat="series in plotSeries"
             ng-controller="PlotSeriesFormController"
             form-model="series">
@@ -87,7 +87,8 @@
                                   ng-style="{ background: series.get('color').asHexString() }">
                             </span>
                         </div>
-                        <div class="c-palette--inline c-palette__items" ng-show="toggle.isActive()">
+                        <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"
@@ -98,6 +99,7 @@
                                 </div>
                             </div>
                         </div>
+                    </div>
                 </li>
             </ul>
         </li>

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/plugins.js

@@ -78,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;

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>
                     </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/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/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,7 @@ 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
@@ -372,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;
         }
     }
 
@@ -414,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 */
@@ -443,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;
     }
@@ -502,10 +547,6 @@ select {
             margin-left: $interiorMargin;
         }
     }
-
-    .c-palette {
-        min-width: 136px;
-    }
 }
 
 /********* Button Sets */
@@ -531,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;
 
@@ -656,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;
@@ -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-result {
-	// Used in /vista/channel-query.html and evr-query.html as of 2/24/15
+    &.l-inline {
         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;
+    }
+    &.l-checkbox {
+        .composite-control-label {
+            line-height: 18px;
+        }
     }
 }
 
-/**************************************************************************** COMPACT FORM */
+.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 */
 // 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,41 +234,43 @@
 
 
 .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;
                 }
             }
-            }
 
             &.connects-to-previous {
                 padding-top: 0;
@@ -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

@@ -28,3 +28,4 @@
 //@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
 @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/_iframe.scss

@@ -1,31 +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.
- *****************************************************************************/
-/* Styles for the iframe EmbeddedPageController element */
-
-.l-iframe {
-    iframe {
-        display: block;
-        height: 100%;
-        width: 100%;
-        border: none;
-    }
-}

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;
-}

src/styles/_object-label.scss

@@ -1,63 +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.
- *****************************************************************************/
-
-// mct-representation surrounding an object-label key="'label'"
-.rep-object-label {
-    flex-direction: row;
-    flex: 1 1 auto;
-    height: inherit;
-    line-height: inherit;
-    min-width: 0;
-}
-
-.t-object-label {
-    .t-item-icon {
-        margin-right: $interiorMargin;
-    }
-}
-
-.s-status-pending {
-    > .t-object-label {
-        .t-item-icon {
-            &:after {
-                @include spinner($waitSpinnerTreeBorderW,  $colorLoadingFg);
-                content: "";
-                height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
-            }
-            .t-item-icon-glyph,
-            &:before {
-                display: none;
-            }
-        }
-        .t-title-label {
-            font-style: italic;
-            opacity: 0.6;
-        }
-    }
-}
-
-.selected {
-    .s-status-pending .t-object-label .t-item-icon:after {
-        border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
-        border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;
-    }
-}

src/styles/_openmct.scss

@@ -1,39 +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.
- *****************************************************************************/
-.app-logo {
-    background: url('../images/logo-app.svg') no-repeat center center;
-}
-
-.l-splash-holder {
-    background: #333;
-    .s-splash {
-        border-radius: 10px;
-        box-shadow: 0 5px 50px 25px rgba(255, 255, 255, 0.1);
-    }
-}
-
-.s-splash {
-    background-image: url('../images/bg-splash.jpg');
-    &:after {
-        background-image: url('../images/logo-app-shdw.svg');
-    }
-}

src/styles/_startup-base.scss

@@ -1,74 +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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "logo-and-bg";
-
-@mixin splashElem($m: 20%) {
-    top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25;
-}
-
-body, html {
-    height: 100%;
-    width: 100%;
-}
-
-.l-splash-holder {
-    // Main outer holder for splash.
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10000;
-    opacity: 1;
-    .l-splash {
-        // The splash element.
-        @include splashElem();
-    }
-}
-
-.user-environ .holder-all {
-    // Gets shown again by main CSS, once loaded
-    opacity: 0;
-    pointer-events: none;
-}
-
-@media only screen and (max-device-width: 767px) {
-    .l-splash-holder .l-splash {
-        @include splashElem(0);
-        border-radius: 0;
-        box-shadow: none;
-    }
-}
-
-@media only screen and (max-device-width: 767px) and (orientation: portrait) {
-    .l-splash-holder .l-splash {
-        &:before {
-            // Make the NASA logo a bit bigger when we're in portrait mode.
-            $w: 12%;
-            width: $w * 2;
-            padding-bottom: $w;
-            padding-top: $w;
-        }
-    }
-}

src/styles/_status.scss

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

src/styles/_table.scss

@@ -1,79 +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.
- *****************************************************************************/
-
-.mct-sizing-table {
-    z-index: -1;
-    visibility: hidden;
-    position: absolute !important;
-
-    //Add some padding to allow for decorations such as limits indicator
-    td {
-        padding-right: 15px;
-        padding-left: 10px;
-        white-space: nowrap;
-    }
-}
-
-.mct-table {
-    tr {
-        display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
-        align-items: stretch;
-    }
-
-    td, th {
-        box-sizing: border-box;
-        display: block;
-        flex: 1 0 auto;
-        white-space: nowrap;
-    }
-
-    thead {
-        display: block;
-    }
-
-    tbody {
-        tr {
-            position: absolute;
-            height: 18px; // Needed when a row has empty values in its cells
-        }
-
-        td {
-            overflow: hidden;
-            box-sizing: border-box;
-            display: inline-block;
-            text-overflow: ellipsis;
-        }
-    }
-}
-
-.l-telemetry-table {
-    .l-control-bar {
-        margin-bottom: 3px;
-    }
-}
-
-.mct-table-scroll-forcer {
-    // Force horz scroll when needed; width set via JS
-    font-size: 0;
-    height: 1px; // Height 0 won't force scroll properly
-    position: relative;
-}

src/styles/_text.scss

@@ -1,49 +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.
- *****************************************************************************/
-// Styles for extended text copy
-
-.abs.l-standalone {
-	$d: 20%;
-	padding: $d/4 $d;
-}
-
-.s-text {
-	font-size: 0.8em;
-	ol, ul {
-		list-style: square;
-		margin-left: 1.5em;
-		li {
-
-		}
-	}
-
-	h1, h2, h3 {
-        font-weight: 200 !important;
-    }
-
-    table {
-        td { font-size: inherit; }
-        tr.header {
-            background-color: rgba($colorBodyFg, 0.2);
-        }
-    }
-}

src/styles/_views.scss

@@ -1,41 +0,0 @@
-/* Styles for sub-dividing views generically */
-.l-control-bar {
-    // Element that can be placed above l-view-section, holds controls, buttons, etc.
-    height: $controlBarH;
-}
-
-.l-view-section {
-	@include absPosDefault($overflow: auto);
-	h2 {
-		color: #fff;
-		margin-bottom: $interiorMargin;
-	}
-	&.fixed {
-		font-size: 0.8em;
-	}
-	.controls,
-	label,
-	.inline-block {
-		display: inline-block;
-	}
-}
-
-.has-control-bar {
-    .l-view-section {
-        top: $controlBarH + $interiorMargin;
-    }
-}
-
-
-.child-frame {
-    .has-control-bar {
-        $btnExportH: $btnFrameH;
-        .l-control-bar,
-        .c-control-bar {
-            display: none;
-        }
-        .l-view-section {
-            top: 0;
-        }
-    }
-}

src/styles/_widgets.scss

@@ -1,282 +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.
- *****************************************************************************/
-
-/************************************************************* WIDGET OBJECT */
-@mixin cSummaryWidget() {
-    @include boxShdw($shdwBtns);
-    border-radius: $basicCr;
-    border-style: solid;
-    border-width: 1px;
-    cursor: default;
-    &[href] {
-        cursor: pointer;
-    }
-
-    &__label {
-        &:before {
-            // Widget icon
-            font-size: 0.9em;
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-}
-
-.l-summary-widget {
-    // Widget layout classes here
-    @include ellipsize();
-    display: inline-block;
-    text-align: center;
-    .widget-label:before {
-        // Widget icon
-        font-size: 0.9em;
-        margin-right: $interiorMarginSm;
-    }
-}
-
-.c-summary-widget {
-    @include cSummaryWidget();
-    padding: $interiorMarginLg $interiorMarginLg * 2;
-}
-
-.widget-edit-holder {
-    // Hide edit area when in browse mode
-    display: none;
-}
-
-.widget-rule-header {
-    @extend .l-flex-row;
-    align-items: center;
-    margin-bottom: $interiorMargin;
-    > .flex-elem {
-        &:not(:first-child) {
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-.widget-rules-wrapper,
-.widget-rule-content,
-.w-widget-test-data-content {
-    @include trans-prop-nice($props: (height, min-height, opacity), $dur: 250ms);
-    min-height: 0;
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.widget-rules-wrapper {
-    flex: 1 1 auto !important;
-}
-
-.widget-rule-content.expanded {
-    overflow: visible !important;
-    min-height: 50px;
-    height: auto;
-    opacity: 1;
-    pointer-events: inherit;
-}
-
-.w-widget-test-data-content {
-    .l-enable {
-        padding: $interiorMargin 0;
-    }
-
-    .w-widget-test-data-items {
-        max-height: 20vh;
-        overflow-y: scroll !important;
-        padding-right: $interiorMargin;
-    }
-}
-
-.l-widget-thumb-wrapper,
-.l-compact-form label {
-    $ruleLabelW: 40%;
-    $ruleLabelMaxW: 150px;
-    display: flex;
-    max-width: $ruleLabelMaxW;
-    width: $ruleLabelW;
-}
-
-.t-message-widget-no-data {
-    display: none;
-}
-
-/********************************************************** EDITING A WIDGET */
-.s-status-editing > mct-view > .w-summary-widget {
-    // Classes for editor layout while editing a widget
-    // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
-    // being edited.
-    @include absPosDefault();
-    @extend .l-flex-col;
-
-    > .l-summary-widget {
-        // Main view of the summary widget
-        // Give some airspace and center the widget in the area
-        margin: 30px auto;
-    }
-
-    .widget-edit-holder {
-        display: flex; // Overrides `display: none` during Browse mode
-        .flex-accordion-holder {
-            // Needed because otherwise accordion elements "creep" when contents expand and contract
-            display: block !important;
-        }
-        &.expanded-widget-test-data {
-            .w-widget-test-data-content {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-            &:not(.expanded-widget-rules) {
-                // Test data is expanded and rules are collapsed
-                // Make text data take up all the vertical space
-                .flex-accordion-holder { display: flex; }
-                .widget-test-data {
-                    flex-grow: 999999;
-                }
-                .w-widget-test-data-items {
-                    max-height: inherit;
-                }
-            }
-        }
-        &.expanded-widget-rules {
-            .widget-rules-wrapper {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-        }
-    }
-
-    &.s-status-no-data {
-        .widget-edit-holder {
-            opacity: 0.3;
-            pointer-events: none;
-        }
-        .t-message-widget-no-data {
-            display: flex;
-        }
-    }
-
-
-    .l-compact-form {
-        // Overrides on .l-compact-form
-        ul {
-            &:last-child { margin: 0; }
-            li {
-                align-items: flex-start;
-                flex-wrap: nowrap;
-                line-height: 230%; // Provide enough space when controls wrap
-                padding: 2px 0;
-                &:not(.widget-rule-header) {
-                    &:not(.connects-to-previous) {
-                        border-top: 1px solid $colorFormLines;
-                    }
-                }
-                &.connects-to-previous {
-                    padding: $interiorMargin 0;
-                }
-
-                > label {
-                    display: block; // Needed to align text to right
-                    text-align: right;
-                }
-            }
-        }
-
-        &.s-widget-test-data-item {
-            // Single line of ul li label span, etc.
-            ul {
-                li {
-                    border: none !important;
-                    > label {
-                        display: inline-block;
-                        width: auto;
-                        text-align: left;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.widget-edit-holder {
-    font-size: 0.8rem;
-}
-
-.widget-rules-wrapper {
-    // Wrapper area that holds n rules
-    box-sizing: border-box;
-    overflow-y: scroll;
-    padding-right: $interiorMargin;
-}
-
-.l-widget-rule,
-.l-widget-test-data-item {
-    box-sizing: border-box;
-    margin-bottom: $interiorMarginSm;
-    padding: $interiorMargin $interiorMarginLg;
-}
-
-.l-widget-thumb-wrapper {
-    @extend .l-flex-row;
-    align-items: center;
-    > span { display: block; }
-    .grippy-holder,
-    .view-control {
-        margin-right: $interiorMargin;
-        width: 1em;
-        height: 1em;
-    }
-
-    .widget-thumb {
-        flex: 1 1 auto;
-        width: 100%;
-    }
-}
-
-.rule-title {
-    flex: 0 1 auto;
-    color: pullForward($colorBodyFg, 50%);
-}
-
-.rule-description {
-    flex: 1 1 auto;
-    @include ellipsize();
-    color: pushBack($colorBodyFg, 20%);
-}
-
-.s-widget-rule,
-.s-widget-test-data-item {
-    background-color: rgba($colorBodyFg, 0.1);
-    border-radius: $basicCr;
-}
-
-.widget-thumb {
-    @include ellipsize();
-    @include cSummaryWidget();
-    padding: $interiorMarginSm $interiorMargin;
-}

src/styles/conductor/_constants.scss

@@ -1,11 +0,0 @@
-$ueTimeConductorH: (20px, 3px, 20px); // Heights for Ticks, Data Visualization, Controls elements
-$ueTimeConductorRtH: (20px, 3px, 20px); // Heights for elements in Real-time mode
-$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
-$timeCondInputDeltaDefW: 65px; // Default width for delta value inputs, typically 00:00:00
-$timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
-$timeCondTOIValOffset: 0px;
-$ticksBlockerFadeW: 50px;
-$toiBlockerFadeW: 10px;
-$toiH: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
-$toiPad: 4px;
-$timeCondAxisLROffset: (($toiH / 2) + $toiPad, ($toiH / 2) + $toiPad); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px

src/styles/conductor/_time-conductor-base.scss

@@ -1,494 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, 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 toiLineHovEffects() {
-    &:before,
-    &:after {
-        background-color: $timeControllerToiLineColorHov;
-    }
-}
-
-.l-time-conductor-holder {
-    border-top: 1px solid $colorInteriorBorder;
-    min-width: 500px;
-    padding-top: $interiorMargin;
-}
-
-.time-conductor-icon {
-    $c: $colorObjHdrIc;
-    $d: 18px;
-    height: $d !important;
-    width: $d;
-    position: relative;
-
-    &:before {
-        @extend .ui-symbol;
-        color: $c;
-        content: $glyph-icon-brackets;
-        font-size: $d;
-        line-height: normal;
-        display: block;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-    }
-
-    // Clock hands
-    div[class*="hand"] {
-        $handW: 2px;
-        $handH: $d * 0.4;
-        transform: translate(-50%, -50%);
-        @include animation-iteration-count(infinite);
-        @include animation-timing-function(linear);
-        position: absolute;
-        height: $handW;
-        width: $handW;
-        left: 50%;
-        top: 50%;
-        z-index: 2;
-        &:before {
-            background: $colorObjHdrIc;
-            content: '';
-            display: block;
-            position: absolute;
-            width: 100%;
-            bottom: -1px;
-        }
-        &.hand-little {
-            z-index: 2;
-            @include animation-duration(12s);
-            &:before {
-                height: ceil($handH * 0.7);
-            }
-        }
-        &.hand-big {
-            z-index: 1;
-            @include animation-duration(1s);
-            &:before {
-                height: $handH;
-            }
-        }
-    }
-}
-
-.l-time-conductor {
-    $knobHOffset: 0px;
-    $rangeValPad: $interiorMargin;
-    $rangeValOffset: $sliderKnobW + $interiorMargin;
-    $r1H: nth($ueTimeConductorH, 1);
-    $r2H: nth($ueTimeConductorH, 2);
-    $r3H: nth($ueTimeConductorH, 3);
-    position: relative;
-
-    > .l-row-elem {
-        // First order row elements
-        box-sizing: border-box;
-        width: 100%;
-        position: relative;
-    }
-
-    .mode-selector .s-menu-button,
-    .time-delta {
-        &:before {
-            @extend .ui-symbol;
-        }
-    }
-
-    .time-delta {
-        &:before {
-            color: $colorTimeCondKeyBg;
-        }
-    }
-
-    .l-time-conductor-inputs-holder,
-    .l-time-conductor-inputs-and-ticks,
-    .l-time-conductor-zoom-w {
-        font-size: 0.8rem;
-    }
-
-    .l-time-conductor-inputs-holder {
-        $iconCalendarW: 16px;
-        $wBgColor: $colorBodyBg;
-
-        height: $r1H;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-        pointer-events: none;
-        .l-time-range-w {
-            // Wraps a datetime text input field
-            height: 100%;
-            position: absolute;
-            .title {
-                display: inline-block;
-                margin-right: $interiorMarginSm;
-            }
-            &.start-w {
-                @include background-image(linear-gradient(270deg, rgba($wBgColor,0), rgba($wBgColor,1) $ticksBlockerFadeW));
-                padding-right: $ticksBlockerFadeW;
-                .title:before {
-                    content: 'Start';
-                }
-            }
-            &.end-w {
-                @include background-image(linear-gradient(90deg, rgba($wBgColor,0), rgba($wBgColor,1) $ticksBlockerFadeW));
-                padding-left: $ticksBlockerFadeW;
-                right: 0;
-                .title:before {
-                    content: 'End';
-                }
-            }
-            .l-time-conductor-inputs {
-                pointer-events: auto;
-            }
-            .time-range-input input[type="text"] {
-                width: $timeCondInputTimeSysDefW;
-            }
-            .hrs-min-input input[type="text"] {
-                width: $timeCondInputDeltaDefW;
-            }
-            .icon-calendar {
-                margin-top: 4px;
-            }
-        }
-    }
-
-    .l-time-conductor-inputs-and-ticks {
-        $c: $colorTimeCondTicks;
-        height: $r1H;
-        mct-conductor-axis {
-            display: block;
-            position: relative;
-            width: 100%;
-        }
-        .l-axis-holder {
-            height: $r1H;
-            position: absolute;
-            left: nth($timeCondAxisLROffset, 1);
-            right: nth($timeCondAxisLROffset, 2);
-            svg {
-                text-rendering: geometricPrecision;
-                width: 100%;
-                height: 100%;
-                > g {
-                    // Tick holder
-                    font-size: 0.9em;
-                    transform: translateY(23px);
-                }
-                path,
-                line {
-                    // Line beneath ticks
-                    display: none;
-                }
-                line {
-                    // Tick marks
-                    //stroke: $c;
-                    //transform: translateY(-10px);
-                }
-                text {
-                    // Tick labels
-                    fill: $c;
-                }
-            }
-        }
-    }
-    .l-data-visualization-holder {
-        height: $r2H;
-        z-index: 2; // Must lift above ticks and inputs
-
-        .l-page-button,
-        .l-data-visualization {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-        }
-
-        .l-page-button {
-            @if nth($timeCondAxisLROffset, 1) + nth($timeCondAxisLROffset, 2) > 30 {
-                left: 0;
-                width: nth($timeCondAxisLROffset, 1);
-                &.align-right {
-                    left: auto;
-                    right: 0;
-                    width: nth($timeCondAxisLROffset, 2);
-                }
-            } @else {
-                // Hide these if the offsets aren't enough
-                display: none;
-            }
-        }
-
-        .l-data-visualization {
-            background: $colorTimeCondDataVisBg;
-            left: nth($timeCondAxisLROffset, 1);
-            right: nth($timeCondAxisLROffset, 2);
-            &:hover {
-                .l-toi-holder.hover {
-                    opacity: 1;
-                }
-                .l-toi-holder.pinned.active {
-                    opacity: 0.4;
-                    .l-toi-val {
-                        pointer-events: none;
-                        opacity: 0;
-                    }
-                }
-            }
-        }
-    }
-
-    .l-time-conductor-controls {
-        align-items: center;
-        margin-top: $interiorMarginLg;
-        .l-time-conductor-zoom-w {
-            justify-content: flex-end;
-            .time-conductor-zoom {
-                height: $r3H;
-                min-width: 100px;
-                width: 20%;
-            }
-            .time-conductor-zoom-current-range {
-                color: $colorTick;
-            }
-        }
-    }
-
-    // Real-time, latest modes
-    &.realtime-mode,
-    &.lad-mode {
-        .time-conductor-icon {
-            &:before {
-                color: $colorTimeCondKeyBg;
-            }
-            div[class*="hand"] {
-                @include animation-name(clock-hands);
-                &:before {
-                    background: $colorTimeCondKeyBg;
-                }
-            }
-        }
-
-        .l-time-conductor-inputs-holder {
-            .l-time-range-input-w {
-                .icon-calendar {
-                    display: none;
-                }
-                &.start-date {
-                    display: none;
-                }
-                &.end-date {
-                    // Displays the current time
-                    pointer-events: none;
-                    input[type="text"] {
-                        background: none;
-                        box-shadow: none;
-                        color: pullForward($colorTimeCondKeyBg, 5%);
-                        margin-right: $interiorMargin;
-                        tab-index: -1;
-                    }
-                }
-            }
-        }
-
-        .l-data-visualization {
-            background: $colorTimeCondDataVisRtBg !important;
-        }
-
-        .mode-selector .s-menu-button {
-            $fg: $colorTimeCondKeyFg;
-            @include btnSubtle($bg: $colorTimeCondKeyBg, $bgHov: pullForward($colorTimeCondKeyBg, $ltGamma), $fg: $colorTimeCondKeyFg);
-            &:before {
-                color: $fg !important;
-            }
-        ;
-            color: $fg !important;
-        }
-    }
-
-    // Fixed mode
-    &.fixed-mode {
-        $i: $glyph-icon-calendar;
-        .time-conductor-icon div[class*="hand"] {
-            &.hand-little {
-                transform: rotate(120deg);
-            }
-        }
-        .mode-selector .s-menu-button:before {
-            content: $i;
-        }
-        .l-axis-holder {
-            $angle: 90deg;
-            $c0: rgba($colorBodyFg, 0.1);
-            $c1: rgba($colorBodyFg, 0.1);
-            $c2: transparent;
-            $grabTicksYOffset: 2px;
-            $grabTicksXSpace: 3px;
-            transition: background 150ms ease-in-out;
-            @include cursorGrab();
-            svg {
-                @include background-image(linear-gradient($angle,
-                    $c1 1px, $c2 1px,
-                    $c2 100%
-                ));
-                background-position: center $grabTicksYOffset;
-                background-repeat: repeat-x;
-                background-size: $grabTicksXSpace $r1H - ($grabTicksYOffset * 2);
-            }
-            &:hover {
-                background: $c0;
-            }
-        }
-    }
-
-    // Realtime mode
-    &.realtime-mode {
-        $i: $glyph-icon-clock;
-        .time-conductor-icon div[class*="hand"] {
-            @include animation-name(clock-hands);
-        }
-        .time-delta:before {
-            content: $i;
-        }
-        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
-            content: 'Now';
-        }
-        .mode-selector .s-menu-button:before {
-            content: $i;
-        }
-    }
-
-    // LAD mode
-    &.lad-mode {
-        $i: $glyph-icon-database;
-        .time-conductor-icon div[class*="hand"] {
-            @include animation-name(clock-hands-sticky);
-            &.hand-big {
-                @include animation-duration(5s);
-            }
-            &.hand-little {
-                @include animation-duration(60s);
-            }
-        }
-        .time-delta:before {
-            content: $i;
-        }
-        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
-            content: 'LAD';
-        }
-        .mode-selector .s-menu-button:before {
-            content: $i;
-        }
-    }
-}
-
-/******************************************************************** MOBILE */
-
-@include phoneandtablet {
-    .l-time-conductor-holder {
-        min-width: 0 !important;
-    }
-    .super-menu.mini {
-        width: 200px;
-        height: 100px;
-        .pane.menu-item-description {
-            display: none;
-        }
-    }
-}
-
-@include phone {
-    .l-time-conductor {
-        min-width: 0;
-        .l-time-conductor-inputs-and-ticks {
-            .l-time-conductor-inputs-holder {
-                .l-time-range-w {
-                    background-image: none !important;
-                }
-            }
-            mct-conductor-axis {
-                display: none;
-            }
-        }
-    }
-}
-
-@include phonePortrait {
-    .l-time-conductor {
-        .l-data-visualization,
-        .l-time-conductor-zoom-w,
-        .time-delta {
-            display: none;
-        }
-
-        .l-time-conductor-inputs-and-ticks {
-            height: auto !important;
-            .l-time-conductor-inputs-holder {
-                position: relative;
-                height: auto !important;
-
-                .l-time-range-w {
-                    background-image: none !important;
-                    display: block;
-                    height: auto !important;
-                    padding: 0 !important;
-                    position: relative;
-                    text-align: left;
-                    &:not(:first-child) {
-                        margin-top: $interiorMargin;
-                    }
-                }
-            }
-        }
-
-        // Fixed mode
-        &.fixed-mode {
-            .l-time-conductor-inputs-and-ticks {
-                .l-time-range-w {
-                    .title {
-                        width: 30px;
-                    }
-                }
-            }
-        }
-
-        // Real-time, latest modes
-        &.realtime-mode,
-        &.lad-mode {
-            .l-time-conductor-inputs-and-ticks {
-                .l-time-range-w {
-                    &.start-w {
-                        display: none;
-                    }
-                    &.end-w {
-                        margin-top: 0;
-                        .end-date input[type="text"] {
-                            margin: 0;
-                            text-align: left;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

src/styles/conductor/_time-of-interest.scss

@@ -1,271 +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.
- *****************************************************************************/
-
-mct-include.l-toi-holder,
-.l-toi-holder:after,
-.l-toi-holder:before {
-    display: block;
-    position: absolute;
-}
-
-mct-include.l-toi-holder {
-    $blockerFadeW: $toiBlockerFadeW;
-    transform: translateX(-50%);
-    color: $toiColorBg;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: $toiH;
-    &:not(.pinned) {
-        display: none;
-    }
-
-    &.pinned {
-        display: block;
-    }
-
-    &:before,
-    &:after {
-        // Vertical lines. TC uses both; plot only uses :before
-        border-left: 1px dashed $toiColorBg;
-        box-sizing: border-box;
-        content: '';
-        display: block;
-        left: 50%;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 2px;
-        z-index: 2;
-    }
-
-    .l-toi {
-        // Holds buttons and val. Acts as a blocking element.
-        @include background-image(linear-gradient(90deg, transparent, $toiColorBlocker 10%, $toiColorBlocker 90%, transparent 100%));
-        position: absolute;
-        align-items: center;
-        box-sizing: content-box;
-        height: $toiH;
-        left: $toiPad * -2;
-        transform: translateY(-50%); top: 50%;
-        padding: $toiPad;
-        z-index: 1;
-
-        .l-toi-buttons {
-            @include trans-prop-nice($props: (width, padding), $dur: 250ms);
-            border-radius: $controlCr;
-            box-sizing: content-box;
-            font-size: $toiH;
-            height: 100%;
-            line-height: $toiH;
-            padding: $toiPad;
-            overflow: hidden;
-            white-space: nowrap;
-            justify-content: space-between;
-            width: $toiH;
-
-            &:hover {
-                // Expand and display controls; clock icon changes to resync
-                background-color: $toiColorBg;
-                cursor: pointer;
-                width: 30px;
-
-                .icon-button {
-                    color: rgba($toiColorCtrlFg, 0.5);
-                    opacity: 1;
-                    &:hover {
-                        color: $toiColorCtrlFg;
-                    }
-                }
-
-                .t-button-resync {
-                    order: 1;
-                    &:before {
-                        content: $glyph-icon-resync;
-                    }
-                }
-                .t-button-unpin {
-                    order: 2;
-                    &:hover {
-                        color: $toiColorBgAlert;
-                    }
-                }
-
-                & + .l-toi-val {
-                    // Dim the value to emphasize the controls
-                    opacity: 0.5;
-                }
-            }
-        }
-
-        .icon-button {
-            color: $toiColorBg;
-        }
-
-        .t-button-resync {
-            @extend .icon-clock;
-            &:hover { color: $toiColorCtrlFg; }
-        }
-
-        .t-button-unpin {
-            @include trans-prop-nice($props: opacity, $dur: 150ms);
-            @extend .icon-x-in-circle;
-            float: right;
-            opacity: 0;
-        }
-    }
-
-    .l-toi-val {
-        display: none; // Hide by default; see .show-val below
-    }
-
-    // TOI is showing value as well
-    &.show-val {
-        .l-toi {
-            .l-toi-buttons {
-                order: 1;
-                &:hover {
-                    margin-right: $interiorMarginSm;
-                }
-            }
-            .l-toi-val {
-                @include trans-prop-nice($props: opacity, $dur: 150ms);
-                background-color: $toiColorBg;
-                border-radius: $controlCr;
-                box-sizing: content-box;
-                color: $toiColorFg;
-                display: inline-block;
-                font-size: 0.7rem;
-                font-weight: 400;
-                height: $toiH;
-                line-height: $toiH;
-                order: 2;
-                padding: 1px 3px;
-                white-space: nowrap;
-            }
-        }
-
-        &.val-to-left {
-            .l-toi {
-                left: auto;
-                right: $toiPad * -2;
-
-                .l-toi-buttons {
-                    order: 2;
-                    &:hover {
-                        .t-button-resync { order: 2; }
-                        .t-button-unpin { order: 1; }
-                        margin-left: $interiorMarginSm;
-                    }
-                }
-
-                .l-toi-val {
-                    order: 1;
-                }
-            }
-        }
-    }
-}
-
-
-// TOI in tables
-.tabular,
-table {
-    tbody, .tbody {
-        tr, .tr {
-            &.l-toi-tablerow {
-                border-top: 1px dashed $toiColorBg;
-                z-index: 1;
-                td, .td {
-                    .l-toi-holder {
-                        left: 50% !important;
-                        &:before,
-                        &:after {
-                            display: none;
-                        }
-                        .l-toi {
-                            background: rgba($toiColorBlocker, 0.9);
-                            border-radius: 20%;
-                            height: auto;
-                            padding: $toiPad;
-                            transform: translate(-50%, -50%);
-                            left: 50%; right: auto; top: 0;
-                            .l-toi-buttons {
-                                padding: 1px;
-                                &:hover {
-                                    padding: $toiPad;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-// TOI in plots
-.gl-plot {
-    .gl-plot-wrapper-display-area-and-x-axis {
-        right: nth($plotDisplayArea, 2) + ($toiH / 2) + $toiPad; // Make room for TOI element
-
-        .l-toi-holder {
-            bottom: nth($plotDisplayArea, 3) - $interiorMargin;
-            z-index: 3;
-
-            .l-toi {
-                transform: translateY(100%);
-
-            }
-
-            .l-toi {
-                top: auto;
-                bottom: $toiPad;
-            }
-        }
-    }
-}
-
-// TOI in Time Conductor
-.l-time-conductor {
-    .l-toi-holder {
-        $linesVOffset: 2px;
-        &:before,
-        &:after {
-            // Vertical lines
-            border-left-style: solid;
-            height: ((nth($ueTimeConductorH, 2) - $timeCondTOIIconD)/2) + $linesVOffset;
-        }
-
-        &:before {
-            transform: translate(-50%, $linesVOffset * -1);
-            top: 0px;
-            bottom: auto;
-        }
-
-        &:after {
-            transform: translate(-50%, $linesVOffset);
-            top: auto;
-            bottom: 0px;
-        }
-    }
-}

src/styles/conductor/time-conductor-espresso.scss

@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "constants";
-
-// Thematic constants
-$colorTimeCondTicks: pullForward($colorBodyBg, 30%);
-$colorTimeCondKeyBg: #4e70dc;
-$colorTimeCondKeyFg: #fff;
-$colorTimeCondDataVisBg: pullForward($colorBodyBg, 5%);
-$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
-
-// Time of Interest
-$toiColorBg: #6b93c6;
-$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
-$toiColorFg: #000; // Used by value display
-$toiColorCtrlFg: #fff;
-$toiColorBgAlert: #cf2a12; // Used by unpin button on hover
-$colorTimeCondTOIBg: darken($toiColorBg, 20%);
-$colorTimeCondTOIBgHov: $toiColorBg;
-
-@import "time-conductor-base";
-@import "time-of-interest";

src/styles/conductor/time-conductor-snow.scss

@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "constants";
-
-// Thematic constants
-$colorTimeCondTicks: pullForward($colorBodyBg, 30%);
-$colorTimeCondKeyBg: #6178dc;
-$colorTimeCondKeyFg: #fff;
-$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
-$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);
-
-// Time of Interest
-$toiColorBg: #6b93c6;
-$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
-$toiColorFg: #fff; // Used by value display
-$toiColorCtrlFg: #fff;
-$toiColorBgAlert: #ff9540; // Used by unpin button on hover
-$colorTimeCondTOIBg: darken($toiColorBg, 20%);
-$colorTimeCondTOIBgHov: $toiColorBg;
-
-@import "time-conductor-base";
-@import "time-of-interest";

src/styles/controls/_breadcrumb.scss

@@ -1,31 +0,0 @@
-.l-breadcrumb {
-	$c: darken($colorBodyFg, 15%);
-	$p: 4px;
-	font-size: 0.7rem;
-	line-height: 1em;
-	margin-bottom: $interiorMargin;
-	margin-left: -1 * $p;
-	.l-breadcrumb-item {
-		//@include test();
-		a {
-			box-sizing: border-box;
-			border-radius: $basicCr*.75;
-			@include transition(background-color, 0.25s);
-			color: darken($colorBodyFg, 15%);
-			display: inline-block;
-			//margin-right: $interiorMargin;
-			padding: $p/2 $p;
-			.icon {
-				color: $colorItemTreeIcon;
-				margin-right: $interiorMargin;
-			}
-			&:hover {
-				background: lighten($colorBodyBg, 10%);
-				color: lighten($colorBodyFg, 10%);
-				.icon {
-					color: $colorItemTreeIconHover;
-				}
-			}
-		}
-	}
-}

src/styles/controls/_buttons.scss

@@ -1,140 +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.
- *****************************************************************************/
-$baseRatio: 1.5;
-$pad: $interiorMargin * $baseRatio;
-
-.s-button {
-    @include user-select(none);
-    @include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 0.7rem;
-    text-decoration: none;
-    height: $btnStdH;
-    line-height: $btnStdH;
-    padding: 0 $pad;
-
-	&.lg {
-		font-size: 1rem;
-	}
-
-    &.sm {
-        padding: 0 $pad / $baseRatio;
-    }
-
-    &.vsm {
-        padding: 0 ($pad / $baseRatio) / 2;
-    }
-
-    &.major {
-        @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
-    }
-
-    &.no-label {
-        .label, .title-label { display: none; }
-    }
-
-    &[disabled="true"] {
-        opacity: 0.3;
-    }
-
-    &.pause-play {
-        @extend .icon-pause;
-        &.paused {
-            @include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
-            @extend .icon-play;
-            &:before { @include pulse($dur: 1000ms); }
-        }
-    }
-
-    .icon {
-        font-size: 0.8rem;
-    }
-
-    .title-label {
-        vertical-align: top;
-    }
-}
-
-body.desktop .mini-tab-icon {
-    // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    // Font glyphs set in _layout.scss
-    background-color: $colorMiniTabBg;
-    color: $colorMiniTabFg;
-    cursor: pointer;
-    display: block;
-    font-family: 'symbolsfont';
-    font-size: $uePaneMiniTabFontSize;
-    position: absolute;
-    height: $uePaneMiniTabH; width: $uePaneMiniTabW;
-    line-height: $uePaneMiniTabH;
-    overflow: hidden;
-    text-align: center;
-
-    &:before {
-        display: inline-block;
-    }
-
-    &:hover {
-        background-color: $colorMiniTabBgHov;
-        color: $colorMiniTabFgHov;
-    }
-}
-
-@mixin btnSetButtonFirst() {
-    @include border-left-radius($controlCr);
-    margin-left: 0;
-}
-
-@mixin btnSetButtonLast() {
-    @include border-right-radius($controlCr);
-}
-
-.l-btn-set {
-    // Buttons that have a very tight conceptual grouping - no internal space between them.
-    font-size: 0; // Remove space between s-button elements due to white space in markup
-    white-space: nowrap;
-
-    .s-button {
-        border-radius: 0;
-        margin-left: 1px !important;
-    }
-
-    > .s-button {
-        // Styles for .s-button as immediate descendants in .l-btn-set
-        &:first-child { @include btnSetButtonFirst(); }
-        &:last-child { @include btnSetButtonLast(); }
-    }
-
-    // Must use following due to DOM structure of action buttons,
-    // which have structure like .l-btn-set > mct-representation class=first|last > .s-button
-    .first > .s-button { @include btnSetButtonFirst(); }
-    .last > .s-button { @include btnSetButtonLast(); }
-}
-
-.paused {
-    &:not(.s-button) {
-        border-color: $colorPausedBg !important;
-        color: $colorPausedBg !important;
-    }
-}

src/styles/controls/_controls.scss

@@ -1,878 +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.
- *****************************************************************************/
-
-.accordion {
-    $accordionHeadH: 18px;
-    margin-top: $interiorMargin;
-    &:first-child {
-        margin-top: 0;
-    }
-    .accordion-head {
-        $op: 0.2;
-        border-radius: $basicCr * 0.75;
-        box-sizing: border-box;
-        background: rgba($colorBodyFg, $op);
-        cursor: pointer;
-        font-size: 0.75em;
-        line-height: $accordionHeadH;
-        margin-bottom: $interiorMargin;
-        padding: 0 $interiorMargin;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: auto;
-        left: 0;
-        width: auto;
-        height: $accordionHeadH;
-        text-transform: uppercase;
-        &:hover {
-            background: rgba($colorBodyFg, $op * 2);
-        }
-        &:after {
-            content: "^";
-            display: block;
-            font-family: 'symbolsfont';
-            font-size: 0.9em;
-            position: absolute;
-            right: $interiorMargin;
-            text-transform: none;
-            top: 0;
-        }
-        &:not(.expanded):after {
-            content: "v";
-        }
-    }
-    .accordion-contents {
-        position: absolute;
-        top: $accordionHeadH + $interiorMargin;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-}
-
-// Hyperlink objects
-.s-hyperlink {
-    .label {
-        font-size: 0.8rem !important;
-    }
-    &:not(.s-button) {
-        color: $colorKey;
-        &:hover { color: $colorKeyHov; }
-    }
-}
-
-.s-icon-button {
-    // Clickable icon elements that have hover
-    @extend .ui-symbol;
-    color: $colorClickIcon;
-    &:hover {
-        color: $colorClickIconHov;
-    }
-}
-
-.s-toggle-icon {
-    // Has default (in-active) and .active states
-    @extend .s-icon-button;
-    color: $colorToggleIcon;
-    &:hover { color: rgba($colorToggleIconHov, 0.5); }
-    &.active { color: $colorToggleIconActive; }
-}
-
-.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-control-group {
-    // Buttons that have a conceptual grouping - internal space between, and a divider between groups.
-    box-sizing: border-box;
-    border-left: 1px solid $colorInteriorBorder;
-    display: inline-block;
-    padding: 0 $interiorMargin;
-    position: relative;
-    &:first-child {
-        border-left: none;
-        padding-left: 0;
-    }
-}
-
-
-
-/******************************************************** LOCAL CONTROLS */
-// Controls placed in proximity to or overlaid on components and views
-
-.local-controls-hidden {
-    // Used within .has-local-controls, hidden by default
-
-}
-
-body.desktop .has-local-controls {
-    // Helper class, provides hover ability to show local controls
-
-    &:hover .local-controls-hidden {
-        @include trans-prop-nice($props: opacity, $dur: 50ms);
-        opacity: 1;
-        pointer-events: inherit;
-    }
-
-    .local-controls-hidden {
-        @include trans-prop-nice($props: opacity, $dur: 500ms);
-        opacity: 0;
-        pointer-events: none;
-    }
-}
-
-.h-local-controls {
-    // An explicit outer holder for controls. Typically placed in upper right.
-    align-items: center;
-    font-size: 0.7rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-
-
-    &.h-local-controls-overlay-content {
-        $p: $interiorMargin;
-        position: absolute;
-        top: $p; right: $p;
-        z-index: 2;
-    }
-
-    .l-btn-set,
-    .s-button {
-        &:not(:first-child) {
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-.h-local-controls-overlay-content {
-    background: $colorBodyBg;
-    border-radius: $controlCr + 1;
-    box-sizing: border-box;
-    border-radius: $controlCr;
-    padding: 1px;
-    .s-button {
-        background: $colorBtnBg;
-    }
-}
-
-.h-local-controls-trans {
-    background: rgba($colorTransLucBg, 0.5);
-    padding: $interiorMargin;
-}
-
-/******************************************************** VIEW CONTROLS */
-// Expand/collapse > and v arrows, used in tree and plot legend
-// Moved this over from a tree-only context 5/18/17
-
-.view-control {
-    @extend .ui-symbol;
-    cursor: pointer;
-    height: 1em; width: 1em;
-    line-height: inherit;
-    position: relative;
-    &:before {
-        position: absolute;
-        @include trans-prop-nice(transform, 100ms);
-        content: $glyph-icon-arrow-right-equilateral;
-        @include transform-origin(center);
-    }
-    &.expanded:before {
-        @include transform(rotate(90deg));
-    }
-}
-
-/******************************************************** CUSTOM CHECKBOXES */
-label.checkbox.custom,
-label.radio.custom {
-    $bg: pullForward($colorBodyBg, 10%);
-    $d: $formRowCtrlsH;
-    cursor: pointer;
-    display: inline-block;
-    line-height: 120%;
-    margin-right: $interiorMargin * 4;
-    padding-left: $d + $interiorMargin;
-    position: relative;
-    em {
-        color: $colorBodyFg;
-        display: inline-block;
-        height: $d;
-        width: $d;
-        &:before {
-            border-radius: $basicCr * .75;
-            background: $bg;
-            box-shadow: inset rgba(black, 0.4) 0 1px 2px;
-            box-sizing: border-box;
-            content: "";
-            font-family: 'symbolsfont';
-            font-size: 0.7em;
-            display: inline-block;
-            height: $d;
-            width: $d;
-            left: 0;
-            top: 0;
-            position: absolute;
-            text-align: center;
-        }
-    }
-    &.no-text {
-        overflow: hidden;
-        margin-right: 0;
-        padding-left: 0;
-        height: $d;
-        width: $d;
-        em {
-            overflow: hidden;
-        }
-    }
-    input {
-        display: none;
-        &:checked ~ em:before {
-            background: $colorCheck;
-            color: lighten($colorCheck, 50%);
-        }
-    }
-}
-
-label.checkbox.custom input:checked ~ em:before { content: $glyph-icon-check; }
-label.radio.custom input:checked ~ em:before { content: $glyph-icon-bullet; }
-
-.s-menu-button label.checkbox.custom {
-    margin-left: 5px;
-}
-
-.item .checkbox {
-    &.checked label {
-        box-shadow: none;
-        border-bottom: none;
-    }
-}
-
-label.form-control.checkbox {
-    input {
-        margin-right: $interiorMargin;
-        vertical-align: top;
-    }
-}
-
-/******************************************************** PLACEHOLDERS */
-input[type="text"],
-input[type="search"],
-textarea {
-    @include placeholder {
-        color: rgba($colorInputFg, 0.4);
-        font-style: italic;
-    }
-}
-
-/******************************************************** INPUTS */
-%input-base {
-    @include input-base();
-}
-
-input[type="text"],
-input[type="search"],
-input[type="number"] {
-    @include nice-input();
-    vertical-align: baseline;
-    padding: $inputTextPTopBtm $inputTextPLeftRight;
-    &.numeric {
-        text-align: right;
-    }
-}
-
-.l-input-sm {
-    input[type="text"],
-    input[type="search"],
-    input[type="number"] {
-        width: 50px !important;
-    }
-}
-
-.l-input-lg input[type="text"],
-input[type="text"].lg {  width: 100% !important; }
-.l-input-med input[type="text"],
-input[type="text"].med { width: 200px !important; }
-input[type="text"].sm, input[type="number"].sm {  width: 50px !important; }
-.l-numeric input[type="text"],
-input[type="text"].numeric { text-align: right; }
-
-.l-textarea-sm textarea,
-textarea.sm { position: relative; height: 50px; }
-.l-textarea-med textarea,
-textarea.med { position: relative; height: 150px; }
-.l-textarea-lg textarea,
-textarea.lg { position: relative; height: 300px; }
-
-.input-labeled {
-    // Used in toolbar
-    margin-left: $interiorMargin;
-    label {
-        display: inline-block;
-        margin-right: $interiorMarginSm;
-    }
-    &.inline {
-        display: inline-block;
-    }
-    &:first-child {
-        margin-left: 0;
-    }
-}
-
-*[contenteditable].s-input-inline,
-input[type="text"].s-input-inline,
-.s-input-inline input[type="text"] {
-    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
-    @extend %input-base;
-    @include trans-prop-nice((padding, box-shadow), 250ms);
-    background: none;
-    box-shadow: none;
-    border: 1px solid transparent;
-    min-width: 20px;
-    padding-left: 0;
-    padding-right: 0;
-    &:hover,
-    &:focus {
-        padding-left: $inputTextPLeftRight;
-        padding-right: $inputTextPLeftRight;
-    }
-    &:hover {
-        border-color: rgba($colorBodyFg, 0.2);
-    }
-    &:focus {
-        @include s-input();
-        border-color: transparent;
-    }
-}
-
-/******************************************************** SELECTS */
-.select {
-    @include btnSubtle($bg: $colorSelectBg);
-    @extend .icon-arrow-down; // Context arrow
-    display: inline-block;
-    flex: 0 0 auto; // When used in a flex context, controls need to hold their width
-    padding: 0 $interiorMargin;
-    overflow: hidden;
-    position: relative;
-    select {
-        @include appearance(none);
-        box-sizing: border-box;
-        &:focus { outline: 0; }
-        background: none;
-        color: $colorSelectFg;
-        cursor: pointer;
-        border: none !important;
-        padding: 4px 25px 2px 0px;
-        width: 130%;
-        option {
-            margin: $interiorMargin 0; // Firefox
-        }
-    }
-    &:before {
-        transform: translateY(-50%);
-        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
-        display: block;
-        pointer-events: none;
-        position: absolute;
-        right: $interiorMargin;
-        top: 50%;
-    }
-}
-
-/******************************************************** AUTOCOMPLETE */
-.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;
-        }
-    }
-}
-
-/******************************************************** OBJECT-HEADER */
-.object-header {
-    font-size: 1em;
-
-    > .type-icon {
-        color: $colorObjHdrIc;
-        font-size: 120%;
-        float: left;
-        margin-right: $interiorMargin;
-    }
-
-    .l-elem-wrapper {
-        mct-representation {
-            // Holds the context-available item
-            // Must have min-width to make flex work properly in Safari
-            min-width: 0.7em;
-        }
-    }
-
-    .action {
-        margin-right: $interiorMargin;
-    }
-
-    .title-label {
-        color: $colorObjHdrTxt;
-        @include ellipsize();
-    }
-
-    .context-available-w {
-        z-index: 5;
-    }
-
-    .context-available {
-        font-size: 0.7em;
-        flex: 0 0 1;
-    }
-
-    .t-object-alert {
-        display: none;
-    }
-}
-
-/******************************************************** PROGRESS BAR */
-@include keyframes(progress) {
-    100% { background-position: $progressBarStripeW center; }
-}
-
-@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) {
-    @include background-image(linear-gradient(-90deg,
-        rgba($c, $a) 0%, transparent 50%,
-        transparent 50%, rgba($c, $a) 100%
-    ));
-    background-position: 0 center;
-    background-repeat: repeat-x;
-    background-size: $d 40%;
-}
-
-.l-progress-bar {
-    // Assume will be determinate by default
-    display: inline-block;
-    overflow: hidden;
-    position: relative;
-
-    .progress-amt-holder {
-        @include absPosDefault(1px);
-    }
-    .progress-amt,
-    .progress-amt:before,
-    .progress-amt:after {
-        @include absPosDefault();
-        display: block;
-        content: '';
-    }
-
-    .progress-amt {
-        right: auto; // Allow inline width to control }
-    }
-
-    &.indeterminate {
-        .progress-amt {
-            width: 100% !important;
-        }
-    }
-}
-
-.s-progress-bar {
-    border-radius: $basicCr;
-    @include boxIncised(0.3, 4px);
-    background: $colorProgressBarOuter;
-    .progress-amt {
-        border-radius: $basicCr;
-        @include boxShdw();
-        border-radius: $basicCr - 1;
-        @include trans-prop-nice(width);
-        &:before {
-            background-color: $colorProgressBarAmt;
-        }
-        &:after {
-            // Sheen
-            @include background-image(linear-gradient(
-                    transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
-            ));
-        }
-    }
-
-    &:not(.indeterminate) {
-        .progress-amt:before {
-            // More subtle anim for determinate progress
-            @include animation(progress .4s linear infinite);
-            @include bgProgressAnim(#fff, 0.1, $progressBarStripeW);
-        }
-    }
-
-    &.indeterminate .progress-amt {
-        &:before {
-            // More visible std diag stripe anim for indeterminate progress
-            @include animation(progress .6s linear infinite);
-            @include bgDiagonalStripes(#fff, 0.2, $progressBarStripeW);
-        }
-        &:after { display: none; }
-    }
-}
-
-/******************************************************** SLIDERS */
-.slider {
-    $knobH: 100%;
-    .slot {
-        width: auto;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-    .knob {
-        @include trans-prop-nice-fade(.25s);
-        background-color: $sliderColorKnob;
-        &:hover {
-            background-color: $sliderColorKnobHov;
-        }
-        position: absolute;
-        height: $knobH;
-        width: $sliderKnobW;
-        top: 0;
-        auto: 0;
-        bottom: auto;
-        left: auto;
-    }
-    .knob-l {
-        @include border-left-radius($sliderKnobR);
-        cursor: w-resize;
-    }
-    .knob-r {
-        @include border-right-radius($sliderKnobR);
-        cursor: e-resize;
-    }
-    .range {
-        @include trans-prop-nice-fade(.25s);
-        background-color: $sliderColorRange;
-        cursor: ew-resize;
-        position: absolute;
-        top: 0;
-        right: auto;
-        bottom: 0;
-        left: auto;
-        height: auto;
-        width: auto;
-        &:hover {
-            background-color: $sliderColorRangeHov;
-        }
-    }
-}
-
-@mixin sliderKnob() {
-    $h: 16px;
-    cursor: pointer;
-    width: floor($h/1.75);
-    height: $h;
-    margin-top: 1 + floor($h/2) * -1;
-    @include btnSubtle(pullForward($colorBtnBg, 10%));
-}
-
-@mixin sliderKnobRound() {
-    $h: 12px;
-    cursor: pointer;
-    width: $h;
-    height: $h;
-    margin-top: 1 + floor($h/2) * -1;
-    @include btnSubtle(pullForward($colorBtnBg, 20%));
-    border-radius: 50% !important;
-}
-
-input[type="range"] {
-    // HTML5 range inputs
-    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-    background: transparent; /* Otherwise white in Chrome */
-    &:focus {
-        outline: none; /* Removes the blue border. */
-    }
-
-    // Thumb
-    &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        @include sliderKnobRound();
-    }
-    &::-moz-range-thumb {
-        border: none;
-        @include sliderKnobRound();
-    }
-    &::-ms-thumb {
-        border: none;
-        @include sliderKnobRound();
-    }
-
-    // Track
-    &::-webkit-slider-runnable-track {
-        width: 100%;
-        height: 3px;
-        @include sliderTrack();
-    }
-
-    &::-moz-range-track {
-        width: 100%;
-        height: 3px;
-        @include sliderTrack();
-    }
-}
-
-/******************************************************** DATETIME PICKER */
-.l-datetime-picker {
-    $r1H: 15px;
-    @include user-select(none);
-    font-size: 0.8rem;
-    padding: $interiorMarginLg !important;
-    .l-month-year-pager {
-        $pagerW: 20px;
-        height: $r1H;
-        margin-bottom: $interiorMargin;
-        position: relative;
-        .pager,
-        .val {
-            @extend .abs;
-        }
-        .pager {
-            width: $pagerW;
-            @extend .ui-symbol;
-            &.prev {
-                @extend .icon-arrow-left;
-                right: auto;
-            }
-            &.next {
-                @extend .icon-arrow-right;
-                left: auto;
-                text-align: right;
-            }
-        }
-        .val {
-            text-align: center;
-            left: $pagerW + $interiorMargin;
-            right: $pagerW + $interiorMargin;
-        }
-    }
-    .l-calendar,
-    .l-time-selects {
-        border-top: 1px solid $colorInteriorBorder
-    }
-    .l-time-selects {
-        line-height: inherit;
-    }
-}
-
-/******************************************************** CALENDAR */
-.l-calendar {
-    $colorMuted: pushBack($colorMenuFg, 30%);
-    ul.l-cal-row {
-        display: flex;
-        flex-flow: row nowrap;
-        margin-top: 1px;
-        &:first-child {
-            margin-top: 0;
-        }
-        li {
-            flex: 1 0;
-            margin-left: 1px;
-            padding: $interiorMargin;
-            text-align: center;
-            &:first-child {
-                margin-left: 0;
-            }
-        }
-        &.l-header li {
-            color: $colorMuted;
-        }
-        &.l-body li {
-            @include trans-prop-nice(background-color, .25s);
-            cursor: pointer;
-            &.in-month {
-                background-color: $colorCalCellInMonthBg;
-            }
-            .sub {
-                color: $colorMuted;
-                font-size: 0.8em;
-            }
-            &.selected {
-                background: $colorCalCellSelectedBg;
-                color: $colorCalCellSelectedFg;
-                .sub {
-                    color: inherit;
-                }
-            }
-            &:hover {
-                background-color: $colorCalCellHovBg;
-                color: $colorCalCellHovFg;
-                .sub {
-                    color: inherit;
-                }
-            }
-        }
-    }
-}
-
-@include phone {
-    .l-datetime-picker {
-        padding: $interiorMargin !important;
-    }
-    .l-calendar {
-        ul.l-cal-row {
-            li {
-                padding: 2px $interiorMargin;
-            }
-        }
-    }
-}
-
-/******************************************************** TEXTAREA */
-textarea {
-    @include nice-textarea($colorInputBg, $colorInputFg);
-    position: absolute;
-    height: 100%;
-    width: 100%;
-}
-
-/******************************************************** MISC */
-.context-available {
-    @extend .icon-arrow-down;
-    color: $colorKey;
-    &:hover {
-        color: $colorKeyHov;
-    }
-}
-
-.view-switcher,
-.t-btn-view-large {
-    @include trans-prop-nice-fade($controlFadeMs);
-}
-
-.view-control {
-    @extend .icon-arrow-right;
-    cursor: pointer;
-    font-size: 0.75em;
-    width: $treeVCW;
-    &:before {
-        // Arrow glyph
-        left: 50%;
-        position: absolute;
-        @include trans-prop-nice(transform, 100ms);
-        transform: translateX(-50%);
-        transform-origin: center;
-    }
-    &.expanded:before {
-        transform: translateX(-50%) rotate(90deg);
-    }
-}
-
-.grippy,
-.grippy-sm,
-.drag-vertical,
-.drag-vertical-sm {
-    cursor: move;
-}
-
-.drag-vertical {
-    @extend .icon-list-view;
-}
-
-.drag-vertical-sm {
-    @extend .icon-list-view-12px;
-}
-
-.grippy {
-    // Used in Summary Widgets
-    @extend .icon-grippy;
-}
-
-.grippy-sm {
-    // Used in editor Elements pool
-    @extend .icon-grippy-12px;
-}
-
-/******************************************************** BROWSER ELEMENTS */
-body.desktop {
-    ::-webkit-scrollbar {
-        box-sizing: border-box;
-        box-shadow: inset $scrollbarTrackShdw;
-        background-color: $scrollbarTrackColorBg;
-        height: $scrollbarTrackSize;
-        width: $scrollbarTrackSize;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        box-sizing: border-box;
-        background: $scrollbarThumbColor;
-        &:hover { background: $scrollbarThumbColorHov; }
-    }
-
-    .overlay ::-webkit-scrollbar-thumb {
-        background: $scrollbarThumbColorOverlay;
-        &:hover { background: $scrollbarThumbColorOverlayHov; }
-    }
-
-    .menu ::-webkit-scrollbar-thumb {
-        background: $scrollbarThumbColorMenu;
-        &:hover { background: $scrollbarThumbColorMenuHov; }
-    }
-
-    ::-webkit-scrollbar-corner {
-        background: $scrollbarTrackColorBg;
-    }
-}
-

src/styles/controls/_indicators.scss

@@ -1,147 +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.
- *****************************************************************************/
-
-/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */
-
-.h-indicator,
-mct-indicators mct-include {
-    display: inline; // Fallback for display: contents
-    display: contents;
-}
-
-.ls-indicator {
-    $bg: rgba(white, 0.2) !important;
-    $hbg: $colorStatusBarBg;
-    $hshdw: rgba(white, 0.4) 0 0 3px;
-    $br: $controlCr;
-    $hoverYOffset: -35px;
-    background: transparent !important;
-    border-radius: $br;
-    display: inline-block;
-    position: relative;
-    padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
-
-    &:before {
-        display: inline-block;
-    }
-
-    .label {
-        display: inline-block;
-        a,
-        button,
-        .s-button {
-            // Make <a> in label look like buttons
-            @include trans-prop-nice($props: all, $dur: 100ms);
-            background: transparent;
-            border: 1px solid rgba($colorStatusBarFg, 0.5);
-            border-radius: $br;
-            box-sizing: border-box;
-            color: inherit;
-            font-size: inherit;
-            height: auto;
-            line-height: normal;
-            padding: 0 2px;
-            &:hover {
-                background: $bg;
-                color: #fff;
-            }
-        }
-
-        [class*='icon-'] {
-            // If any elements within label include the class 'icon-*' then deal with their :before's
-            &:before {
-                font-size: 0.8em;
-                margin-right: $interiorMarginSm;
-            }
-        }
-
-        button { text-transform: uppercase !important; }
-    }
-
-    &.no-collapse {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-
-        > *,
-        &:before {
-            flex: 1 1 auto;
-        }
-
-        &:before {
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &:not(.no-collapse) {
-        z-index: 0;
-
-        &:before {
-            margin-right: 0 !important;
-        }
-
-        .label {
-            transition: all 250ms ease-in 100ms;
-            background: $hbg;
-            border-radius: $br;
-            font-size: .6rem;
-            left: 0;
-            bottom: 140%;
-            opacity: 0;
-            padding: $interiorMarginSm $interiorMargin;
-            position: absolute;
-            transform-origin: 10px 100%;
-            transform: scale(0.0);
-            white-space: nowrap;
-            &:before {
-                // Infobubble-style arrow element
-                content: '';
-                display: block;
-                position: absolute;
-                top: 100%;
-                @include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
-            }
-        }
-
-        &:hover {
-            background: $bg;
-            z-index: 1;
-            .label {
-                opacity: 1;
-                transform: scale(1.0);
-                transition: all 100ms ease-out 0s;
-            }
-        }
-    }
-
-    &.float-right {
-        float: right;
-    }
-}
-
-/* Mobile */
-// Hide the clock indicator when we're phone portrait
-body.phone.portrait {
-    .ls-indicator.t-indicator-clock {
-        display: none;
-    }
-}

src/styles/controls/_lists.scss

@@ -1,39 +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.
- *****************************************************************************/
-.checkbox-list {
-	label.checkbox.custom {
-		display: block;
-		margin-bottom: $interiorMargin;
-	}
-	li {
-		margin-bottom: $interiorMargin;
-	}
-}
-
-.l-tree-item-flat-list {
-	// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
-	.tree-item {
-		.t-object-label {
-			left: $interiorMargin !important;
-		}
-	}
-}

src/styles/controls/_menus.scss

@@ -1,331 +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.
- *****************************************************************************/
-/******************************************************** MENU BUTTONS */
-.s-menu-button {
-    // Formerly .btn-menu
-    @extend .s-button;
-    span.l-click-area {
-        // In markup, this element should not enclose anything.
-        @extend .abs;
-    }
-
-    .icon {
-        font-size: 16px;
-    }
-
-    .title-label {
-        margin-left: $interiorMarginSm;
-    }
-
-    .icon-swatch,
-    .color-swatch {
-        // Used in color menu buttons in toolbar
-        $d: 10px;
-        display: inline-block;
-        border: 1px solid rgba($colorBtnFg, 0.2);
-        height: $d; width: $d;
-        line-height: $d;
-        vertical-align: middle;
-        margin-left: $interiorMarginSm;
-        margin-top: -2px;
-        &:not(.no-selection) {
-            border-color: transparent;
-        }
-    }
-
-    &:after {
-        // Adds the downward facing 'context available / invoke menu' arrow element
-        @include contextArrow();
-        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
-    }
-
-    &.create-button {
-        @extend .icon-plus;
-        .title-label {
-            font-size: 1rem;
-        }
-    }
-
-    .menu {
-        left: 0;
-        text-align: left;
-    }
-}
-
-/******************************************************** MENUS THEMSELVES */
-.menu-element {
-    cursor: pointer;
-    position: relative;
-}
-
-.s-menu {
-    border-radius: $basicCr;
-    @include containerSubtle($colorMenuBg, $colorMenuFg);
-    @include boxShdw($shdwMenu);
-    @include txtShdw($shdwMenuText);
-    padding: $interiorMarginSm 0;
-}
-
-.menu {
-    border-radius: $basicCr;
-    @include containerSubtle($colorMenuBg, $colorMenuFg);
-    @include boxShdw($shdwMenu);
-    @include txtShdw($shdwMenuText);
-    padding: $interiorMarginSm 0;
-    display: block;
-    position: absolute;
-    z-index: 10;
-    ul {
-        @include menuUlReset();
-        li {
-            box-sizing: border-box;
-            border-top: 1px solid pullForward($colorMenuBg, 10%);
-            color: $colorMenuFg;
-            line-height: $menuLineH;
-            padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-            position: relative;
-            white-space: nowrap;
-            &:first-child {
-                border: none;
-            }
-            &:hover {
-                background: $colorMenuHovBg;
-                color: $colorMenuHovFg;
-                &:before {
-                    color: $colorMenuHovIc;
-                }
-            }
-            &:before {
-                @extend .ui-symbol;
-                @extend .type-icon;
-                @extend .icon;
-                display: inline-block;
-                left: $interiorMargin * 2;
-            }
-        }
-    }
-}
-
-.menu,
-.icon-menu,
-.context-menu,
-.super-menu,
-.s-menu-button .menu {
-    pointer-events: auto;
-    ul li {
-        a.menu-item-a {
-            color: $colorMenuFg;
-            display: block;
-        }
-        &:before,
-        a.menu-item-a:before {
-            color: $colorMenuIc;
-            left: $interiorMargin;
-        }
-    }
-}
-
-.checkbox-menu {
-    // Used in search dropdown in tree
-    @extend .context-menu;
-    ul li {
-        padding-left: 50px;
-        .checkbox {
-            $d: 0.7rem;
-            position: absolute;
-            left: $interiorMargin;
-            top: ($menuLineH - $d) / 1.5;
-            em {
-                height: $d;
-                width: $d;
-                &:before {
-                    font-size: 7px !important;
-                    height: $d;
-                    width: $d;
-                    line-height: $d;
-                }
-            }
-        }
-        &:before {
-            // Type icon
-            left: 25px;
-        }
-    }
-}
-
-.super-menu,
-.super-menu > mct-representation,
-.super-menu > .contents {
-    box-sizing: border-box;
-    display: block;
-    position: relative;
-}
-
-.super-menu {
-    $plw: 50%;
-    $prw: 100% - $plw;
-    position: absolute;
-    .w-menu {
-        align-items: stretch;
-        display: flex;
-        flex-direction: row;
-        margin: $interiorMarginLg;
-    }
-    .col {
-        box-sizing: border-box;
-        flex: 1 1 auto;
-        overflow-x: hidden;
-        &.menu-items {
-            border-right: 1px solid pullForward($colorMenuBg, 10%);
-            overflow-y: auto;
-            padding-right: $interiorMargin;
-            width: $plw;
-            ul {
-                li {
-                    border-radius: $controlCr;
-                    padding-left: 30px;
-                    border-top: none;
-                }
-            }
-        }
-        &.menu-item-description {
-            $p: $interiorMargin * 3;
-            overflow-y: hidden;
-            padding: $p $p 0 $p;
-            width: $prw;
-
-            .desc-area {
-                &.icon {
-                    color: $colorCreateMenuLgIcon;
-                    position: relative;
-                    text-align: center;
-                }
-                &.title {
-                    color: $colorCreateMenuText;
-                }
-                &.description {
-                    color: pushBack($colorCreateMenuText, 20%);
-                    font-size: 0.8em;
-                    line-height: 1.5em;
-                }
-            }
-        }
-    }
-
-    .w-title-desc {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden; // Height set in specific menu instances
-    }
-
-    // Specific menu instances
-    &.l-create-menu {
-        width: 500px;
-        .col {
-            max-height: 70vh;
-        }
-        .w-title-desc {
-            height: 190px;
-        }
-        .desc-area {
-            &.icon {
-                font-size: 8em;
-                height: 135px;
-                margin-bottom: $interiorMargin * 3;
-            }
-            &.title {
-                font-size: 1.2em;
-                margin-bottom: $interiorMargin * 2;
-            }
-        }
-    }
-
-    &.mini {
-        width: 400px;
-        .col {
-            max-height: 50vh;
-            &.menu-items {
-                font-size: 0.8em;
-            }
-            &.menu-item-description {
-                $p: $interiorMargin * 2;
-                padding: $p $p 0 $p;
-            }
-        }
-        .w-title-desc {
-            height: 180px;
-        }
-        .desc-area {
-            &.icon {
-                font-size: 4em;
-                height: 70px;
-                margin-bottom: $interiorMargin * 3;
-            }
-            &.title {
-                font-size: 1em;
-                margin-bottom: $interiorMargin * 2;
-            }
-        }
-    }
-}
-
-.context-menu {
-    font-size: 0.80rem;
-}
-
-.context-menu-holder,
-.menu-holder {
-    position: absolute;
-    z-index: 120;
-    .context-menu-wrapper {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-    }
-    &.go-left .context-menu,
-    &.go-left .menu {
-        right: 0;
-    }
-    &.go-up .context-menu,
-    &.go-up .menu {
-        bottom: 0;
-    }
-}
-
-.context-menu-holder {
-    pointer-events: none;
-    height: 200px;
-    width: 170px;
-}
-
-.btn-bar.right .menu,
-.menus-to-left .menu {
-    z-index: 79;
-    left: auto;
-    right: 0;
-    width: auto;
-}
-
-.menus-up .menu {
-    bottom: $btnStdH;
-    top: auto;
-}

src/styles/controls/_messages.scss

@@ -1,299 +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 statusBannerColors($bg, $fg: $colorStatusFg) {
-	$bgPb: 10%;
-	$bgPbD: 10%;
-	background-color: darken($bg, $bgPb);
-	color: $fg;
-	&:hover {
-		background-color: darken($bg, $bgPb - $bgPbD);
-	}
-	.s-action {
-		background-color: darken($bg, $bgPb + $bgPbD);
-		&:hover {
-			background-color: darken($bg, $bgPb);
-		}
-	}
-}
-
-/******************************************************************* MESSAGE BANNERS */
-.message {
-	&.block {
-		border-radius: $basicCr;
-		padding: $interiorMarginLg;
-	}
-	&.error {
-		background-color: rgba($colorAlert,0.3);
-		color: lighten($colorAlert, 20%);
-	}
-}
-
-.l-message-banner {
-	$m: $interiorMarginSm;
-	$lh: $ueFooterH - ($m*2) - 1;
-	box-sizing: border-box;
-	@include ellipsize();
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	position: absolute;
-	top: $m; right: auto; bottom: $m; left: 50%;
-	height: auto; width: auto;
-	line-height: $lh;
-	max-width: 300px;
-	padding: 0 $interiorMargin 0 $interiorMargin;
-	transform: translateX(-50%);
-
-	&.minimized {
-        @include transition-property(left, opacity);
-        @include transition-duration(0.3s);
-        @include transition-timing-function(ease-in-out);
-		left: 0;
-        opacity: 0;
-	}
-
-    &.new {
-        left: 50%;
-        opacity: 1;
-        &:not(.info) {
-            @include pulse($dur: 100ms, $iteration: 10);
-        }
-    }
-
-	.banner-elem {
-		flex: 0 1 auto;
-		margin-left: $interiorMargin;
-	}
-	a {
-		display: inline-block;
-	}
-	.l-action {
-		line-height: $lh - 3;
-		padding: 0 $interiorMargin;
-	}
-    .close {
-		cursor: pointer;
-        font-size: 7px;
-		width: 8px;
-    }
-	.l-progress-bar {
-		$h: $lh - 10;
-		height: $h;
-		line-height: $h;
-		width: 100px;
-	}
-    .progress-info { display: none; }
-	z-index: 10;
-}
-
-.s-message-banner {
-	border-radius: $controlCr;
-	@include statusBannerColors($colorStatusDefault, $colorStatusFg);
-	cursor: pointer;
-	a { color: inherit; }
-	.s-action {
-		border-radius: $basicCr;
-        @include trans-prop-nice(background-color);
-	}
-	.close {
-		opacity: 0.5;
-		&:hover {
-			opacity: 1;
-		}
-	}
-	&.ok,
-    &.info {
-		@include statusBannerColors($colorInfo);
-	}
-	&.caution,
-    &.warning,
-    &.alert {
-		@include statusBannerColors($colorWarningLo);
-	}
-    &.error {
-        @include statusBannerColors($colorWarningHi);
-    }
-}
-
-/******************************************************************* MESSAGES */
-
-/* Contexts:
-    In .t-message-list
-    In .overlay as a singleton
-    Inline in the view area
- */
-
-// Archetypal message
-.l-message {
-    $iconW: 32px;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    padding: $interiorMarginLg;
-
-    &:before {
-        // Icon
-        flex: 0 1 auto;
-        @include txtShdw($shdwStatusIc);
-        @extend .icon-bell;
-        color: $colorStatusDefault;
-        font-size: $iconW;
-        width: $iconW + 2;
-        margin-right: $interiorMarginLg;
-    }
-
-    &.message-severity-info:before {
-        @extend .icon-info;
-        color: $colorInfo;
-    }
-
-    &.message-severity-alert:before {
-        color: $colorWarningLo;
-    }
-
-    &.message-severity-error:before {
-        @extend .icon-alert-rect;
-        color: $colorWarningHi;
-    }
-}
-
-
-.w-message-contents {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-
-    > div,
-    > span {
-        margin-bottom: $interiorMargin;
-    }
-
-    .message-body {
-        flex: 1 1 100%;
-    }
-}
-
-// Singleton in an overlay dialog
-.t-message-single .l-message,
-.t-message-single.l-message {
-        $iconW: 80px;
-        @include absPosDefault();
-        padding: 0;
-        &:before {
-            font-size: $iconW;
-            width: $iconW + 2;
-        }
-        .title {
-            font-size: 1.2em;
-        }
-}
-
-// Singleton inline in a view
-.t-message-inline .l-message,
-.t-message-inline.l-message {
-    border-radius: $controlCr;
-    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
-    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
-    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
-
-    .w-message-contents.l-message-body-only {
-        .message-body {
-            margin-top: $interiorMargin;
-        }
-    }
-}
-
-// In a list
-.t-message-list {
-    @include absPosDefault();
-    display: flex;
-    flex-direction: column;
-
-    > div,
-    > span {
-        margin-bottom: $interiorMargin;
-    }
-
-    .w-messages {
-        flex: 1 1 100%;
-        overflow-y: auto;
-        padding-right: $interiorMargin;
-    }
-    // Each message
-    .l-message {
-        border-radius: $controlCr;
-        background: rgba($colorOvrFg, 0.1);
-        margin-bottom: $interiorMargin;
-        .hint,
-        .bottom-bar {
-            text-align: left;
-        }
-    }
-
-}
-
-@include phonePortrait {
-    .t-message-single .l-message,
-    .t-message-single.l-message {
-        flex-direction: column;
-        &:before {
-            margin-right: 0;
-            margin-bottom: $interiorMarginLg;
-            text-align: center;
-            width: 100%;
-        }
-
-        .bottom-bar {
-            text-align: center;
-            .s-button {
-                display: block;
-                width: 100%;
-            }
-        }
-    }
-}
-
-body.desktop .t-message-list {
-    .w-message-contents { padding-right: $interiorMargin; }
-}
-
-// Alert elements in views
-.s-unsynced {
-    $c: $colorPausedBg;
-    border: 1px solid $c;
-}
-
-.s-status-timeconductor-unsynced {
-    // Plot areas
-    .gl-plot .gl-plot-display-area {
-        @extend .s-unsynced;
-    }
-
-    // Object headers
-    .object-header {
-        .t-object-alert {
-            display: inline;
-        }
-    }
-}
-

src/styles/controls/_palette.scss

@@ -1,89 +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-palette {
-	box-sizing: border-box;
-	padding: $interiorMargin !important;
-}
-
-.l-palette-row {
-    $d: 16px;
-    $m: 1;
-    $colorsPerRow: 10;
-    display: flex;
-    flex-wrap: wrap;
-    line-height: $d;
-    width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
-
-    &.l-option-row {
-        margin-bottom: $interiorMargin;
-        .s-palette-item {
-            border-color: $colorPaletteFg;
-        }
-    }
-
-    .l-palette-item {
-        box-sizing: border-box;
-        display: block;
-        height: $d; width: $d;
-        min-width: $d;
-        line-height: $d * 0.9;
-        margin: 0 ($m * 1px) ($m * 1px) 0;
-        position: relative;
-        text-align: center;
-    }
-}
-
-.s-palette-item {
-    border: 1px solid transparent;
-    color: $colorPaletteFg;
-    text-shadow: $shdwPaletteFg;
-    @include trans-prop-nice-fade(0.25s);
-    &:hover {
-        @include trans-prop-nice-fade(0);
-        border-color: $colorPaletteSelected !important;
-    }
-    &.selected {
-        border-color: $colorPaletteSelected;
-        box-shadow: $shdwPaletteSelected; //Needed to see selection rect on light colored swatches
-    }
-}
-
-.l-palette-item-label {
-    margin-left: $interiorMargin;
-}
-
-.l-inline-palette {
-    .l-palette-row {
-        width: 100%;
-        .l-palette-item {
-            //@include display(flex);
-            @include flex(1 0 auto);
-            margin: 1px;
-            min-width: auto;
-            width: auto;
-            &:before {
-                content: '';
-                padding-top: 75%;
-            }
-        }
-    }
-}

src/styles/controls/_ticks.scss

@@ -1,53 +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.
- *****************************************************************************/
-.wrapper-ticks {
-//	@include test();
-	height: $ticksH; //temp!
-	position: relative;
-}
-
-.tick {
-	line-height: $tickLblH;
-	position: absolute;
-	top: 0; right: auto; bottom: 0; left: auto;
-	z-index: 2;
-	&.no-label .label { display: none; }
-	&:before {
-		background: rgba(#fff, 0.3);
-//		border-bottom: 1px solid blue;
-		content: "";
-		display: block;
-		position: absolute;
-		top: 0; right: auto; bottom: auto; left: auto;
-		height: $tickH; width: $tickW;
-	}
-	.label {
-//		@include test();
-		font-size: 0.6em;
-		position: absolute;
-		text-align: center;
-		height: $tickLblH; width: $tickLblW;
-		margin-left: -1 * $tickLblW / 2;
-		top: auto; right: auto; bottom: 0; left: 0;
-
-	}
-}

src/styles/core.scss

@@ -1,25 +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 "vendor/normalize.min.css";
-@import "startup-base";
-@import "openmct";

src/styles/edit/_editor.scss

@@ -1,109 +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.
- *****************************************************************************/
-.t-edit-handle-holder { display: none; }
-
-.l-grid-holder {
-    display: none;
-    @extend .abs;
-    pointer-events: none;
-    z-index: 0;
-    .l-grid {
-        @extend .abs;
-        &.l-grid-y { background-position: 0 1px; }
-    }
-}
-
-.s-status-editing {
-    $handleD: 5px;
-    .t-edit-handle-holder { display: block; }
-    .edit-corner,
-    .edit-handle {
-        position: absolute;
-        z-index: 2;
-    }
-
-    .edit-corner {
-        background: rgba($colorSelectableSelectedPrimary, 0.5);
-        cursor: crosshair;
-        display: none; // Hide by default
-        border: 1px solid $colorSelectableSelectedPrimary;
-        width: $handleD;
-        height: $handleD;
-        $o: (-1 * $handleD) + 1px;
-        &:hover {
-            z-index: 11;
-        }
-        &.edit-resize-nw { top: $o; left: $o; }
-        &.edit-resize-ne { top: $o; right: $o; }
-        &.edit-resize-se { bottom: $o; right: $o; }
-        &.edit-resize-sw { bottom: $o; left: $o; }
-    }
-
-    .edit-handle.edit-move {
-        // main move box for the whole frame element
-        $m: 0;
-        left: $m;
-        right: $m;
-        top: $m;
-        bottom: $m;
-        z-index: 1;
-    }
-
-    .frame.child-frame.panel {
-        &:hover {
-            .view-switcher {
-                opacity: 1;
-            }
-        }
-    }
-
-    // Editing Grids
-    .l-grid-holder {
-        .l-grid {
-            &.l-grid-x { @include bgTicks($colorGridLines, 'x'); }
-            &.l-grid-y { @include bgTicks($colorGridLines, 'y'); }
-        }
-    }
-
-    // Display grid when selected or selection parent.
-    [s-selected] .l-grid-holder,
-    [s-selected-parent] .l-grid-holder {
-        display: block;
-    }
-
-    // Display in nested frames...
-    .t-frame-outer {
-        // ...when drilled in or selection parent...
-        &.s-drilled-in, &[s-selected-parent] {
-            .l-grid-holder {
-                display: block;
-            }
-            .t-frame-outer:not(.s-drilled-in) .l-grid-holder {
-                display: none;
-            }
-        }
-        // ...but hide otherwise.
-        .l-grid-holder {
-            display: none;
-        }
-    }
-}

src/styles/features/_imagery.scss

@@ -1,215 +0,0 @@
-.l-image-main-wrapper,
-.l-image-thumbs-wrapper,
-.image-main {
-	@include absPosDefault(0, false);
-}
-
-/*************************************** MAIN LAYOUT */
-.l-image-main-wrapper {
-	@if $enableImageryThumbs == true {
-		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
-	}
-	min-width: 150px;
-	.l-image-main {
-        margin-bottom: $interiorMargin;
-	}
-	.l-image-main-controlbar {
-        &.l-flex-row { align-items: center; }
-	}
-}
-
-.l-image-thumbs-wrapper {
-	top: auto;
-	min-height: $imageThumbsWrapperH;
-	max-height: 60%;
-	box-sizing: border-box;
-}
-
-.l-date,
-.l-time,
-.l-timezone {
-	display: inline-block;
-}
-
-/*************************************** MAIN IMAGE */
-
-.image-main,
-.l-image-thumb-item .l-thumb {
-	background-size: contain;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
-.l-image-main-controlbar {
-	font-size: 0.8em;
-	line-height: inherit;
-	.l-datetime-w, .l-controls-w {
-		direction: rtl;
-		overflow: hidden;
-	}
-	.l-datetime-w {
-        @include ellipsize();
-        margin-right: $interiorMarginSm;
-		text-align: left;
-	}
-	.l-controls-w {
-		z-index: 2;
-	}
-	.l-date,
-	.l-time {
-		color: pullForward($colorBodyFg, 20%);
-	}
-	.l-mag {
-		direction: ltr;
-		display: inline-block;
-		&:before {
-			content: "\000049";
-		}
-	}
-	.s-mag {
-		color: pushBack($colorBodyFg, 20%);
-	}
-	.l-btn.show-thumbs {
-		display: none;
-	}
-}
-
-.s-image-main {
-    background-color: $colorPlotBg;
-	border: 1px solid transparent;
-	&.paused {
-		@extend .s-unsynced;
-	}
-}
-
-/*************************************** THUMBS */
-
-.l-image-thumbs-wrapper {
-	overflow-x: hidden;
-	overflow-y: auto;
-	padding-bottom: $interiorMargin;
-	white-space: nowrap;
-}
-
-.l-image-thumb-item {
-	@include transition(background-color, 0.25s);
-	box-sizing: border-box;
-    cursor: pointer;
-    direction: ltr;
-    display: inline-block;
-    float: left;
-    font-size: 0.8em;
-	padding: 1px;
-    margin-left: $interiorMarginSm;
-    position: relative;
-    text-align: left;
-    width: $imageThumbsD + $imageThumbPad*2;
-    white-space: normal;
-	.l-thumb,
-	.l-date,
-	.l-time {
-		display: inline-block;
-	}
-	.l-date,
-	.l-time {
-		padding: 2px 3px;
-	}
-
-	&:hover {
-		background: $colorThumbHoverBg;
-		.l-date,
-		.l-time {
-			color: #fff;
-		}
-	}
-	&.selected {
-		background: $colorKeySelectedBg;
-		.l-date,
-		.l-time {
-			color: #fff;
-		}
-	}
-	.l-thumb {
-		background-color: rgba(#fff, 0.1);
-		height: $imageThumbsD;
-		width: $imageThumbsD;
-		margin-top: 0;
-	}
-}
-
-/*************************************** LOCAL CONTROLS */
-.t-imagery {
-	.h-local-controls.h-local-controls-overlay-content {
-		max-width: 200px;
-		min-width: 100px;
-		width: 35%;
-        align-items: center;
-        padding: $interiorMargin $interiorMarginLg;
-
-		input[type="range"] {
-			display: block;
-			width: 100%;
-			&:not(:first-child) {
-				margin-top: $interiorMarginLg;
-			}
-
-			&:before {
-				margin-right: $interiorMarginSm;
-			}
-		}
-
-		.t-reset-btn-holder {
-			$bc: $scrollbarTrackColorBg;
-			&:before,
-			&:after {
-				border-right: 1px solid $bc;
-				content:'';
-				display: block;
-				width: 5px;
-				height: 4px;
-			}
-
-			&:before {
-				border-top: 1px solid $bc;
-				margin-bottom: 2px;
-			}
-
-			&:after {
-				border-bottom: 1px solid $bc;
-				margin-top: 2px;
-			}
-		}
-	}
-}
-
-
-/*************************************** WHEN IN FRAME */
-.frame .t-imagery {
-	.l-image-main-wrapper {
-		bottom: 0 !important;
-        height: 100% !important;
-		.l-image-main-controlbar {
-			font-size: 0.7em;
-		}
-		@if $enableImageryThumbs == true {
-			.l-btn.show-thumbs {
-				display: inline-block;
-			}
-		}
-	}
-	.l-image-thumbs-wrapper,
-    mct-splitter {
-		display: none;
-	}
-}
-
-/*************************************** MOBILE */
-body.mobile.phone {
-  .t-imagery {
-    .l-image-main-wrapper,
-    .l-image-thumbs-wrapper {
-      //background: red;
-      min-height: 10px !important;
-    }
-  }
-}

src/styles/features/_time-display.scss

@@ -1,71 +0,0 @@
-.l-time-display {
-	$transTime: 200ms;
-    $controlSize: 14px;
-    $control1ControlW: $controlSize + $interiorMargin;
-    $control2ControlW: $control1ControlW * 2;
-    line-height: 140%;
-	&:hover {
-		.l-btn.controls {
-			opacity: 1;
-		}
-	}
-
-	&.l-timer {
-        .l-value:before {
-            // Direction +/- element
-            font-size: $controlSize;
-            margin-right: $interiorMarginSm;
-
-        }
-        .controls {
-            @include trans-prop-nice((width, opacity), $transTime);
-            font-size: $controlSize;
-            line-height: inherit;
-            margin-right: 0;
-            opacity: 0;
-            width: 0;
-            .flex-elem {
-                margin-right: $interiorMargin;
-            }
-        }
-		&:hover .controls {
-            opacity: 1;
-			width: $control2ControlW;
-		}
-	}
-
-    .value {
-        color: pullForward($colorBodyFg, 50%);
-        font-weight: 400;
-    }
-
-    // States
-    &.s-state-stopped,
-    &.s-state-paused {
-        .l-value {
-            opacity: 0.4;
-        }
-    }
-
-    &.s-state-started {
-        .l-value {
-            opacity: 1;
-        }
-    }
-
-    &.s-state-stopped {
-        // Hide Stop button, 1controlW
-        .t-btn-stop {
-            display: none;
-        }
-        &:hover .controls {  width: $control1ControlW;  }
-
-    }
-
-    &.s-state-paused {
-        // Paused, do something visual
-        .l-value {
-            &:before { @extend .pulse; }
-        }
-    }
-}

src/styles/forms/_channel-selector.scss

@@ -1,44 +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.
- *****************************************************************************/
-.channel-selector {
-	.line {
-		margin-bottom: $interiorMargin;
-        min-height: $formInputH;
-	}
-	.treeview {
-		$myBg: darken($colorBodyBg, 2%);
-		@include subdued-input();
-		min-height: 300px;
-        max-height: 400px;
-		overflow: auto;
-		padding: $interiorMargin;
-	}
-	
-	.btns-add-remove {
-		margin-top: 150px;
-		.s-button {
-			display: block;
-			margin-bottom: $interiorMargin;
-			text-align: center;
-		}
-	}
-}

src/styles/forms/_datetime.scss

@@ -1,62 +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 complexFieldHolder($myW) {
-	width: $myW + $interiorMargin;
-	input[type="text"] {
-		width: $myW;
-	}
-}
-
-.complex.datetime {
-	span {
-		display: inline-block;
-		margin-right: $interiorMargin;
-	}
-
-/*
-	.field-hints,
-	.fields {
-	}
-
-	
-	.field-hints {
-
-	}
-	*/
-
-	.fields {
-		margin-top: $interiorMarginSm 0;
-		padding: $interiorMarginSm 0;
-	}
-	
-	.date {
-		@include complexFieldHolder(80px);
-	}
-
-	.time.md {
-		@include complexFieldHolder(60px);
-	}
-	
-	.time.sm {
-		@include complexFieldHolder(40px);
-	}
-}

src/styles/forms/_filter.scss

@@ -1,149 +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.
- *****************************************************************************/
-.filter,
-.t-filter {
-	input.t-filter-input {
-		&:not(.ng-dirty) + .t-a-clear {
-			display: none;
-		}
-	}
-	.icon.ui-symbol {
-		border-radius: $controlCr;
-		display: inline-block;
-		font-size: 1.3em;
-		height: $formInputH;
-		line-height: $formInputH;
-		padding: 0px 5px;
-		vertical-align: middle;
-		&:hover {
-			background: rgba(white, 0.1);
-		}
-	}
-	.s-a-clear.ui-symbol {
-		$mgn: 4.5px;
-		$d: $formInputH - $mgn * 2;
-		$cb: #fff;
-		$cf: #333;
-		border-radius: $controlCr;
-		box-sizing: border-box;
-		opacity: 0.2;
-		background: $cb;
-		color: $cf;
-		display: block;
-		position: absolute;
-		height: $d; width: $d;
-		line-height: $d;
-		margin-top: $d * -0.5;
-		overflow: hidden;
-		padding-top: 1px;
-		right: $mgn; top: 50%;
-		text-align: center;
-		z-index: 5;
-		&:hover {
-			opacity: 0.6;
-			background-color: $colorKey;
-		}
-	}
-}
-
-.top-bar {
-	input.filter {
-		$h: $ueTopBarH;
-		$ip: 10px;
-		font-size: .9em;
-		height: $h;
-		line-height: $h;
-		margin-right: $interiorMargin;
-		padding-left: $ip;
-		padding-right: $ip;
-		vertical-align: top;
-	}
-	.icon-filter {
-		font-size: 1.4em;
-	}
-}
-
-.l-filter {
-    $iconEdgeM: 4px;
-    $iconD: $formInputH - ($iconEdgeM * 2);
-    @extend .icon-magnify;
-    // Adds a magnifying glass before, holds an input and a clear button
-    position: relative;
-
-    input[type="search"] {
-        padding: 2px ($iconD + $interiorMargin);
-    }
-    .clear-icon,
-    .menu-icon,
-    &:before {
-        box-sizing: border-box;
-		color: $colorInputIcon;
-        display: inline-block;
-        line-height: inherit;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1;
-    }
-
-    &:before {
-        // Magnify glass icon
-        opacity: 0.7;
-        left: $interiorMargin;
-        @include trans-prop-nice(opacity, 250ms);
-        pointer-events: none;
-    }
-
-    &:hover:before {
-        opacity: 1;
-    }
-
-    .clear-icon {
-        right: $iconEdgeM;
-        // Icon is visible only when there is text input
-        visibility: hidden;
-        opacity: 0;
-        &.show {
-            visibility: visible;
-            opacity: 1;
-        }
-
-        &:hover {
-            color: pullForward($colorInputIcon, 10%);
-        }
-    }
-}
-
-.s-filter {
-    .clear-icon,
-    .menu-icon,
-    &:before {
-        color: $colorInputIcon;
-        cursor: pointer;
-        font-family: symbolsfont;
-        @include trans-prop-nice((opacity, color), 150ms);
-    }
-    // Make icon lighten when hovering over search bar
-    &:hover:before {
-        color: pullForward($colorInputIcon, 10%);
-    }
-}

src/styles/forms/_validation.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 labelValidate($sym, $c) {
-    > .label {
-        @include glyphAfter($sym);
-        &:after {
-            color: $c;
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-
-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); }
-    }
-}
-
-body.desktop .form-row.validates > .label {
-    &:after {
-        position: absolute;
-        right: $interiorMargin;
-        height: 100%;
-        line-height: 200%;
-    }
-}

src/styles/helpers/_bubbles.scss

@@ -1,188 +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
-
-
-//************************************************* LAYOUT
-
-.l-infobubble-wrapper {
-	$arwSize: 5px;
-	box-shadow: rgba(black, 0.4) 0 1px 5px;
-	position: relative;
-	z-index: 50;
-	.l-infobubble {
-		display: inline-block;
-		min-width: $bubbleMinW;
-		max-width: $bubbleMaxW;
-		padding: 5px 10px;
-		&:before {
-			content:"";
-			position: absolute;
-			width: 0;
-			height: 0;
-		}
-		table {
-			width: 100%;
-			tr {
-				td {
-					padding: 2px 0;
-					vertical-align: top;
-					&.label {
-						padding-right: $interiorMargin * 2;
-						white-space: nowrap;
-					}
-					&.value {
-						//word-wrap: break-word; // Doesn't work in <td>?
-						word-break: break-all;
-					}
-					&.align-wrap {
-						white-space: normal;
-					}
-				}
-			}
-		}
-		.title {
-			@include ellipsize();
-			margin-bottom: $interiorMargin;
-			//max-width: 200px;
-		}
-	}
-
-	&.arw-left {
-		margin-left: $bubbleArwSize*2;
-		.l-infobubble::before {
-			right: 100%;
-            // NOTE: [MOBILE] REMOVES TRIANGLE
-            // Removes the triangle located on the info
-            // bubble for phones only, for tablets and
-            // desktops, triangle remains.
-            @include desktopandtablet {
-                @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
-            }
-		}
-	}
-
-	&.arw-right {
-        // NOTE: [MOBILE] REMOVES RIGHT MARGIN
-        // Removes right margin made for the 
-        // triangle on mobile
-        @include desktopandtablet {
-		  margin-right: $bubbleArwSize*2;
-        }
-		.l-infobubble::before {
-			left: 100%;
-            // NOTE: [MOBILE] REMOVES TRIANGLE
-            // Removes the triangle located on the info
-            // bubble for phones only, for tablets and
-            // desktops, triangle remains.
-            @include desktopandtablet {
-                @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
-            }
-		}
-	}
-
-	&.arw-top {
-		.l-infobubble::before {
-			top: $bubbleArwSize * 2;
-		}
-	}
-
-	&.arw-btm {
-		.l-infobubble::before {
-			bottom: $bubbleArwSize * 2;
-		}
-	}
-
-	&.arw-down {
-		margin-bottom: $arwSize*2;
-		.l-infobubble::before {
-			left: 50%;
-			top: 100%;
-			margin-left: -1 * $arwSize;
-			border-left: $arwSize solid transparent;
-			border-right: $arwSize solid transparent;
-			border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
-		}
-	}
-	.arw {
-		z-index: 2;
-	}
-	&.arw-up .arw.arw-down,
-	&.arw-down .arw.arw-up {
-		display: none;
-	}
-}
-
-//************************************************* LOOK AND FEEL
-
-.l-thumbsbubble-wrapper {
-    .arw-up {
-        @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-    }
-    .arw-down {
-        @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-    }
-}
-
-.s-infobubble {
-	$emFg: darken($colorInfoBubbleFg, 20%);
-	border-radius: $basicCr;
-	box-shadow: rgba(black, 0.4) 0 1px 5px;
-	background: $colorInfoBubbleBg;
-	color: $colorInfoBubbleFg;
-	font-size: 0.8rem;
-	.title {
-		color: $emFg;
-		font-weight: bold;
-	}
-	table {
-		tr {
-			td {
-				border: none;
-				border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
-				font-size: 0.9em;
-			}
-
-			&:first-child td {
-				border-top: none !important;
-			}
-		}
-	}
-	&:first-child td {
-		border-top: none;
-	}
-
-	.label {
-		color: lighten($emFg, 30%);
-	}
-
-	.value {
-		color: $emFg;
-	}
-
-}
-
-.s-thumbsbubble {
-	background: $colorThumbsBubbleBg;
-	color: $colorThumbsBubbleFg;
-}

src/styles/helpers/_splitter.scss

@@ -1,133 +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.
- *****************************************************************************/
-
-.splitter {
-    // Redo the splitter.
-    // New look is a simple line.
-    // Main width is used to provide a good click area, and is always transparent
-    // :after will be a positioned and colored element that is the handle
-
-    display: block;
-    position: absolute;
-    z-index: 3;
-    &:after {
-        // The handle
-        content:"";
-        pointer-events: none;
-        @include absPosDefault(0);
-        background: $colorSplitterBg;
-        display: block;
-        z-index: 4;
-
-        @if $splitterEndCr != 'none' {
-            border-radius: $splitterEndCr;
-        }
-    }
-    &:active {
-        &:after {
-            background-color: $colorSplitterActive !important;
-        }
-    }
-
-    @if $colorSplitterHover != 'none' {
-        &:not(:active) {
-            &:hover {
-                &:after {
-                    background-color: $colorSplitterHover !important;
-                    @include trans-prop-nice(background-color, 150ms);
-                }
-            }
-        }
-    }
-}
-
-.split-layout {
-    $inset: splitterHandleInset($splitterD, $splitterHandleD);
-    &.horizontal {
-        // Slides vertically up and down, splitting the element horizontally
-        overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
-        .pane {
-            left: 0;
-            right: 0;
-            &.top {
-                bottom: auto;
-            }
-            &.bottom {
-                top: auto;
-            }
-        }
-        >.splitter {
-            cursor: row-resize;
-            left: 0;
-            right: 0;
-            height: $splitterD;
-            &:after {
-                top: $inset; bottom: $inset;
-            }
-        }
-    }
-
-    &.vertical {
-        // Slides horizontally left to right, splitting the element vertically
-        .pane {
-            top: 0;
-            bottom: 0;
-            &.left {
-                right: auto;
-            }
-            &.right {
-                left: auto;
-            }
-        }
-        >.splitter {
-            cursor: col-resize;
-            top: 0;
-            bottom: 0;
-            width: $splitterD;
-            &:after {
-                left: $inset; right: $inset;
-                //width: $splitterHandleD;
-            }
-            &.flush-right {
-                width: ceil($splitterD / 2);
-                &:after {
-                    width: $splitterHandleD;
-                    left: auto; right: 0;
-                }
-                &.edge-shdw {
-                    @include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
-                }
-            }
-        }
-    }
-    &.splitter-sm {
-        $inset: splitterHandleInset($splitterDSm, $splitterHandleD);
-        .horizontal >.splitter {
-            height: $splitterDSm;
-            &:after { top: $inset; bottom: $inset; }
-        }
-        .vertical >.splitter {
-            width: $splitterDSm;
-            &:after { left: $inset; right: $inset; }
-        }
-    }
-}

src/styles/helpers/_wait-spinner.scss

@@ -1,87 +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  spinner($b: 5px, $c: $colorKey) {
-    transform-origin: center;
-    @include animation-name(rotation-centered);
-    @include animation-duration(0.5s);
-    @include animation-iteration-count(infinite);
-    @include animation-timing-function(linear);
-    border-radius: 100%;
-    box-sizing: border-box;
-    border-color: rgba($c, 0.25);
-    border-top-color: rgba($c, 1.0);
-    border-style: solid;
-    border-width: $b;
-    display: block;
-    position: absolute;
-    left: 50%; top: 50%;
-}
-
-.wait-spinner {
-	@include spinner($waitSpinnerBorderW, $colorKey);
-	pointer-events: none;
-	z-index: 2;
-	&.inline {
-		display: inline-block !important;
-		margin-right: $interiorMargin;
-		position: relative !important;
-		vertical-align: middle;
-	}
-}
-
-.loading {
-	// Can be applied to any block element with height and width
-    pointer-events: none;
-    &:before,
-    &:after {
-        content: '';
-    }
-	&:before {
-        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
-        height: $waitSpinnerD; width: $waitSpinnerD;
-        z-index: 10;
-	}
-    &:after {
-        @include absPosDefault();
-        background: $colorLoadingBg;
-        display: block;
-        z-index: 9;
-    }
-    &.tree-item.t-wait-node {
-        $d: $waitSpinnerTreeD;
-        $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2;
-        padding-left: $spinnerL + $d/2 + $interiorMargin;
-        .t-title-label {
-            font-style: italic;
-            opacity: 0.6;
-        }
-        &:before {
-            height: $d;
-            width: $d;
-            border-width: 4px;
-            left: $spinnerL;
-        }
-        &:after {
-            display: none;
-        }
-    }
-}

src/styles/items/_item.scss

@@ -1,164 +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.
- *****************************************************************************/
-.items-holder {
-    @include clearfix;
-    overflow-y: auto;
-	.contents {
-		top: 0;
-	}
-    .item {
-        $d: $ueBrowseGridItemLg;
-        $iconMargin: 40px;
-        $iconD: ($d - ($iconMargin * 2)) * 0.85;
-        box-sizing: border-box;
-        float: left;
-        height: $d;
-        width: $d;
-        margin-bottom: $interiorMarginSm;
-        margin-right: $interiorMarginSm;
-        position: relative;
-        &.grid-item {
-            $transTime: 200ms;
-            @include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc);
-            cursor: pointer;
-            &:hover .item-main {
-	            .item-type {
-		            color: lighten($colorKey, 10%);
-                    .l-icon-link {
-                        color: $colorIconLink;
-                    }
-                }
-	            .item-open {
-                    opacity: 1;
-	            }
-            }
-	        .abs.contents {
-                $m: $interiorMarginLg;
-		        top: $m; right: $m; bottom: $m; left: $m;
-	        }
-            .bar {
-                &.top-bar {
-                    bottom: auto;
-	                color: $colorItemSubIcons;
-                    height: $ueBrowseGridItemTopBarH;
-                    line-height: $ueBrowseGridItemTopBarH;
-                    text-align: right;
-	                z-index: 5;
-	                .left, .right {
-		                width: auto;
-		                .icon {
-			                margin-left: $interiorMarginSm;
-                            &.l-icon-link {
-                                color: $colorIconLink;
-                            }
-		                }
-	                }
-                }
-                &.bottom-bar {
-                    top: auto;
-                    line-height: 110%;
-                }
-            }
-            .item-main {
-	            $h: $ueBrowseGridItemLg;
-	            $lh: $h * 0.8;
-                line-height: $lh;
-	            z-index: 1;
-                .item-type,
-                .t-item-icon {
-                    transform: translateX(-50%) translateY(-55%);
-                    position: absolute;
-                    top: 50%; left: 50%;
-                    font-size: $iconD * 0.95;
-                    &.l-icon-link {
-                        .t-item-icon-glyph {
-                            &:after {
-                                transform: scale(0.25);
-                            }
-                        }
-                    }
-                }
-                .item-open {
-                    @include trans-prop-nice("opacity", $transTime);
-                    opacity: 0;
-	                color: $colorItemOpenIcon;
-                    font-size: 3em;
-                    left: auto; width: 50px;
-                    pointer-events: none;
-                    text-align: right;
-                }
-            }
-            .title {
-	            @include txtShdw($shdwItemText);
-                @include ellipsize();
-                color: $colorItemFg;
-            }
-            .details {
-                @include txtShdw($shdwItemText);
-                @include ellipsize();
-	            color: $colorItemFgDetails;
-                font-size: 0.8em;
-            }
-	        &.selected {
-		        $cfg: lighten($colorItemBgSelected, 35%);
-		        $cfgh: lighten($cfg, 30%);
-		        @include btnSubtle($bg: $colorItemBgSelected);
-		        color: $cfg;
-		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
-		        .item-main .item-open { color: $cfg }
-		        .title { color: $cfgh; }
-		        &:hover {
-			        .item-main .item-type { color: $cfgh !important; }
-		        }
-	        }
-        }
-    }
-}
-
-table.list-view {
-    $s: 1.2em;
-    width: 100%;
-    th, td {
-        cursor: pointer;
-    }
-    tr:hover td {
-        background-color: $colorItemBg;
-        color: $colorItemFg;
-    }
-    td {
-        $p: $interiorMargin;
-        @include ellipsize;
-        color: $colorItemFg;
-        font-size: 1em;
-        line-height: $s;
-        max-width: 0;
-        padding-top: $p;
-        padding-bottom: $p;
-    }
-    .t-item-icon {
-        font-size: $s;
-        margin-right: $interiorMargin;
-    }
-    .t-title-label {
-        @include ellipsize; // Yep, need it here too as well as the <td>
-    }
-}

src/styles/lists/_tabular.scss

@@ -1,172 +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.
- *****************************************************************************/
-.w1, .w2 {
-	position: relative;
-	height: 100%;
-}
-
-.tabular-holder {
-    @include absPosDefault();
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    > * {
-        position: relative;
-        flex: 0 0 auto;
-    }
-
-    &.l-sticky-headers {
-        .l-tabular-body {
-            flex: 1 1 99%;
-			overflow-x: auto;
-        }
-    }
-}
-
-.tabular,
-table {
-	box-sizing: border-box;
-	border-spacing: 0;
-	border-collapse: collapse;
-	display: table;
-	font-size: 0.75rem;
-	position: relative;
-	width: 100%;
-	thead, .thead,
-	tbody tr, .tbody .tr {
-		width: 100%;
-	}
-
-    thead tr th {
-        // Add some bg to the headers. Note that this is overwritten below
-        // by .mct-table-headers-w when headers are wrapped by that container.
-        background-color: $colorTabHeaderBg;
-    }
-
-	tbody, .tbody {
-		display: table-row-group;
-        tr, .tr {
-            border-top: 1px solid $colorTabBorder;
-        }
-	}
-	tr, .tr {
-		display: table-row;
-		&:first-child .td {
-			border-top: none;
-		}
-		&.group-header {
-			td, .td {
-				$d: 5%;
-				background-color: pushBack($colorTabHeaderBg, $d);
-				color: pushBack($colorTabHeaderFg, $d);
-			}
-		}
-		th, .th, td, .td {
-			display: table-cell;
-            font-size: 0.7rem;
-		}
-		th, .th {
-			border-left: 1px solid $colorTabHeaderBorder;
-			color: $colorTabHeaderFg;
-			padding: $tabularTdPadTB $tabularTdPadLR;
-			white-space: nowrap;
-			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
-			&:first-child {
-				border-left: none;
-			}
-			&.sort {
-				&.sort:after {
-					color: $colorIconLink;
-					font-family: symbolsfont;
-					font-size: 8px;
-					content: "\e906";
-					display: inline-block;
-					margin-left: $interiorMarginSm;
-				}
-				&.sort.desc:after {
-					content: "\e907";
-				}
-			}
-			&.sortable {
-				cursor: pointer;
-			}
-		}
-		td, .td {
-			min-width: 20px;
-			color: $colorTelemFresh;
-			padding: $tabularTdPadTB $tabularTdPadLR;
-			word-wrap: break-word;
-			vertical-align: top;
-			&.numeric {
-				text-align: right;
-			}
-			&.s-cell-type-value {
-				text-align: right;
-				.l-cell-contents {
-					border-radius: $smallCr;
-					padding-left: $itemPadLR;
-					padding-right: $itemPadLR;
-				}
-			}
-		}
-	}
-	&.filterable {
-		tbody, .tbody {
-			top: $tabularHeaderH * 2;
-		}
-        .l-filter {
-            input[type="text"],
-            input[type="search"] {
-                $p: 20px;
-                transition: padding 200ms ease-in-out;
-                box-sizing: border-box;
-                padding-right: $p; // Fend off from icon
-                padding-left: $p; // Fend off from icon
-                width: 100%;
-            }
-            &.active {
-                // When user has typed something, hide the icon and collapse left padding
-                &:before {
-                    opacity: 0;
-                }
-                input[type="text"],
-                input[type="search"] {
-                    padding-left: $interiorMargin;
-                }
-            }
-        }
-	}
-
-	&.t-event-messages {
-		td, .td {
-			min-width: 150px;
-		}
-	}
-}
-
-.mct-table-headers-w {
-    background: $colorTabHeaderBg;
-    overflow: hidden;
-    thead tr th {
-        background: none;
-    }
-}

src/styles/mobile/_constants.scss

@@ -1,65 +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.
- *****************************************************************************/
-
-/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
-
-/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-$mobileListIconSize: 30px;
-$mobileTitleDescH: 35px;
-$mobileOverlayMargin: 20px;
-$phoneItemH: floor($ueBrowseGridItemLg/4);
-$tabletItemH: floor($ueBrowseGridItemLg/3);
-
-/************************** MOBILE TREE MENU DIMENSIONS */
-$mobileTreeItemH: 35px;
-$mobileTreeItemIndent: 15px;
-$mobileTreeRightArrowW: 30px;
-
-/************************** DEVICE WIDTHS */
-// IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
-$phoMaxW: 767px;
-$tabMinW: 768px;
-$tabMaxW: 1024px;
-$desktopMinW: 1025px;
-
-/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-$screenPortrait: "(orientation: portrait)";
-$screenLandscape: "(orientation: landscape)";
-
-//$mobileDevice: "(max-device-width: #{$tabMaxW})";
-
-$phoneCheck: "(max-device-width: #{$phoMaxW})";
-$tabletCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
-$desktopCheck: "(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)";
-
-/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-$phonePortrait: "only screen and #{$screenPortrait} and #{$phoneCheck}";
-$phoneLandscape: "only screen and #{$screenLandscape} and #{$phoneCheck}";
-
-$tabletPortrait: "only screen and #{$screenPortrait} and #{$tabletCheck}";
-$tabletLandscape: "only screen and #{$screenLandscape} and #{$tabletCheck}";
-
-$desktop: "only screen and #{$desktopCheck}";
-
-/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$proporMenuOnly: 90%;
-$proporMenuWithView: 40%;

src/styles/mobile/_item.scss

@@ -1,133 +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.
- *****************************************************************************/
-
-// Sets the size of the items in the folder
-// representation. Instead of a grid,
-// a list is used.
-
-
-// Refactored to use Victorizr
-.items-holder {
-    .item {
-        &.grid-item {
-            $titleH: 30px;
-        }
-    }
-}
-
-body.phone,
-body.tablet {
-    .items-holder {
-        .item {
-            &.grid-item {
-                width: 100%;
-                >.contents {
-                    top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
-                }
-                .bar {
-                    &.top-bar {
-                        // Becomes the right side of the item
-                        bottom: 0 !important; left: auto !important; right: 20px !important;
-                        width: 40px !important; height: auto !important;
-                        text-align: right;
-                    }
-                    &.bottom-bar {
-                        // Becomes the left side of the item
-                        left: $mobileListIconSize + $interiorMarginLg;
-                        right: 60px;
-                    }
-
-                }
-                .item-main {
-                    .item-type,
-                    .t-item-icon {
-                        font-size: $mobileListIconSize;
-                        left: $interiorMarginLg + $interiorMargin;
-                        line-height: normal;
-                    }
-                    .item-open {
-                        display: block;
-                        opacity: 1;
-                        font-size: 1em;
-                        width: auto;
-                    }
-                }
-            }
-        }
-    }
-}
-
-body.phone {
-    .items-holder {
-        .item {
-            &.grid-item {
-                $dHei: $phoneItemH;
-                height: $dHei;
-                .bar {
-                    &.top-bar {
-                        // Becomes the right side of the item
-                        line-height: $dHei !important;
-                    }
-                    &.bottom-bar {
-                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
-                    }
-                }
-                .item-main {
-                    .item-type {
-                        @include verticalCenterBlock($dHei, $mobileListIconSize);
-                    }
-                    .item-open {
-                        line-height: $dHei;
-                    }
-                }
-            }
-        }
-    }
-}
-
-body.tablet {
-    .items-holder {
-        .item {
-            &.grid-item {
-                $dHei: $tabletItemH;
-                height: $dHei;
-                .bar {
-                    &.top-bar {
-                        // Becomes the right side of the item
-                        line-height: $dHei !important;
-                    }
-                    &.bottom-bar {
-                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
-                    }
-                }
-                .item-main {
-                    .item-type {
-                        @include verticalCenterBlock($dHei, $mobileListIconSize);
-                    }
-                    .item-open {
-                        line-height: $dHei;
-                    }
-                }
-            }
-        }
-    }
-}