fixup! enhance: animations

infracost · Aug 11, 2023 · 7d520c2 · 7d520c2
1 parent c67b025
commit 7d520c2
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/src/components/GlossarySearch/GlossaryTerm.css b/src/components/GlossarySearch/GlossaryTerm.css
@@ -6,7 +6,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
-	padding: 1.5rem;
+	padding: 1rem;
 	border: 1px solid var(--border-color);
 	border-radius: 8px;
 	transition: all 0.2s ease-in-out;
@@ -22,22 +22,38 @@
 	display: flex;
 	gap: 0.5rem;
 	align-items: baseline;
+	padding: 0.5rem 0.5rem 0 0.5rem;
 }
 
-/* Hover animations */
+.glossary-term__card-description {
+	padding: 0.5rem;
+	border-radius: 6px;
+}
 
+/* Hover animations */
 .glossary-term__card-title,
 .glossary-term__card-description,
 .glossary-term__card-link .arrow-icon {
 	transition: all 0.2s ease-in-out;
 }
 
 .glossary-term__card:hover {
-	background-color: var(--nu20);
+	background-color: #eeeef7;
+	transform: translateY(-5px);
 }
 
+
 .glossary-term__card:hover .glossary-term__card-description {
 	transform: translate3d(0, -.5rem, 0);
+	background-position: -100% 0;
+}
+
+.glossary-term__card-description {
+	background: linear-gradient(to right, #ffffff00 50%, #db44b82b 50%);
+  background-size: 200%;
+  background-position: 0 0;
+  display: inline;
+  transition: .2s ease-in-out;
 }
 
 /* link */