[Frontend] Refactor to allow left pane to dynamically layout

open #157
IN-PROGRESS, DOESN'T WORK YET;
Changed browse.html to normalize mct-representation;
Changed to use flex column layout;
Solution pending email to team "Angular's markup cruft";

platform/commonUI/browse/res/templates/browse.html

@@ -27,27 +27,23 @@
          ng-class="tree.visible() ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane left'>
-                <div class="holder abs l-mobile">
+                <mct-representation key="'create-button'"
-                    <mct-representation key="'create-button'"
+                                    mct-object="navigatedObject"
-                                        mct-object="navigatedObject"
+                                    class="holder create-btn-holder">
-                                        mct-device="desktop">
+                </mct-representation>
-                    </mct-representation>
+                <mct-representation key="'search'"
-                    <div class='holder search-holder abs'
+                                    mct-object="domainObject"
-                         ng-class="{active: treeModel.search}">
+                                    ng-model="treeModel"
-                        <mct-representation key="'search'"
+                                    class='holder search-holder'
-                                     mct-object="domainObject"
+                                    ng-class="{active: treeModel.search}">
-                                     ng-model="treeModel">
+                </mct-representation>
-                        </mct-representation>
+                <mct-representation key="'tree'"
-                    </div>
+                                    mct-object="domainObject"
-                    <div class='tree-holder abs mobile-tree-holder'
+                                    parameters="tree"
-                         ng-hide="treeModel.search">
+                                    ng-model="treeModel"
-                        <mct-representation key="'tree'"
+                                    class="holder tree-holder"
-                                            mct-object="domainObject"
+                                    ng-hide="treeModel.search">
-                                            parameters="tree"
+                </mct-representation>
-                                            ng-model="treeModel">
-                        </mct-representation>
-                    </div>
-                </div>
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>

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

@@ -90,7 +90,8 @@ p {
 	margin-bottom: $interiorMarginLg;
 }
 
-mct-container {
+mct-container,
+mct-representation {
 	display: block;
 }
 

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -55,6 +55,16 @@
         left: $bodyMargin !important;
     }
 
+    // Hide the Create button by default. example/mobile bundle will un-hide this.
+    .browse-mode {
+        .t-create-btn {
+            display: none;
+        }
+        .search-holder {
+            top: 0;
+        }
+    }
+
     // When the tree is hidden, these are the
     // classes used for the left menu and the
     // right representation.

