Advertisement
zyprx

ᅠcss donation goal

Apr 7th, 2018
40
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.25 KB | None | 0 0
  1. @import url("https://fonts.googleapis.com/css?family=Roboto:300");
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. box-sizing:
  6. }
  7. html,
  8. body {
  9. overflow: hidden;
  10. }
  11. body {
  12. display: -ms-flexbox;
  13. display: flex;
  14. -ms-flex-align: center;
  15. align-items: center;
  16. -ms-flex-pack: center;
  17. justify-content: center;
  18. }
  19. body > div {
  20. width: 100%;
  21. }
  22. #wrap {
  23. font-family: "Roboto", sans-serif;
  24. display: -ms-flexbox;
  25. display: flex;
  26. -ms-flex-direction: column;
  27. flex-direction: column;
  28. -ms-flex-align: center;
  29. align-items: center;
  30. -ms-flex-pack: center;
  31. justify-content: center;
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .goal-cont {
  36. color: {#000000};
  37. font-size: 0px;
  38. position: relative;
  39. padding: 1em;
  40. width: calc(100% - 12px * 2);
  41. text-transform: uppercase;
  42. }
  43. .goal-cont::before {
  44. content: '';
  45. position: absolute;
  46. top: 0;
  47. right: -12px;
  48. bottom: 0;
  49. left: -12px;
  50. border: 3px solid {backgroundColor};
  51. opacity: 0;
  52. }
  53. .goal-cont > div {
  54. position: relative;
  55. }
  56. .goal-cont .main-background {
  57. background: {backgroundColor};
  58. position: absolute;
  59. top: 0;
  60. right: 0;
  61. bottom: 0;
  62. left: 0;
  63. opacity: 0;
  64. }
  65. #goal-bg {
  66. position: absolute;
  67. top: 0;
  68. right: 0;
  69. bottom: 0;
  70. left: 0;
  71. }
  72. #goal-bg::before {
  73. content: '';
  74. position: absolute;
  75. top: 0;
  76. right: 0;
  77. bottom: 0;
  78. left: 0;
  79. background: {goalBarColor};
  80. opacity: 0.5;
  81. }
  82. #goal-bar {
  83. height: 30px;
  84. line-height: 16px;
  85. position: relative;
  86. margin: 16px 0;
  87. display: -ms-flexbox;
  88. display: flex;
  89. -webkit-transform: translateZ(0);
  90. transform: translateZ(0);
  91. border-radius: 100px;
  92. overflow: hidden;
  93. }
  94. #goal-start {
  95. background: {goalBarColor};
  96. display: inline-block;
  97. height: 100%;
  98. position: absolute;
  99. top: 0;
  100. left: 0;
  101. width: 0;
  102. transition: width 1s;
  103. }
  104. .goal-numbers {
  105. position: relative;
  106. }
  107. #goal-progress {
  108. font-family: "Roboto", sans-serif;
  109. position: absolute;
  110. text-align: right;
  111. left: -800;
  112. width: 100%;
  113. bottom: 50;
  114. display: block;
  115. color: ffffff;
  116. font-size: 15;
  117.  
  118. }
  119. #goal-total {
  120. position: absolute;
  121. right: 0;
  122. bottom: 0;
  123. opacity: 0;
  124. }
  125. #goal-end-date {
  126. position: absolute;
  127. right: 0;
  128. top: 0;
  129. opacity: 0;
  130. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement