Group layers #66

src/styles/_layer.scss

@@ -37,7 +37,6 @@
     cursor: pointer;
     position: relative;
     padding: 5px 10px;
-    background-color: $color-black;
     line-height: 1.3;
     display: flex;
     display: -ms-flexbox;
@@ -69,6 +68,35 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  &-group {
+    //border-bottom: 2px solid $color-gray;
+  }
+
+  &-group-header {
+    font-size: $font-size-6;
+    color: $color-lowgray;
+    background-color: lighten($color-black, 2);
+    cursor: pointer;
+    user-select: none;
+    padding: $margin-2;
+    display: flex;
+    display: -ms-flexbox;
+    @include vendor-prefix(flex-direction, row)
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  &-group-title {
+    vertical-align: middle;
+  }
+
+  &-group-content {
+    margin-left: $margin-3;
+  }
 }