From ae19c40c795e14e8793744b7520e103523f6bda4 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 4 Jun 2020 16:11:03 +0800
Subject: refactor(front): Refactor scss to sass and refactor timeline styles.

---
 Timeline/ClientApp/src/about/about.sass          |   3 +
 Timeline/ClientApp/src/about/about.scss          |   4 -
 Timeline/ClientApp/src/common/alert.sass         |  15 +++
 Timeline/ClientApp/src/common/alert.scss         |  20 ----
 Timeline/ClientApp/src/common/common.sass        |  33 +++++++
 Timeline/ClientApp/src/common/common.scss        |  38 --------
 Timeline/ClientApp/src/home/home.sass            |  17 ++++
 Timeline/ClientApp/src/home/home.scss            |  21 ----
 Timeline/ClientApp/src/index.sass                |  72 ++++++++++++++
 Timeline/ClientApp/src/index.scss                |  89 -----------------
 Timeline/ClientApp/src/index.tsx                 |   2 +-
 Timeline/ClientApp/src/timeline/TimelineItem.tsx |   6 +-
 Timeline/ClientApp/src/timeline/timeline-ui.sass |  18 ++++
 Timeline/ClientApp/src/timeline/timeline-ui.scss |  27 -----
 Timeline/ClientApp/src/timeline/timeline.sass    | 103 ++++++++++++++++++++
 Timeline/ClientApp/src/timeline/timeline.scss    | 119 -----------------------
 Timeline/ClientApp/src/user/user-page.sass       |  11 +++
 Timeline/ClientApp/src/user/user-page.scss       |  13 ---
 18 files changed, 276 insertions(+), 335 deletions(-)
 create mode 100644 Timeline/ClientApp/src/about/about.sass
 delete mode 100644 Timeline/ClientApp/src/about/about.scss
 create mode 100644 Timeline/ClientApp/src/common/alert.sass
 delete mode 100644 Timeline/ClientApp/src/common/alert.scss
 create mode 100644 Timeline/ClientApp/src/common/common.sass
 delete mode 100644 Timeline/ClientApp/src/common/common.scss
 create mode 100644 Timeline/ClientApp/src/home/home.sass
 delete mode 100644 Timeline/ClientApp/src/home/home.scss
 create mode 100644 Timeline/ClientApp/src/index.sass
 delete mode 100644 Timeline/ClientApp/src/index.scss
 create mode 100644 Timeline/ClientApp/src/timeline/timeline-ui.sass
 delete mode 100644 Timeline/ClientApp/src/timeline/timeline-ui.scss
 create mode 100644 Timeline/ClientApp/src/timeline/timeline.sass
 delete mode 100644 Timeline/ClientApp/src/timeline/timeline.scss
 create mode 100644 Timeline/ClientApp/src/user/user-page.sass
 delete mode 100644 Timeline/ClientApp/src/user/user-page.scss

(limited to 'Timeline/ClientApp/src')

