1.timeline { 2 list-style: none; 3 padding: 20px 0 20px; 4 position: relative; 5} 6 7.timeline:before { 8 top: 0; 9 bottom: 0; 10 position: absolute; 11 content: " "; 12 width: 3px; 13 background-color: #E4E4E4; 14 left: 50%; 15 margin-left: -1.5px; 16 } 17 18.timeline > li { 19 margin-bottom: 20px; 20 position: relative; 21} 22 23.timeline > li:before, 24.timeline > li:after { 25 content: " "; 26 display: table; 27} 28 29.timeline > li:after { 30 clear: both; 31} 32 33.timeline > li:before, 34.timeline > li:after { 35 content: " "; 36 display: table; 37} 38 39.timeline > li:after { 40 clear: both; 41} 42 43.timeline > li > .timeline-panel { 44 width: 46%; 45 float: left; 46 border: 1px solid #d4d4d4; 47 border-radius: 2px; 48 padding: 20px; 49 position: relative; 50 -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); 51 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); 52 background-color: white; 53} 54 55.timeline > li > .timeline-panel:before { 56 position: absolute; 57 top: 26px; 58 right: -15px; 59 display: inline-block; 60 border-top: 15px solid transparent; 61 border-left: 15px solid #ccc; 62 border-right: 0 solid #ccc; 63 border-bottom: 15px solid transparent; 64 content: " "; 65} 66 67.timeline > li > .timeline-panel:after { 68 position: absolute; 69 top: 27px; 70 right: -14px; 71 display: inline-block; 72 border-top: 14px solid transparent; 73 border-left: 14px solid #fff; 74 border-right: 0 solid #fff; 75 border-bottom: 14px solid transparent; 76 content: " "; 77} 78 79.timeline > li > .timeline-badge { 80 color: #fff; 81 width: 50px; 82 height: 50px; 83 line-height: 50px; 84 font-size: 1.4em; 85 text-align: center; 86 position: absolute; 87 top: 16px; 88 left: 50%; 89 margin-left: -25px; 90 background-color: #E6E6E6; 91 z-index: 100; 92 border-top-right-radius: 50%; 93 border-top-left-radius: 50%; 94 border-bottom-right-radius: 50%; 95 border-bottom-left-radius: 50%; 96} 97 98.timeline > li.timeline-inverted > .timeline-panel { 99 float: right; 100} 101 102.timeline > li.timeline-inverted > .timeline-panel:before { 103 border-left-width: 0; 104 border-right-width: 15px; 105 left: -15px; 106 right: auto; 107} 108 109.timeline > li.timeline-inverted > .timeline-panel:after { 110 border-left-width: 0; 111 border-right-width: 14px; 112 left: -14px; 113 right: auto; 114} 115 116.timeline-badge.primary { 117 background-color: #2e6da4 !important; 118} 119 120.timeline-badge.success { 121 background-color: #3f903f !important; 122} 123 124.timeline-badge.warning { 125 background-color: #f0ad4e !important; 126} 127 128.timeline-badge.danger { 129 background-color: #d9534f !important; 130} 131 132.timeline-badge.info { 133 background-color: #5bc0de !important; 134} 135 136.timeline-title { 137 margin-top: 0; 138 color: inherit; 139} 140 141.timeline-body > p, 142.timeline-body > ul { 143 margin-bottom: 0; 144} 145 146.timeline-body > p + p { 147 margin-top: 5px; 148} 149 150@media (max-width: 767px) { 151 ul.timeline:before { 152 left: 40px; 153 } 154 155 ul.timeline > li > .timeline-panel { 156 width: calc(100% - 90px); 157 width: -moz-calc(100% - 90px); 158 width: -webkit-calc(100% - 90px); 159 } 160 161 ul.timeline > li > .timeline-badge { 162 left: 15px; 163 margin-left: 0; 164 top: 16px; 165 } 166 167 ul.timeline > li > .timeline-panel { 168 float: right; 169 } 170 171 ul.timeline > li > .timeline-panel:before { 172 border-left-width: 0; 173 border-right-width: 15px; 174 left: -15px; 175 right: auto; 176 } 177 178 ul.timeline > li > .timeline-panel:after { 179 border-left-width: 0; 180 border-right-width: 14px; 181 left: -14px; 182 right: auto; 183 } 184} 185