feat: Add hover effects and transitions to TableNode styling

liam-hq · Dec 4, 2024 · 7d13772 · 7d13772
1 parent 0dcfcd4
commit 7d13772
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css b/...nd/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.module.css
@@ -2,6 +2,12 @@
   border-radius: var(--border-radius-md);
   border: 1px solid var(--overlay-20);
   width: 172px;
+  transition: border-color 300ms var(--default-timing-function);
+}
+
+.wrapper:hover {
+  border: 1px solid var(--primary-accent);
+  box-shadow: 0px 0px 20px 0px rgba(29, 237, 131, 0.4);
 }
 
 .columnWrapper {
@@ -37,8 +43,13 @@
   font-size: var(--font-size-1);
   font-weight: 400;
   line-height: normal;
+  opacity: 0;
+  transition: opacity 300ms var(--default-timing-function);
 }
 
+.wrapper:hover .columnType {
+  opacity: 1;
+}
 
 .content {
   top: var(--default-header-height);