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>