Markup / scss refactor WIP

- Added view-control component

src/ui/components/controls/viewControl.vue

@@ -0,0 +1,44 @@
+<template>
+    <span class="c-view-control"
+    :class="{ 'c-view-control-expanded' : expanded }"></span>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";;
+
+    .c-view-control {
+        $d: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        height: $d;
+        width: $d;
+        margin-right: $interiorMargin;
+        position: relative;
+
+        &:before {
+            content: $glyph-icon-arrow-right-equilateral;
+            display: block;
+            font-family: symbolsfont;
+            font-size: 0.75rem;
+            position: absolute;
+            transform-origin: center;
+            transition: transform 100ms ease-in-out;
+        }
+
+        &-expanded {
+            &:before {
+                transform: rotate(90deg);
+            }
+        }
+    }
+</style>
+
+<script>
+    export default {
+        props: {
+            expanded: Boolean
+        }
+    }
+</script>

src/ui/components/layout/MctTree.vue

@@ -1,8 +1,8 @@
 <template>
     <ul class="c-tree">
         <li class="c-tree__item-h">
-            <div class="c-tree__item" onclick="alert('tree item click');">
+            <div class="c-tree__item">
-                <span class="c-view-control"></span>
+                <viewControl></viewControl>
                 <span class="c-object-name icon-folder">
                   Tree item x with a long name that forces ellipsis to occur
                 </span>
@@ -19,7 +19,7 @@
 </template>
 
 <style lang="scss">
-    @import "~styles/constants";
+    @import "~styles/sass-base";
 
     .c-tree {
         .c-tree {
@@ -38,22 +38,15 @@
             &:hover {
                 background: rgba(white, 0.2);
             }
-
-            .c-view-control {
-                // TODO: move this into a future view-control component or the _controls.scss file
-                $d: 11px;
-                background: rgba(red, 0.4);
-                display: inline-block;
-                flex: 0 0 auto;
-                height: $d;
-                width: $d;
-                margin-right: 5px;
-            }
         }
     }
 </style>
 
 <script>
+    import viewControl from '../controls/viewControl.vue'
     export default {
+        components: {
+            viewControl
+        }
     }
 </script>