Inspector styling

- Moved legacy CSS as needed into MctInspector component;

src/styles-new/_constants.scss

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

src/styles-new/legacy-styles.scss

@@ -19,7 +19,7 @@
 @import "../styles/helpers/bubbles";
 @import "../styles/helpers/splitter";
 @import "../styles/helpers/wait-spinner";
-@import "../styles/inspector";
+//@import "../styles/inspector";
 //
 //!********************************* CONTROLS *!
 //@import "../styles/controls/breadcrumb";
@@ -46,7 +46,7 @@
 //@import "../styles/search/search";
 //@import "../styles/mobile/search/search";
 @import "../styles/overlay/overlay";
-//@import "../styles/tree/tree";
+@import "../styles/tree/tree";
 @import "../styles/object-label";
 //@import "../styles/mobile/tree";
 @import "../styles/user-environ/frame";

src/ui/components/layout/MctInspector.vue

@@ -26,7 +26,6 @@
         grid-column: 1 / 3;
     }
 
-    /******************************* INSPECTOR */
     .c-inspector {
         display: flex;
         flex-flow: column nowrap;
@@ -50,6 +49,22 @@
             display: contents;
         }
 
+        h2 {
+            @include grid-two-column-span-cols;
+            border-radius: $controlCr;
+            background-color: $colorInspectorSectionHeaderBg;
+            color: $colorInspectorSectionHeaderFg;
+            font-size: 100%;
+            font-weight: normal;
+            margin: $interiorMarginLg 0 $interiorMarginSm 0;
+            padding: $interiorMarginSm $interiorMargin;
+            text-transform: uppercase;
+
+            &.first {
+                margin-top: 0;
+            }
+        }
+
         .grid-properties {
             .label {
                 color: $colorInspectorPropName;
@@ -80,26 +95,9 @@
     }
 
     // Properties grids
+    .grid-properties, // LEGACY
     .l-grid-properties {
         @include grid-two-column;
-
-
-        h2 {
-            // Headers for .l-inspector-part elements
-            @include grid-two-column-span-cols;
-            border-radius: $controlCr;
-            background-color: $colorInspectorSectionHeaderBg;
-            color: $colorInspectorSectionHeaderFg;
-            font-size: 0.9rem;
-            font-weight: normal;
-            margin: $interiorMarginLg 0 $interiorMarginSm 0;
-            padding: $interiorMarginSm $interiorMargin;
-            text-transform: uppercase;
-
-            &.first {
-                margin-top: 0;
-            }
-        }
     }
 
     .grid-row {
@@ -125,6 +123,67 @@
                 border-top: 1px solid $colorInspectorSectionHeaderBg;
             }
         }
+
+
+        /************************************************************** LEGACY STYLES */
+        .tree {
+            .grid-properties {
+                margin-left: $treeItemIndent + $interiorMarginLg;
+            }
+        }
+
+
+        .inspector-location {
+            display: inline-block;
+
+            .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;
+                        margin-right: $interiorMarginSm;
+                    }
+                }
+                &: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;
+                    }
+                }
+            }
+        }
     }