_timelines.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. // Timelines
  2. .timeline {
  3. .timeline-item {
  4. display: flex;
  5. margin-bottom: $unit-6;
  6. position: relative;
  7. &::before {
  8. background: $border-color;
  9. content: "";
  10. height: 100%;
  11. left: 11px;
  12. position: absolute;
  13. top: $unit-6;
  14. width: 2px;
  15. }
  16. .timeline-left {
  17. flex: 0 0 auto;
  18. }
  19. .timeline-content {
  20. flex: 1 1 auto;
  21. padding: 2px 0 2px $layout-spacing-lg;
  22. }
  23. .timeline-icon {
  24. align-items: center;
  25. border-radius: 50%;
  26. color: $light-color;
  27. display: flex;
  28. height: $unit-6;
  29. justify-content: center;
  30. text-align: center;
  31. width: $unit-6;
  32. &::before {
  33. border: $border-width-lg solid $primary-color;
  34. border-radius: 50%;
  35. content: "";
  36. display: block;
  37. height: $unit-2;
  38. left: $unit-2;
  39. position: absolute;
  40. top: $unit-2;
  41. width: $unit-2;
  42. }
  43. &.icon-lg {
  44. background: $primary-color;
  45. line-height: $line-height;
  46. &::before {
  47. content: none;
  48. }
  49. }
  50. }
  51. }
  52. }