Pridan program, opraveno jQuery s webpackem

src/assets/scss/app.scss

@@ -23,4 +23,4 @@ $fa-font-path: "~font-awesome/fonts";
 @import "backToDashboard";
 @import "boxes";
 
-@import "editor/parts";
+@import "editor/app";

src/assets/scss/boxes.scss

@@ -4,9 +4,11 @@
   &__container {
     column-count: 2;
     column-width: 50%;
+    padding: 20px;
   }
 
   &__item {
-    margin: 20px;
+    margin-bottom: 20px;
   }
+
 }

src/assets/scss/editor/app.scss

@@ -0,0 +1,4 @@
+
+
+@import "parts";
+@import "timeline";

src/assets/scss/editor/timeline.scss

@@ -0,0 +1,56 @@
+.timeline-container {
+  overflow: auto;
+  white-space: nowrap;
+}
+
+.timeline {
+  list-style: none;
+  width: auto;
+  color: gray;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+}
+
+.timeline .timeline__item {
+  display: inline-block;
+  max-width: 200px;
+  text-align: center;
+  padding: 0 20px;
+  margin: 0 10px;
+  flex-grow: 1;
+}
+
+
+.timeline .timeline__icon {
+  width: 40px;
+  height: 40px;
+  font-size: 40px;
+  position: relative;
+}
+
+.timeline::before {
+  border: solid 1px;
+  position: absolute;
+  top: 100px;
+  content: " ";
+  width: 100%;
+}
+
+.timeline .timeline__icon::after {
+  font: normal normal normal 14px/1 FontAwesome;
+  content: "\F111";
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  bottom: -30px;
+  left: 0;
+  font-size: 20px;
+}
+
+.timeline .timeline__content {
+  margin-top: 30px;
+}
+
+.timeline .timeline__content h3 {
+}