Markup / scss refactor WIP

Fixes #2140
- Mixins file added;
- Markup and -shell CSS from codepen brought over;

src/styles-new/_global.scss

@@ -1,8 +1,7 @@
 /************************** FONTS */
 @font-face {
     /*
-    * Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json
+    * Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json to generate font files
-    * to generate font files
     */
     font-family: 'symbolsfont';
     src: url($dirFonts + 'openmct-symbols-16px.eot');
@@ -16,8 +15,7 @@
 
 @font-face {
     /*
-    * Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json
+    * Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
-    * to generate font files
     */
     font-family: 'symbolsfont-12px';
     src: url($dirFonts + 'openmct-symbols-12px.eot');
@@ -29,6 +27,15 @@
     font-style: normal;
 }
 
+/******************************* RESETS */
+* {
+    box-sizing: border-box;
+}
+
+div {
+    position: relative;
+}
+
 /************************** HTML ENTITIES */
 a {
     //color: $colorA;
@@ -44,7 +51,7 @@ body, html {
     //background-color: $colorBodyBg;
     //color: $colorBodyFg;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 12px;
+    font-size: 13px;
     font-weight: normal;
     height: 100%;
     width: 100%;
@@ -74,9 +81,9 @@ h1 {
     margin-top: 0;
 }
 
-//p {
+p {
-//    margin-bottom: $interiorMarginLg;
+    margin-bottom: $interiorMarginLg;
-//}
+}
 
 ol, ul {
     list-style: none;

src/styles-new/_mixins.scss

@@ -0,0 +1,83 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+
+@mixin ancillaryIcon($d, $c) {
+    // Used for small icons used in combination with larger icons,
+    // like the link and alert icons in tree items.
+    color: $c;
+    font-size: $d;
+    line-height: $d;
+    height: $d;
+    width: $d;
+}
+
+@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
+    @include background-image(linear-gradient(-45deg,
+        rgba($c, $a) 25%, transparent 25%,
+        transparent 50%, rgba($c, $a) 50%,
+        rgba($c, $a) 75%, transparent 75%,
+        transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
+}
+
+@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
+    @include background-image(linear-gradient($angle,
+        rgba($c, $a) 25%, transparent 25%,
+        transparent 50%, rgba($c, $a) 50%,
+        rgba($c, $a) 75%, transparent 75%,
+        transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $bgsize $bgsize;
+}
+
+@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
+    @include background-image(linear-gradient(-90deg,
+        rgba($c, $a) 0%, rgba($c, $a) 50%,
+        transparent 50%, transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
+}
+
+
+@function percentToDecimal($p) {
+	@return $p / 100%;
+}
+
+@function decimalToPercent($d) {
+	@return percentage($d);
+}
+
+@mixin ellipsize() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin reverseEllipsis() {
+    @include ellipsize();
+    direction: rtl;
+    unicode-bidi:bidi-override;
+}

src/ui/components/layout/Layout.vue

@@ -1,20 +1,108 @@
 <template>
-  <div class="Layout">
+<div class="l-shell">
+    <div class="l-shell__main">
+        <div class="l-shell__tree l-pane" style="width: 400px">
+            <div class="l-pane__elem c-search">
+                <input placeholder="Search" />
+            </div>
+            <ul class="l-pane__elem l-tree">
+                <li class="l-tree__item-h">
+                    <div class="l-tree__item" onclick="alert('tree item click');">
+                        <span class="c-view-control"></span><span class="c-object-name icon-folder">
+        Tree item x with a long name that forces ellipsis to occur
+        </span>
+                    </div>
+                    <ul class="l-tree">
+                        <li class="l-tree__item-h">
+                            <div class="l-tree__item" onclick="alert('tree item click');">
+                                <span class="c-view-control"></span><span class="c-object-name icon-folder">Tree item y</span>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+        <div class="c-splitter c-splitter--horz js-t-split-o"></div>
+        <div class="l-shell__object l-object-view">
+            <div class="l-object-view__object-h">l-object-h</div>
+            <div class="l-object-view__time-conductor-h c-time-conductor">c-time-conductor</div>
+        </div>
+        <div class="c-splitter c-splitter--horz js-o-split-i"></div>
+        <div class="l-shell__inspector l-inspector" style="width: 200px">
+            <div class="l-inspector__properties" style="height: 300px">
+                l-inspector__properties
+            </div>
+            <div class="c-splitter c-splitter--vert js-p-split-e"></div>
+            <div class="l-inspector__elements">
+                l-inspector__elements
+            </div>
+        </div>
+    </div>
+    <div class="l-shell__status">
+        l-shell_status
+    </div>
+</div>
+
+
+
+
+<!--<div class="l-shell">
   <mct-tree ref="tree"></mct-tree>
   <mct-main ref="main"></mct-main>
   <mct-inspector ref="inspector"></mct-inspector>
   <mct-status ref="status"></mct-status>
-  </div>
+</div>-->
 </template>
 
 
 <style lang="scss">
-.Layout {
+    @import "~styles/constants";
-    height: 100%;
+    /******************************* SHELL */
-    width: 100%;
+    .l-shell {
-    overflow: hidden;
+        position: absolute;
-    position: absolute
+        top: 0; right: 0; bottom: 0; left: 0;
-}
+        display: flex;
+        flex-flow: column nowrap;
+
+        /********** HEAD */
+        &__status {
+            background: #666;
+            color: #ccc;
+            flex: 0 1 auto;
+            height: 40px;
+            order: 1;
+            padding: $interiorMarginLg;
+        }
+
+        /********** MAIN */
+        &__main {
+            flex: 1 1 auto;
+            display: flex;
+            flex-flow: row nowrap;
+            order: 2;
+        }
+
+        &__tree,
+        &__inspector {
+            max-width: 30%;
+            min-width: 5%;
+        }
+
+        &__tree {
+            background: #f90;
+            display: flex;
+            flex-flow: column nowrap;
+            padding: $interiorMarginLg;
+        }
+
+        &__object {
+            flex: 1 1 auto;
+        }
+
+        &__inspector {
+            background: #f9c;
+        }
+    }
 </style>
 
 <script>

src/ui/components/layout/MctStatus.vue

@@ -1,16 +1,9 @@
 <template>
-    <div class="MCT_Status">I'm the status bar</div>
+    <div class="l-shell-head">I'm the status bar</div>
 </template>
 
 <style lang="scss">
-.MCT_Status {
+
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 20px;
-    background: black;
-}
 </style>
 
 <script>