timeline.scss 2.1 KB

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