From cfc9b61e255f3bf9f3ea57aef4c7e936c70437f7 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 9 Nov 2015 16:21:50 -0800
Subject: [PATCH] [Frontend] Adjusted margin strategy in left pane elements

open #250
Changed flex-elem to use margin-bottom instead of top;
Added margin-top to .search-results element;
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/sass/_archetypes.scss         |  2 +-
 .../general/res/sass/search/_search.scss      |  1 +
 .../res/sass/user-environ/_layout.scss        |  5 +-
 .../espresso/res/css/theme-espresso.css       | 99 ++++++++++---------
 .../themes/snow/res/css/theme-snow.css        | 99 ++++++++++---------
 6 files changed, 108 insertions(+), 100 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 0aa03189ea..89bdd86ba9 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,7 +31,7 @@
                 <div class="abs holder l-flex-col holder-treeview-elements">
                     <mct-representation key="'create-button'"
                                         mct-object="navigatedObject"
-                                        class="flex-elem">
+                                        class="holder flex-elem create-btn-holder">
                     </mct-representation>
                     <mct-include key="'search'"
                                  ng-model="treeModel"
diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss
index f0821cd9aa..40458314c0 100644
--- a/platform/commonUI/general/res/sass/_archetypes.scss
+++ b/platform/commonUI/general/res/sass/_archetypes.scss
@@ -136,7 +136,7 @@
     @include flex-direction(column);
     .flex-elem {
         min-height: 0;
-        &:not(:first-child) { margin-top: $interiorMarginLg; }
+        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
     }
     .flex-container { @include flex-direction(column); }
 }
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index 08b37748c0..005bccfced 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -148,6 +148,7 @@
 
 	.search-results {
         @include trans-prop-nice((opacity, visibility), 250ms);
+        margin-top: $interiorMarginLg; // Always include margin here to fend off the search input
 		padding-right: $interiorMargin;
         .hint {
             margin-bottom: $interiorMarginLg;
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index cf46e10a13..b416debacf 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -183,7 +183,6 @@
             }
         }
     }
-
     &.items {
         .object-browse-bar {
             .left.abs,
@@ -302,6 +301,7 @@
         }
     }
 }
