Vertical pane resizing fixed! Kind of...

- pane__contents at 100% height is causing problems, fix this.
- Normalized scss var names $splitterBtn*;
- Added --reacts to pane to allow setting of proper flex attribs;

src/styles-new/_constants-snow.scss

@@ -237,7 +237,6 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterD: 7px;
-$splitterCollapseBtnD: (15px, 35px);
 $splitterHandleD: 2px;
 $splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
 $colorSplitterBaseBg: $colorBodyBg;
@@ -245,10 +244,11 @@ $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
 $colorSplitterActive: $colorKey;
-$colorSplitterButtonBg: $colorSplitterBg; //rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
-$colorSplitterButtonFg: $colorBodyBg; //rgba($colorBodyFg, 0.6);
-$colorSplitterButtonHoverBg: rgba($colorKey, 1);
-$colorSplitterButtonHoverFg: $colorBodyBg;
+$splitterBtnD: (15px, 35px);
+$splitterBtnColorBg: rgba($colorSplitterBg, 0.3); //rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
+$splitterBtnColorFg: rgba($colorBodyFg, 0.6);
+$splitterBtnColorHoverBg: rgba($colorKey, 1);
+$splitterBtnColorHoverFg: $colorBodyBg;
 $colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
 $splitterShdw: none;
 $splitterEndCr: none;

src/styles-new/_global.scss

@@ -69,7 +69,7 @@ body.desktop {
     }
 
     ::-webkit-scrollbar-corner {
-        background: $scrollbarTrackColorBg;
+        background: transparent;
     }
 }
 

src/ui/components/controls/pane.vue

@@ -5,8 +5,9 @@
             'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
             'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
             'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
-             'l-pane--collapsed': collapsed,
-             'l-pane--resizing': resizing === true
+            'l-pane--collapsed': collapsed,
+            'l-pane--reacts': !handle,
+            'l-pane--resizing': resizing === true
          }">
         <!-- TODO: move resize-handle styling from handle into pane, so that padding can be handled -->
         <div v-if="handle"
@@ -71,6 +72,11 @@
             pointer-events: inherit;
             transition: opacity 250ms ease 250ms;
             height: 100%;
+            overflow: auto;
+
+            .l-pane__contents {
+                padding: 0;
+            }
         }
 
         /************************ COLLAPSED STATE */
@@ -93,7 +99,7 @@
                 background: $colorSplitterBg;
                 display: block;
                 position: absolute;
-                z-index: 100;
+                z-index: 10;
                 transition: $transOut;
 
                 &:before {
@@ -111,13 +117,13 @@
             }
 
             &__collapse-button {
-                background: $colorSplitterButtonBg;
-                color: $colorSplitterButtonFg;
-                flex: 1 0 auto;
-                font-size: nth($splitterCollapseBtnD, 1) * .7;
+                background: $splitterBtnColorBg;
+                color: $splitterBtnColorFg;
+                flex: 0 0 nth($splitterBtnD, 1);
+                font-size: nth($splitterBtnD, 1) * .7;
                 position: relative;
                 justify-content: start;
-                text-shadow: $shdwTextSubtle;
+                // text-shadow: $shdwTextSubtle;
                 transition: $transOut;
 
                 &:after {
@@ -128,8 +134,8 @@
                 }
 
                 &:hover {
-                    background: $colorSplitterButtonHoverBg;
-                    color: $colorSplitterButtonHoverFg;
+                    background: $splitterBtnColorHoverBg;
+                    color: $splitterBtnColorHoverFg;
                     transition: $transIn;
                 }
             }
@@ -143,13 +149,19 @@
                 flex: 1 0 90%;
             }
 
+            &--reacts {
+                // This is the pane that doesn't hold the handle
+                // It reacts to other panes that are able to resize
+                flex: 1 1 0;
+            }
+
             &--resizing {
                 // User is dragging the handle and resizing a pane
                 @include userSelectNone();
             }
 
             &[class*="--collapsed"] {
-                $d: nth($splitterCollapseBtnD, 1);
+                $d: nth($splitterBtnD, 1);
                 flex-basis: $d;
                 min-width: $d !important;
                 min-height: $d !important;
@@ -159,6 +171,11 @@
                 }
             }
 
+            > .l-pane__collapse-button {
+                height: nth($splitterBtnD, 1);
+                padding: $interiorMarginSm $interiorMarginSm;
+            }
+
             &[class*="--horizontal"] {
                 > .l-pane__handle {
                     cursor: col-resize;
@@ -175,11 +192,6 @@
                     }
                 }
 
-                > .l-pane__collapse-button {
-                    height: nth($splitterCollapseBtnD, 1);
-                    padding: $interiorMarginSm $interiorMarginSm;
-                }
-
                 &[class*="--collapsed"] {
                     > .l-pane__collapse-button {
                         position: absolute;
@@ -275,8 +287,6 @@ export default {
     data() {
         return {
             collapsed: false
-            // styleProp: 'flexBasis'
-            //styleProp: (type === 'horizontal')? 'width' : 'height'
         }
     },
     beforeMount() {
@@ -323,17 +333,17 @@ export default {
         },
         updatePosition: function (event) {
             let size = this.getNewSize(event);
-            this.$el.style[this.styleProp] = size;
+            // this.$el.style[this.styleProp] = size;
 
-            // let intSize = parseInt(size.substr(0, size.length - 2));
-            // if (intSize < COLLAPSE_THRESHOLD_PX && this.collapsable === true) {
-            //     // console.log("initial: " + this.initial);
-            //     this.dragCollapse = true;
-            //     this.end();
-            //     // this.toggleCollapse();
-            // } else {
-            //     this.$el.style[this.styleProp] = size;
-            // }
+            let intSize = parseInt(size.substr(0, size.length - 2));
+            if (intSize < COLLAPSE_THRESHOLD_PX && this.collapsable === true) {
+                // console.log("initial: " + this.initial);
+                this.dragCollapse = true;
+                this.end();
+                this.toggleCollapse();
+            } else {
+                this.$el.style[this.styleProp] = size;
+            }
         },
         start: function (event) {
             this.startPosition = this.getPosition(event);

src/ui/components/layout/MctInspector.vue

@@ -2,13 +2,16 @@
     <multipane class="c-inspector"
                type="vertical">
         <pane class="c-inspector__properties">
-            <div ref="properties">
-
-            </div>
+            <div class="u-contents" ref="properties"></div>
         </pane>
         <pane class="l-pane c-inspector__elements"
               handle="before">
-            <div ref="elements">c-inspector__elements</div>
+            <div ref="elements">c-inspector__elements 1</div>
+        </pane>
+        <pane class="l-pane c-inspector__elements"
+              handle="before"
+              label="foobar">
+            <div ref="elements">c-inspector__elements 2</div>
         </pane>
     </multipane>
 </template>
@@ -36,23 +39,22 @@
 
         > [class*="__"] {
             min-height: 50px;
-            /*overflow: auto;*/
+
             &:not(:last-child) {
                 margin-bottom: $interiorMargin;
             }
+
+            > .l-pane__contents > * {
+                margin-right: $interiorMarginSm; // Provide margin against scrollbar
+            }
         }
 
         &__properties {
-            @include userSelectNone();
-            //@include test(red);
-            height: auto;
-            flex: 1 1 auto;
+
         }
 
         &__elements {
-            @include test(green);
             height: 200px;
-            flex: 1 1 auto;
         }
 
         .l-inspector-part {