Markup / scss refactor WIP

- Add normalize.min to styles-new;
- Factor components to be more standalone, very WIP;

src/styles-new/vendor/normalize.min.css

@@ -0,0 +1 @@
+/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

src/ui/components/layout/Layout.vue

@@ -1,82 +1,123 @@
 <template>
-<div class="l-shell">
-    <div class="l-shell__main">
-        <MctTree cssClass="l-shell__tree-pane" cssStyle="width: 400px" ref="shell-tree"></MctTree>
-        <splitter cssClass="c-splitter--horz js-t-split-o"></splitter>
-        <div class="l-shell__object-pane l-object-view">
-            <div class="l-object-view__object-h" ref="shell-status">l-object-h</div>
-            <div class="l-object-view__time-conductor-h c-time-conductor" ref="shell-time-conductor">c-time-conductor</div>
-        </div>
-        <splitter cssClass="c-splitter--horz js-o-split-i"></splitter>
-        <div class="l-shell__inspector-pane l-inspector" style="width: 200px" ref="shell-inspector">
-            <div class="l-inspector__properties" style="height: 300px">
-                l-inspector__properties
+    <div class="l-shell">
+        <div class="l-shell__main">
+            <div class="l-pane l-shell__tree-pane" style="width: 400px" ref="shell-tree-pane">
+                <div class="l-pane__elem l-shell__search">
+                    <!-- Change to search compoonent -->
+                    <input placeholder="Search"/>
+                </div>
+                <div class="l-pane__elem l-shell__tree">
+                    <MctTree ref="shell-tree"></MctTree>
+                </div>
             </div>
-            <splitter cssClass="c-splitter--vert js-p-split-e"></splitter>
-            <div class="l-inspector__elements">
-                l-inspector__elements
+            <splitter align="vertical" target="shell-tree-pane"></splitter>
+            <div class="l-pane l-shell__main-pane" ref="shell-main-pane">
+                <div class="l-shell__object-view c-object-view">c-object-view</div>
+                <div class="l-shell__time-conductor c-time-conductor">c-time-conductor</div>
+            </div>
+            <splitter align="vertical" target="shell-main-pane"></splitter>
+            <div class="l-pane l-inspector-pane">
+                <MctInspector ref="shell-inspector"></MctInspector>
             </div>
         </div>
+        <div class="l-shell__status">
+            [ Create Button ]
+            <MctStatus ref="shell-status"></MctStatus>
+            [ App Logo ]
+        </div>
     </div>
-    <div class="l-shell__status" ref="shell-status">
-        l-shell_status
-    </div>
-</div>
 </template>
 
 <style lang="scss">
-    @import "~styles/constants";
+@import "~styles/constants";
 
