feat: Add currently mined keyblock animation (#357)

aeternity · Jul 18, 2023 · 5a14b1e · 5a14b1e
1 parent 5a1151f
commit 5a14b1e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/src/components/KeyblockSequence.vue b/src/components/KeyblockSequence.vue
@@ -42,11 +42,15 @@ defineProps({
 
   &__sequence {
     display: flex;
-    height: 40px;
+    height: calc(40px + 16px);
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
 
+    /*animation overflow workaround*/
+    margin: -8px;
+    padding: 8px;
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -56,6 +60,7 @@ defineProps({
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
 
     min-width: 40px;
     height: 100%;
@@ -69,6 +74,12 @@ defineProps({
     font-size: 14px;
     cursor: pointer;
 
+    &:first-child {
+      box-shadow: 0 0 0 0 var(--color-midnight-35);
+      transform: scale(1);
+      animation: pulse 2s infinite;
+    }
+
     @media (--desktop) {
       margin-right: var(--space-4);
     }
@@ -80,14 +91,20 @@ defineProps({
 
     &--active {
       background: var(--color-fire);
+
+      &:first-child {
+        box-shadow: 0 0 0 0 var(--color-fire);
+        transform: scale(1);
+        animation: pulse-active 2s infinite;
+      }
     }
   }
 
   &__overlay {
     width: 80px;
     height: 100%;
     position: absolute;
-    right: 0;
+    right: -8px;
     top: 0;
     background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);
 

diff --git a/src/styles/generic/_animations.css b/src/styles/generic/_animations.css
@@ -1,3 +1,40 @@
 *:not([class^="v-popper"]) {
   transition: all 0.08s ease;
 }
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    /*--color-midnight-35 in rgb*/
+    box-shadow: 0 0 0 0 rgba(178, 178, 178, 0.8);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 var(--space-1) rgba(178, 178, 178, 0);
+  }
+
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(178, 178, 178, 0);
+  }
+}
+
+
+@keyframes pulse-active {
+  0% {
+    transform: scale(0.95);
+    /*--color-fire in rgb*/
+    box-shadow: 0 0 0 0 rgba(245, 39, 78, 0.4);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 var(--space-1) rgba(245, 39, 78, 0);
+  }
+
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(245, 39, 78, 0);
+  }
+}