platform/commonUI/general/res/sass/search/_search.scss

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-.abs.search-holder {
+.search-holder {
 	//@include test(#990000);
 	height: $treeSearchInputBarH;
 	bottom: 0;
@@ -39,11 +39,8 @@
 	$iconWidth: 20px;
 	$leftMargin: 6px;
 	$rightPadding: 5px;
-	@include webkitVal(display, flex);
+    @include display-flex(column nowrap);
-	//display: flex;
+	//height: 100%;
-	@include webkitProp(flex-direction, column);
-	//flex-direction: column;
-	height: 100%;
 
 	.search-bar {
 		$textInputHeight: 19px; // This is equal to the default value, 19px

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

@@ -230,20 +230,32 @@
 .pane {
     position: absolute;
     &.treeview.left {
+        @include display-flex(column nowrap);
+        > .holder {
+            @include test(#0af);
+            margin-top: $interiorMarginLg;
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+
 	    .create-btn-holder {
-		    bottom: auto; top: 0;
+		    //bottom: auto; top: 0;
+            @include flex(0 0 auto);
 		    height: $ueTopBarH;
-		    .wrapper.menu-element {
+		    //.wrapper.menu-element {
-			    position: absolute;
+			 //   position: absolute;
-			    bottom: $interiorMargin;
+			 //   bottom: $interiorMargin;
-		    }
+		    //}
 	    }
 	    .search-holder {
-		    top: $ueTopBarH + $interiorMarginLg;
+		    //top: $ueTopBarH + $interiorMarginLg;
+            @include flex(0 0 auto);
 	    }
 	    .tree-holder {
 		    overflow: auto;
-			top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
+            @include flex(1 0 auto);
+			//top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
 	    }
     }
     &.items {

platform/commonUI/themes/espresso/res/css/theme-espresso.css

@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -369,10 +369,11 @@ p {
   margin-bottom: 10px; }
 
 /* line 93, ../../../../general/res/sass/_global.scss */
-mct-container {
+mct-container,
+mct-representation {
   display: block; }
 
-/* line 97, ../../../../general/res/sass/_global.scss */
+/* line 98, ../../../../general/res/sass/_global.scss */
 .abs, .s-menu span.l-click-area {
   position: absolute;
   top: 0;
@@ -382,42 +383,42 @@ mct-container {
   height: auto;
   width: auto; }
 
-/* line 107, ../../../../general/res/sass/_global.scss */
+/* line 108, ../../../../general/res/sass/_global.scss */
 .code, .codehilite {
   font-family: "Lucida Console", monospace;
   font-size: 0.7em;
   line-height: 150%;
   white-space: pre; }
 
-/* line 114, ../../../../general/res/sass/_global.scss */
+/* line 115, ../../../../general/res/sass/_global.scss */
 .codehilite {
   background-color: rgba(153, 153, 153, 0.1);
   padding: 1em; }
 
-/* line 120, ../../../../general/res/sass/_global.scss */
+/* line 121, ../../../../general/res/sass/_global.scss */
 .align-right {
   text-align: right; }
 
-/* line 124, ../../../../general/res/sass/_global.scss */
+/* line 125, ../../../../general/res/sass/_global.scss */
 .centered {
   text-align: center; }
 
-/* line 128, ../../../../general/res/sass/_global.scss */
+/* line 129, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 133, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 137, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 141, ../../../../general/res/sass/_global.scss */
+/* line 142, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -3200,56 +3201,65 @@ span.req {
 /* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 232, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.treeview.left .create-btn-holder {
+  .pane.treeview.left {
-    bottom: auto;
+    display: -webkit-column nowrap;
-    top: 0;
+    display: column nowrap; }
-    height: 24px; }
+    /* line 234, ../../../../general/res/sass/user-environ/_layout.scss */
-    /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left > .holder {
-    .pane.treeview.left .create-btn-holder .wrapper.menu-element {
+      background-color: rgba(0, 170, 255, 0.2);
-      position: absolute;
+      margin-top: 10px; }
-      bottom: 5px; }
+      /* line 237, ../../../../general/res/sass/user-environ/_layout.scss */
-  /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
+      .pane.treeview.left > .holder:first-child {
-  .pane.treeview.left .search-holder {
+        margin-top: 0; }
-    top: 34px; }
+    /* line 242, ../../../../general/res/sass/user-environ/_layout.scss */
-  /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left .create-btn-holder {
-  .pane.treeview.left .tree-holder {
+      -webkit-flex: 0 0 auto;
-    overflow: auto;
+      flex: 0 0 auto;
-    top: 64px; }
+      height: 24px; }
-  /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left .search-holder {
+      -webkit-flex: 0 0 auto;
+      flex: 0 0 auto; }
+    /* line 255, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left .tree-holder {
+      overflow: auto;
+      -webkit-flex: 1 0 auto;
+      flex: 1 0 auto; }
+  /* line 263, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .s-menu span.right.l-click-area,
   .s-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 286, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 289, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 296, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 299, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 303, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 305, ../../../../general/res/sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 314, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu,
@@ -3261,12 +3271,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 332, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3282,26 +3292,15 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/*.object-holder {
-    .s-btn {
-        //background: red !important;
-        $h: 16px;
-        height: $h;
-        line-height: $h;
-        > span {
-            font-size: 0.7rem;
-        }
-    }
-}*/
 /* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
@@ -3387,30 +3386,37 @@ span.req {
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 61, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 60, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-mode .t-create-btn {
+    display: none; }
+  /* line 63, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-mode .search-holder {
+    top: 0; }
+
+  /* line 71, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 65, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 75, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-hidetree .pane.left.treeview {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 74, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 84, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-hidetree .pane.right-repr {
       left: 0 !important; }
 
-  /* line 79, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 89, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 88, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 98, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.left.treeview {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -3433,47 +3439,47 @@ span.req {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 98, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 108, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr {
       left: 40% !important; }
 
-  /* line 107, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 117, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 114, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 124, ../../../../general/res/sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 117, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 127, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 120, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 130, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
-      /* line 122, ../../../../general/res/sass/mobile/_layout.scss */
+      /* line 132, ../../../../general/res/sass/mobile/_layout.scss */
       .object-browse-bar .view-switcher .title-label {
         display: none; }
 
-  /* line 129, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 139, ../../../../general/res/sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 133, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 143, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 138, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 148, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 143, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 153, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -3490,7 +3496,7 @@ span.req {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 148, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 158, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -3507,19 +3513,19 @@ span.req {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 157, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 167, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree .pane.left.treeview {
     width: 90% !important; }
-  /* line 160, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 170, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
     transform: translateX(90%);
     -webkit-transform: translateX(90%); }
-    /* line 163, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 173, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr #content-area {
       opacity: 0; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 171, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 181, ../../../../general/res/sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
@@ -3663,36 +3669,33 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/search/_search.scss */
-.abs.search-holder, .s-menu span.search-holder.l-click-area {
+.search-holder {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
   /* line 27, ../../../../general/res/sass/search/_search.scss */
-  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
+  .search-holder.active {
     height: auto;
     bottom: 0; }
 
 /* line 38, ../../../../general/res/sass/search/_search.scss */
 .search {
-  display: flex;
+  display: -webkit-column nowrap;
-  display: -webkit-flex;
+  display: column nowrap; }
-  flex-direction: column;
+  /* line 45, ../../../../general/res/sass/search/_search.scss */
-  -webkit-flex-direction: column;
-  height: 100%; }
-  /* line 48, ../../../../general/res/sass/search/_search.scss */
   .search .search-bar {
     font-size: 0.8em;
     max-width: 250px;
     position: relative;
     width: 100%; }
-    /* line 60, ../../../../general/res/sass/search/_search.scss */
+    /* line 57, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input {
       height: 25px;
       line-height: 25px;
       padding-top: 0;
       padding-bottom: 0; }
-    /* line 67, ../../../../general/res/sass/search/_search.scss */
+    /* line 64, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon,
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
@@ -3706,7 +3709,7 @@ span.req {
       position: absolute;
       text-align: center;
       top: 4px; }
-    /* line 80, ../../../../general/res/sass/search/_search.scss */
+    /* line 77, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
       cursor: pointer;
@@ -3714,62 +3717,62 @@ span.req {
       -o-transition: color, 0.25s;
       -webkit-transition: color, 0.25s;
       transition: color, 0.25s; }
-    /* line 87, ../../../../general/res/sass/search/_search.scss */
+    /* line 84, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input {
       position: relative;
       width: 100%;
       padding-left: 22px !important;
       padding-right: 44px !important; }
-      /* line 94, ../../../../general/res/sass/search/_search.scss */
+      /* line 91, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .search-input input {
         width: 100%; }
-    /* line 99, ../../../../general/res/sass/search/_search.scss */
+    /* line 96, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon {
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
-    /* line 119, ../../../../general/res/sass/search/_search.scss */
+    /* line 116, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
       color: #8c8c8c; }
-    /* line 123, ../../../../general/res/sass/search/_search.scss */
+    /* line 120, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
       visibility: hidden;
       opacity: 0;
       transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 132, ../../../../general/res/sass/search/_search.scss */
+      /* line 129, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon.content {
         visibility: visible;
         opacity: 1; }
-      /* line 137, ../../../../general/res/sass/search/_search.scss */
+      /* line 134, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
         color: #8c8c8c; }
-    /* line 142, ../../../../general/res/sass/search/_search.scss */
+    /* line 139, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
       padding-right: 4px;
       right: 4px;
       text-align: right; }
-      /* line 148, ../../../../general/res/sass/search/_search.scss */
+      /* line 145, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
         color: #8c8c8c; }
-    /* line 153, ../../../../general/res/sass/search/_search.scss */
+    /* line 150, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
       left: -20px;
       z-index: 1;
       transition: visibility .05s, opacity .05s; }
-      /* line 163, ../../../../general/res/sass/search/_search.scss */
+      /* line 160, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .search-menu-holder.off {
         visibility: hidden;
         opacity: 0; }
-    /* line 170, ../../../../general/res/sass/search/_search.scss */
+    /* line 167, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon:hover + div.search-menu-holder {
       visibility: visible; }
-    /* line 173, ../../../../general/res/sass/search/_search.scss */
+    /* line 170, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar div.search-menu-holder:hover {
       visibility: visible; }
-  /* line 178, ../../../../general/res/sass/search/_search.scss */
+  /* line 175, ../../../../general/res/sass/search/_search.scss */
   .search .active-filter-display {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -3782,7 +3785,7 @@ span.req {
     padding-left: 1.4625em;
     font-size: 0.65em;
     margin-top: 3px; }
-    /* line 193, ../../../../general/res/sass/search/_search.scss */
+    /* line 190, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display .clear-filters-icon {
       color: #737373;
       opacity: 1;
@@ -3790,7 +3793,7 @@ span.req {
       position: absolute;
       left: 1px;
       cursor: pointer; }
-    /* line 205, ../../../../general/res/sass/search/_search.scss */
+    /* line 202, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display.off {
       visibility: hidden;
       opacity: 0;
@@ -3798,7 +3801,7 @@ span.req {
       margin: 0;
       padding: 0;
       border: 0; }
-  /* line 215, ../../../../general/res/sass/search/_search.scss */
+  /* line 212, ../../../../general/res/sass/search/_search.scss */
   .search .search-scroll {
     order: 3;
     margin-top: 4px;
@@ -3807,27 +3810,27 @@ span.req {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 228, ../../../../general/res/sass/search/_search.scss */
+    /* line 225, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 230, ../../../../general/res/sass/search/_search.scss */
+      /* line 227, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 234, ../../../../general/res/sass/search/_search.scss */
+        /* line 231, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 244, ../../../../general/res/sass/search/_search.scss */
+        /* line 241, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 249, ../../../../general/res/sass/search/_search.scss */
+      /* line 246, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 254, ../../../../general/res/sass/search/_search.scss */
+    /* line 251, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;

platform/commonUI/themes/snow/res/css/theme-snow.css

@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -369,10 +369,11 @@ p {
   margin-bottom: 10px; }
 
 /* line 93, ../../../../general/res/sass/_global.scss */
-mct-container {
+mct-container,
+mct-representation {
   display: block; }
 
-/* line 97, ../../../../general/res/sass/_global.scss */
+/* line 98, ../../../../general/res/sass/_global.scss */
 .abs, .s-menu span.l-click-area {
   position: absolute;
   top: 0;
@@ -382,42 +383,42 @@ mct-container {
   height: auto;
   width: auto; }
 
-/* line 107, ../../../../general/res/sass/_global.scss */
+/* line 108, ../../../../general/res/sass/_global.scss */
 .code, .codehilite {
   font-family: "Lucida Console", monospace;
   font-size: 0.7em;
   line-height: 150%;
   white-space: pre; }
 
-/* line 114, ../../../../general/res/sass/_global.scss */
+/* line 115, ../../../../general/res/sass/_global.scss */
 .codehilite {
   background-color: rgba(102, 102, 102, 0.1);
   padding: 1em; }
 
-/* line 120, ../../../../general/res/sass/_global.scss */
+/* line 121, ../../../../general/res/sass/_global.scss */
 .align-right {
   text-align: right; }
 
-/* line 124, ../../../../general/res/sass/_global.scss */
+/* line 125, ../../../../general/res/sass/_global.scss */
 .centered {
   text-align: center; }
 
-/* line 128, ../../../../general/res/sass/_global.scss */
+/* line 129, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 133, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 137, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 141, ../../../../general/res/sass/_global.scss */
+/* line 142, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -3132,56 +3133,65 @@ span.req {
 /* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 232, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.treeview.left .create-btn-holder {
+  .pane.treeview.left {
-    bottom: auto;
+    display: -webkit-column nowrap;
-    top: 0;
+    display: column nowrap; }
-    height: 24px; }
+    /* line 234, ../../../../general/res/sass/user-environ/_layout.scss */
-    /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left > .holder {
-    .pane.treeview.left .create-btn-holder .wrapper.menu-element {
+      background-color: rgba(0, 170, 255, 0.2);
-      position: absolute;
+      margin-top: 10px; }
-      bottom: 5px; }
+      /* line 237, ../../../../general/res/sass/user-environ/_layout.scss */
-  /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
+      .pane.treeview.left > .holder:first-child {
-  .pane.treeview.left .search-holder {
+        margin-top: 0; }
-    top: 34px; }
+    /* line 242, ../../../../general/res/sass/user-environ/_layout.scss */
-  /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left .create-btn-holder {
-  .pane.treeview.left .tree-holder {
+      -webkit-flex: 0 0 auto;
-    overflow: auto;
+      flex: 0 0 auto;
-    top: 64px; }
+      height: 24px; }
-  /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left .search-holder {
+      -webkit-flex: 0 0 auto;
+      flex: 0 0 auto; }
+    /* line 255, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left .tree-holder {
+      overflow: auto;
+      -webkit-flex: 1 0 auto;
+      flex: 1 0 auto; }
+  /* line 263, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .s-menu span.right.l-click-area,
   .s-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 286, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 289, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 296, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 299, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 303, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 305, ../../../../general/res/sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 314, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu,
@@ -3193,12 +3203,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 332, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3214,26 +3224,15 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/*.object-holder {
-    .s-btn {
-        //background: red !important;
-        $h: 16px;
-        height: $h;
-        line-height: $h;
-        > span {
-            font-size: 0.7rem;
-        }
-    }
-}*/
 /* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
@@ -3319,30 +3318,37 @@ span.req {
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 61, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 60, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-mode .t-create-btn {
+    display: none; }
+  /* line 63, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-mode .search-holder {
+    top: 0; }
+
+  /* line 71, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 65, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 75, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-hidetree .pane.left.treeview {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 74, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 84, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-hidetree .pane.right-repr {
       left: 0 !important; }
 
-  /* line 79, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 89, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 88, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 98, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.left.treeview {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -3365,47 +3371,47 @@ span.req {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 98, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 108, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr {
       left: 40% !important; }
 
-  /* line 107, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 117, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 114, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 124, ../../../../general/res/sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 117, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 127, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 120, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 130, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
-      /* line 122, ../../../../general/res/sass/mobile/_layout.scss */
+      /* line 132, ../../../../general/res/sass/mobile/_layout.scss */
       .object-browse-bar .view-switcher .title-label {
         display: none; }
 
-  /* line 129, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 139, ../../../../general/res/sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 133, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 143, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 138, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 148, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 143, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 153, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -3422,7 +3428,7 @@ span.req {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 148, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 158, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -3439,19 +3445,19 @@ span.req {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 157, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 167, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree .pane.left.treeview {
     width: 90% !important; }
-  /* line 160, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 170, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
     transform: translateX(90%);
     -webkit-transform: translateX(90%); }
-    /* line 163, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 173, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr #content-area {
       opacity: 0; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 171, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 181, ../../../../general/res/sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
@@ -3595,36 +3601,33 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/search/_search.scss */
-.abs.search-holder, .s-menu span.search-holder.l-click-area {
+.search-holder {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
   /* line 27, ../../../../general/res/sass/search/_search.scss */
-  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
+  .search-holder.active {
     height: auto;
     bottom: 0; }
 
 /* line 38, ../../../../general/res/sass/search/_search.scss */
 .search {
-  display: flex;
+  display: -webkit-column nowrap;
-  display: -webkit-flex;
+  display: column nowrap; }
-  flex-direction: column;
+  /* line 45, ../../../../general/res/sass/search/_search.scss */
-  -webkit-flex-direction: column;
-  height: 100%; }
-  /* line 48, ../../../../general/res/sass/search/_search.scss */
   .search .search-bar {
     font-size: 0.8em;
     max-width: 250px;
     position: relative;
     width: 100%; }
-    /* line 60, ../../../../general/res/sass/search/_search.scss */
+    /* line 57, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input {
       height: 25px;
       line-height: 25px;
       padding-top: 0;
       padding-bottom: 0; }
-    /* line 67, ../../../../general/res/sass/search/_search.scss */
+    /* line 64, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon,
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
@@ -3638,7 +3641,7 @@ span.req {
       position: absolute;
       text-align: center;
       top: 4px; }
-    /* line 80, ../../../../general/res/sass/search/_search.scss */
+    /* line 77, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
       cursor: pointer;
@@ -3646,62 +3649,62 @@ span.req {
       -o-transition: color, 0.25s;
       -webkit-transition: color, 0.25s;
       transition: color, 0.25s; }
-    /* line 87, ../../../../general/res/sass/search/_search.scss */
+    /* line 84, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input {
       position: relative;
       width: 100%;
       padding-left: 22px !important;
       padding-right: 44px !important; }
-      /* line 94, ../../../../general/res/sass/search/_search.scss */
+      /* line 91, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .search-input input {
         width: 100%; }
-    /* line 99, ../../../../general/res/sass/search/_search.scss */
+    /* line 96, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon {
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
-    /* line 119, ../../../../general/res/sass/search/_search.scss */
+    /* line 116, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
       color: #8c8c8c; }
-    /* line 123, ../../../../general/res/sass/search/_search.scss */
+    /* line 120, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
       visibility: hidden;
       opacity: 0;
       transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 132, ../../../../general/res/sass/search/_search.scss */
+      /* line 129, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon.content {
         visibility: visible;
         opacity: 1; }
-      /* line 137, ../../../../general/res/sass/search/_search.scss */
+      /* line 134, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
         color: #8c8c8c; }
-    /* line 142, ../../../../general/res/sass/search/_search.scss */
+    /* line 139, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
       padding-right: 4px;
       right: 4px;
       text-align: right; }
-      /* line 148, ../../../../general/res/sass/search/_search.scss */
+      /* line 145, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
         color: #8c8c8c; }
-    /* line 153, ../../../../general/res/sass/search/_search.scss */
+    /* line 150, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
       left: -20px;
       z-index: 1;
       transition: visibility .05s, opacity .05s; }
-      /* line 163, ../../../../general/res/sass/search/_search.scss */
+      /* line 160, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .search-menu-holder.off {
         visibility: hidden;
         opacity: 0; }
-    /* line 170, ../../../../general/res/sass/search/_search.scss */
+    /* line 167, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon:hover + div.search-menu-holder {
       visibility: visible; }
-    /* line 173, ../../../../general/res/sass/search/_search.scss */
+    /* line 170, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar div.search-menu-holder:hover {
       visibility: visible; }
-  /* line 178, ../../../../general/res/sass/search/_search.scss */
+  /* line 175, ../../../../general/res/sass/search/_search.scss */
   .search .active-filter-display {
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -3714,7 +3717,7 @@ span.req {
     padding-left: 1.4625em;
     font-size: 0.65em;
     margin-top: 3px; }
-    /* line 193, ../../../../general/res/sass/search/_search.scss */
+    /* line 190, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display .clear-filters-icon {
       color: #a6a6a6;
       opacity: 1;
@@ -3722,7 +3725,7 @@ span.req {
       position: absolute;
       left: 1px;
       cursor: pointer; }
-    /* line 205, ../../../../general/res/sass/search/_search.scss */
+    /* line 202, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display.off {
       visibility: hidden;
       opacity: 0;
@@ -3730,7 +3733,7 @@ span.req {
       margin: 0;
       padding: 0;
       border: 0; }
-  /* line 215, ../../../../general/res/sass/search/_search.scss */
+  /* line 212, ../../../../general/res/sass/search/_search.scss */
   .search .search-scroll {
     order: 3;
     margin-top: 4px;
@@ -3739,27 +3742,27 @@ span.req {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 228, ../../../../general/res/sass/search/_search.scss */
+    /* line 225, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 230, ../../../../general/res/sass/search/_search.scss */
+      /* line 227, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 234, ../../../../general/res/sass/search/_search.scss */
+        /* line 231, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 244, ../../../../general/res/sass/search/_search.scss */
+        /* line 241, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 249, ../../../../general/res/sass/search/_search.scss */
+      /* line 246, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 254, ../../../../general/res/sass/search/_search.scss */
+    /* line 251, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;