chartist.css 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. .ct-chart {
  2. height: 240px; }
  3. @media (min-width: 992px) {
  4. .ct-chart {
  5. height: 320px; } }
  6. @media (min-width: 768px) {
  7. .ct-chart {
  8. height: 280px; } }
  9. #exampleSimplePie.ct-chart .ct-label {
  10. font-size: 16px;
  11. color: #fff;
  12. fill: #fff; }
  13. #exampleLineAnimation {
  14. height: 300px;
  15. background-color: #453d3f; }
  16. .ct-chart.ct-golden-section {
  17. position: relative;
  18. display: block;
  19. width: 100%; }
  20. .ct-chart.ct-golden-section:before {
  21. display: block;
  22. float: left;
  23. width: 0;
  24. height: 0;
  25. /*padding-bottom: 61.804697157%*/
  26. padding-bottom: 0;
  27. content: ""; }
  28. .ct-chart.ct-golden-section:after {
  29. display: table;
  30. clear: both;
  31. content: ""; }
  32. .ct-chart.ct-golden-section > svg {
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. display: block; }
  37. #exampleLineAnimation .ct-label,
  38. #exampleLineAnimation .ct-label.ct-horizontal {
  39. display: block;
  40. width: 100%;
  41. height: 100%;
  42. /*font-size: .75rem;*/
  43. font-size: 13px;
  44. color: #94878a;
  45. text-align: left;
  46. fill: #94878a; }
  47. #exampleLineAnimation .ct-label.ct-vertical {
  48. display: block;
  49. width: 100%;
  50. height: 100%;
  51. /*font-size: .75rem;*/
  52. font-size: 13px;
  53. color: #94878a;
  54. text-align: right;
  55. fill: #94878a; }
  56. #exampleLineAnimation .ct-grid {
  57. stroke: #53494b;
  58. stroke-width: 1px;
  59. stroke-dasharray: 3px; }
  60. #exampleLineAnimation .ct-point {
  61. stroke-width: 10px;
  62. stroke-linecap: round; }
  63. #exampleLineAnimation .ct-line {
  64. fill: none;
  65. stroke-width: 4px; }
  66. #exampleLineAnimation .ct-area {
  67. stroke: none;
  68. fill-opacity: .1; }
  69. #exampleLineAnimation .ct-bar {
  70. fill: none;
  71. stroke-width: 10px; }
  72. #exampleLineAnimation .ct-slice.ct-donut {
  73. fill: none;
  74. stroke-width: 60px; }
  75. #exampleLineAnimation .ct-series.ct-series-a .ct-bar,
  76. #exampleLineAnimation .ct-series.ct-series-a .ct-line,
  77. #exampleLineAnimation .ct-series.ct-series-a .ct-point,
  78. #exampleLineAnimation .ct-series.ct-series-a .ct-slice.ct-donut {
  79. stroke: #d70206; }
  80. #exampleLineAnimation .ct-series.ct-series-a .ct-area,
  81. #exampleLineAnimation .ct-series.ct-series-a .ct-slice:not(.ct-donut) {
  82. fill: #d70206; }
  83. #exampleLineAnimation .ct-series.ct-series-a .ct-point {
  84. stroke-width: 10px;
  85. stroke-linecap: square; }
  86. #exampleLineAnimation .ct-series.ct-series-a .ct-line {
  87. -webkit-animation: dashoffset 1s linear infinite;
  88. animation: dashoffset 1s linear infinite;
  89. fill: none;
  90. stroke-width: 4px;
  91. stroke-dasharray: 5px; }
  92. #exampleLineAnimation .ct-series.ct-series-b .ct-bar,
  93. #exampleLineAnimation .ct-series.ct-series-b .ct-line,
  94. #exampleLineAnimation .ct-series.ct-series-b .ct-point,
  95. #exampleLineAnimation .ct-series.ct-series-b .ct-slice.ct-donut {
  96. stroke: #f05b4f; }
  97. #exampleLineAnimation .ct-series.ct-series-b .ct-area,
  98. #exampleLineAnimation .ct-series.ct-series-b .ct-slice:not(.ct-donut) {
  99. fill: #f05b4f; }
  100. #exampleLineAnimation .ct-series.ct-series-c .ct-bar,
  101. #exampleLineAnimation .ct-series.ct-series-c .ct-line,
  102. #exampleLineAnimation .ct-series.ct-series-c .ct-point,
  103. #exampleLineAnimation .ct-series.ct-series-c .ct-slice.ct-donut {
  104. stroke: #f4c63d; }
  105. #exampleLineAnimation .ct-series.ct-series-c .ct-area,
  106. #exampleLineAnimation .ct-series.ct-series-c .ct-slice:not(.ct-donut) {
  107. fill: #f4c63d; }
  108. #exampleLineAnimation .ct-series.ct-series-d .ct-bar,
  109. #exampleLineAnimation .ct-series.ct-series-d .ct-line,
  110. #exampleLineAnimation .ct-series.ct-series-d .ct-point,
  111. #exampleLineAnimation .ct-series.ct-series-d .ct-slice.ct-donut {
  112. stroke: #d17905; }
  113. #exampleLineAnimation .ct-series.ct-series-d .ct-area,
  114. #exampleLineAnimation .ct-series.ct-series-d .ct-slice:not(.ct-donut) {
  115. fill: #d17905; }
  116. #exampleLineAnimation .ct-series.ct-series-e .ct-bar,
  117. #exampleLineAnimation .ct-series.ct-series-e .ct-line,
  118. #exampleLineAnimation .ct-series.ct-series-e .ct-point,
  119. #exampleLineAnimation .ct-series.ct-series-e .ct-slice.ct-donut {
  120. stroke: #453d3f; }
  121. #exampleLineAnimation .ct-series.ct-series-e .ct-area,
  122. #exampleLineAnimation .ct-series.ct-series-e .ct-slice:not(.ct-donut) {
  123. fill: #453d3f; }
  124. #exampleLineAnimation .ct-series.ct-series-f .ct-bar,
  125. #exampleLineAnimation .ct-series.ct-series-f .ct-line,
  126. #exampleLineAnimation .ct-series.ct-series-f .ct-point,
  127. #exampleLineAnimation .ct-series.ct-series-f .ct-slice.ct-donut {
  128. stroke: #59922b; }
  129. #exampleLineAnimation .ct-series.ct-series-f .ct-area,
  130. #exampleLineAnimation .ct-series.ct-series-f .ct-slice:not(.ct-donut) {
  131. fill: #59922b; }
  132. #exampleLineAnimation .ct-series.ct-series-g .ct-bar,
  133. #exampleLineAnimation .ct-series.ct-series-g .ct-line,
  134. #exampleLineAnimation .ct-series.ct-series-g .ct-point,
  135. #exampleLineAnimation .ct-series.ct-series-g .ct-slice.ct-donut {
  136. stroke: #0544d3; }
  137. #exampleLineAnimation .ct-series.ct-series-g .ct-area,
  138. #exampleLineAnimation .ct-series.ct-series-g .ct-slice:not(.ct-donut) {
  139. fill: #0544d3; }
  140. #exampleLineAnimation .ct-series.ct-series-h .ct-bar,
  141. #exampleLineAnimation .ct-series.ct-series-h .ct-line,
  142. #exampleLineAnimation .ct-series.ct-series-h .ct-point,
  143. #exampleLineAnimation .ct-series.ct-series-h .ct-slice.ct-donut {
  144. stroke: #6b0392; }
  145. #exampleLineAnimation .ct-series.ct-series-h .ct-area,
  146. #exampleLineAnimation .ct-series.ct-series-h .ct-slice:not(.ct-donut) {
  147. fill: #6b0392; }
  148. #exampleLineAnimation .ct-series.ct-series-i .ct-bar,
  149. #exampleLineAnimation .ct-series.ct-series-i .ct-line,
  150. #exampleLineAnimation .ct-series.ct-series-i .ct-point,
  151. #exampleLineAnimation .ct-series.ct-series-i .ct-slice.ct-donut {
  152. stroke: #f05b4f; }
  153. #exampleLineAnimation .ct-series.ct-series-i .ct-area,
  154. #exampleLineAnimation .ct-series.ct-series-i .ct-slice:not(.ct-donut) {
  155. fill: #f05b4f; }
  156. #exampleLineAnimation .ct-series.ct-series-j .ct-bar,
  157. #exampleLineAnimation .ct-series.ct-series-j .ct-line,
  158. #exampleLineAnimation .ct-series.ct-series-j .ct-point,
  159. #exampleLineAnimation .ct-series.ct-series-j .ct-slice.ct-donut {
  160. stroke: #dda458; }
  161. #exampleLineAnimation .ct-series.ct-series-j .ct-area,
  162. #exampleLineAnimation .ct-series.ct-series-j .ct-slice:not(.ct-donut) {
  163. fill: #dda458; }
  164. #exampleLineAnimation .ct-series.ct-series-k .ct-bar,
  165. #exampleLineAnimation .ct-series.ct-series-k .ct-line,
  166. #exampleLineAnimation .ct-series.ct-series-k .ct-point,
  167. #exampleLineAnimation .ct-series.ct-series-k .ct-slice.ct-donut {
  168. stroke: #eacf7d; }
  169. #exampleLineAnimation .ct-series.ct-series-k .ct-area,
  170. #exampleLineAnimation .ct-series.ct-series-k .ct-slice:not(.ct-donut) {
  171. fill: #eacf7d; }
  172. #exampleLineAnimation .ct-series.ct-series-l .ct-bar,
  173. #exampleLineAnimation .ct-series.ct-series-l .ct-line,
  174. #exampleLineAnimation .ct-series.ct-series-l .ct-point,
  175. #exampleLineAnimation .ct-series.ct-series-l .ct-slice.ct-donut {
  176. stroke: #86797d; }
  177. #exampleLineAnimation .ct-series.ct-series-l .ct-area,
  178. #exampleLineAnimation .ct-series.ct-series-l .ct-slice:not(.ct-donut) {
  179. fill: #86797d; }
  180. #exampleLineAnimation .ct-series.ct-series-m .ct-bar,
  181. #exampleLineAnimation .ct-series.ct-series-m .ct-line,
  182. #exampleLineAnimation .ct-series.ct-series-m .ct-point,
  183. #exampleLineAnimation .ct-series.ct-series-m .ct-slice.ct-donut {
  184. stroke: #b2c326; }
  185. #exampleLineAnimation .ct-series.ct-series-m .ct-area,
  186. #exampleLineAnimation .ct-series.ct-series-m .ct-slice:not(.ct-donut) {
  187. fill: #b2c326; }
  188. #exampleLineAnimation .ct-series.ct-series-n .ct-bar,
  189. #exampleLineAnimation .ct-series.ct-series-n .ct-line,
  190. #exampleLineAnimation .ct-series.ct-series-n .ct-point,
  191. #exampleLineAnimation .ct-series.ct-series-n .ct-slice.ct-donut {
  192. stroke: #6188e2; }
  193. #exampleLineAnimation .ct-series.ct-series-n .ct-area,
  194. #exampleLineAnimation .ct-series.ct-series-n .ct-slice:not(.ct-donut) {
  195. fill: #6188e2; }
  196. #exampleLineAnimation .ct-series.ct-series-o .ct-bar,
  197. #exampleLineAnimation .ct-series.ct-series-o .ct-line,
  198. #exampleLineAnimation .ct-series.ct-series-o .ct-point,
  199. #exampleLineAnimation .ct-series.ct-series-o .ct-slice.ct-donut {
  200. stroke: #a748ca; }
  201. #exampleLineAnimation .ct-series.ct-series-o .ct-area,
  202. #exampleLineAnimation .ct-series.ct-series-o .ct-slice:not(.ct-donut) {
  203. fill: #a748ca; }
  204. #exampleLineAnimation .ct-point {
  205. -webkit-animation: bouncing-stroke .5s ease infinite;
  206. animation: bouncing-stroke .5s ease infinite; }
  207. #exampleLineAnimation .ct-line {
  208. fill: none;
  209. stroke-width: 3px; }
  210. #exampleLineAnimation .ct-point {
  211. -webkit-animation: exploding-stroke 1s ease-out infinite;
  212. animation: exploding-stroke 1s ease-out infinite; }
  213. #exampleLineAnimation .ct-line {
  214. fill: none;
  215. stroke-width: 2px;
  216. stroke-dasharray: 40px 3px; }
  217. #behavior-with-jquery .ct-point {
  218. stroke-width: 20px;
  219. stroke-linecap: round; }
  220. @-webkit-keyframes dashoffset {
  221. 0% {
  222. stroke-dashoffset: 0; }
  223. 100% {
  224. stroke-dashoffset: -20px; } }
  225. @keyframes dashoffset {
  226. 0% {
  227. stroke-dashoffset: 0; }
  228. 100% {
  229. stroke-dashoffset: -20px; } }
  230. @-webkit-keyframes bouncing-stroke {
  231. 0% {
  232. stroke-width: 5px; }
  233. 50% {
  234. stroke-width: 10px; }
  235. 100% {
  236. stroke-width: 5px; } }
  237. @keyframes bouncing-stroke {
  238. 0% {
  239. stroke-width: 5px; }
  240. 50% {
  241. stroke-width: 10px; }
  242. 100% {
  243. stroke-width: 5px; } }
  244. @-webkit-keyframes exploding-stroke {
  245. 0% {
  246. opacity: 1;
  247. stroke-width: 2px; }
  248. 100% {
  249. opacity: 0;
  250. stroke-width: 20px; } }
  251. @keyframes exploding-stroke {
  252. 0% {
  253. opacity: 1;
  254. stroke-width: 2px; }
  255. 100% {
  256. opacity: 0;
  257. stroke-width: 20px; } }