diff options
Diffstat (limited to 'FrontEnd/src/app/views/timeline-common/timeline-common.sass')
| -rw-r--r-- | FrontEnd/src/app/views/timeline-common/timeline-common.sass | 97 |
1 files changed, 53 insertions, 44 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/timeline-common.sass b/FrontEnd/src/app/views/timeline-common/timeline-common.sass index 1aa5e731..ebaf96b5 100644 --- a/FrontEnd/src/app/views/timeline-common/timeline-common.sass +++ b/FrontEnd/src/app/views/timeline-common/timeline-common.sass @@ -6,10 +6,6 @@ width: 100% overflow-wrap: break-word - &-item - position: relative - padding: 0.5em - $timeline-line-width: 7px $timeline-line-node-radius: 18px $timeline-line-color: $primary @@ -32,34 +28,28 @@ $timeline-line-color-current: #36c2e6 box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1) .timeline-line - &-area-container - position: absolute - display: flex - justify-content: flex-end - padding-right: 5px - z-index: 1 + display: flex + flex-direction: column + align-items: center + width: 30px - top: 0em - bottom: 0em - left: 0.5em - width: 60px - transition: width 0.8s + position: absolute + z-index: 1 + left: 2em + top: 0 + bottom: 0 - @include media-breakpoint-down(sm) - width: 40px + transition: left 0.5s - &-area - display: flex - flex-direction: column - align-items: center - width: 30px + @include media-breakpoint-down(sm) + left: 1em - &-segment + .segment width: $timeline-line-width background: $timeline-line-color &.start - height: 1.4em + height: 1.8em flex: 0 0 auto &.end @@ -70,13 +60,13 @@ $timeline-line-color-current: #36c2e6 flex: 0 0 auto background: linear-gradient($timeline-line-color-current, transparent) - &-node-container + .node-container flex: 0 0 auto position: relative width: $timeline-line-node-radius height: $timeline-line-node-radius - &-node + .node width: $timeline-line-node-radius + 2 height: $timeline-line-node-radius + 2 position: absolute @@ -88,42 +78,49 @@ $timeline-line-color-current: #36c2e6 animation: 1s infinite alternate animation-name: timeline-line-node-noncurrent -.timeline-top - position: relative - text-align: right - - .timeline-line-segment - flex: 1 1 auto - .current &.timeline-item padding-bottom: 2.5em .timeline-line - &-segment - + .segment &.start background: linear-gradient($timeline-line-color, $timeline-line-color-current) - &.end background: $timeline-line-color-current - - &-node + .node animation-name: timeline-line-node-current +.timeline-top + position: relative + text-align: right + +.timeline-item + position: relative + padding: 0.5em + .timeline-item-card @extend .cru-card - @extend .clearfix position: relative - padding: 0.5em 2em 0.5em 60px - transition: background 0.5s, padding-left 0.8s + padding: 0.3em 0.5em 1em 4em + transition: background 0.5s, padding-left 0.5s @include media-breakpoint-down(sm) - padding-left: 40px + padding-left: 3em &:hover background: $gray-200 +.timeline-item-header + display: flex + align-items: center + @extend .my-2 + +.timeline-avatar + border-radius: 50% + width: 2em + height: 2em + .timeline-item-delete-button position: absolute right: 0 @@ -136,6 +133,18 @@ $timeline-line-color-current: #36c2e6 max-width: 60% max-height: 200px +.timeline-date-item + position: relative + padding: 0.3em 0 0.3em 4em + +.timeline-date-item-badge + display: inline-block + padding: 0.1em 0.4em + border-radius: 0.4em + background: #7c7c7c + color: white + font-size: 0.8em + .timeline-post-edit-image max-width: 100px max-height: 100px @@ -171,5 +180,5 @@ $timeline-line-color-current: #36c2e6 justify-content: center .timeline - max-width: 100em - flex-grow: 1
\ No newline at end of file + max-width: 80em + flex-grow: 1 |