[Frontend] Significant change to look and behavior of mini-tabs

open #90
IN-PROGRESS
mini-tab location in markup in browse.html changed;
Single menu icon for collapsed treeview;
Close 'x' boxes instead of arrow icons;
TO-DO: verify mobile is Ok;

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

@@ -270,35 +270,55 @@
         }
     }
 
-    .mini-tab.toggle-pane {
+    .mini-tab-icon.toggle-pane {
         //@include test(blue, 0.3);
-        $paneExpandedOffset: $splitterD + $uePaneMiniTabW - splitterHandleInset($splitterD, $splitterHandleD);
         z-index: 5;
         @include desktop {
-            top: $interiorMarginLg;
+            $d: $uePaneMiniTabH;
+            $paneExpandedOffset: $splitterD + $uePaneMiniTabW;
+            top: $bodyMargin;
+            height: $d;
+            line-height: $d;
+            &:after {
+                // Always the icon that shows when the pane is collapsed
+                opacity: 0;
+            }
+            &.collapsed {
+                &:before {
+                    opacity: 0;
+                }
+                &:after {
+                    opacity: 1;
+                }
+            }
             &.toggle-tree.anchor-left {
-                //@include test(green);
-                left: 0; //$ox;
+                left: 0;
                 @include transform(translateX(-1 * $paneExpandedOffset));
-                &:after { content: 'F'; } // Folder icon
+                &:after {
+                    content: '\6d'; // Menu 'hamburger' icon
+                }
                 &.collapsed {
-                    @include transform(translateX(-1 * $ueCollapsedPaneEdgeM));
+                    left: 0;
+                    @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
+                }
+                &:not(.collapsed):before {
+                    @include trans-prop-nice(opacity, 200ms, 200ms);
                 }
             }
             &.toggle-inspect.anchor-right {
-                $oCx: -1 * $ueCollapsedPaneEdgeM;
-                right: 0; //$ox;
-                @include transform(translateX($paneExpandedOffset));
-                &:after { content: '\e608'; } // Info "i" icon
+                right: $bodyMargin;
+                &:after {
+                    content: '\e608';  // Info "i" icon
+                }
                 &.collapsed {
-                    @include transform(translateX($ueCollapsedPaneEdgeM));
+                    right: $interiorMargin;
                 }
             }
-            &.toggle-search.anchor-left {
-                &:after {
+/*            &.toggle-search.anchor-left {
+                &:before {
                     content:"M"
                 }
-            }
+            }*/
         }
     }
 
@@ -357,7 +377,7 @@
         .holder-inspector-elements {
             top: $bodyMargin;
             bottom: $bodyMargin;
-            left: $bodyMargin + $interiorMarginLg;
+            left: $bodyMargin;
             right: $bodyMargin;
 
         }
@@ -431,10 +451,10 @@
     //.pane.left.treeview,
     .tree-holder,
     .splitter-treeview,
-    .search-holder .search {
+    .holder-create-and-search {
         opacity: 0;
     }
-    .holder-create-and-search{
+    /*.holder-create-and-search {
         @include trans-prop-nice((top, left), 250ms);
         top: $ueTopBarH + $interiorMargin;
         left: -1 * $bodyMargin !important;
@@ -452,29 +472,26 @@
                 font-size: 9px;
             }
         }
-    }
+    }*/
 }
 
 .pane-tree-showing {
     // Sets the left tree menu when the tree is shown.
     //.pane.left.treeview,
     .tree-holder,
-    .splitter-treeview,
-    .search-holder .search {
+    .splitter-treeview {
         @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
         opacity: 1;
     }
-    .splitter-treeview {
-        top: $interiorMarginLg + $ueTopBarH !important;
-    }
-    .holder-create-and-search{
-        @include trans-prop-nice(top, $dur: 250ms, $delay: 200ms);
+
+    .holder-create-and-search {
+        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
     }
 }
 
 .pane-inspect-showing {
     .l-object-and-inspector {
-        .pane.right,
+        .l-inspect,
         .splitter-inspect {
             @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
             opacity: 1;
@@ -483,7 +500,7 @@
 }
 .pane-inspect-hidden {
     .l-object-and-inspector {
-        .pane.right,
+        .l-inspect,
         .splitter-inspect {
             opacity: 0;
         }