angular-timeline.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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: 3px;
  37. background-color: #cccccc;
  38. left: 50%;
  39. margin-left: -1.5px; }
  40. .timeline-event {
  41. margin-bottom: 20px;
  42. position: relative; }
  43. .timeline-footer {
  44. margin-top: 10px;
  45. padding: 10px 0; }
  46. .timeline-footer a {
  47. color: #fff;
  48. background-color: #acb7c0;
  49. border-radius: 0.25em;
  50. padding: 0.8em 1em;
  51. margin: 0; }
  52. timeline-badge.primary {
  53. background-color: #2e6da4 !important; }
  54. timeline-badge.success {
  55. background-color: #3f903f !important; }
  56. timeline-badge.warning {
  57. background-color: #f0ad4e !important; }
  58. timeline-badge.danger {
  59. background-color: #d9534f !important; }
  60. timeline-badge.info {
  61. background-color: #5bc0de !important; }
  62. .timeline-title {
  63. margin-top: 0; }
  64. timeline-panel > * {
  65. margin: 0; }
  66. timeline-panel {
  67. background-color: #fff;
  68. float: left;
  69. border: 1px solid #d4d4d4;
  70. border-radius: 2px;
  71. padding: 12px;
  72. position: relative;
  73. -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  74. box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); }
  75. timeline-panel:before {
  76. position: absolute;
  77. top: 35px;
  78. right: -15px;
  79. display: inline-block;
  80. border-top: 15px solid transparent;
  81. border-left: 15px solid #ccc;
  82. border-right: 0 solid #ccc;
  83. border-bottom: 15px solid transparent;
  84. content: " "; }
  85. timeline-panel:after {
  86. position: absolute;
  87. top: 36px;
  88. right: -14px;
  89. display: inline-block;
  90. border-top: 14px solid transparent;
  91. border-left: 14px solid #fff;
  92. border-right: 0 solid #fff;
  93. border-bottom: 14px solid transparent;
  94. content: " "; }
  95. timeline-badge {
  96. 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);
  97. color: #fff;
  98. width: 50px;
  99. height: 50px;
  100. line-height: 50px;
  101. font-size: 1.4em;
  102. text-align: center;
  103. position: absolute;
  104. top: 26px;
  105. left: 50%;
  106. margin-left: -25px;
  107. background-color: #999999;
  108. z-index: 100;
  109. border-top-right-radius: 50%;
  110. border-top-left-radius: 50%;
  111. border-bottom-right-radius: 50%;
  112. border-bottom-left-radius: 50%; }
  113. .timeline-inverted timeline-panel {
  114. float: right; }
  115. .timeline-inverted timeline-panel:before {
  116. border-left-width: 0;
  117. border-right-width: 15px;
  118. left: -15px;
  119. right: auto; }
  120. .timeline-inverted timeline-panel:after {
  121. border-left-width: 0;
  122. border-right-width: 14px;
  123. left: -14px;
  124. right: auto; }
  125. .timeline-event:before,
  126. .timeline-event:after {
  127. content: " ";
  128. display: table; }
  129. .timeline-event:after {
  130. clear: both; }
  131. .timeline-event:before,
  132. .timeline-event:after {
  133. content: " ";
  134. display: table; }
  135. .timeline-event:after {
  136. clear: both; }
  137. @media only screen and (min-width: 768px) {
  138. timeline-panel {
  139. width: calc(50% - 45px);
  140. width: -moz-calc(50% - 45px);
  141. width: -webkit-calc(50% - 45px); } }
  142. @media only screen and (max-width: 767px) {
  143. .timeline:before {
  144. left: 40px; }
  145. timeline-panel {
  146. width: calc(100% - 85px);
  147. width: -moz-calc(100% - 85px);
  148. width: -webkit-calc(100% - 85px); }
  149. timeline-badge {
  150. left: 15px;
  151. margin-left: 0;
  152. top: 36px; }
  153. timeline-panel {
  154. float: right; }
  155. timeline-panel:before {
  156. border-left-width: 0;
  157. border-right-width: 15px;
  158. left: -15px;
  159. right: auto;
  160. top: 46px; }
  161. timeline-panel:after {
  162. border-left-width: 0;
  163. border-right-width: 14px;
  164. left: -14px;
  165. right: auto;
  166. top: 47px; } }