Markup / scss refactor WIP

Fixes #2140
- Use MctTree component with passed properties;
- MctTree markup and CSS ported from codepen;

src/ui/components/layout/MctTree.vue

@@ -1,19 +1,62 @@
 <template>
-  <div class="MCT_Tree">I'm a tree</div>
+<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');">
+                <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>
+            </div>
+            <ul class="l-tree">
+                <li class="l-tree__item-h">
+                    <div class="l-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">
-.MCT_Tree {
-    position: absolute;
-    width: 100px;
-    left: 0px;
-    top: 0px;
-    bottom: 20px;
-    background: red;
-}
+  .l-tree {
+    .l-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;
+      }
+    }
+  }
 </style>
 
 <script>
-export default {
-}
+  export default {
+      props: {
+          cssClass: String,
+          cssStyle: String
+      }
+  }
 </script>