From 94649b12fded239fccd454f0f655f2df6193c0e8 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 23 Oct 2015 20:06:38 -0700
Subject: [PATCH] [Frontend] Splitter re-styling

open #90
Significant redo of splitter styling;
---
 .../commonUI/browse/res/templates/browse.html |   4 +-
 .../commonUI/general/res/sass/_mixins.scss    |  26 +-
 .../general/res/sass/helpers/_splitter.scss   | 134 +++++-----
 .../res/sass/user-environ/_layout.scss        |  12 +-
 .../general/src/directives/MCTSplitPane.js    |   2 +-
 .../espresso/res/css/theme-espresso.css       | 232 +++++++-----------
 .../themes/espresso/res/sass/_constants.scss  |   9 +-
 .../themes/snow/res/css/theme-snow.css        | 229 +++++++----------
 .../themes/snow/res/sass/_constants.scss      |  11 +-
 9 files changed, 301 insertions(+), 358 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index ad7b9fd672..cca9ff8318 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -53,7 +53,7 @@
 
             <mct-splitter class="splitter-treeview mobile-hide"></mct-splitter>
 
-            <div class='split-pane-component items pane right'>
+            <div class='split-pane-component items pane primary-pane right'>
                 <a class="mini-tab anchor-left toggle-pane toggle-tree"
                    title="Click to {{ modelPaneTree.visible()? 'hide' : 'show' }} the tree pane"
                    ng-click="modelPaneTree.toggle()"
@@ -62,7 +62,7 @@
                      ng-controller="PaneController as modelPaneInspect"
                      ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
                     <mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
-                        <div class='split-pane-component t-object pane left'>
+                        <div class='split-pane-component t-object pane primary-pane left'>
                             <a class="mini-tab anchor-right mobile-hide toggle-pane toggle-inspect"
                                title="Click to {{ modelPaneInspect.visible()? 'hide' : 'show' }} the Inspection pane"
                                ng-click="modelPaneInspect.toggle()"
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 360ea8e17c..64965b3140 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -41,39 +41,39 @@
     width: $d;
 }
 