-    .l-shell {
-        position: absolute;
-        top: 0; right: 0; bottom: 0; left: 0;
+/******************************* SHELL */
+.l-shell {
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    display: flex;
+    flex-flow: column nowrap;
+
+    /********** STATUS AREA */
+    &__status {
+        background: #666;
+        color: #ccc;
+        flex: 0 1 auto;
+        height: 40px;
+        order: 1;
+        padding: $interiorMarginLg;
+    }
+
+    /********** MAIN AREA */
+    &__main {
+        flex: 1 1 auto;
+        display: flex;
+        flex-flow: row nowrap;
+        order: 2;
+    }
+
+    &__object-view {
+        background: #cc0;
+        flex: 1 1 auto;
+        padding: $interiorMarginLg;
+    }
+
+    &__time-conductor {
+        background: #cac;
+        min-height: 50px;
+        padding: $interiorMarginLg;
+    }
+
+    /******************************* OBJECT VIEW */
+    &__main-pane {
         display: flex;
         flex-flow: column nowrap;
-
-        /********** STATUS AREA */
-        &__status {
-            background: #666;
-            color: #ccc;
-            flex: 0 1 auto;
-            height: 40px;
-            order: 1;
-            padding: $interiorMarginLg;
-        }
-
-        /********** MAIN AREA */
-        &__main {
-            flex: 1 1 auto;
-            display: flex;
-            flex-flow: row nowrap;
-            order: 2;
-        }
-
-        &__tree-pane,
-        &__inspector-pane {
-            max-width: 30%;
-            min-width: 5%;
-        }
-
-        &__tree-pane {
-            background: #f90;
-            display: flex;
-            flex-flow: column nowrap;
-            padding: $interiorMarginLg;
-        }
-
-        &__object-pane {
-            flex: 1 1 auto;
-        }
-
-        &__inspector-pane {
-            background: #f9c;
-        }
     }
+
+    &__object-view {
+        background: #cc0;
+        flex: 1 1 auto;
+        padding: $interiorMarginLg;
+    }
+
+    &__time-conductor {
+        background: #cac;
+        min-height: 50px;
+        padding: $interiorMarginLg;
+    }
+
+    &__tree-pane,
+    &__inspector-pane {
+        max-width: 30%;
+        min-width: 5%;
+    }
+
+    &__tree-pane {
+        background: #f90;
+        display: flex;
+        flex-flow: column nowrap;
+        padding: $interiorMarginLg;
+    }
+
+    &__main-pane {
+        flex: 1 1 auto;
+    }
+
+    &__inspector-pane {
+        background: #f9c;
+    }
+}
+
+
+
 </style>
 
 <script>
-import MctTree from './MctTree.vue'
-import splitter from '../controls/splitter.vue'
+    import MctInspector from './MctInspector.vue';
+    import MctMain from './MctMain.vue';
+    import MctStatus from './MctStatus.vue';
+    import MctTree from './MctTree.vue';
+    import splitter from '../controls/splitter.vue';
 
 export default {
     data () {
@@ -85,6 +126,9 @@ export default {
         }
     },
     components: {
+        MctInspector,
+        MctMain,
+        MctStatus,
         MctTree,
         splitter
     }

src/ui/components/layout/MctInspector.vue

@@ -1,19 +1,36 @@
 <template>
-    <div class="MCT_Inspector">I'm an inspector</div>
+    <div class="c-inspector">
+        <div class="c-inspector__properties">
+            l-inspector__properties XXX
+        </div>
+        <splitter cssClass="c-splitter--vert js-p-split-e"></splitter>
+        <div class="c-inspector__elements">
+            l-inspector__elements
+        </div>
+    </div>
 </template>
 
 <style lang="scss">
-.MCT_Inspector {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    bottom: 20px;
-    width: 100px;
-    background: orange;
-}
+    @import "~styles/constants";
+
+    /******************************* INSPECTOR */
+    .c-inspector {
+        > [class*="__"] {
+            padding: $interiorMarginLg;
+        }
+        .c-splitter {
+            &:hover {
+                background: red;
+            }
+        }
+    }
 </style>
 
 <script>
-export default {
-}
+    import splitter from '../controls/splitter.vue'
+    export default {
+        components: {
+            splitter
+        }
+    }
 </script>

src/ui/components/layout/MctStatus.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="l-shell-head">I'm the status bar</div>
+    <span class="c-status">
+        <span &nbsp;="" Status="" element&nbsp;=""></span>
+    </span>
 </template>
 
 <style lang="scss">
@@ -7,6 +9,6 @@
 </style>
 
 <script>
-export default {
-}
+    export default {
+    }
 </script>

src/ui/components/layout/MctTree.vue

@@ -1,62 +1,56 @@
 <template>
-<div class="l-pane" :class="cssClass" :style="cssStyle">
-    <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');">
+    <ul class="c-tree">
+        <li class="c-tree__item-h">
+            <div class="c-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>
+              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');">
+            <ul class="c-tree">
+                <li class="c-tree__item-h">
+                    <div class="c-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>
 </template>
 
 <style lang="scss">
-  .l-tree {
-    .l-tree {
-      margin-left: 20px;
+    @import "~styles/constants";
+
+    .c-tree {
+        .c-tree {
+            margin-left: 20px;
+        }
+
+        &__item {
+            border-radius: 5px;
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            cursor: pointer;
+            padding: 5px;
+
+            &:hover {
+                background: rgba(white, 0.2);
+            }
+
+            .c-view-control {
+                $d: 11px;
+                background: rgba(red, 0.4);
+                display: inline-block;
+                flex: 0 0 auto;
+                height: $d;
+                width: $d;
+                margin-right: 5px;
+            }
+        }
     }
-
-    &__item {
-      border-radius: 5px;
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      cursor: pointer;
-      padding: 5px;
-
-      &:hover {
-        background: rgba(white, 0.2);
-      }
-
-      .c-view-control {
-        $d: 11px;
-        background: rgba(red, 0.4);
-        display: inline-block;
-        flex: 0 0 auto;
-        height: $d; width: $d;
-        margin-right: 5px;
-      }
-    }
-  }
 </style>
 
 <script>
-  export default {
-      props: {
-          cssClass: String,
-          cssStyle: String
-      }
-  }
+    export default {
+    }
 </script>