You are here

Home » API reference » A Simple Timeline 8

timeline.css in A Simple Timeline 8 

ul.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
ul.timeline-list:after {
  content: '';
  width: 4px;
  height: 100%;
  position: absolute;
  z-index: 1;
  background-color: #333333;
  top: 0;
}
ul.timeline-list li.timeline-item {
  margin: 0;
  padding: 0;
}
ul.timeline-list li.timeline-item:after {
  content: "";
  display: table;
  clear: both;
}
ul.timeline-list li.timeline-item .timeline-item-wrapper {
  box-sizing: border-box;
  position: relative;
}
ul.timeline-list li.timeline-item .timeline-item-wrapper:after {
  content: "";
  display: table;
  clear: both;
}
ul.timeline-list li.timeline-item .timeline-item-wrapper span.timeline-marker {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 3px solid #333;
  border-radius: 50%;
}
ul.timeline-list.alternate:after {
  left: 50%;
  transform: translateX(-50%);
}
ul.timeline-list.alternate li.timeline-item .timeline-item-wrapper {
  width: 50%;
}
ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper {
  float: left;
  padding-right: 1rem;
  text-align: right;
}
ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper .timeline-marker {
  right: -8px;
}
ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper {
  float: right;
  padding-left: 1rem;
  text-align: left;
}
ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper .timeline-marker {
  left: -8px;
}
ul.timeline-list.left:after {
  left: 0;
}
ul.timeline-list.left li.timeline-item .timeline-item-wrapper {
  width: 100%;
  padding-left: 1rem;
  text-align: left;
}
ul.timeline-list.left li.timeline-item .timeline-item-wrapper .timeline-marker {
  left: -6px;
}
ul.timeline-list.right:after {
  right: 0;
}
ul.timeline-list.right li.timeline-item .timeline-item-wrapper {
  width: 100%;
  padding-right: 1rem;
  text-align: right;
}
ul.timeline-list.right li.timeline-item .timeline-item-wrapper .timeline-marker {
  right: -6px;
}
ul.timeline-list.marker-top .timeline-marker {
  top: 0;
}
ul.timeline-list.marker-center .timeline-marker {
  top: 50%;
  transform: translateY(-50%);
}
ul.timeline-list.marker-bottom .timeline-marker {
  bottom: 0;
}

File

css/timeline.css
View source 
  1. ul.timeline-list {

  2.   list-style: none;

  3.   margin: 0;

  4.   padding: 0;

  5.   position: relative;

  6. }

  7. ul.timeline-list:after {

  8.   content: '';

  9.   width: 4px;

  10.   height: 100%;

  11.   position: absolute;

  12.   z-index: 1;

  13.   background-color: #333333;

  14.   top: 0;

  15. }

  16. ul.timeline-list li.timeline-item {

  17.   margin: 0;

  18.   padding: 0;

  19. }

  20. ul.timeline-list li.timeline-item:after {

  21.   content: "";

  22.   display: table;

  23.   clear: both;

  24. }

  25. ul.timeline-list li.timeline-item .timeline-item-wrapper {

  26.   box-sizing: border-box;

  27.   position: relative;

  28. }

  29. ul.timeline-list li.timeline-item .timeline-item-wrapper:after {

  30.   content: "";

  31.   display: table;

  32.   clear: both;

  33. }

  34. ul.timeline-list li.timeline-item .timeline-item-wrapper span.timeline-marker {

  35.   position: absolute;

  36.   z-index: 2;

  37.   width: 10px;

  38.   height: 10px;

  39.   background: #fff;

  40.   border: 3px solid #333;

  41.   border-radius: 50%;

  42. }

  43. ul.timeline-list.alternate:after {

  44.   left: 50%;

  45.   transform: translateX(-50%);

  46. }

  47. ul.timeline-list.alternate li.timeline-item .timeline-item-wrapper {

  48.   width: 50%;

  49. }

  50. ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper {

  51.   float: left;

  52.   padding-right: 1rem;

  53.   text-align: right;

  54. }

  55. ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper .timeline-marker {

  56.   right: -8px;

  57. }

  58. ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper {

  59.   float: right;

  60.   padding-left: 1rem;

  61.   text-align: left;

  62. }

  63. ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper .timeline-marker {

  64.   left: -8px;

  65. }

  66. ul.timeline-list.left:after {

  67.   left: 0;

  68. }

  69. ul.timeline-list.left li.timeline-item .timeline-item-wrapper {

  70.   width: 100%;

  71.   padding-left: 1rem;

  72.   text-align: left;

  73. }

  74. ul.timeline-list.left li.timeline-item .timeline-item-wrapper .timeline-marker {

  75.   left: -6px;

  76. }

  77. ul.timeline-list.right:after {

  78.   right: 0;

  79. }

  80. ul.timeline-list.right li.timeline-item .timeline-item-wrapper {

  81.   width: 100%;

  82.   padding-right: 1rem;

  83.   text-align: right;

  84. }

  85. ul.timeline-list.right li.timeline-item .timeline-item-wrapper .timeline-marker {

  86.   right: -6px;

  87. }

  88. ul.timeline-list.marker-top .timeline-marker {

  89.   top: 0;

  90. }

  91. ul.timeline-list.marker-center .timeline-marker {

  92.   top: 50%;

  93.   transform: translateY(-50%);

  94. }

  95. ul.timeline-list.marker-bottom .timeline-marker {

  96.   bottom: 0;

  97. }