diff --git a/Timeline/ClientApp/src/about/about.sass b/Timeline/ClientApp/src/about/about.sass
new file mode 100644
index 00000000..24af9dee
--- /dev/null
+++ b/Timeline/ClientApp/src/about/about.sass
@@ -0,0 +1,3 @@
+.about-link-icon
+  @extend .mx-2
+  font-size: 1.2em
diff --git a/Timeline/ClientApp/src/about/about.scss b/Timeline/ClientApp/src/about/about.scss
deleted file mode 100644
index b097aa89..00000000
--- a/Timeline/ClientApp/src/about/about.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.about-link-icon {
-  @extend .mx-2;
-  font-size: 1.2em;
-}
diff --git a/Timeline/ClientApp/src/common/alert.sass b/Timeline/ClientApp/src/common/alert.sass
new file mode 100644
index 00000000..c3560b87
--- /dev/null
+++ b/Timeline/ClientApp/src/common/alert.sass
@@ -0,0 +1,15 @@
+.alert-container
+  position: fixed
+  z-index: $zindex-popover
+
+@include media-breakpoint-up(sm)
+  .alert-container
+    bottom: 0
+    right: 0
+
+@include media-breakpoint-down(sm)
+  .alert-container
+    bottom: 0
+    right: 0
+    left: 0
+    text-align: center
diff --git a/Timeline/ClientApp/src/common/alert.scss b/Timeline/ClientApp/src/common/alert.scss
deleted file mode 100644
index 09877727..00000000
--- a/Timeline/ClientApp/src/common/alert.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.alert-container {
-  position: fixed;
-  z-index: $zindex-popover;
-}
-
-@include media-breakpoint-up(sm) {
-  .alert-container {
-    bottom: 0;
-    right: 0;
-  }
-}
-
-@include media-breakpoint-down(sm) {
-  .alert-container {
-    bottom: 0;
-    right: 0;
-    left: 0;
-    text-align: center;
-  }
-}
diff --git a/Timeline/ClientApp/src/common/common.sass b/Timeline/ClientApp/src/common/common.sass
new file mode 100644
index 00000000..78e6fd14
--- /dev/null
+++ b/Timeline/ClientApp/src/common/common.sass
@@ -0,0 +1,33 @@
+.image-cropper-container
+  position: relative
+  box-sizing: border-box
+  user-select: none
+
+.image-cropper-container img
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+
+.image-cropper-mask-container
+  position: absolute
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  overflow: hidden
+
+.image-cropper-mask
+  position: absolute
+  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%)
+  touch-action: none
+
+.image-cropper-handler
+  position: absolute
+  width: 26px
+  height: 26px
+  border: black solid 2px
+  border-radius: 50%
+  background: white
+  touch-action: none
diff --git a/Timeline/ClientApp/src/common/common.scss b/Timeline/ClientApp/src/common/common.scss
deleted file mode 100644
index 5998c086..00000000
--- a/Timeline/ClientApp/src/common/common.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.image-cropper-container {
-  position: relative;
-  box-sizing: border-box;
-  user-select: none;
-}
-
-.image-cropper-container img {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.image-cropper-mask-container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-}
-
-.image-cropper-mask {
-  position: absolute;
-  box-shadow: 0 0 0 10000px rgba(255, 255, 255, 80%);
-  touch-action: none;
-}
-
-.image-cropper-handler {
-  position: absolute;
-  width: 26px;
-  height: 26px;
-  border: black solid 2px;
-  border-radius: 50%;
-  background: white;
-  touch-action: none;
-}
diff --git a/Timeline/ClientApp/src/home/home.sass b/Timeline/ClientApp/src/home/home.sass
new file mode 100644
index 00000000..9f9937ac
--- /dev/null
+++ b/Timeline/ClientApp/src/home/home.sass
@@ -0,0 +1,17 @@
+.timeline-item-icon
+  width: 1em
+  height: 1em
+
+.timeline-item
+  font-size: 1.1em
+  @extend .my-2
+  .icon
+    height: 1.3em
+    @extend .mr-2
+
+.timeline-board
+  @extend .cru-card
+  @extend .d-flex
+  @extend .flex-column
+  @extend .p-3
+  min-height: 200px
diff --git a/Timeline/ClientApp/src/home/home.scss b/Timeline/ClientApp/src/home/home.scss
deleted file mode 100644
index 8e40e597..00000000
--- a/Timeline/ClientApp/src/home/home.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.timeline-item-icon {
-  width: 1em;
-  height: 1em;
-}
-
-.timeline-item {
-  font-size: 1.1em;
-  @extend .my-2;
-  .icon {
-    height: 1.3em;
-    @extend .mr-2;
-  }
-}
-
-.timeline-board {
-  @extend .cru-card;
-  @extend .d-flex;
-  @extend .flex-column;
-  @extend .p-3;
-  min-height: 200px;
-}
diff --git a/Timeline/ClientApp/src/index.sass b/Timeline/ClientApp/src/index.sass
new file mode 100644
index 00000000..b5fcc112
--- /dev/null
+++ b/Timeline/ClientApp/src/index.sass
@@ -0,0 +1,72 @@
+@import '~bootstrap/scss/bootstrap'
+$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'
+@import '~@fortawesome/fontawesome-free/scss/fontawesome'
+@import '~@fortawesome/fontawesome-free/scss/solid'
+@import '~@fortawesome/fontawesome-free/scss/brands'
+
+@import './common/common'
+@import './common/alert'
+@import './home/home'
+@import './about/about'
+@import './timeline/timeline'
+@import './timeline/timeline-ui'
+@import './user/user-page'
+
+body
+  margin: 0
+
+#app
+  display: flex
+  flex-direction: column
+
+small
+  line-height: 1.2
+
+.width-1px
+  width: 1px
+
+.flex-fix-length
+  flex-grow: 0
+  flex-shrink: 0
+
+.position-lt
+  left: 0
+  top: 0
+
+.position-rb
+  right: 0
+  bottom: 0
+
+.app-bar
+  z-index: 1035
+
+.avatar
+  width: 60px
+
+.avatar.large
+  width: 100px
+
+.avatar.small
+  width: 40px
+
+.mt-appbar
+  margin-top: 56px
+
+.icon-button
+  font-size: 20px
+
+.large-icon
+  font-size: 26px
+
+textarea
+  resize: none
+
+.white-space-no-wrap
+  white-space: nowrap
+
+.cru-card
+  @extend .shadow
+  @extend .border
+  @extend .border-primary
+  @extend .rounded
+  @extend .bg-light
diff --git a/Timeline/ClientApp/src/index.scss b/Timeline/ClientApp/src/index.scss
deleted file mode 100644
index 9f3d3444..00000000
--- a/Timeline/ClientApp/src/index.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-@import '~bootstrap/scss/bootstrap';
-$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
-@import '~@fortawesome/fontawesome-free/scss/fontawesome';
-@import '~@fortawesome/fontawesome-free/scss/solid';
-@import '~@fortawesome/fontawesome-free/scss/brands';
-
-@import './common/common.scss';
-@import './common/alert.scss';
-@import './home/home.scss';
-@import './about/about.scss';
-@import './timeline/timeline.scss';
-@import './timeline/timeline-ui.scss';
-@import './user/user-page.scss';
-
-body {
-  margin: 0;
-}
-
-#app {
-  display: flex;
-  flex-direction: column;
-}
-
-small {
-  line-height: 1.2;
-}
-
-.width-1px {
-  width: 1px;
-}
-
-.flex-fix-length {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.position-lt {
-  left: 0;
-  top: 0;
-}
-
-.position-rb {
-  right: 0;
-  bottom: 0;
-}
-
-.app-bar {
-  z-index: 1035;
-}
-
-.avatar {
-  width: 60px;
-}
-
-.avatar.large {
-  width: 100px;
-}
-
-.avatar.small {
-  width: 40px;
-}
-
-.mt-appbar {
-  margin-top: 56px;
-}
-
-.icon-button {
-  font-size: 20px;
-}
-
-.large-icon {
-  font-size: 26px;
-}
-
-textarea {
-  resize: none;
-}
-
-.white-space-no-wrap {
-  white-space: nowrap;
-}
-
-.cru-card {
-  @extend .shadow;
-  @extend .border;
-  @extend .border-primary;
-  @extend .rounded;
-  @extend .bg-light;
-}
diff --git a/Timeline/ClientApp/src/index.tsx b/Timeline/ClientApp/src/index.tsx
index 0c66dda0..086bd6e8 100644
--- a/Timeline/ClientApp/src/index.tsx
+++ b/Timeline/ClientApp/src/index.tsx
@@ -6,7 +6,7 @@ import 'pepjs';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import './index.scss';
+import './index.sass';
 
 import './i18n';
 
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;
-}
diff --git a/Timeline/ClientApp/src/user/user-page.sass b/Timeline/ClientApp/src/user/user-page.sass
new file mode 100644
index 00000000..1e2e802b
--- /dev/null
+++ b/Timeline/ClientApp/src/user/user-page.sass
@@ -0,0 +1,11 @@
+.login-container
+  max-width: 600px
+
+.change-avatar-cropper-row
+  max-height: 400px
+
+.change-avatar-img
+  min-width: 50%
+  max-width: 100%
+  max-height: 400px
+
diff --git a/Timeline/ClientApp/src/user/user-page.scss b/Timeline/ClientApp/src/user/user-page.scss
deleted file mode 100644
index a102fbe6..00000000
--- a/Timeline/ClientApp/src/user/user-page.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.login-container {
-  max-width: 600px;
-}
-
-.change-avatar-cropper-row {
-  max-height: 400px;
-}
-
-.change-avatar-img {
-  min-width: 50%;
-  max-width: 100%;
-  max-height: 400px;
-}
-- 
cgit v1.2.3