[Frontend] Expand/collapse styling

open #90
Significant styling on new mini-tabs;
Main layout margins adjusted;

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

@@ -103,92 +103,112 @@ $pad: $interiorMargin * $baseRatio;
 
 .mini-tab {
     // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    @extend .ui-symbol;
+    //@extend .ui-symbol;
     @include desktop {
-        @include trans-prop-nice(left, 150ms);
         //@include test(green);
-        $iconD: 12px;
-        $arwD: 7px;
+        $iconH: $uePaneMiniTabH;
+        $iconW: $uePaneMiniTabW;
+        $iconInnerLR: 0;
+        $arwD: 9px;
         $arwOffsetX: 0px;
-        $arwAnimOffsetX: 2px;
-        $arwToLeftAnimX: -1 * $arwAnimOffsetX;
-        $arwToRightAnimX: $arwAnimOffsetX;
-        $arwToLeftX: ($arwOffsetX + $arwD) * -1;
-        $arwToRightX: $iconD + $arwOffsetX;
-        $c: pullForward($colorBodyBg, 15%);
-        color: $c;
+        $arwAnimOffsetX: 2px + $iconInnerLR;
+        $cBg: pullForward($colorBodyBg, 15%);
+        $cFg: $cBg;
+
+
+        @include border-radius($basicCr);
+        //@include boxShdw($shdwBtns);
+        @include box-sizing(border-box);
+        @include trans-prop-nice((color, background-color), 100ms);
+        color: $cFg;
         cursor: pointer;
+        font-family: symbolsfont;
+        font-size: $arwD;
         display: block;
         position: absolute;
-        font-size: $iconD;
-        line-height: $iconD;
-        height: $iconD; width: $iconD;
+        line-height: $iconH;
+        height: $iconH; width: $iconW;
 
         &:hover {
-            color: pullForward($c, 20%);
-            &:after {
-                color: $colorKey;
+            //background-color: $cBg;
+            color: $colorKey; //pullForward($cFg, $ltGamma);
+        }
+
+        &.collapsed {
+            // State when the pane this element controls has been collapsed
+            @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
+            &:before { opacity: 0; }
+            &:after { opacity: 1; }
+            &:hover {
+                &:before { opacity: 1; }
+                &:after { opacity: 0; }
             }
+
         }
 
         &:before,
         &:after {
-            @include trans-prop-nice(color, 200ms);
+            @include trans-prop-nice((left, right, opacity), 250ms);
             display: block;
+            height: 100%;
             position: absolute;
         }
 
         &:before {
             // Always the arrow icon
-            @include trans-prop-nice(left, 150ms);
             //@include test(green);
-            font-size: $arwD;
-            height: 100%; width: $arwD;
+            //font-size: $arwD;
+            width: $arwD;
         }
         &:after {
-            // Always vertical bar element
+            // Always icon; content is set in _layout.scss
             width: 100%;
-            height: 100%;
+            text-align: center;
+            opacity: 0;
         }
 
         &.anchor-left {
-            // < []
-            $xpos: $arwToLeftX;
+            // |<
+            text-align: right;
             &:before {
                 content:'\3c';
-                left: $xpos;
+                right: $iconInnerLR;
             }
-            &:hover:before { left: $xpos + $arwToLeftAnimX; }
+            //&:after {
+            //    right: auto; left: $iconInnerLR;
+            //}
+            &:hover:before { right: $arwAnimOffsetX; }
             &.collapsed {
-                $xpos: $arwToRightX;
+                @include border-left-radius(0);
+                text-align: left;
                 &:before {
                     content:'\3e';
-                    left: $xpos;
+                    left: $iconInnerLR;
                 }
-                &:hover:before { left: $xpos + $arwToRightAnimX; }
+                &:hover:before { left: $arwAnimOffsetX; }
             }
         }
         &.anchor-right {
-            // [] >
-            $xpos: $arwToRightX;
+            // >|
             &:before {
+                text-align: left;
                 content:'\3e';
-                left: $xpos;
+                left: $iconInnerLR;
             }
-            &:hover:before { left: $xpos + $arwToRightAnimX; }
+            //&:after {
+            //    right: $iconInnerLR; left: auto;
+            //}
+            &:hover:before { left: $arwAnimOffsetX; }
             &.collapsed {
-                $xpos: $arwToLeftX;
+                @include border-right-radius(0);
                 &:before {
+                    text-align: right;
                     content:'\3c';
-                    left: $xpos;
+                    right: $iconInnerLR;
                 }
-                &:hover:before { left: $xpos + $arwToLeftAnimX; }
+                &:hover:before { right: $arwAnimOffsetX; }
             }
         }
-
-        &.collapsed {
-            // State when the pane this element controls has been collapsed
-        }
     }
 }