gauge.css 982 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .gauge {
  2. position: relative;
  3. text-align: center; }
  4. .gauge canvas {
  5. display: inline-block;
  6. width: 200px;
  7. max-width: 100%; }
  8. .gauge-label {
  9. position: absolute;
  10. bottom: 15%;
  11. width: 100%;
  12. font-size: 24px;
  13. font-weight: 700;
  14. color: #37474f; }
  15. .gauge-sm canvas {
  16. width: 150px; }
  17. .gauge-sm .gauge-label {
  18. font-size: 18px; }
  19. .gauge-lg canvas {
  20. width: 300px; }
  21. .gauge-lg .gauge-label {
  22. font-size: 36px; }
  23. .donut {
  24. position: relative;
  25. text-align: center; }
  26. .donut canvas {
  27. display: inline-block;
  28. width: 200px;
  29. max-width: 100%; }
  30. .donut-label {
  31. position: absolute;
  32. top: 50%;
  33. width: 100%;
  34. font-size: 24px;
  35. font-weight: 700;
  36. color: #37474f;
  37. -webkit-transform: translateY(-50%);
  38. transform: translateY(-50%); }
  39. .donut-sm canvas {
  40. width: 150px; }
  41. .donut-sm .donut-label {
  42. font-size: 18px; }
  43. .donut-lg canvas {
  44. width: 300px; }
  45. .donut-lg .donut-label {
  46. font-size: 36px; }