timeline.styl 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .timeline-wrap
  2. margin: 40px 20px 40px 40px
  3. border-left: 3px solid color-border
  4. @media mq-mini
  5. margin: 40px 20px 40px 30px
  6. @media mq-mobile
  7. margin: 40px 20px 40px 30px
  8. .timeline-row
  9. clearfix()
  10. margin: 20px 0
  11. .node,
  12. .title
  13. float: left
  14. .node
  15. width: 12px
  16. color: white
  17. height: 12px
  18. border-radius: 50%
  19. margin: 11px 0 0 -8px
  20. display: inline-block
  21. background-color: color-link
  22. .content
  23. @extend $block
  24. margin-left: 25px
  25. position: relative
  26. &:after,
  27. &:before
  28. content: ''
  29. position: absolute
  30. display: inline-block
  31. &:after
  32. top: 10px
  33. left: -14px
  34. border: 7px solid transparent
  35. border-right-color: white
  36. &:before
  37. top: 9px
  38. left: -16px
  39. border: 8px solid transparent
  40. border-right-color: rgba(0, 0, 0, 0.05)
  41. h1,
  42. .article-meta
  43. padding: 10px
  44. h1
  45. font-size: 16px
  46. a
  47. @extend $link-dark
  48. .article-meta
  49. font-size: 12px
  50. color: color-default + #333
  51. border-top: 1px solid #f7f7f7
  52. background-color: rgba(244, 246, 247, 0.2)
  53. .timeline-row-major
  54. .node
  55. width: 14px
  56. height: 14px
  57. font-size: 14px
  58. margin: 0 0 0 -17px
  59. padding: 6px 8px 10px
  60. .title
  61. font-size: 18px
  62. margin-left: 15px
  63. line-height: 30px