1 files changed, 52 insertions, 0 deletions
diff --git a/webui/src/Components/Timeline/DateNode.scss b/webui/src/Components/Timeline/DateNode.scss
new file mode 100644
index 0000000..2fd95f1
--- /dev/null
+++ b/webui/src/Components/Timeline/DateNode.scss
@@ -0,0 +1,52 @@
+@import '../../variables';
+
+.DateNode {
+    position: relative;
+    height: 4rem;
+
+    .date {
+        $width: 5.5rem;
+        position: absolute;
+        background-color: $color-blue-gray;
+        border-radius: .3rem;
+        font-family: 'Roboto', sans-serif;
+        border: $line-thickness solid $body-background;
+        width: $width;
+        border-radius: .5rem;
+        top: 0;
+        margin: 0;
+        color: white;
+        font-size: .8rem;
+        line-height: 1.4rem;
+        text-align: center;
+        top: 50%;
+        margin-top: calc(-.7rem - #{$line-thickness});
+        background: white;
+        color: #666;
+        left: calc(92% - #{$width / 2} - #{$line-thickness});
+        @media screen and (min-width : $tablet-min-width) {
+            left: calc(50% - #{$width / 2} - #{$line-thickness});
+        }
+    }
+
+    &.first {
+        .date {
+            top: auto;
+            bottom: 0;
+        }
+    }
+
+    // Horizontal line
+    .horizontal-line {
+        position: absolute;
+        top: 0;
+        width: $line-thickness;
+        height: 100%;
+        background-color: $color-blue-gray;
+        content: ' ';
+        left: calc(92% - #{$line-thickness / 2});
+        @media screen and (min-width : $tablet-min-width) {
+            left: calc(50% - #{$line-thickness / 2});
+        }
+    }
+}