feat: built initial version of Vote button component

2026-01-14 11:54:21 +01:00 · 2022-05-16 18:32:09 +03:00
parent 3964c086e6
commit ed5b83662d
6 changed files with 307 additions and 16 deletions
--- a/src/Components/VoteButton/styles.module.css
+++ b/src/Components/VoteButton/styles.module.css
@@ -0,0 +1,115 @@
+.vote_button {
+  --scale: 0;
+  /* transition: background-color 1s; */
+  /* background-color: hsl(25, 100%, max(calc((95 - var(--scale) / 4) * 1%), 63%)); */
+}
+
+.vote_counter {
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  color: #ff2727;
+  font-weight: bold;
+  font-size: 21px;
+  will-change: transform;
+  text-shadow: 0 0 4px #ff0707;
+  transform: translate(-50%, 0) scale(0.5);
+  animation: fly_value 0.5s 1 ease-out;
+}
+
+.color_overlay {
+  --increments: 0;
+  --offset: 0;
+  --bg-color: hsl(0deg 86% max(calc((93 - var(--increments) / 3) * 1%), 68%));
+
+  position: absolute;
+  border-radius: inherit;
+  inset: 0;
+  overflow: hidden;
+}
+
+.color_overlay::before {
+  content: "";
+  background: var(--bg-color);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 100%;
+  transform: translateX(var(--offset));
+}
+
+@keyframes fly_value {
+  0% {
+    transform: translate(-50%, 0) scale(0.5);
+    opacity: 1;
+  }
+
+  66% {
+    transform: translate(-50%, -36px) scale(1.2);
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: translate(-50%, -48px) scale(0.8);
+    opacity: 0;
+  }
+}
+
+.spark {
+  position: absolute;
+  bottom: calc(var(--offsetY) * 1%);
+  left: calc(var(--offsetX) * 1%);
+  transform: scale(var(--scale));
+  opacity: 0;
+  will-change: transform;
+
+  animation-name: fly-spark-1;
+  animation-duration: calc(var(--animationSpeed) * 1s);
+  animation-timing-function: linear;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  filter: drop-shadow(0 0 4px);
+}
+
+@keyframes fly_spark_1 {
+  0% {
+    transform: translate(0, 0) scale(var(--scale));
+    opacity: 1;
+  }
+
+  33% {
+    transform: translate(12px, -70px) scale(var(--scale));
+  }
+
+  66% {
+    transform: translate(0, -140px) scale(var(--scale));
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: translate(6px, -200px) scale(var(--scale));
+    opacity: 0;
+  }
+}
+
+@keyframes fly_spark_2 {
+  0% {
+    transform: translate(0, 0) scale(var(--scale));
+    opacity: 1;
+  }
+
+  50% {
+    transform: translate(-10px, -80px) scale(var(--scale));
+  }
+
+  80% {
+    transform: translate(-4px, -140px) scale(var(--scale));
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: translate(-6px, -160px) scale(var(--scale));
+    opacity: 0;
+  }
+}