-@mixin trans-prop-nice($prop, $t: 500ms, $delay: 0) {
-    // This only works for a single property right now
-    @if $t == 0 {
+@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
+    // Multiple $props must be in parans like this: (left, right)
+    @if $dur == 0 {
         @include transition-property(none);
     } @else {
-        @include transition-property($prop);
-        @include transition-duration($t);
+        @include transition-property($props);
+        @include transition-duration($dur);
         @include transition-timing-function(ease-in-out);
         @include transition-delay($delay);
     }
 }
 
-@mixin trans-prop-nice-fade($t: 500ms, $delay: 0) {
-    @if $t == 0 {
+@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
+    @if $dur == 0 {
         @include transition-property(none);
     } @else {
         @include transition-property(opacity, background-color, border-color, color);
-        @include transition-duration($t);
+        @include transition-duration($dur);
         @include transition-timing-function(ease-in-out);
         @include transition-delay($delay);
     }
 }
 
-@mixin trans-prop-nice-resize-h($t: 500ms, $delay: 0) {
+@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
     @include transition-property(height, bottom, top);
-    @include transition-duration($t);
+    @include transition-duration($dur);
     @include transition-timing-function(ease-in-out);
     @include transition-delay($delay);
 }
 
-@mixin trans-prop-nice-resize-w($t: 500ms, $delay: 0) {
+@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
     @include transition-property(width, left, right);
-    @include transition-duration($t);
+    @include transition-duration($dur);
     @include transition-timing-function(ease-in-out);
     @include transition-delay($delay);
 }
@@ -162,7 +162,7 @@
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
     //&:before {
-    @include trans-prop-nice("border-color", 25ms);
+    //@include trans-prop-nice("border-color", 25ms);
     content: '';
     display: block;
     //height: auto;
diff --git a/platform/commonUI/general/res/sass/helpers/_splitter.scss b/platform/commonUI/general/res/sass/helpers/_splitter.scss
index a765b34ec9..42dcc59b61 100644
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -19,71 +19,87 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.split-layout {
-	$b: pullForward($colorBodyBg, $contrastRatioPercent);
 
-	.splitter {
-		background-color: $b;
-		@include border-radius($splitterEndCr);
-		@include boxShdw($splitterShdw);
-		//overflow: hidden;
-		position: absolute;
-		z-index: 1;
+.splitter {
+    // Redo the splitter.
+    // New look is a simple line.
+    // Main width is used to provide a good click area, and is always transparent
+    // :after will be a positioned and colored element that is the handle
+    display: block;
+    position: absolute;
+    z-index: 1;
+    &:after {
+        // The handle
+        content:"";
+        pointer-events: none;
+        @include absPosDefault(0);
+        background: $colorSplitterBg;
+        display: block;
+
+        @if $splitterEndCr != 'none' {
+            @include border-radius($splitterEndCr);
+        }
+    }
+    &:active {
+        &:after {
+            background: $colorSplitterActive;
+        }
+    }
+
+    @if $colorSplitterHover != 'none' {
         &:hover {
-            background-color: $colorSplitterHover;
-            &:after {
-                //@include trans-prop-nice("border-color", 25ms);
-                border-color: $colorGrippyInteriorHover !important;
-            }
+            background: $colorSplitterHover;
         }
-        &:active {
-            background-color: pullForward($b, 5%);
-        }
-	}
-	&.horizontal {
-		// Slides vertically up and down, splitting the element horizontally
+    }
+}
+
+.split-layout {
+    &.horizontal {
+        // Slides vertically up and down, splitting the element horizontally
         overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
-		.pane {
-			left: 0;
-			right: 0;
-			&.top {
-				bottom: auto;
-			}
-			&.bottom {
-				top: auto;
-			}
-		}
-		>.splitter {
-            &:after {
-                @include controlGrippy($colorSplitterInterior, horizontal);
+        .pane {
+            left: 0;
+            right: 0;
+            &.top {
+                bottom: auto;
             }
-			cursor: row-resize;
-			left: 0; right: 0;
-			width: auto;
-			height: $splitterW;
-		}
-	}
-	&.vertical {
-		// Slides horizontally left to right, splitting the element vertically
-		.pane {
-			top: 0;
-			bottom: 0;
-			&.left {
-				right: auto;
-			}
-			&.right {
-				left: auto;
-			}
-		}
-		>.splitter {
-			bottom: 0;
-			cursor: col-resize;
-			width: $splitterW;
-            &:after {
-                @include controlGrippy($colorBodyBg, vertical);
+            &.bottom {
+                top: auto;
             }
-		}
-	}
+        }
+        >.splitter {
+            cursor: row-resize;
+            left: 0;
+            right: 0;
+            height: $splitterD;
+            &:after {
+                top: $splitterHandleInset; bottom: $splitterHandleInset;
+            }
+        }
+    }
+
+    &.vertical {
+        // Slides horizontally left to right, splitting the element vertically
+        .pane {
+            top: 0;
+            bottom: 0;
+            &.left {
+                right: auto;
+            }
+            &.right {
+                left: auto;
+            }
+        }
+        >.splitter {
+            cursor: col-resize;
+            top: 0;
+            bottom: 0;
+            width: $splitterD;
+            &:after {
+                left: $splitterHandleInset; right: $splitterHandleInset;
+            }
+        }
+    }
 }
 
 .browse-area .splitter {
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index f36e07c450..423aa8bc2c 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -244,6 +244,11 @@
         margin-bottom: $interiorMargin;
     }
 
+    .primary-pane {
+        // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
+        z-index: 5;
+    }
+
     &.treeview.left {
         .create-btn-holder {
             bottom: auto;
@@ -264,7 +269,8 @@
     }
 
     .mini-tab.toggle-pane {
-        $paneOffset: -1 * ($uePaneMiniTabW + $interiorMargin + $splitterW);
+        //@include test(blue, 0.6);
+        $paneOffset: -2 * $splitterD;
         $paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
         z-index: 2;
         @include desktop {
@@ -406,7 +412,7 @@
     // Sets the left tree menu when the tree is shown.
     .pane.left.treeview,
     .splitter-treeview {
-        @include trans-prop-nice-fade(250ms, 250ms);
+        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
         opacity: 1;
     }
 }
@@ -415,7 +421,7 @@
     .l-object-and-inspector {
         .pane.right,
         .splitter-inspect {
-            @include trans-prop-nice-fade(250ms, 250ms);
+            @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
             opacity: 1;
         }
     }
diff --git a/platform/commonUI/general/src/directives/MCTSplitPane.js b/platform/commonUI/general/src/directives/MCTSplitPane.js
index 19c17bcb1c..c2a5322a97 100644
--- a/platform/commonUI/general/src/directives/MCTSplitPane.js
+++ b/platform/commonUI/general/src/directives/MCTSplitPane.js
@@ -135,7 +135,7 @@ define(
                     splitter.css(anchor.edge, (firstSize + splitterSize) + 'px');
                     splitter.css(anchor.opposite, "auto");
 
-                    last.css(anchor.edge, (firstSize + splitterSize * 3) + 'px');
+                    last.css(anchor.edge, (firstSize + splitterSize * 2) + 'px');
                     last.css(anchor.opposite, "0px");
 
                     position = firstSize + splitterSize;
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index baff0b9456..5d9db07a47 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -900,123 +900,78 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 25, ../../../../general/res/sass/helpers/_splitter.scss */
-.split-layout .splitter {
-  background-color: #454545;
-  -moz-border-radius: 1px;
-  -webkit-border-radius: 1px;
-  border-radius: 1px;
-  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-  box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
+/* line 23, ../../../../general/res/sass/helpers/_splitter.scss */
+.splitter {
+  display: block;
   position: absolute;
   z-index: 1; }
-  /* line 32, ../../../../general/res/sass/helpers/_splitter.scss */
-  .split-layout .splitter:hover {
-    background-color: none; }
-    /* line 34, ../../../../general/res/sass/helpers/_splitter.scss */
-    .split-layout .splitter:hover:after {
-      border-color: #0099cc !important; }
-  /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */
-  .split-layout .splitter:active {
-    background-color: #525252; }
-/* line 43, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 31, ../../../../general/res/sass/helpers/_splitter.scss */
+  .splitter:after {
+    content: "";
+    pointer-events: none;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    background: #4d4d4d;
+    display: block; }
+  /* line 44, ../../../../general/res/sass/helpers/_splitter.scss */
+  .splitter:active:after {
+    background: #0099cc; }
+
+/* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.horizontal {
   overflow: hidden; }
-  /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 60, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.horizontal .pane {
     left: 0;
     right: 0; }
-    /* line 49, ../../../../general/res/sass/helpers/_splitter.scss */
+    /* line 63, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.top {
       bottom: auto; }
-    /* line 52, ../../../../general/res/sass/helpers/_splitter.scss */
+    /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.bottom {
       top: auto; }
-  /* line 56, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.horizontal > .splitter {
     cursor: row-resize;
     left: 0;
     right: 0;
-    width: auto;
-    height: 5px; }
-    /* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
+    height: 12px; }
+    /* line 75, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal > .splitter:after {
-      -moz-transition-property: "border-color";
-      -o-transition-property: "border-color";
-      -webkit-transition-property: "border-color";
-      transition-property: "border-color";
-      -moz-transition-duration: 25ms;
-      -o-transition-duration: 25ms;
-      -webkit-transition-duration: 25ms;
-      transition-duration: 25ms;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      -moz-transition-delay: 0;
-      -o-transition-delay: 0;
-      -webkit-transition-delay: 0;
-      transition-delay: 0;
-      content: '';
-      display: block;
-      pointer-events: none;
-      position: absolute;
-      z-index: 2;
-      border-top: 1px dotted #0d0d0d;
-      top: 2px;
-      left: 5px;
-      right: 5px;
-      height: 1px; }
-/* line 68, ../../../../general/res/sass/helpers/_splitter.scss */
+      top: 3px;
+      bottom: 3px; }
+/* line 83, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical .pane {
   top: 0;
   bottom: 0; }
-  /* line 71, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 86, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.left {
     right: auto; }
-  /* line 74, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 89, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.right {
     left: auto; }
-/* line 78, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 93, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical > .splitter {
-  bottom: 0;
   cursor: col-resize;
-  width: 5px; }
-  /* line 82, ../../../../general/res/sass/helpers/_splitter.scss */
+  top: 0;
+  bottom: 0;
+  width: 12px; }
+  /* line 98, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical > .splitter:after {
-    -moz-transition-property: "border-color";
-    -o-transition-property: "border-color";
-    -webkit-transition-property: "border-color";
-    transition-property: "border-color";
-    -moz-transition-duration: 25ms;
-    -o-transition-duration: 25ms;
-    -webkit-transition-duration: 25ms;
-    transition-duration: 25ms;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    -moz-transition-delay: 0;
-    -o-transition-delay: 0;
-    -webkit-transition-delay: 0;
-    transition-delay: 0;
-    content: '';
-    display: block;
-    pointer-events: none;
-    position: absolute;
-    z-index: 2;
-    border-left: 1px dotted #0d0d0d;
-    left: 2px;
-    bottom: 5px;
-    top: 5px;
-    width: 1px; }
+    left: 3px;
+    right: 3px; }
 
-/* line 89, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 105, ../../../../general/res/sass/helpers/_splitter.scss */
 .browse-area .splitter {
   top: 0; }
 
-/* line 93, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 109, ../../../../general/res/sass/helpers/_splitter.scss */
 .edit-area .splitter {
   top: 0; }
 
@@ -3913,59 +3868,62 @@ span.req {
     height: 24px;
     line-height: 24px;
     margin-bottom: 5px; }
-  /* line 248, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane .primary-pane {
+    z-index: 5; }
+  /* line 253, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 252, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 257, ../../../../general/res/sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 257, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 260, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 265, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane .mini-tab.toggle-pane {
     z-index: 2; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
       .pane .mini-tab.toggle-pane.toggle-tree.anchor-left {
         left: 0;
-        -moz-transform: translateX(-25px);
-        -ms-transform: translateX(-25px);
-        -webkit-transform: translateX(-25px);
-        transform: translateX(-25px); }
-        /* line 275, ../../../../general/res/sass/user-environ/_layout.scss */
+        -moz-transform: translateX(-24px);
+        -ms-transform: translateX(-24px);
+        -webkit-transform: translateX(-24px);
+        transform: translateX(-24px); }
+        /* line 281, ../../../../general/res/sass/user-environ/_layout.scss */
         .pane .mini-tab.toggle-pane.toggle-tree.anchor-left:after {
           content: 'F'; }
-        /* line 276, ../../../../general/res/sass/user-environ/_layout.scss */
+        /* line 282, ../../../../general/res/sass/user-environ/_layout.scss */
         .pane .mini-tab.toggle-pane.toggle-tree.anchor-left.collapsed {
           -moz-transform: translateX(-20px);
           -ms-transform: translateX(-20px);
           -webkit-transform: translateX(-20px);
           transform: translateX(-20px); }
-      /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 286, ../../../../general/res/sass/user-environ/_layout.scss */
       .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right {
         right: 0;
-        -moz-transform: translateX(25px);
-        -ms-transform: translateX(25px);
-        -webkit-transform: translateX(25px);
-        transform: translateX(25px); }
-        /* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+        -moz-transform: translateX(24px);
+        -ms-transform: translateX(24px);
+        -webkit-transform: translateX(24px);
+        transform: translateX(24px); }
+        /* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
         .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right:after {
           content: '\e608'; }
-        /* line 285, ../../../../general/res/sass/user-environ/_layout.scss */
+        /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
         .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right.collapsed {
           -moz-transform: translateX(20px);
           -ms-transform: translateX(20px);
           -webkit-transform: translateX(20px);
           transform: translateX(20px); } }
-  /* line 294, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 300, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
   .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
   .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@@ -3978,28 +3936,28 @@ span.req {
   .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
 
-/* line 305, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 308, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 314, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane > .holder {
   left: 0;
   right: 0; }
-/* line 321, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane:first-child {
   margin-left: 0; }
-  /* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 329, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child .holder {
     right: 3px; }
 
-/* line 331, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-holder {
   overflow: hidden;
   top: 34px; }
-  /* line 334, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-holder > ng-include {
     overflow: auto;
     position: absolute;
@@ -4009,11 +3967,11 @@ span.req {
     left: 0;
     width: auto;
     height: auto; }
-  /* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-holder.l-controls-visible.l-time-controller-visible {
     bottom: 88px; }
 
-/* line 344, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@@ -4025,12 +3983,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 357, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 362, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 368, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -4046,42 +4004,42 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 370, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 380, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 383, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 389, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0;
     padding-right: 10px; }
 
-/* line 395, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 401, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .pane.left.treeview,
 .pane-tree-hidden .splitter-treeview {
   opacity: 0; }
-/* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 406, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .pane.right.items {
   left: 10px !important; }
 
-/* line 407, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 413, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .pane.left.treeview,
 .pane-tree-showing .splitter-treeview {
-  -moz-transition-property: opacity, background-color, border-color, color;
-  -o-transition-property: opacity, background-color, border-color, color;
-  -webkit-transition-property: opacity, background-color, border-color, color;
-  transition-property: opacity, background-color, border-color, color;
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
   -moz-transition-duration: 250ms;
   -o-transition-duration: 250ms;
   -webkit-transition-duration: 250ms;
@@ -4096,13 +4054,13 @@ span.req {
   transition-delay: 250ms;
   opacity: 1; }
 
-/* line 416, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 422, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-showing .l-object-and-inspector .pane.right,
 .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-  -moz-transition-property: opacity, background-color, border-color, color;
-  -o-transition-property: opacity, background-color, border-color, color;
-  -webkit-transition-property: opacity, background-color, border-color, color;
-  transition-property: opacity, background-color, border-color, color;
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
   -moz-transition-duration: 250ms;
   -o-transition-duration: 250ms;
   -webkit-transition-duration: 250ms;
@@ -4117,16 +4075,16 @@ span.req {
   transition-delay: 250ms;
   opacity: 1; }
 
-/* line 425, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 431, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-hidden .l-object-and-inspector .pane.right,
 .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
   opacity: 0; }
-/* line 429, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 435, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-hidden .l-object-and-inspector .pane.left {
   right: 10px !important; }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 436, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 442, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane:not(.resizing) {
     -moz-transition-property: width, left, right;
     -o-transition-property: width, left, right;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index df85c6ecdb..8d52e77324 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -154,12 +154,13 @@ $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
 $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
 
 // Splitter
+$splitterD: 12px;
+$splitterHandleInset: 3px;
+$colorSplitterBg: pullForward($colorBodyBg, 10%);
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
-$colorSplitterInterior: $colorBodyBg;
+$splitterEndCr: none;
 $colorSplitterHover: none;
-$splitterW: 5px;
-$splitterEndCr: 1px;
-$colorGrippyInteriorHover: $colorKey;
+$colorSplitterActive: $colorKey;
 
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 5%);
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index b36c3ce496..2b271873fe 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -900,120 +900,78 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 25, ../../../../general/res/sass/helpers/_splitter.scss */
-.split-layout .splitter {
-  background-color: #969696;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
+/* line 23, ../../../../general/res/sass/helpers/_splitter.scss */
+.splitter {
+  display: block;
   position: absolute;
   z-index: 1; }
-  /* line 32, ../../../../general/res/sass/helpers/_splitter.scss */
-  .split-layout .splitter:hover {
-    background-color: #0099cc; }
-    /* line 34, ../../../../general/res/sass/helpers/_splitter.scss */
-    .split-layout .splitter:hover:after {
-      border-color: #fcfcfc !important; }
-  /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */
-  .split-layout .splitter:active {
-    background-color: #898989; }
-/* line 43, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 31, ../../../../general/res/sass/helpers/_splitter.scss */
+  .splitter:after {
+    content: "";
+    pointer-events: none;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto;
+    background: #e3e3e3;
+    display: block; }
+  /* line 44, ../../../../general/res/sass/helpers/_splitter.scss */
+  .splitter:active:after {
+    background: #0099cc; }
+
+/* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.horizontal {
   overflow: hidden; }
-  /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 60, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.horizontal .pane {
     left: 0;
     right: 0; }
-    /* line 49, ../../../../general/res/sass/helpers/_splitter.scss */
+    /* line 63, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.top {
       bottom: auto; }
-    /* line 52, ../../../../general/res/sass/helpers/_splitter.scss */
+    /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.bottom {
       top: auto; }
-  /* line 56, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.horizontal > .splitter {
     cursor: row-resize;
     left: 0;
     right: 0;
-    width: auto;
-    height: 5px; }
-    /* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
+    height: 15px; }
+    /* line 75, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal > .splitter:after {
-      -moz-transition-property: "border-color";
-      -o-transition-property: "border-color";
-      -webkit-transition-property: "border-color";
-      transition-property: "border-color";
-      -moz-transition-duration: 25ms;
-      -o-transition-duration: 25ms;
-      -webkit-transition-duration: 25ms;
-      transition-duration: 25ms;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      -moz-transition-delay: 0;
-      -o-transition-delay: 0;
-      -webkit-transition-delay: 0;
-      transition-delay: 0;
-      content: '';
-      display: block;
-      pointer-events: none;
-      position: absolute;
-      z-index: 2;
-      border-top: 1px dotted #d6d6d6;
-      top: 2px;
-      left: 5px;
-      right: 5px;
-      height: 1px; }
-/* line 68, ../../../../general/res/sass/helpers/_splitter.scss */
+      top: 6px;
+      bottom: 6px; }
+/* line 83, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical .pane {
   top: 0;
   bottom: 0; }
-  /* line 71, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 86, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.left {
     right: auto; }
-  /* line 74, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 89, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.right {
     left: auto; }
-/* line 78, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 93, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical > .splitter {
-  bottom: 0;
   cursor: col-resize;
-  width: 5px; }
-  /* line 82, ../../../../general/res/sass/helpers/_splitter.scss */
+  top: 0;
+  bottom: 0;
+  width: 15px; }
+  /* line 98, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical > .splitter:after {
-    -moz-transition-property: "border-color";
-    -o-transition-property: "border-color";
-    -webkit-transition-property: "border-color";
-    transition-property: "border-color";
-    -moz-transition-duration: 25ms;
-    -o-transition-duration: 25ms;
-    -webkit-transition-duration: 25ms;
-    transition-duration: 25ms;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    -moz-transition-delay: 0;
-    -o-transition-delay: 0;
-    -webkit-transition-delay: 0;
-    transition-delay: 0;
-    content: '';
-    display: block;
-    pointer-events: none;
-    position: absolute;
-    z-index: 2;
-    border-left: 1px dotted #d6d6d6;
-    left: 2px;
-    bottom: 5px;
-    top: 5px;
-    width: 1px; }
+    left: 6px;
+    right: 6px; }
 
-/* line 89, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 105, ../../../../general/res/sass/helpers/_splitter.scss */
 .browse-area .splitter {
   top: 0; }
 
-/* line 93, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 109, ../../../../general/res/sass/helpers/_splitter.scss */
 .edit-area .splitter {
   top: 0; }
 
@@ -3851,59 +3809,62 @@ span.req {
     height: 24px;
     line-height: 24px;
     margin-bottom: 5px; }
-  /* line 248, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane .primary-pane {
+    z-index: 5; }
+  /* line 253, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 252, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 257, ../../../../general/res/sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 257, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 260, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 265, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane .mini-tab.toggle-pane {
     z-index: 2; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
       .pane .mini-tab.toggle-pane.toggle-tree.anchor-left {
         left: 0;
-        -moz-transform: translateX(-25px);
-        -ms-transform: translateX(-25px);
-        -webkit-transform: translateX(-25px);
-        transform: translateX(-25px); }
-        /* line 275, ../../../../general/res/sass/user-environ/_layout.scss */
+        -moz-transform: translateX(-30px);
+        -ms-transform: translateX(-30px);
+        -webkit-transform: translateX(-30px);
+        transform: translateX(-30px); }
+        /* line 281, ../../../../general/res/sass/user-environ/_layout.scss */
         .pane .mini-tab.toggle-pane.toggle-tree.anchor-left:after {
           content: 'F'; }
-        /* line 276, ../../../../general/res/sass/user-environ/_layout.scss */
+        /* line 282, ../../../../general/res/sass/user-environ/_layout.scss */
         .pane .mini-tab.toggle-pane.toggle-tree.anchor-left.collapsed {
           -moz-transform: translateX(-20px);
           -ms-transform: translateX(-20px);
           -webkit-transform: translateX(-20px);
           transform: translateX(-20px); }
-      /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
+      /* line 286, ../../../../general/res/sass/user-environ/_layout.scss */
       .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right {
         right: 0;
-        -moz-transform: translateX(25px);
-        -ms-transform: translateX(25px);
-        -webkit-transform: translateX(25px);
-        transform: translateX(25px); }
-        /* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+        -moz-transform: translateX(30px);
+        -ms-transform: translateX(30px);
+        -webkit-transform: translateX(30px);
+        transform: translateX(30px); }
+        /* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
         .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right:after {
           content: '\e608'; }
-        /* line 285, ../../../../general/res/sass/user-environ/_layout.scss */
+        /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
         .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right.collapsed {
           -moz-transform: translateX(20px);
           -ms-transform: translateX(20px);
           -webkit-transform: translateX(20px);
           transform: translateX(20px); } }
-  /* line 294, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 300, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
   .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
   .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@@ -3916,28 +3877,28 @@ span.req {
   .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
 
-/* line 305, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 308, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 314, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane > .holder {
   left: 0;
   right: 0; }
-/* line 321, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane:first-child {
   margin-left: 0; }
-  /* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 329, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child .holder {
     right: 3px; }
 
-/* line 331, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-holder {
   overflow: hidden;
   top: 34px; }
-  /* line 334, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-holder > ng-include {
     overflow: auto;
     position: absolute;
@@ -3947,11 +3908,11 @@ span.req {
     left: 0;
     width: auto;
     height: auto; }
-  /* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-holder.l-controls-visible.l-time-controller-visible {
     bottom: 88px; }
 
-/* line 344, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@@ -3963,12 +3924,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 357, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 362, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 368, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3984,42 +3945,42 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 370, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 378, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 380, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 386, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 383, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 389, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0;
     padding-right: 10px; }
 
-/* line 395, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 401, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .pane.left.treeview,
 .pane-tree-hidden .splitter-treeview {
   opacity: 0; }
-/* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 406, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .pane.right.items {
   left: 10px !important; }
 
-/* line 407, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 413, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .pane.left.treeview,
 .pane-tree-showing .splitter-treeview {
-  -moz-transition-property: opacity, background-color, border-color, color;
-  -o-transition-property: opacity, background-color, border-color, color;
-  -webkit-transition-property: opacity, background-color, border-color, color;
-  transition-property: opacity, background-color, border-color, color;
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
   -moz-transition-duration: 250ms;
   -o-transition-duration: 250ms;
   -webkit-transition-duration: 250ms;
@@ -4034,13 +3995,13 @@ span.req {
   transition-delay: 250ms;
   opacity: 1; }
 
-/* line 416, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 422, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-showing .l-object-and-inspector .pane.right,
 .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-  -moz-transition-property: opacity, background-color, border-color, color;
-  -o-transition-property: opacity, background-color, border-color, color;
-  -webkit-transition-property: opacity, background-color, border-color, color;
-  transition-property: opacity, background-color, border-color, color;
+  -moz-transition-property: opacity;
+  -o-transition-property: opacity;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
   -moz-transition-duration: 250ms;
   -o-transition-duration: 250ms;
   -webkit-transition-duration: 250ms;
@@ -4055,16 +4016,16 @@ span.req {
   transition-delay: 250ms;
   opacity: 1; }
 
-/* line 425, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 431, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-hidden .l-object-and-inspector .pane.right,
 .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
   opacity: 0; }
-/* line 429, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 435, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-hidden .l-object-and-inspector .pane.left {
   right: 10px !important; }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 436, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 442, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane:not(.resizing) {
     -moz-transition-property: width, left, right;
     -o-transition-property: width, left, right;
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 13390fa79e..bb350309dd 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -152,12 +152,13 @@ $scrollbarThumbColor: darken($colorBodyBg, 50%);//
 $scrollbarThumbColorHov: $colorKey;
 
 // Splitter
+$splitterD: 15px;
+$splitterHandleInset: 6px;
+$colorSplitterBg: pullForward($colorBodyBg, 10%);
 $splitterShdw: none;
-$colorSplitterInterior: $colorBodyBg;
-$colorSplitterHover: $colorKey;
-$splitterW: 5px;
-$splitterEndCr: $splitterW;
-$colorGrippyInteriorHover: $colorBodyBg;
+$splitterEndCr: none;
+$colorSplitterHover: none;
+$colorSplitterActive: $colorKey;
 
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 2%);