fabochart.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /*Stats*/
  2. .fabo-chart {
  3. border-right: 1px;
  4. margin-bottom: 24px;
  5. }
  6. .fabo-chart::after {
  7. content: " ";
  8. display: table;
  9. clear: both;
  10. }
  11. .fabo-chart .fabo-point {
  12. height: 345px;
  13. display: inline-block;
  14. float: left;
  15. box-sizing: border-box;
  16. padding-left: 0px;
  17. ovefabolow: hidden;
  18. }
  19. .fabo-chart .fabo-point .fabo-point-inner {
  20. height: 100%;
  21. position: relative;
  22. ovefabolow: hidden;
  23. background: #f4f6f7;
  24. }
  25. .fabo-chart .fabo-point
  26. .fabo-value-text {
  27. width: 100%;
  28. text-align: center;
  29. z-index: 100;
  30. color: #ffffff;
  31. font-size: 18px;
  32. font-weight: 600;
  33. position: absolute;
  34. left: 0;
  35. right: 0;
  36. bottom: 18px;
  37. }
  38. .fabo-chart .fabo-point
  39. .fabo-value-label {
  40. width: 100%;
  41. text-align: center;
  42. z-index: 100;
  43. color: #95a5b3;
  44. font-size: 12px;
  45. font-weight: 700;
  46. position: absolute;
  47. left: 0;
  48. right: 0;
  49. top: 18px;
  50. }
  51. .fabo-value-label {
  52. color: #00C6D7 !important;
  53. }
  54. .fabo-chart .fabo-point .fabo-value {
  55. box-sizing: content-box;
  56. width: 0;
  57. height: 100px;
  58. border-top: 0 solid transparent;
  59. border-right: 0 solid #7b82ff;
  60. border-bottom: 0 solid transparent;
  61. border-left: 0px solid #7b82ff;
  62. transition: height 200ms;
  63. position: absolute;
  64. bottom: 0;
  65. -webkit-animation: chart-height 200ms;
  66. animation: chart-height 200ms;
  67. }
  68. .fabo-value-label {
  69. color: #fff !important;
  70. }
  71. .fabo-value-label {
  72. color: #00C6D7 !important;
  73. }
  74. .fabo-chart .fabo-point .fabo-value.hide {
  75. display: none;
  76. height: 0 !important;
  77. }
  78. .fabo-chart .fabo-point .fabo-value.hide-border {
  79. border-top-width: 0 !important;
  80. }
  81. @-webkit-keyframes chart-height {
  82. 0% {
  83. height: 0;
  84. }
  85. }
  86. @keyframes chart-height {
  87. 0% {
  88. height: 0;
  89. }
  90. }
  91. /*# sourceMappingURL=chart.css.map */
  92. @media (max-width: 1024px) {
  93. .fabo-chart .fabo-point .fabo-value-text {
  94. width: 100%;
  95. text-align: center;
  96. z-index: 100;
  97. font-size: 15px;
  98. }
  99. .fabo-chart .fabo-point .fabo-value-label {
  100. font-size: 10px;
  101. }
  102. }