diff --git a/src/styles-new/_constants.scss b/src/styles-new/_constants.scss index ae35e842b8..acba0e3d76 100644 --- a/src/styles-new/_constants.scss +++ b/src/styles-new/_constants.scss @@ -15,6 +15,7 @@ $interiorMarginLg: 10px; $inputTextPTopBtm: 2px; $inputTextPLeftRight: 5px; $inputTextP: $inputTextPTopBtm $inputTextPLeftRight; +$treeItemIndent: 16px; $treeTypeIconW: 18px; /************************** VISUAL */ diff --git a/src/styles-new/legacy-styles.scss b/src/styles-new/legacy-styles.scss index b17a168305..bd7804cc91 100644 --- a/src/styles-new/legacy-styles.scss +++ b/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"; diff --git a/src/ui/components/layout/MctInspector.vue b/src/ui/components/layout/MctInspector.vue index 139fd7ff72..1c54c47359 100644 --- a/src/ui/components/layout/MctInspector.vue +++ b/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; + } + } + } + } }