Markup / scss refactor WIP

- Added disabled property to viewControl;
- Margin for elements in main panes;
- Main search input styled for --major;

src/ui/components/controls/search.vue

@@ -26,13 +26,24 @@
             display: block;
             font-family: symbolsfont;
             flex: 0 0 auto;
-            opacity: 0.7;
+            opacity: 0.5;
             overflow: hidden;
             padding: 2px; // Prevents clipping
             transition: width 250ms ease;
             width: 1em;
         }
 
+        &:hover {
+            box-shadow: inset rgba(black, 0.8) 0 0px 2px;
+            &:before {
+                opacity: 0.9;
+            }
+        }
+
+        &--major {
+            padding: 4px;
+        }
+
         &__input {
             background: none  !important;
             box-shadow: none !important; // !important needed to override default for [input]
@@ -46,13 +57,6 @@
             display: none;
         }
 
-        &:hover {
-            box-shadow: inset rgba(black, 0.7) 0 0px 2px;
-            &:before {
-                opacity: 0.9;
-            }
-        }
-
         &.is-active {
             &:before {
                 padding: 2px 0px;

src/ui/components/controls/viewControl.vue

@@ -1,6 +1,9 @@
 <template>
     <span class="c-view-control"
-    :class="{ 'c-view-control--expanded' : expanded }"
+    :class="{
+        'c-view-control--expanded' : expanded,
+        'is-disabled' : disabled === true
+    }"
     @click="toggle"></span>
 </template>
 
@@ -16,7 +19,7 @@
         width: $d;
         position: relative;
 
-        &:before {
+        &:not(.is-disabled):before {
             $s: .75;
             content: $glyph-icon-arrow-right-equilateral;
             display: block;
@@ -38,7 +41,16 @@
 <script>
     export default {
         props: {
-            expanded: Boolean
+            expanded:  {
+                type: Boolean,
+                value: false
+            },
+            disabled: {
+                // Provided to allow the view-control to still occupy space without displaying a control icon.
+                // Used as such in the tree - when a node doesn't have children, set disabled to true.
+                type: Boolean,
+                value: false
+            }
         },
         methods: {
             toggle() {

src/ui/components/layout/Layout.vue

@@ -6,9 +6,9 @@
                   splitter="after"
                   collapsable>
                 <div class="l-shell__search">
-                    <search ref="shell-search"></search>
+                    <search class="c-search--major" ref="shell-search"></search>
                 </div>
-                <div class="l-shell__tree">
+                <div class="l-shell__tree u-last">
                     <MctTree ref="shell-tree"></MctTree>
                 </div>
             </pane>
@@ -16,7 +16,6 @@
                 <div class="l-shell__object-view">c-object-view</div>
                 <div class="l-shell__time-conductor">c-time-conductor</div>
             </pane>
-            <splitter align="vertical" target="shell-pane-main" collapse="to-right"></splitter>
             <pane class="l-pane l-shell__pane-inspector"
                   splitter="before"
                   collapsable>
@@ -75,6 +74,11 @@
         &__pane-inspector {
             display: flex;
             flex-flow: column nowrap;
+
+            // Create margin between shell elements in a pane
+            > [class*="l-shell__"] + [class*="l-shell__"] {
+                margin-top: $interiorMargin;
+            }
         }
 
         &__pane-tree,
@@ -86,7 +90,7 @@
         &__pane-tree {
             $m: $interiorMargin;
             background: $colorTreeBg;
-            padding: $m $m + ($splitterD - $splitterHandleD) $m $m;
+            padding: $m $m + ($splitterD) $m $m; // TODO: move this into pane.vue
             width: 300px
         }