Break up and optimize dropdown styling.

2025-07-21 14:27:47 -04:00
parent 689354fc7b
commit b8b518555f
4 changed files with 65 additions and 69 deletions
--- a/src/partials/_nav_dropdown.scss
+++ b/src/partials/_nav_dropdown.scss
@@ -0,0 +1,39 @@
+.nav_dropdown {
+    .dropdown_header {
+        display: grid;
+        grid-template-columns: 1fr min-content;
+        align-items: center;
+
+        ion-icon {
+            /*
+            This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class.
+            */
+            margin-right: 0.5rem;
+
+            align-self: center;
+            transition-duration: 0.25s;
+        }
+    }
+
+    .dropdown_body {
+        display: none;
+        border-bottom-left-radius: var(--border-radius-small);
+        border-bottom-right-radius: var(--border-radius-small);
+        background-color: var(--background-1);
+    }
+}
+
+.nav_dropdown:hover {
+    .dropdown_header {
+        transform: var(--transform-scale-x);
+
+        ion-icon {
+            rotate: 90deg;
+            transition-duration: 0.25s;
+        }
+    }
+
+    .dropdown_body {
+        display: grid;
+    }
+}