diff options
| author | crupest <crupest@outlook.com> | 2020-06-04 16:11:03 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2020-06-04 16:11:03 +0800 |
| commit | 84efc7812457a10074ea8b55534abc4948e5ae1c (patch) | |
| tree | 057a8a357254ca0e05e934c53b704d304dd97b99 /Timeline/ClientApp/src/timeline/timeline.sass | |
| parent | 79c60b556cd3efe66b159ffda690a12c7f6bea17 (diff) | |
| download | timeline-84efc7812457a10074ea8b55534abc4948e5ae1c.tar.gz timeline-84efc7812457a10074ea8b55534abc4948e5ae1c.tar.bz2 timeline-84efc7812457a10074ea8b55534abc4948e5ae1c.zip | |
refactor(front): Refactor scss to sass and refactor timeline styles.
Diffstat (limited to 'Timeline/ClientApp/src/timeline/timeline.sass')
| -rw-r--r-- | Timeline/ClientApp/src/timeline/timeline.sass | 103 |
1 files changed, 103 insertions, 0 deletions
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
|