implementation of the canvas texture renderer, for Caleydo/lineup_app#3

Caleydo/lineup_app#4 Caleydo/lineup_app#5 Caleydo/lineup_app#6

src/styles/engine/_texture_renderer.scss

@@ -1,15 +1,71 @@
 @import '../vars';
 
 ##{$lu-css_prefix}-texture-container {
-  display: flex;
-  overflow-y: hidden;
+  flex-direction: row;
+  overflow-y: auto;
   overflow-x: auto;
 
-  img {
-    margin-right: 5px;
+  .rankingContainer {
+    display: flex;
+    flex-direction: column;
 
-    &.partOfComposite {
-      margin-right: 6px;
+    .row {
+      position: relative;
+
+      .textureContainer {
+        display: flex;
+
+        .columnContainer {
+          flex: 0 0 auto;
+          margin-right: 5px;
+
+          &.partOfComposite {
+            margin-right: 6px;
+          }
+
+          canvas {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      .engineRendererContainer {
+        > header {
+          display: none;
+        }
+
+        > main {
+          overflow: hidden;
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &:not(.expand) {
+    .engineRendererContainer:not(.always) {
+      display: none;
     }
   }
+
+  .row.expanded {
+    .engineRendererContainer:not(.always) {
+      display: block;
+    }
+  }
+
+  &.expand,
+  .row.expanded {
+    .textureContainer:not(.always) {
+      display: none;
+    }
+  }
+
+  #lu-drag-overlay {
+    position: absolute;
+    background-color: #c1c1c1;
+    opacity: 0.4;
+    left: 0;
+  }
 }