Bring in legacy CSS

- Legacy styles from old _global.scss moved into section of new
_global file;
- Most UI elements are working
- TODO: fix Inspector grid

src/styles-new/_constants.scss

@@ -15,5 +15,7 @@ $interiorMarginLg: 10px;
 $inputTextPTopBtm: 2px;
 $inputTextPLeftRight: 5px;
 $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
+$treeTypeIconW: 18px;
 
-$treeTypeIconW: 18px;
+/************************** VISUAL */
+$controlDisabledOpacity: 0.3;

src/styles-new/_global.scss

@@ -37,7 +37,7 @@ div {
 }
 
 /******************************* BROWSER ELEMENTS */
-body {
+body.desktop {
     ::-webkit-scrollbar {
         box-sizing: border-box;
         box-shadow: inset $scrollbarTrackShdw;
@@ -69,20 +69,24 @@ body {
 
 /************************** HTML ENTITIES */
 a {
+    color: $colorA;
     cursor: pointer;
     text-decoration: none;
+    &:hover {
+        color: $colorAHov;
+    }
 }
 
 body, html {
-    -webkit-font-smoothing: subpixel-antialiased;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    font-weight: normal;
     height: 100%;
     width: 100%;
 }
 
 body {
+    -webkit-font-smoothing: subpixel-antialiased;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    font-weight: normal;
     background-color: $colorBodyBg;
     color: $colorBodyFg;
 }
@@ -113,7 +117,7 @@ h1, h2, h3 {
 }
 
 h1 {
-    font-size: 1.7em;
+    font-size: 1em;
     font-weight: normal !important;
     letter-spacing: 0.04em;
     line-height: 120%;
@@ -130,3 +134,165 @@ ol, ul {
     margin: 0;
     padding-left: 0;
 }
+
+/************************** LEGACY? */
+
+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;
+}
+
+.no-selection {
+    // aka selection = "None". Used in palettes and their menu buttons.
+    $c: red; $s: 48%; $e: 52%;
+    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: ', '; }
+    }
+}

src/styles-new/core.scss

@@ -3,4 +3,10 @@
 
 /******************** RENDERS CSS */
 @import "global";
-@import "controls";
+@import "controls";
+
+/******************** LEGACY CSS */
+$output-bourbon-deprecation-warnings: false;
+@import "bourbon";
+@import "legacy-styles";
+

src/styles-new/legacy-styles.scss

@@ -0,0 +1,79 @@
+@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/global";
+@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";
+@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/fixed-position";
+@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";
+
+@import "../styles/conductor/time-conductor-snow";

src/ui/components/layout/Layout.vue

@@ -72,6 +72,7 @@
         &__main-container {
             // Wrapper for main views
             $m: $interiorMargin;
+            font-size: 16px; // TEMP FOR LEGACY STYLING
             overflow: auto;
             position: absolute;
             top: $m; right: $m; bottom: $m; left: $m;