timeline.scss 925 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. @use 'mixins/mixins' as *;
  2. @use 'mixins/var' as *;
  3. @use 'common/var' as *;
  4. @include b(timeline) {
  5. @include set-component-css-var('timeline', $timeline);
  6. }
  7. @include b(timeline) {
  8. margin: 0;
  9. font-size: getCssVar('font-size', 'base');
  10. list-style: none;
  11. .#{$namespace}-timeline-item:last-child {
  12. .#{$namespace}-timeline-item__tail {
  13. display: none;
  14. }
  15. }
  16. .#{$namespace}-timeline-item__center {
  17. display: flex;
  18. align-items: center;
  19. .#{$namespace}-timeline-item__wrapper {
  20. width: 100%;
  21. }
  22. .#{$namespace}-timeline-item__tail {
  23. top: 0;
  24. }
  25. }
  26. .#{$namespace}-timeline-item__center:first-child {
  27. .#{$namespace}-timeline-item__tail {
  28. height: calc(50% + 10px);
  29. top: calc(50% - 10px);
  30. }
  31. }
  32. .#{$namespace}-timeline-item__center:last-child {
  33. .#{$namespace}-timeline-item__tail {
  34. display: block;
  35. height: calc(50% - 10px);
  36. }
  37. }
  38. }