feat: add additional animations & shadows

marcopixel · Apr 20, 2024 · 35efdeb · 35efdeb
1 parent 5374506
commit 35efdeb
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 5 deletions.
diff --git a/src/assets/styles/_animations.css b/src/assets/styles/_animations.css
diff --git a/src/assets/styles/_animations.scss b/src/assets/styles/_animations.scss
@@ -145,3 +145,36 @@
     background: colors.$gradient-step-2;
   }
 }
+
+@keyframes gradient-animation-install-shadow {
+  $blur-radius: 30px;
+  $spread-radius: 2px;
+
+  0% {
+    box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-2;
+  }
+
+  20% {
+    box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-3;
+  }
+
+  35% {
+    box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-4;
+  }
+
+  50% {
+    box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-3;
+  }
+
+  65% {
+    box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-2;
+  }
+
+  80% {
+    box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-1;
+  }
+
+  100% {
+    box-shadow: 0 0 $blur-radius $spread-radius colors.$gradient-step-2;
+  }
+}
diff --git a/src/components/IconGrid/IconGrid.vue b/src/components/IconGrid/IconGrid.vue
@@ -282,11 +282,14 @@ const filteredItems = computed(() => {
     transition: all 0.3s ease;
 
     &:hover {
+      border: 1px solid rgba(colors.$white, 0.2);
       background-color: color.mix(colors.$white, colors.$body-bg, 10%);
+      box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05);
     }
 
     &:focus-within {
-      border: 1px solid rgba(colors.$white, 0.3);
+      border: 1px solid rgba(colors.$white, 0.4);
+      box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05);
     }
 
     .icongrid-search-icon {
@@ -378,11 +381,14 @@ const filteredItems = computed(() => {
       }
 
       &:hover {
-        background-color: color.mix(colors.$white, colors.$body-bg, 15%);
+        border: 1px solid rgba(colors.$white, 0.2);
+        background-color: color.mix(colors.$white, colors.$body-bg, 10%);
+        box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05);
       }
 
       &:focus-within {
-        border: 1px solid rgba(colors.$white, 0.1);
+        border: 1px solid rgba(colors.$white, 0.4);
+        box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05);
       }
 
       .multiselect-multiple-label,
@@ -446,10 +452,19 @@ const filteredItems = computed(() => {
         transition: all 0.3s ease;
       }
 
-      &:hover,
-      &:focus {
+      &:hover {
+        border: 1px solid rgba(colors.$white, 0.2);
         background-color: color.mix(colors.$white, colors.$body-bg, 10%);
+        box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05);
+      }
 
+      &.focus {
+        border: 1px solid rgba(colors.$white, 0.4);
+        box-shadow: 0 0 20px 2px rgba(colors.$white, 0.05);
+      }
+
+      &:hover,
+      &.focus {
         /* stylelint-disable-next-line no-descending-specificity */
         svg {
           transform: scale(1.1);
@@ -463,6 +478,7 @@ const filteredItems = computed(() => {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1rem;
     margin-top: 1.5rem;
+    transition: all 0.3s ease;
 
     @include mixins.breakpoint("sm") {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -493,6 +509,21 @@ const filteredItems = computed(() => {
       transition: all 0.3s ease;
       grid-column: 1 / -1;
     }
+
+    .icongrid-tile {
+      &:hover,
+      &:focus {
+        opacity: 1 !important;
+        box-shadow: 0 0 20px 2px rgba(colors.$white, 0.1);
+      }
+    }
+
+    &:hover,
+    &:focus {
+      .icongrid-tile {
+        opacity: 0.6;
+      }
+    }
   }
 
   .icongrid-search-tags {

diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
@@ -138,11 +138,32 @@ import LogoSVG from "@assets/logo.svg?component"
           opacity: 0.2;
         }
 
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border: none;
+          border-radius: $border-radius;
+          background-color: transparent;
+          box-shadow: 0 0 40px 4px rgba(colors.$gradient-step-2, 0.6);
+          animation: gradient-animation-install-shadow 15s ease infinite;
+          transition: opacity 0.3s ease;
+          z-index: -2;
+          opacity: 0.3;
+        }
+
         &:hover,
         &:focus {
           &::before {
             opacity: 0.4;
           }
+
+          &::after {
+            opacity: 0.8;
+          }
         }
       }
 
@@ -164,6 +185,7 @@ import LogoSVG from "@assets/logo.svg?component"
       justify-content: center;
 
       a {
+        position: relative;
         display: flex;
         align-items: center;
         padding: 0.5rem 1.75rem;
@@ -175,9 +197,30 @@ import LogoSVG from "@assets/logo.svg?component"
         white-space: nowrap;
         animation: gradient-animation-button 15s ease infinite;
 
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border: none;
+          border-radius: $border-radius;
+          background-color: transparent;
+          box-shadow: 0 0 40px 4px rgba(colors.$gradient-step-2, 0.6);
+          animation: gradient-animation-install-shadow 15s ease infinite;
+          transition: opacity 0.3s ease;
+          z-index: -2;
+          opacity: 0.3;
+        }
+
         &:hover,
         &:focus {
           transform: scale(1.1);
+
+          &::after {
+            opacity: 0.8;
+          }
         }
       }