Markup / scss refactor WIP

- Add collapse buttons to splitter;

src/styles-new/_constants-snow.scss

@@ -239,6 +239,7 @@ $splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline vi
 $splitterHandleD: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
+$colorSplitterFg: $colorBodyBg;
 $splitterShdw: none;
 $splitterEndCr: none;
 $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
@@ -274,3 +275,7 @@ $colorAboutLink: #84b3ff;
 // Loading
 $colorLoadingFg: $colorAlt1;
 $colorLoadingBg: rgba($colorLoadingFg, 0.1);
+
+// Transitions
+$transIn: all 50ms ease-in;
+$transOut: all 250ms ease-out;

src/styles-new/_mixins.scss

@@ -80,4 +80,8 @@
     @include ellipsize();
     direction: rtl;
     unicode-bidi:bidi-override;
+}
+
+@mixin test($c: #ffcc00, $a: 0.2) {
+    background-color: rgba($c, $a) !important;
 }

src/styles-new/core.scss

@@ -1,5 +1,5 @@
 @import "vendor/normalize.min.css";
 @import "constants";
 @import "constants-snow";
-@import "global";
-@import "glyphs";
+@import "glyphs";
+@import "global";

src/ui/components/controls/splitter.vue

@@ -1,28 +1,45 @@
 <template>
     <div class="c-splitter" :class="{
     'c-splitter-vertical' : align === 'vertical',
-    'c-splitter-horizontal' : align === 'horizontal'
-    }"></div>
+    'c-splitter-horizontal' : align === 'horizontal',
+    'c-splitter-collapse-left' : collapse === 'to-left',
+    'c-splitter-collapse-right' : collapse === 'to-right',
+    }">
+        <a class="c-splitter__btn"></a>
+    </div>
 </template>
 
 <style lang="scss">
     @import "~styles/constants";
     @import "~styles/constants-snow";
+    @import "~styles/mixins";
+    @import "~styles/glyphs";
+
+    $c: #06f;
+    $size: $splitterHandleD;
+    $margin: 0px;
+    $hitMargin: 4px;
+
 
     .c-splitter {
-        $c: #06f;
-        $size: $splitterHandleD;
-        $margin: 0px;
-        $hitMargin: 7px;
-
         background: $colorSplitterBg;
+        transition: $transOut;
 
         &:before {
             // Bigger hit area
+            //@include test();
             content: '';
             display: block;
             position: absolute;
-            z-index: 2;
+            z-index: 1;
+        }
+
+        &:active, &:hover {
+            transition: $transIn;
+        }
+
+        &:active {
+            background: $colorSplitterActive;
         }
 
         &:hover {
@@ -34,7 +51,10 @@
             width: $size;
             margin: 0 $margin;
             &:before {
-                top: 0; right: $hitMargin * -1; bottom: 0; left: $hitMargin * -1;
+                top: 0;
+                right: $hitMargin * -1;
+                bottom: 0;
+                left: $hitMargin * -1;
             }
         }
 
@@ -43,16 +63,73 @@
             height: $size;
             margin: $margin 0;
             &:before {
-                top: $hitMargin * -1; right: 0; bottom: $hitMargin * -1; left: 0;
+                top: $hitMargin * -1;
+                right: 0;
+                bottom: $hitMargin * -1;
+                left: 0;
             }
         }
     }
+
+    .c-splitter__btn {
+        // Collapse button
+        background: $colorSplitterBg;
+        display: none; // Only display if splitter is collapsible, see below
+        width: $size * 3;
+        height: 40px;
+        transition: $transOut;
+
+        &:active, &:hover {
+            transition: $transIn;
+        }
+
+        &:hover {
+            background: $colorSplitterHover;
+        }
+
+        &:active {
+            background: $colorSplitterActive;
+        }
+
+        [class*="collapse"] & {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            z-index: 3;
+            &:before {
+                color: $colorSplitterFg;
+                display: block;
+                font-size: 0.8em;
+                font-family: symbolsfont;
+            }
+        }
+
+        [class*="collapse-left"] & {
+            border-bottom-left-radius: $controlCr;
+            right: 0;
+            &:before {
+                content: $glyph-icon-arrow-left;
+            }
+        }
+
+        [class*="collapse-right"] & {
+            border-bottom-right-radius: $controlCr;
+            left: 0;
+            &:before {
+                content: $glyph-icon-arrow-right;
+            }
+        }
+
+
+    }
 </style>
 
 <script>
     export default {
         props: {
-            align: String
+            align: String,
+            collapse: String
         }
     }
 </script>

src/ui/components/layout/Layout.vue

@@ -10,12 +10,12 @@
                     <MctTree ref="shell-tree"></MctTree>
                 </div>
             </div>
-            <splitter align="vertical" target="shell-pane-tree"></splitter>
+            <splitter align="vertical" target="shell-pane-tree" collapse="to-left"></splitter>
             <div class="l-pane l-shell__pane-main" ref="shell-pane-main">
                 <div class="l-shell__object-view">c-object-view</div>
                 <div class="l-shell__time-conductor">c-time-conductor</div>
             </div>
-            <splitter align="vertical" target="shell-pane-main"></splitter>
+            <splitter align="vertical" target="shell-pane-main" collapse="to-right"></splitter>
             <div class="l-pane l-shell__pane-inspector">
                 <MctInspector ref="shell-inspector"></MctInspector>
             </div>