From e6be02fb8da37a3642735b515b3efcce9bcdcce1 Mon Sep 17 00:00:00 2001
From: charlesh88 <charlesh88@gmail.com>
Date: Fri, 17 Aug 2018 13:51:53 -0700
Subject: [PATCH] Splitter refinements / mixin fix

- Splitter with resize grippy;
- Fixed @background-image mixins;
---
 src/styles-new/_constants-snow.scss      |  8 +++---
 src/styles-new/_mixins.scss              |  8 +++---
 src/ui/components/controls/multipane.vue |  6 ++---
 src/ui/components/controls/pane.vue      | 33 +++++++++++++++++++++---
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index 60dd49ccb8..4b25070f2a 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -235,14 +235,16 @@ $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
 $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
-$splitterD: 10px;
+$splitterD: 7px;
 $splitterCollapseBtnD: ($splitterD, 30px);
 $splitterDSm: 8px; // Smaller splitter, used inside elements like a Timeline view
-$splitterHandleD: 3px;
+$splitterHandleD: 7px;
+$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
 $colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
+$colorSplitterBg: pullForward($colorSplitterBaseBg, 10%);
 $colorSplitterFg: $colorBodyBg;
 $colorSplitterButtonBg: pullForward($colorSplitterBaseBg, 20%);
+$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
 $splitterShdw: none;
 $splitterEndCr: none;
 $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss
index e44dd8ee74..0d72f4c720 100644
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@@ -32,23 +32,23 @@
 }
 
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
-    @include background-image(linear-gradient(-45deg,
+    background-image: linear-gradient(-45deg,
         rgba($c, $a) 25%, transparent 25%,
         transparent 50%, rgba($c, $a) 50%,
         rgba($c, $a) 75%, transparent 75%,
         transparent 100%
-    ));
+    );
     background-repeat: repeat;
     background-size: $d $d;
 }
 
 @mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
-    @include background-image(linear-gradient($angle,
+    background-image: linear-gradient($angle,
         rgba($c, $a) 25%, transparent 25%,
         transparent 50%, rgba($c, $a) 50%,
         rgba($c, $a) 75%, transparent 75%,
         transparent 100%
-    ));
+    );
     background-repeat: repeat;
     background-size: $bgsize $bgsize;
 }
diff --git a/src/ui/components/controls/multipane.vue b/src/ui/components/controls/multipane.vue
index c21d037ebc..32da394637 100644
--- a/src/ui/components/controls/multipane.vue
+++ b/src/ui/components/controls/multipane.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="multipane"
+    <div class="l-multipane"
          :class="{
-             'multipane--vertical': type === 'vertical',
-             'multipane--horizontal': type === 'horizontal'
+             'l-multipane--vertical': type === 'vertical',
+             'l-multipane--horizontal': type === 'horizontal'
          }">
         <slot></slot>
     </div>
diff --git a/src/ui/components/controls/pane.vue b/src/ui/components/controls/pane.vue
index 7208333410..5bad731fba 100644
--- a/src/ui/components/controls/pane.vue
+++ b/src/ui/components/controls/pane.vue
@@ -53,6 +53,15 @@
                     left: $hitMargin * -1;
                 }
 
+                &:after {
+                    // Grippy
+                    min-height: nth($splitterGrippyD, 3);
+                    height: nth($splitterGrippyD, 2);
+                    width: nth($splitterGrippyD, 1);
+                    top: 50%; left: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
+                    transform: translateY(-50%);
+                }
+
                 &--before {
                     // Handle at left edge of containing pane
                     left: 0;
@@ -74,7 +83,6 @@
             }
 
             [class*="collapse-button"] {
-                border-bottom-left-radius: $controlCr;
                 height: nth($splitterCollapseBtnD, 2);
                 width: nth($splitterCollapseBtnD, 1);
 
@@ -119,6 +127,15 @@
                     left: 0;
                 }
 
+                &:after {
+                    // Grippy
+                    min-width: nth($splitterGrippyD, 3);
+                    width: nth($splitterGrippyD, 2);
+                    height: nth($splitterGrippyD, 1);
+                    left: 50%; top: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
+                    transform: translateX(-50%);
+                }
+
                 &--before {
                     // Handle at top edge of containing pane
                     top: 0;
@@ -160,6 +177,16 @@
                 z-index: -1;
             }
 
+            &:after {
+                // Grippy affordance
+                content: '';
+                background: $colorSplitterGrippy;
+                border-radius: 5px;
+                display: block;
+                position: absolute;
+                z-index: 1;
+            }
+
             &:active, &:hover {
                 transition: $transIn;
             }
@@ -180,7 +207,7 @@
             justify-content: center;
             position: absolute;
             z-index: 3;
-            background: $colorSplitterButtonBg;
+            background: $colorSplitterGrippy;
             transition: $transOut;
 
             &:active, &:hover {
@@ -198,7 +225,7 @@
             &:before {
                 color: $colorSplitterFg;
                 display: block;
-                font-size: 0.7em;
+                font-size: 0.6em;
                 font-family: symbolsfont;
             }
         }