frontend.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. .fl-number,
  2. .fl-number .fl-number-circle-container {
  3. margin: 0 auto;
  4. }
  5. .fl-number-before-text,
  6. .fl-number-after-text {
  7. display: block;
  8. }
  9. .fl-number-before-text { margin-bottom: 10px; }
  10. .fl-number-after-text { margin-top: 10px; }
  11. .fl-number-string {
  12. line-height: 1;
  13. white-space: nowrap;
  14. overflow: hidden;
  15. }
  16. .fl-number .fl-number-text,
  17. .fl-number .fl-number-circle-container {
  18. position: relative;
  19. z-index: 10;
  20. text-align: center;
  21. }
  22. .fl-number.fl-number-bars .fl-number-text { text-align: left; }
  23. .fl-number .fl-number-bar {
  24. text-align: right;
  25. padding: 5px;
  26. transform: scaleX( 0 );
  27. transform-origin: center left;
  28. transition: transform .3s ease-out;
  29. will-change: transform;
  30. }
  31. .fl-number .fl-number-bar-container {
  32. width: 100%;
  33. }
  34. .fl-number .fl-number-position-above .fl-number-bar {
  35. margin-top: 5px;
  36. }
  37. .fl-number .fl-number-position-below .fl-number-bar {
  38. margin-bottom: 5px;
  39. }
  40. .fl-number .svg-container {
  41. display: inline-block;
  42. position: relative;
  43. z-index: 1;
  44. width: 100%;
  45. height: auto;
  46. padding-bottom: 100%;
  47. }
  48. .fl-number .svg-container .svg {
  49. position: absolute;
  50. top: 0;
  51. left: 0;
  52. width: 100%;
  53. height: 100%;
  54. }
  55. .fl-number .svg-container .fl-bar {
  56. transition: stroke-dashoffset 1s ease-out;
  57. will-change: stroke-dashoffset;
  58. }