_timeline.scss 786 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. .timeline {
  2. display: flex;
  3. flex-direction: column;
  4. }
  5. .timeline-summary {
  6. text-align: right;
  7. }
  8. .timeline-description {
  9. position: relative;
  10. padding-bottom: 5rem;
  11. &:before {
  12. content: "";
  13. position: absolute;
  14. left: 0;
  15. top: calc(1rem + 3px);
  16. bottom: calc(-1rem + 3px);
  17. width: 1px;
  18. background: $color-border;
  19. }
  20. &:after {
  21. content: "";
  22. position: absolute;
  23. left: -3px;
  24. top: calc(1rem - 3px);
  25. width: 7px;
  26. height: 7px;
  27. border: 1px solid $color-border;
  28. border-radius: 50%;
  29. }
  30. }
  31. .timeline-item {
  32. &:last-child {
  33. .timeline-description {
  34. padding-bottom: 0;
  35. &:before {
  36. bottom: 0;
  37. background: linear-gradient(to bottom, $color-border, $color-border 50%, transparent);
  38. }
  39. }
  40. }
  41. }