[Frontend] Expand/collapse styling

open #90
Modding mini-tab look, just started;

platform/commonUI/general/res/sass/_inspector.scss

@@ -21,8 +21,6 @@
  *****************************************************************************/
 /* Styles for the Inspector pane */
 
-//.pane.right.t-inspect { @include test(green, 0.3); } // TEMP!
-
 .l-inspect,
 .l-inspect table tr td {
     font-size: 0.7rem;

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

@@ -102,6 +102,97 @@ $pad: $interiorMargin * $baseRatio;
 }
 
 .mini-tab {
+    // Meant to be used as pane hide/show control elements in concert with mct-splitter
+    @extend .ui-symbol;
+    @include desktop {
+        @include trans-prop-nice(left, 150ms);
+        //@include test(green);
+        $iconD: 12px;
+        $arwD: 7px;
+        $arwOffsetX: 0px;
+        $arwAnimOffsetX: 2px;
+        $arwToLeftAnimX: -1 * $arwAnimOffsetX;
+        $arwToRightAnimX: $arwAnimOffsetX;
+        $arwToLeftX: ($arwOffsetX + $arwD) * -1;
+        $arwToRightX: $iconD + $arwOffsetX;
+        $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 {
+            // Always vertical bar element
+            width: 100%;
+            height: 100%;
+        }
+
+        &.anchor-left {
+            // < []
+            $xpos: $arwToLeftX;
+            &:before {
+                content:'\3c';
+                left: $xpos;
+            }
+            &:hover:before { left: $xpos + $arwToLeftAnimX; }
+            &.collapsed {
+                $xpos: $arwToRightX;
+                &:before {
+                    content:'\3e';
+                    left: $xpos;
+                }
+                &:hover:before { left: $xpos + $arwToRightAnimX; }
+            }
+        }
+        &.anchor-right {
+            // [] >
+            $xpos: $arwToRightX;
+            &:before {
+                content:'\3e';
+                left: $xpos;
+            }
+            &:hover:before { left: $xpos + $arwToRightAnimX; }
+            &.collapsed {
+                $xpos: $arwToLeftX;
+                &:before {
+                    content:'\3c';
+                    left: $xpos;
+                }
+                &:hover:before { left: $xpos + $arwToLeftAnimX; }
+            }
+        }
+
+        &.collapsed {
+            // State when the pane this element controls has been collapsed
+        }
+    }
+}
+
+.mini-tab-icon {
     // Meant to be used as pane hide/show control elements in concert with mct-splitter
     @extend .ui-symbol;
     @include desktop {

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -214,6 +214,7 @@
             &.t-inspect.right {
                 min-width: 100px;
                 max-width: 800px;
+                padding-left: 15px; // Allow room for mini-tab element
                 width: $ueBrowseRightPaneInspectW;
             }
         }
@@ -233,6 +234,7 @@
 }
 
 .pane {
+    @include box-sizing(border-box);
     position: absolute;
 
     .pane-header {