angular-timeline.css 4.1 KB

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