+
 .pane-inspect-hidden {
     .l-object-and-inspector {
         .t-inspect {
@@ -318,7 +318,6 @@
     .holder-all {
         min-width: $ueDesktopMinW;
     }
-
     .split-layout {
         .split-pane-component.pane {
             //@include test(green);
@@ -335,8 +334,6 @@
             }
         }
     }
-
-
     .pane.treeview.left .tree-holder {
         padding-right: $interiorMargin;
     }
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 5247e7e5d0..bb154b1ad5 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -581,8 +581,8 @@ mct-container {
   .l-flex-col .flex-elem {
     min-height: 0; }
     /* line 139, ../../../../general/res/sass/_archetypes.scss */
-    .l-flex-col .flex-elem:not(:first-child) {
-      margin-top: 10px; }
+    .l-flex-col .flex-elem.holder:not(:last-child) {
+      margin-bottom: 10px; }
   /* line 141, ../../../../general/res/sass/_archetypes.scss */
   .l-flex-col .flex-container {
     -webkit-flex-direction: column;
@@ -4542,7 +4542,7 @@ span.req {
           /* line 180, ../../../../general/res/sass/user-environ/_layout.scss */
           .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed {
             right: 5px; } }
-  /* line 189, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 188, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
   .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
   .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@@ -4556,30 +4556,30 @@ span.req {
   .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
 
-/* line 199, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 198, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout .holder.holder-treeview-elements {
   top: 10px;
   right: 0;
   bottom: 10px;
   left: 10px; }
-/* line 206, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 205, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout .holder.holder-object-and-inspector {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 211, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 210, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .holder.holder-object-and-inspector .holder-object {
     top: 10px;
     bottom: 10px; }
-  /* line 215, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .holder.holder-object-and-inspector .holder-inspector-elements {
     top: 10px;
     bottom: 10px;
     left: 10px;
     right: 10px; }
 
-/* line 224, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 223, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-holder {
   overflow: auto;
   position: absolute;
@@ -4590,11 +4590,11 @@ span.req {
   width: auto;
   height: auto;
   top: 34px; }
-  /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 227, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-holder.l-controls-visible.l-time-controller-visible {
     bottom: 88px; }
 
-/* line 234, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@@ -4606,13 +4606,13 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 246, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
 /***************************************************** OBJECT BROWSE BAR */
-/* line 253, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 252, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -4628,20 +4628,20 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 260, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 10px; }
-    /* line 263, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       margin-right: 10px; }
 
-/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .tree-holder,
 .pane-tree-hidden .splitter-treeview,
 .pane-tree-hidden .holder-treeview-elements {
   opacity: 0; }
 
-/* line 285, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .tree-holder,
 .pane-tree-showing .splitter-treeview {
   -moz-transition-property: opacity;
@@ -4661,7 +4661,7 @@ span.req {
   -webkit-transition-delay: 250ms;
   transition-delay: 250ms;
   opacity: 1; }
-/* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .holder-treeview-elements {
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
@@ -4680,7 +4680,7 @@ span.req {
   -webkit-transition-delay: 200ms;
   transition-delay: 200ms; }
 
-/* line 298, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-showing .l-object-and-inspector .l-inspect,
 .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
   -moz-transition-property: opacity;
@@ -4714,31 +4714,31 @@ span.req {
   .holder-all {
     min-width: 600px; }
 
-  /* line 325, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .split-pane-component.pane.treeview.left {
     min-width: 150px;
     max-width: 35%;
     width: 25%; }
-  /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 329, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .split-pane-component.pane.t-inspect.right {
     min-width: 200px;
     max-width: 35%;
     width: 20%;
     z-index: 3; }
 
-  /* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     padding-right: 5px; }
 
-  /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane-tree-hidden .pane.right.primary-pane {
     left: 22px !important; }
 
-  /* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane-inspect-hidden .l-object-and-inspector .pane.left {
     right: 22px !important; }
 
-  /* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 346, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane:not(.resizing) {
     -moz-transition-property: width, left, right;
     -o-transition-property: width, left, right;
@@ -4757,7 +4757,7 @@ span.req {
     -webkit-transition-delay: 0;
     transition-delay: 0; }
 
-  /* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.primary-pane .object-browse-bar {
     min-width: 200px; } }
 /*****************************************************************************
@@ -4816,10 +4816,14 @@ span.req {
       opacity: 1; }
 
   /* line 47, ../../../../general/res/sass/mobile/_layout.scss */
+  .create-btn-holder {
+    display: none; }
+
+  /* line 53, ../../../../general/res/sass/mobile/_layout.scss */
   .holder.holder-treeview-elements {
     right: 10px !important; }
 
-  /* line 57, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 63, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-hidden .pane.left.treeview {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -4838,11 +4842,11 @@ span.req {
     -webkit-transition-delay: 0;
     transition-delay: 0;
     opacity: 0 !important; }
-  /* line 65, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 71, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-hidden .pane.right.items {
     left: 0 !important; }
 
-  /* line 79, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 85, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-showing .pane.left.treeview {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -4867,52 +4871,52 @@ span.req {
     background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
     right: auto !important;
     width: 40% !important; }
-  /* line 86, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 92, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-showing .pane.right.items {
     left: 40% !important; }
 
-  /* line 91, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 97, ../../../../general/res/sass/mobile/_layout.scss */
   .toggle-tree {
     color: #0099cc !important;
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
-    /* line 97, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 103, ../../../../general/res/sass/mobile/_layout.scss */
     .toggle-tree:after {
       content: 'm' !important;
       font-family: symbolsfont; }
 
-  /* line 103, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 109, ../../../../general/res/sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 45px !important; }
-    /* line 106, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 112, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 109, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 115, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
-      /* line 111, ../../../../general/res/sass/mobile/_layout.scss */
+      /* line 117, ../../../../general/res/sass/mobile/_layout.scss */
       .object-browse-bar .view-switcher .title-label {
         display: none; }
 
-  /* line 118, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 124, ../../../../general/res/sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 122, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 128, ../../../../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 127, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 133, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 132, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 138, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -4933,7 +4937,7 @@ span.req {
     transition-delay: 0;
     opacity: 0; }
 
-  /* line 137, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 143, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -4954,21 +4958,21 @@ span.req {
     transition-delay: 0;
     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 146, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 152, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-showing .pane.left.treeview {
     width: 90% !important; }
-  /* line 149, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 155, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-showing .pane.right.items {
     left: 0 !important;
     -moz-transform: translateX(90%);
     -ms-transform: translateX(90%);
     -webkit-transform: translateX(90%);
     transform: translateX(90%); }
-    /* line 152, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 158, ../../../../general/res/sass/mobile/_layout.scss */
     .pane-tree-showing .pane.right.items .holder-object-and-inspector {
       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 160, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 166, ../../../../general/res/sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
@@ -5258,17 +5262,18 @@ span.req {
   -o-transition-delay: 0;
   -webkit-transition-delay: 0;
   transition-delay: 0;
+  margin-top: 10px;
   padding-right: 5px; }
-  /* line 152, ../../../../general/res/sass/search/_search.scss */
+  /* line 153, ../../../../general/res/sass/search/_search.scss */
   .holder-search .search-results .hint {
     margin-bottom: 10px;
     font-size: 0.65em;
     opacity: 0.6; }
-  /* line 157, ../../../../general/res/sass/search/_search.scss */
+  /* line 158, ../../../../general/res/sass/search/_search.scss */
   .holder-search .search-results.active {
     visibility: visible;
     opacity: 1; }
-  /* line 161, ../../../../general/res/sass/search/_search.scss */
+  /* line 162, ../../../../general/res/sass/search/_search.scss */
   .holder-search .search-results .load-more-button {
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 21451fea37..42480d350f 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -581,8 +581,8 @@ mct-container {
   .l-flex-col .flex-elem {
     min-height: 0; }
     /* line 139, ../../../../general/res/sass/_archetypes.scss */
-    .l-flex-col .flex-elem:not(:first-child) {
-      margin-top: 10px; }
+    .l-flex-col .flex-elem.holder:not(:last-child) {
+      margin-bottom: 10px; }
   /* line 141, ../../../../general/res/sass/_archetypes.scss */
   .l-flex-col .flex-container {
     -webkit-flex-direction: column;
@@ -4464,7 +4464,7 @@ span.req {
           /* line 180, ../../../../general/res/sass/user-environ/_layout.scss */
           .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed {
             right: 5px; } }
-  /* line 189, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 188, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
   .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
   .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@@ -4478,30 +4478,30 @@ span.req {
   .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
 
-/* line 199, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 198, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout .holder.holder-treeview-elements {
   top: 10px;
   right: 0;
   bottom: 10px;
   left: 10px; }
-/* line 206, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 205, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout .holder.holder-object-and-inspector {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 211, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 210, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .holder.holder-object-and-inspector .holder-object {
     top: 10px;
     bottom: 10px; }
-  /* line 215, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .holder.holder-object-and-inspector .holder-inspector-elements {
     top: 10px;
     bottom: 10px;
     left: 10px;
     right: 10px; }
 
-/* line 224, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 223, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-holder {
   overflow: auto;
   position: absolute;
@@ -4512,11 +4512,11 @@ span.req {
   width: auto;
   height: auto;
   top: 34px; }
-  /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 227, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-holder.l-controls-visible.l-time-controller-visible {
     bottom: 88px; }
 
-/* line 234, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@@ -4528,13 +4528,13 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 246, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
 /***************************************************** OBJECT BROWSE BAR */
-/* line 253, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 252, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -4550,20 +4550,20 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 260, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 10px; }
-    /* line 263, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       margin-right: 10px; }
 
-/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-hidden .tree-holder,
 .pane-tree-hidden .splitter-treeview,
 .pane-tree-hidden .holder-treeview-elements {
   opacity: 0; }
 
-/* line 285, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .tree-holder,
 .pane-tree-showing .splitter-treeview {
   -moz-transition-property: opacity;
@@ -4583,7 +4583,7 @@ span.req {
   -webkit-transition-delay: 250ms;
   transition-delay: 250ms;
   opacity: 1; }
-/* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 290, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-tree-showing .holder-treeview-elements {
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
@@ -4602,7 +4602,7 @@ span.req {
   -webkit-transition-delay: 200ms;
   transition-delay: 200ms; }
 
-/* line 298, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane-inspect-showing .l-object-and-inspector .l-inspect,
 .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
   -moz-transition-property: opacity;
@@ -4636,31 +4636,31 @@ span.req {
   .holder-all {
     min-width: 600px; }
 
-  /* line 325, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 324, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .split-pane-component.pane.treeview.left {
     min-width: 150px;
     max-width: 35%;
     width: 25%; }
-  /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 329, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout .split-pane-component.pane.t-inspect.right {
     min-width: 200px;
     max-width: 35%;
     width: 20%;
     z-index: 3; }
 
-  /* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     padding-right: 5px; }
 
-  /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane-tree-hidden .pane.right.primary-pane {
     left: 22px !important; }
 
-  /* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane-inspect-hidden .l-object-and-inspector .pane.left {
     right: 22px !important; }
 
-  /* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 346, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane:not(.resizing) {
     -moz-transition-property: width, left, right;
     -o-transition-property: width, left, right;
@@ -4679,7 +4679,7 @@ span.req {
     -webkit-transition-delay: 0;
     transition-delay: 0; }
 
-  /* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 349, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.primary-pane .object-browse-bar {
     min-width: 200px; } }
 /*****************************************************************************
@@ -4738,10 +4738,14 @@ span.req {
       opacity: 1; }
 
   /* line 47, ../../../../general/res/sass/mobile/_layout.scss */
+  .create-btn-holder {
+    display: none; }
+
+  /* line 53, ../../../../general/res/sass/mobile/_layout.scss */
   .holder.holder-treeview-elements {
     right: 10px !important; }
 
-  /* line 57, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 63, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-hidden .pane.left.treeview {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -4760,11 +4764,11 @@ span.req {
     -webkit-transition-delay: 0;
     transition-delay: 0;
     opacity: 0 !important; }
-  /* line 65, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 71, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-hidden .pane.right.items {
     left: 0 !important; }
 
-  /* line 79, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 85, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-showing .pane.left.treeview {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -4789,52 +4793,52 @@ span.req {
     background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
     right: auto !important;
     width: 40% !important; }
-  /* line 86, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 92, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-showing .pane.right.items {
     left: 40% !important; }
 
-  /* line 91, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 97, ../../../../general/res/sass/mobile/_layout.scss */
   .toggle-tree {
     color: #0099cc !important;
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
-    /* line 97, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 103, ../../../../general/res/sass/mobile/_layout.scss */
     .toggle-tree:after {
       content: 'm' !important;
       font-family: symbolsfont; }
 
-  /* line 103, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 109, ../../../../general/res/sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 45px !important; }
-    /* line 106, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 112, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 109, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 115, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
-      /* line 111, ../../../../general/res/sass/mobile/_layout.scss */
+      /* line 117, ../../../../general/res/sass/mobile/_layout.scss */
       .object-browse-bar .view-switcher .title-label {
         display: none; }
 
-  /* line 118, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 124, ../../../../general/res/sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 122, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 128, ../../../../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 127, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 133, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 132, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 138, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -4855,7 +4859,7 @@ span.req {
     transition-delay: 0;
     opacity: 0; }
 
-  /* line 137, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 143, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -4876,21 +4880,21 @@ span.req {
     transition-delay: 0;
     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 146, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 152, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-showing .pane.left.treeview {
     width: 90% !important; }
-  /* line 149, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 155, ../../../../general/res/sass/mobile/_layout.scss */
   .pane-tree-showing .pane.right.items {
     left: 0 !important;
     -moz-transform: translateX(90%);
     -ms-transform: translateX(90%);
     -webkit-transform: translateX(90%);
     transform: translateX(90%); }
-    /* line 152, ../../../../general/res/sass/mobile/_layout.scss */
+    /* line 158, ../../../../general/res/sass/mobile/_layout.scss */
     .pane-tree-showing .pane.right.items .holder-object-and-inspector {
       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 160, ../../../../general/res/sass/mobile/_layout.scss */
+  /* line 166, ../../../../general/res/sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
@@ -5180,17 +5184,18 @@ span.req {
   -o-transition-delay: 0;
   -webkit-transition-delay: 0;
   transition-delay: 0;
+  margin-top: 10px;
   padding-right: 5px; }
-  /* line 152, ../../../../general/res/sass/search/_search.scss */
+  /* line 153, ../../../../general/res/sass/search/_search.scss */
   .holder-search .search-results .hint {
     margin-bottom: 10px;
     font-size: 0.65em;
     opacity: 0.6; }
-  /* line 157, ../../../../general/res/sass/search/_search.scss */
+  /* line 158, ../../../../general/res/sass/search/_search.scss */
   .holder-search .search-results.active {
     visibility: visible;
     opacity: 1; }
-  /* line 161, ../../../../general/res/sass/search/_search.scss */
+  /* line 162, ../../../../general/res/sass/search/_search.scss */
   .holder-search .search-results .load-more-button {
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);