5 files changed, 124 insertions, 149 deletions
diff --git a/Timeline/ClientApp/src/timeline/TimelineItem.tsx b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
index 402d51d9..0d2722c0 100644
--- a/Timeline/ClientApp/src/timeline/TimelineItem.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelineItem.tsx
@@ -48,12 +48,12 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
       onClick={props.onClick}
     >
       <Col className="timeline-line-area">
-        <div className="timeline-line start"></div>
+        <div className="timeline-line-segment start"></div>
         <div className="timeline-line-node-container">
           <div className="timeline-line-node"></div>
         </div>
-        <div className="timeline-line end"></div>
-        {current && <div className="timeline-line current-end" />}
+        <div className="timeline-line-segment end"></div>
+        {current && <div className="timeline-line-segment current-end" />}
       </Col>
       <Col className="timeline-pt-start">
         <Row className="flex-nowrap">
diff --git a/Timeline/ClientApp/src/timeline/timeline-ui.sass b/Timeline/ClientApp/src/timeline/timeline-ui.sass
new file mode 100644
index 00000000..8f0da6a4
--- /dev/null
+++ b/Timeline/ClientApp/src/timeline/timeline-ui.sass
@@ -0,0 +1,18 @@
+.info-card-container
+  .info-card-collapse-button
+    z-index: 1
+    position: relative
+
+  .info-card-content
+    width: 100%
+    position: absolute
+    transform-origin: right top
+    transition: transform 0.5s
+
+  & [data-collapse='true']
+    .info-card-content
+      transform: scale(0)
+
+.timeline-page-container
+  transition: margin-top 0.5s
+
diff --git a/Timeline/ClientApp/src/timeline/timeline-ui.scss b/Timeline/ClientApp/src/timeline/timeline-ui.scss
deleted file mode 100644
index ef35ff55..00000000
--- a/Timeline/ClientApp/src/timeline/timeline-ui.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
-.info-card-container {
-}
-
-.info-card-container[data-collapse='true'] {
-}
-*/
-
-.info-card-container .info-card-collapse-button {
-  z-index: 1;
-  position: relative;
-}
-
-.info-card-container .info-card-content {
-  width: 100%;
-  position: absolute;
-  transform-origin: right top;
-  transition: transform 0.5s;
-}
-
-.info-card-container[data-collapse='true'] .info-card-content {
-  transform: scale(0);
-}
-
-.timeline-page-container {
-  transition: margin-top 0.5s;
-}
diff --git a/Timeline/ClientApp/src/timeline/timeline.sass b/Timeline/ClientApp/src/timeline/timeline.sass
new file mode 100644
index 00000000..511cc838
--- /dev/null
+++ b/Timeline/ClientApp/src/timeline/timeline.sass
@@ -0,0 +1,103 @@
+@use 'sass:color'
+
+$timeline-line-width: 7px
+$timeline-line-node-radius: 18px
+$timeline-line-color: $primary
+$timeline-line-color-current: #36c2e6
+
+@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
+  &-area
+    display: flex
+    flex-direction: column
+    align-items: center
+    flex: 0 0 auto
+    width: 60px
+
+  &-segment
+    width: $timeline-line-width
+    background: $timeline-line-color
+
+    &.start
+      height: 20px
+      flex: 0 0 auto
+
+    &.end
+      flex: 1 1 auto
+
+    &.current-end
+      height: 20px
+      flex: 0 0 auto
+      background: linear-gradient($timeline-line-color-current, transparent)
+
+  &-node-container
+    flex: 0 0 auto
+    position: relative
+    width: $timeline-line-node-radius
+    height: $timeline-line-node-radius
+
+  &-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
+
+
+.current
+  .timeline-line
+    &-segment
+
+      &.start
+        background: linear-gradient($timeline-line-color, $timeline-line-color-current)
+
+      &.end
+        background: $timeline-line-color-current
+
+    &-node
+      animation-name: timeline-line-node-current
+
+.timeline-pt-start
+  padding-top: 18px
+
+.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
diff --git a/Timeline/ClientApp/src/timeline/timeline.scss b/Timeline/ClientApp/src/timeline/timeline.scss
deleted file mode 100644
index e82b376b..00000000
--- a/Timeline/ClientApp/src/timeline/timeline.scss
+++ /dev/null
@@ -1,119 +0,0 @@
-@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;
-}