fix: hover effects (#109)

2nthony · Feb 3, 2023 · 0c0d1c0 · 0c0d1c0
1 parent ac6ea60
commit 0c0d1c0
Showing 1 changed file with 16 additions and 15 deletions.
diff --git a/src/style.css b/src/style.css
@@ -6,7 +6,7 @@
   position: fixed;
   display: block;
   max-width: 468px;
-  bottom: calc(var(--safe-area-gap, 0px) + 10px);
+  bottom: calc(var(--safe-area-gap, 0px) + 20px);
   right: 20px;
   z-index: 5000;
   transition: all 0.4s ease;
@@ -177,23 +177,24 @@
   }
 }
 
-.toast-container:hover {
-  bottom: calc(var(--safe-area-gap, 0px) + 20px);
+/* if more than 1, then apply hover effect */
+.toast-container:has(.toast-2):hover {
+  bottom: calc(var(--safe-area-gap, 0px) + 25px);
+}
 
-  & .toast {
-    transform: translate3d(
-      0,
-      calc(var(--hover-offset-y) - var(--stack-gap) * (var(--index) - 1)),
-      0
-    );
+.toast-container:hover .toast {
+  transform: translate3d(
+    0,
+    calc(var(--hover-offset-y) - var(--stack-gap) * (var(--index) - 1)),
+    0
+  );
 
-    & .toast-inner {
-      height: var(--height);
-    }
+  & .toast-inner {
+    height: var(--height);
+  }
 
-    & .toast-text {
-      opacity: 1 !important;
-    }
+  & .toast-text {
+    opacity: 1 !important;
   }
 }