1 files changed, 119 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/timeline/timeline.scss b/Timeline/ClientApp/src/timeline/timeline.scss
new file mode 100644
index 00000000..e82b376b
--- /dev/null
+++ b/Timeline/ClientApp/src/timeline/timeline.scss
@@ -0,0 +1,119 @@
+@use 'sass:color';
+
+$timeline-line-width: 7px;
+$timeline-line-node-radius: 18px;
+$timeline-line-color: $primary;
+$timeline-line-color-current: #36c2e6;
+
+.timeline-line-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0 auto;
+  width: 60px;
+}
+
+.timeline-line {
+  width: $timeline-line-width;
+  background: $timeline-line-color;
+}
+
+.timeline-line.start {
+  height: 20px;
+  flex: 0 0 auto;
+}
+
+.timeline-pt-start {
+  padding-top: 18px;
+}
+
+.timeline-line.end {
+  flex: 1 1 auto;
+}
+
+@keyframes timeline-line-node-noncurrent {
+  from {
+    background: $timeline-line-color;
+  }
+  to {
+    background: color.adjust($timeline-line-color, $lightness: +10%);
+    box-shadow: 0 0 20px 3px
+      color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1);
+  }
+}
+@keyframes timeline-line-node-current {
+  from {
+    background: $timeline-line-color-current;
+  }
+  to {
+    background: color.adjust($timeline-line-color-current, $lightness: +10%);
+    box-shadow: 0 0 20px 3px
+      color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1);
+  }
+}
+
+.timeline-line-node-container {
+  flex: 0 0 auto;
+  position: relative;
+  width: $timeline-line-node-radius;
+  height: $timeline-line-node-radius;
+}
+
+.timeline-line-node {
+  width: $timeline-line-node-radius + 2;
+  height: $timeline-line-node-radius + 2;
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  z-index: 1;
+  animation: 1s infinite alternate;
+  animation-name: timeline-line-node-noncurrent;
+}
+
+.timeline-line.current-end {
+  height: 20px;
+  flex: 0 0 auto;
+  background: linear-gradient($timeline-line-color-current, transparent);
+}
+
+.current {
+  .timeline-line.start {
+    background: linear-gradient(
+      $timeline-line-color,
+      $timeline-line-color-current
+    );
+  }
+  .timeline-line-node {
+    animation-name: timeline-line-node-current;
+  }
+  .timeline-line.end {
+    background: $timeline-line-color-current;
+  }
+}
+
+.timeline-item-delete-button {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.timeline-content {
+  white-space: pre-line;
+}
+
+.timeline-content-image {
+  max-width: 60%;
+  max-height: 200px;
+}
+
+.timeline-post-edit-image {
+  max-width: 100px;
+  max-height: 100px;
+}
+
+.mask {
+  background: change-color($color: white, $alpha: 0.8);
+  z-index: 100;
+}