[Notebook] V2.0 development #2666 (#2755)

* Notebook v2.0
Co-authored-by: charlesh88 <charlesh88@gmail.com>

src/ui/layout/mct-tree.scss

@@ -1,7 +1,6 @@
 .c-tree-and-search {
     display: flex;
     flex-direction: column;
-    padding-right: $interiorMarginSm;
     overflow: auto;
 
     > * + * { margin-top: $interiorMargin; }
@@ -22,22 +21,22 @@
     &__tree {
         flex: 1 1 auto;
         height: 0; // Chrome 73 overflow bug fix
+        padding-right: $interiorMarginSm;
     }
 }
 
-.c-tree {
+.c-tree,
+.c-list {
     @include userSelectNone();
     overflow-x: hidden;
     overflow-y: auto;
-    padding-right: $interiorMargin;
 
     li {
         position: relative;
-        &.c-tree__item-h { display: block; }
-    }
-
-    .c-tree {
-        margin-left: 15px;
+        &[class*="__item-h"] { display: block; }
+        + li {
+            margin-top: 1px;
+        }
     }
 
     &__item {
@@ -47,20 +46,13 @@
         align-items: center;
         cursor: pointer;
         line-height: 110%;
-        padding: $interiorMargin - $aPad;
+        padding: $interiorMarginSm $interiorMargin;
         transition: background 150ms ease;
 
-        > * + * {
-            margin-left: $interiorMarginSm;
-        }
-
         &:hover {
             background: $colorItemTreeHoverBg;
-            .c-tree__item__type-icon:before {
-                color: $colorItemTreeIconHover;
-            }
 
-            .c-tree__item__name {
+            [class*="__name"] {
                 color: $colorItemTreeHoverFg;
             }
         }
@@ -68,12 +60,34 @@
         &.is-navigated-object,
         &.is-selected {
             background: $colorItemTreeSelectedBg;
+
+            [class*="__name"] {
+                color: $colorItemTreeSelectedFg;
+            }
+        }
+    }
+}
+
+.c-tree {
+    .c-tree {
+        margin-left: 15px;
+    }
+
+    &__item {
+        > * + * {
+            margin-left: $interiorMarginSm;
+        }
+
+        &:hover {
             .c-tree__item__type-icon:before {
                 color: $colorItemTreeIconHover;
             }
+        }
 
-            .c-tree__item__name {
-                color: $colorItemTreeSelectedFg;
+        &.is-navigated-object,
+        &.is-selected {
+            .c-tree__item__type-icon:before {
+                color: $colorItemTreeIconHover;
             }
         }
 
@@ -136,3 +150,16 @@
         }
     }
 }
+
+.c-list {
+    padding-right: $interiorMargin;
+
+    &__item {
+        &__name {
+            $p: $interiorMarginSm;
+            @include ellipsize();
+            padding-bottom: $p;
+            padding-top: $p;
+        }
+    }
+}