Markup / scss refactor WIP

- Added sass-base.scss to make it easier for SFC's to
include needed SASS vars, mixins, etc. with a single import;
- Cleaned up indention in Layout.vue;

src/styles-new/_constants-snow.scss

@@ -1,3 +1,5 @@
+@import "constants";
+
 // Mixins
 @function pullForward($c: $colorBodyBg, $p: 20%) {
     // For dark interfaces, lighter things come forward - opposite for light interfaces

src/styles-new/core.scss

@@ -1,6 +1,6 @@
 @import "vendor/normalize.min.css";
-@import "constants";
+@import "sass-base.scss";
-@import "constants-snow";
+
-@import "glyphs";
+/******************** RENDERS CSS */
-@import "mixins";
+@import "global";
-@import "global";
+@import "controls";

src/styles-new/sass-base.scss

@@ -0,0 +1,7 @@
+// Imports only constants, mixins, etc.
+// Meant for use as a single line import in Vue SFC's.
+// Do not include anything that renders to CSS!
+@import "constants";
+@import "constants-snow"; // TEMP
+@import "glyphs";
+@import "mixins";

src/ui/components/controls/search.vue

@@ -10,10 +10,7 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/constants";
+    @import "~styles/sass-base";;
-    @import "~styles/constants-snow";
-    @import "~styles/glyphs";
-    @import "~styles/mixins";
 
     /******************************* SEARCH */
     .c-search {

src/ui/components/layout/Layout.vue

@@ -28,73 +28,72 @@
 </template>
 
 <style lang="scss">
-@import "~styles/constants";
+    @import "~styles/sass-base";
-@import "~styles/constants-snow";
 
-/******************************* SHELL */
+    /******************************* SHELL */
-.l-shell {
+    .l-shell {
-    position: absolute;
+        position: absolute;
-    top: 0; right: 0; bottom: 0; left: 0;
+        top: 0; right: 0; bottom: 0; left: 0;
-    display: flex;
-    flex-flow: column nowrap;
-
-    /********** STATUS AREA */
-    &__status {
-        border-bottom: 1px solid $colorInteriorBorder;
-        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 {
-        flex: 1 1 auto;
-        padding: $interiorMarginLg;
-    }
-
-    &__time-conductor {
-        border-top: 1px solid $colorInteriorBorder;
-        min-height: 50px;
-        padding: $interiorMarginLg;
-    }
-
-    /********** MAIN AREA PANES */
-    &__pane-tree,
-    &__pane-main,
-    &__pane-inspector {
         display: flex;
         flex-flow: column nowrap;
-    }
 
-    &__pane-tree,
+        /********** STATUS AREA */
-    &__pane-inspector {
+        &__status {
-        max-width: 30%;
+            border-bottom: 1px solid $colorInteriorBorder;
-        min-width: 5%;
+            flex: 0 1 auto;
-    }
+            height: 40px;
+            order: 1;
+            padding: $interiorMarginLg;
+        }
 
-    &__pane-tree {
+        /********** MAIN AREA */
-        $m: $interiorMargin;
+        &__main {
-        background: $colorTreeBg;
+            flex: 1 1 auto;
-        padding: $m $m + ($splitterD - $splitterHandleD) $m $m;
+            display: flex;
-        width: 300px
+            flex-flow: row nowrap;
-    }
+            order: 2;
+        }
 
-    &__pane-main {
+        &__object-view {
-        flex: 1 1 auto;
+            flex: 1 1 auto;
-    }
+            padding: $interiorMarginLg;
+        }
 
-    &__pane-inspector {
+        &__time-conductor {
-        width: 200px
+            border-top: 1px solid $colorInteriorBorder;
+            min-height: 50px;
+            padding: $interiorMarginLg;
+        }
+
+        /********** MAIN AREA PANES */
+        &__pane-tree,
+        &__pane-main,
+        &__pane-inspector {
+            display: flex;
+            flex-flow: column nowrap;
+        }
+
+        &__pane-tree,
+        &__pane-inspector {
+            max-width: 30%;
+            min-width: 5%;
+        }
+
+        &__pane-tree {
+            $m: $interiorMargin;
+            background: $colorTreeBg;
+            padding: $m $m + ($splitterD - $splitterHandleD) $m $m;
+            width: 300px
+        }
+
+        &__pane-main {
+            flex: 1 1 auto;
+        }
+
+        &__pane-inspector {
+            width: 200px
+        }
     }
-}
 </style>
 
 <script>
@@ -105,19 +104,19 @@
     import search from '../controls/search.vue';
     import splitter from '../controls/splitter.vue';
 
-export default {
+    export default {
-    data () {
+        data () {
-        return {
+            return {
-            msg: 'Hello world!'
+                msg: 'Hello world!'
+            }
+        },
+        components: {
+            MctInspector,
+            MctMain,
+            MctStatus,
+            MctTree,
+            search,
+            splitter
         }
-    },
-    components: {
-        MctInspector,
-        MctMain,
-        MctStatus,
-        MctTree,
-        search,
-        splitter
     }
-}
 </script>