diff options
| author | crupest <crupest@outlook.com> | 2020-05-30 23:41:31 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-05-30 23:41:31 +0800 |
| commit | 85360e8e755b4ce7fd1bd8531d78c06a3b9ffbdf (patch) | |
| tree | 710a731990f9dc9a9475baebc5867298e6df33c4 /Timeline/ClientApp/src/timeline/timeline.scss | |
| parent | fc0521d81aa2293b94ea40b79ec0df80966c0278 (diff) | |
| parent | 05c104022f71c3b19949205d5d23f07b4cd9a598 (diff) | |
| download | timeline-85360e8e755b4ce7fd1bd8531d78c06a3b9ffbdf.tar.gz timeline-85360e8e755b4ce7fd1bd8531d78c06a3b9ffbdf.tar.bz2 timeline-85360e8e755b4ce7fd1bd8531d78c06a3b9ffbdf.zip | |
Merge pull request #72 from crupest/merge-frontend
Merge frontend repo into this repo.
Diffstat (limited to 'Timeline/ClientApp/src/timeline/timeline.scss')
| -rw-r--r-- | Timeline/ClientApp/src/timeline/timeline.scss | 119 |
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;
+}
|