[Frontend] Manual re-do of collapse/expand panes

open #90
Major work on new .mini-tab elements, used
as controls to expand/collapse panes;
Cleaned up splitter hover behavior;
Changed mixin controlGrippy to not be tied
to :before;

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -22,13 +22,17 @@
 $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;
 
-.s-btn {
-    @include box-sizing(border-box);
+.s-btn,
+.s-icon-btn {
     @include user-select(none);
     cursor: pointer;
     text-decoration: none;
     height: $btnStdH;
     line-height: $btnStdH;
+}
+
+.s-btn {
+    @include box-sizing(border-box);
     padding: 0 $pad;
     font-size: 0.7rem;
 
@@ -89,6 +93,78 @@ $pad: $interiorMargin * $baseRatio;
     }
 }
 
+.s-icon-btn {
+    @extend .ui-symbol;
+    color: $colorBtnIcon;
+    &:hover {
+        color: lighten($colorBtnIcon, $ltGamma);
+    }
+}
+
+.mini-tab {
+    // Meant to be used as pane hide/show control elements in concert with mct-splitter
+    @extend .ui-symbol;
+    @include trans-prop-nice(left, 150ms);
+    //@include test(green);
+    $iconD: 12px;
+    $arwD: 7px;
+    $c: pullForward($colorBodyBg, 15%);
+    color: $c;
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    font-size: $iconD;
+    line-height: $iconD;
+    height: $iconD; width: $iconD;
+
+    &:hover {
+        color: pullForward($c, 20%);
+        &:after {
+            color: $colorKey;
+        }
+    }
+
+    &:before,
+    &:after {
+        @include trans-prop-nice(color, 200ms);
+        display: block;
+        position: absolute;
+    }
+
+    &:before {
+        // Always the arrow icon
+        @include trans-prop-nice(left, 150ms);
+        //@include test(green);
+        font-size: $arwD;
+        height: 100%; width: $arwD;
+    }
+    &:after {
+        // Representative icon
+        //@include test(red);
+        width: 100%;
+        height: 100%;
+    }
+
+    &.anchor-left {
+        // < []
+        $xpos: (1px + $arwD) * -1;
+        &:before {
+            content:'\3c';
+            left: $xpos;
+        }
+        &:hover:before { left: $xpos - 3; }
+    }
+    &.anchor-right {
+        // [] >
+        $xpos: $iconD + 2px;
+        &:before {
+            content:'\3e';
+            left: $xpos;
+        }
+        &:hover:before { left: $xpos + 3; }
+    }
+}
+
 .l-btn-set {
     // Buttons that have a very tight conceptual grouping - no internal space between them.
     // Structure: .btn-set > mct-representation class=first|last > .s-btn