timeline.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .nut-timeline{
  2. .nut-timelineitem{
  3. position: relative;
  4. font-size: 12px;
  5. .timelineitem-list-box{
  6. padding: 0 18px 0 0px;
  7. color:#333;
  8. .timelineitem-list{
  9. position: relative;
  10. padding-bottom: 10px;
  11. .timelineitem-point{
  12. position: absolute;
  13. left: 0px;
  14. top: 2px;
  15. .point-icon{
  16. width: 7px;
  17. height: 7px;
  18. border: 1px solid #f00;
  19. border-radius: 50%;
  20. &.circle-icon{
  21. background: #f00;
  22. }
  23. &.hollow-icon{
  24. background: transparent;
  25. }
  26. }
  27. .custom-icon{
  28. // width: 9px;
  29. // height: 9px;
  30. overflow: hidden;
  31. background: transparent;
  32. }
  33. }
  34. .timelineitem-title{
  35. margin-bottom: 8px;
  36. padding-left: 13px;
  37. line-height: 13px;
  38. position: relative;
  39. .time{
  40. font-size: 12px;
  41. color: #666;
  42. }
  43. }
  44. .timelineitem-content{
  45. padding-left: 13px;
  46. }
  47. }
  48. }
  49. &.left-border{
  50. &:before{
  51. position: absolute;
  52. top: 10px;
  53. left: 4px;
  54. content: '';
  55. width: 1px;
  56. height: calc(100% - 8px);
  57. background: #C2C2C2;
  58. };
  59. }
  60. &:last-child{
  61. &.left-border{
  62. &:before{
  63. width: 0px;
  64. };
  65. }
  66. }
  67. }
  68. }