diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss index 39fdadd0f5..1b8e570142 100644 --- a/src/styles-new/_mixins.scss +++ b/src/styles-new/_mixins.scss @@ -115,33 +115,14 @@ top: $m; right: $m; bottom: $m; left: $m; } -@mixin gridTwoColumn() { - display: grid; - grid-row-gap: 0; - grid-template-columns: 1fr 2fr; - align-items: start; - - [class*="header"] { - border-radius: $smallCr; - background-color: $colorInspectorSectionHeaderBg; - color: $colorInspectorSectionHeaderFg; - margin: 0 0 $interiorMarginSm 0; - padding: $interiorMarginSm $interiorMargin; - - &:not(:first-child) { - // Allow multiple headers within a component - margin-top: $interiorMarginLg; - } - } - - [class*="span-all"], - [class*="header"] { - @include gridTwoColumnSpanCols(); - } -} - -@mixin gridTwoColumnSpanCols() { - grid-column: 1 / 3; +@mixin propertiesHeader() { + border-radius: $smallCr; + background-color: $colorInspectorSectionHeaderBg; + color: $colorInspectorSectionHeaderFg; + font-weight: normal; + margin: 0 0 $interiorMarginSm 0; + padding: $interiorMarginSm $interiorMargin; + text-transform: uppercase; } @mixin modalFullScreen() { diff --git a/src/styles-new/legacy-styles.scss b/src/styles-new/legacy-styles.scss index 487bdf97d4..b90326a0cb 100644 --- a/src/styles-new/legacy-styles.scss +++ b/src/styles-new/legacy-styles.scss @@ -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"; // TEMP - NEED FOR TREE IN INSPECTOR @import "../styles/object-label"; //@import "../styles/mobile/tree"; @import "../styles/user-environ/frame"; diff --git a/src/ui/components/controls/pane.vue b/src/ui/components/controls/pane.vue index d45718c1b1..824e9d7ffd 100644 --- a/src/ui/components/controls/pane.vue +++ b/src/ui/components/controls/pane.vue @@ -85,6 +85,7 @@ transition: opacity 150ms ease; opacity: 0; pointer-events: none; + overflow: hidden; > * { min-width: 0 !important; diff --git a/src/ui/components/inspector/Inspector.vue b/src/ui/components/inspector/Inspector.vue index 651a64b5ed..a6774f51ed 100644 --- a/src/ui/components/inspector/Inspector.vue +++ b/src/ui/components/inspector/Inspector.vue @@ -18,8 +18,6 @@ @import "~styles/sass-base"; .c-inspector { - min-width: 150px; - > [class*="__"] { min-height: 50px; @@ -52,7 +50,7 @@ } /************************************************************** LEGACY */ - // TODO: refactor when markup can be converted + // TODO: refactor when legacy properties markup can be converted .inspector-location { display: inline-block; @@ -93,10 +91,45 @@ width: 4px; } } + + .l-inspector-part { + display: contents; + } + + h2 { + @include propertiesHeader(); + font-size: 0.65rem; + grid-column: 1 / 3; + } + + .tree .grid-properties { + margin-left: $treeItemIndent + $interiorMarginLg; + } } .c-properties { - @include gridTwoColumn(); + display: grid; + grid-row-gap: 0; + grid-template-columns: 1fr 2fr; + align-items: start; + min-width: 150px; + + [class*="header"] { + @include propertiesHeader(); + + &:not(:first-child) { + // Allow multiple headers within a component + margin-top: $interiorMarginLg; + } + } + + [class*="span-all"], + [class*="header"] { + grid-column: 1 / 3; + } + + + + .c-properties { // Margin between components @@ -139,7 +172,7 @@ word-break: break-all; &:first-child { // If there is no preceding .label element, make value span columns - @include gridTwoColumnSpanCols(); + grid-column: 1 / 3; } } } diff --git a/src/ui/components/layout/Layout.vue b/src/ui/components/layout/Layout.vue index 6554fb27dc..7cbe572d03 100644 --- a/src/ui/components/layout/Layout.vue +++ b/src/ui/components/layout/Layout.vue @@ -63,6 +63,7 @@ top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-flow: column nowrap; + overflow: hidden; &__status { background: $colorBodyFg;