react-timeline-graph/src/components/css/style.css

React library to build horizontal and vertical timeline graph

.box ul {
  list-style: none;
  /* position: absolute; */
  /* top: 50%;  
  left: 50%; 
  transform: translate(-50%, -50%); */
  padding-top: 10px; 
  /* padding-bottom: 20px; */
  padding-left: 60px; 
  color: #000;
  /* background-color: #f2f5f7; */
  font-size: 13pt;
  /* width:80%; */
  /* transition-duration: 3s; */

}

.box ul li {
  position: relative;
  margin-left: 30px ;
  /* background-color: #F8FAFB; */
  padding: 10px;
  /* border-radius: 6px; */
  width: 90%; 
  /* box-shadow: 0 0 4px rgba(247, 248, 249, 0.73), 0 2px 2px rgba(247, 248, 249, 0.73) */
}

.box ul li > span {
  width: 1px;
  height: 100%;
  background:#4bafa8;
  left: -30px;
  top: 0;
  position: absolute;
}
.box ul li > span:before {
  content: '';
  width: 12pt;
  height: 12pt;
  border-radius: 50%;
  border: 1px solid #219692;
  position: absolute;
  background: #32C2BE;
  left: -6pt;
  top: 0;
}
.box ul li span:after {
  top: 100%;
}
.box ul li > div {
  margin-left: 10px;  
}
.box div .title, .box div .type {
  font-weight: 600;
  font-size: 13pt;
  letter-spacing:0.25pt; 
}
.box div .info {
  font-weight: 300;
}
.box div > div {
  margin-top: 5px;
}
.box span.number {
  height: 100%;
}
.box span.number span {
  position: absolute;
  font-size: 13pt;
  left: -60px;
  font-weight: bold;
}
.box span.number span:first-child {
  top: -5px;
}

.event-box {
  /* padding-top: 10px; */
  /* padding-bottom: 10px; */
  margin-bottom: 10px;
  background-color: #F8FAFB;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(247, 248, 249, 0.73), 0 2px 2px rgba(247, 248, 249, 0.73)
}

.time-bar {
  padding-top: 30px;
  padding-bottom: 30px;
}

.icon {
  color:#3c3f40;
  padding-right: 2px;
}

.btn {
  font-size: 13pt;
}

.eventTable {
  /* border: 1px solid #c2c2c2; */
  width:98%;
  padding-left:30px;
}
.dateRow {
  border-bottom: 1px solid #c2c2c2
}

/*Horizontal Timeline*/

.time-line {
  white-space: nowrap;
  /* overflow-x: hidden; */
}
.time-line ul {
  font-size: 0;
  padding: 10px 0;
}

.time-line ul li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  height: 1px;
  background: #7ED321;
}
.time-line ul li:last-child {
  width:0
}
.time-line ul li::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #7ED321
}


.table tbody tr:first-child {
  border-left: 1px dashed #BABFC4
}