[Frontend] Inspector-related fixes

open #244
Fixing scroll issue in Inspector via flex layout;
Added new _archetypes.scss file for .l-flex* and .col styles;
moved .col and associated mixin out of _layout.scss
and into _archetypes;

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

@@ -0,0 +1,116 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/********************************************* COLUMN LAYOUTS STYLES */
+@mixin cols($totalCols, $span) {
+    $cw: 100% / $totalCols;
+    min-width: (500px / $totalCols) * $span;
+    @if ($totalCols != $span) {
+        width: ($cw * $span) - $ueColMargin;
+    } @else {
+        width: $cw;
+    }
+}
+
+.cols {
+    @include clearfix;
+    .col {
+        @include box-sizing(border-box);
+        @include clearfix;
+        //		background: rgba(#ffcc00, 0.2);
+        float: left;
+        margin-left: $ueColMargin;
+        padding-left: $interiorMargin;
+        position: relative;
+        &:first-child {
+            margin-left: 0;
+            padding-left: 0;
+        }
+    }
+    &.cols-2 {
+        $nc: 2;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+    }
+    &.cols-2-ff {
+        // 2 columns, first column is fixed, second is fluid
+        .col-100px {
+            width: 100px;
+        }
+    }
+
+    &.cols-6 {
+        $nc: 6;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+    }
+    &.cols-16 {
+        $nc: 16;
+        .col-1 {
+            @include cols($nc, 1);
+        }
+        .col-2 {
+            @include cols($nc, 2);
+        }
+        .col-7 {
+            @include cols($nc, 7);
+        }
+    }
+    &.cols-32 {
+        $nc: 32;
+        .col-2 {
+            @include cols($nc, 2);
+        }
+        .col-15 {
+            @include cols($nc, 15);
+        }
+    }
+    .l-row {
+        @include clearfix;
+        padding: $interiorMargin 0;
+    }
+}
+/********************************************* FLEX STYLES */
+.l-flex-row,
+.l-flex-col {
+    @include display-flex;
+    @include flex-wrap(nowrap);
+    .flex-elem {
+        &:not(.grows) {
+            @include flex(0 1 auto);
+        }
+        &.grows {
+            @include flex(1 1 auto);
+        }
+    }
+}
+
+.l-flex-row {
+    @include flex-direction(row);
+
+}
+
+.l-flex-col {
+    @include flex-direction(column);
+}

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

@@ -43,6 +43,11 @@
             vertical-align: bottom;
         }
     }
+    
+    ul {
+        @include box-sizing(border-box);
+        padding-right: $interiorMargin;
+    }
 
     ul li,
     em {

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

@@ -21,6 +21,7 @@
  *****************************************************************************/
 @import "effects";
 @import "global";
+@import "archetypes";
 @import "about";
 @import "text";
 @import "icons";

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

@@ -19,23 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@mixin cols($totalCols, $span) {
-    $cw: 100% / $totalCols;
-    min-width: (500px / $totalCols) * $span;
-    @if ($totalCols != $span) {
-        width: ($cw * $span) - $ueColMargin;
-    } @else {
-        width: $cw;
-    }
-}
-
-/*.holder-all {
-    $myM: 0; // $interiorMarginSm;
-    top: $myM;
-    right: $myM;
-    bottom: $myM;
-    left: $myM;
-}*/
 
 .browse-area,
 .edit-area,
@@ -158,67 +141,6 @@
 	}
 }
 
-.cols {
-    @include clearfix;
-    .col {
-        @include box-sizing(border-box);
-        @include clearfix;
-        //		background: rgba(#ffcc00, 0.2);
-        float: left;
-        margin-left: $ueColMargin;
-        padding-left: $interiorMargin;
-        position: relative;
-        &:first-child {
-            margin-left: 0;
-            padding-left: 0;
-        }
-    }
-    &.cols-2 {
-        $nc: 2;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-2-ff {
-        // 2 columns, first column is fixed, second is fluid
-        .col-100px {
-            width: 100px;
-        }
-    }
-
-    &.cols-6 {
-        $nc: 6;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-16 {
-        $nc: 16;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-7 {
-            @include cols($nc, 7);
-        }
-    }
-    &.cols-32 {
-        $nc: 32;
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-15 {
-            @include cols($nc, 15);
-        }
-    }
-    .l-row {
-        @include clearfix;
-        padding: $interiorMargin 0;
-    }
-}
-
 .browse-mode {
     .split-layout {
         .split-pane-component.pane {
@@ -464,25 +386,6 @@
     .holder-create-and-search {
         opacity: 0;
     }
-    /*.holder-create-and-search {
-        @include trans-prop-nice((top, left), 250ms);
-        top: $ueTopBarH + $interiorMargin;
-        left: -1 * $bodyMargin !important;
-        .create-btn {
-            @include border-left-radius(0);
-            @include trans-prop-nice((width), 250ms);
-            width: $uePaneMiniTabW !important;
-            text-align: center !important;
-            padding: 0;
-            .title-label,
-            &:after {
-                display: none;
-            }
-            &:before {
-                font-size: 9px;
-            }
-        }
-    }*/
 }
 
 .pane-tree-showing {

platform/commonUI/general/res/templates/object-inspector.html

@@ -20,9 +20,9 @@
  at runtime from the About dialog for additional information.
 -->
 <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
-    <div class="abs holder holder-inspector-elements">
-    <div class="pane-header">Inspection</div>
-    <ul>
+    <div class="abs holder holder-inspector-elements l-flex-col">
+    <div class="pane-header flex-elem">Inspection</div>
+    <ul class="flex-elem grows vscroll">
         <li>
             <em>Properties</em>
             <div class="inspector-properties"