_timelines.scss 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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. border-radius: 50%;
  25. color: $light-color;
  26. display: block;
  27. height: $unit-6;
  28. text-align: center;
  29. width: $unit-6;
  30. &::before {
  31. border: $border-width-lg solid $primary-color;
  32. border-radius: 50%;
  33. content: "";
  34. display: block;
  35. height: $unit-2;
  36. left: $unit-2;
  37. position: absolute;
  38. top: $unit-2;
  39. width: $unit-2;
  40. }
  41. &.icon-lg {
  42. background: $primary-color;
  43. line-height: $line-height;
  44. &::before {
  45. content: none;
  46. }
  47. }
  48. }
  49. }
  50. }