+

Author: vlad-stohnii

src/ui/components/Toasts.astro

@@ -14,7 +14,9 @@ const toasts = [
   class="toasts-wrap animated_bottom"
   transition:persist="toasts"
 >
-  <div class="by-drizzle">Product by Drizzle Team</div>
+  <div id="product-by-drizzle" class="by-drizzle fade-out">
+    Product by Drizzle Team
+  </div>
   {
     toasts.map((toast, index) => (
       <a
@@ -35,6 +37,13 @@ const toasts = [
             <span class="toast-title">{toast.title}</span>
             <span class="toast-description">{toast.description}</span>
           </div>
+          <div class="black-friday-wrap">
+            <div class="black-friday">
+              black
+              <br />
+              friday
+            </div>
+          </div>
         </div>
       </a>
     ))
@@ -52,7 +61,7 @@ const toasts = [
     width: 100%;
     opacity: 1;
     transition: opacity 1s;
-    margin-bottom: 32px;
+    margin-bottom: 48px;
   }
 
   .toasts-wrap-fade {
@@ -61,9 +70,17 @@ const toasts = [
   }
 
   .toast {
+    position: relative;
+    padding: 1px;
+    overflow: hidden;
+    border-radius: 8px;
     transition: transform 0.2s cubic-bezier(0.41, 0.41, 0.35, 1.3);
   }
 
+  .toast:hover::before {
+    opacity: 1;
+  }
+
   .toasts-wrap:has(.toast:hover) .toast {
     transform: none !important;
   }
@@ -81,10 +98,32 @@ const toasts = [
     display: flex;
     align-items: center;
     width: 100%;
-    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px; */
     background: #fbfbfc;
     border-radius: 8px;
     border: 1px solid #e0e1e3;
+    overflow: hidden;
+  }
+
+  html.dark .toast::before {
+    background-image: url("../../assets/images/dark-gradient.png");
+  }
+
+  .toast::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 240px;
+    height: 240px;
+    background-image: url("../../assets/images/light-gradient.png");
+    background-size: 240px 240px;
+    background-position: center center;
+    transform: rotate(45deg) scale(1.45);
+    animation: spin 10s linear infinite;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.2s;
   }
 
   .toast-text {
@@ -111,7 +150,7 @@ const toasts = [
 
   @keyframes bottom {
     0% {
-      transform: translateY(100%);
+      transform: translateY(150%);
       opacity: 0;
     }
     75% {
@@ -166,9 +205,11 @@ const toasts = [
   .by-drizzle {
     text-transform: uppercase;
     font-size: 10px;
-    bottom: -24px;
+    bottom: -32px;
     position: absolute;
-    transition: bottom 0.2s;
+    transition:
+      bottom 0.2s,
+      opacity 0.3s;
     margin-bottom: 8px;
     left: 50%;
     color: #909090;
@@ -178,6 +219,35 @@ const toasts = [
     padding: 0 8px;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
+    opacity: 1;
+  }
+
+  .fade-out {
+    opacity: 0;
+  }
+
+  .black-friday-wrap {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  html.dark .black-friday {
+    background-color: #fff;
+    color: #000;
+  }
+
+  .black-friday {
+    transform: rotateZ(45deg);
+    font-size: 8px;
+    text-transform: uppercase;
+    font-weight: 700;
+    background-color: #111;
+    color: #fff;
+    padding: 3px;
+    border-radius: 3px;
+    line-height: normal;
   }
 </style>
 <style is:global>
@@ -200,6 +270,12 @@ const toasts = [
 </script>
 <script>
   const initToasts = () => {
+    const productByDrizzle = document.getElementById("product-by-drizzle");
+    if (productByDrizzle) {
+      setTimeout(() => {
+        productByDrizzle.classList.remove("fade-out");
+      }, 300);
+    }
     const toasts = document.querySelectorAll(
       "[data-toast]",
     ) as NodeListOf<HTMLElement>;