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

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