Refinements to view control in tree

- Changed state eval to use 'enabled', removed v-if;

src/ui/components/controls/viewControl.vue

@@ -2,7 +2,7 @@
     <span class="c-view-control"
     :class="{
         'c-view-control--expanded' : expanded,
-        'is-disabled' : disabled === true
+        'is-enabled' : enabled
     }"
     @click="toggle"></span>
 </template>
@@ -19,8 +19,8 @@
         width: $d;
         position: relative;
 
-        &:not(.is-disabled):before {
-            $s: .75;
+        &.is-enabled:before {
+            $s: .65;
             content: $glyph-icon-arrow-right-equilateral;
             display: block;
             font-family: symbolsfont;
@@ -45,7 +45,7 @@
                 type: Boolean,
                 value: false
             },
-            disabled: {
+            enabled: {
                 // 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,

src/ui/components/layout/mct-tree.vue

@@ -16,7 +16,7 @@
         height: 100%;
 
         .c-tree {
-            margin-left: 20px;
+            margin-left: 15px;
         }
 
         &__item {

src/ui/components/layout/tree-item.vue

@@ -2,7 +2,7 @@
     <li class="c-tree__item-h">
         <div class="c-tree__item">
             <view-control class="c-tree__item__view-control"
-                          v-if="hasChildren"
+                          :enabled="hasChildren"
                           :expanded="expanded"
                           @click="toggleChildren">
             </view-control>