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/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>