Cutieguwu/cutieguwu-site
1
0
Fork 0
Code Issues 10 Pull Requests Projects 1 Releases Activity

Break up and optimize dropdown styling.

Browse Source
This commit is contained in:
Cutieguwu
2025-07-21 14:27:47 -04:00
parent 689354fc7b
commit b8b518555f
4 changed files with 65 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/partials/_nav_menu.scss
View File

@@ -1,3 +1,6 @@
@use "nav_dropdown";
@use "nav_title";
.nav_menu {
/*
Remove default padding and style applied to ul for bullets.
@@ -22,8 +25,7 @@
transition: var(--transition-fade);
}
.dropdown:hover .nav_body,
.dropdown .nav_body:hover,
.nav_dropdown:hover .nav_body,
.nav_body:hover {
transform: var(--transform-scale-x);
transition: var(--transition-cut);
@@ -34,66 +36,4 @@
transition: var(--transition-cut);
}
}
.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);
}
}
.dropdown:hover {
.dropdown_header {
transform: var(--transform-scale-x);
ion-icon {
rotate: 90deg;
transition-duration: 0.25s;
}
}
.dropdown_body {
display: grid;
}
}
.nav_body,
.dropdown .nav_body,
.dropdown .dropdown_body {
.nav_title {
/* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
color: inherit;
text-decoration: none;
font-family: var(--font-family-generic);
font-weight: bold;
white-space: nowrap;
margin: 0 var(--spacing-horizontal);
transition: var(--transition-fade);
text-transform: uppercase;
}
.nav_title:hover {
color: var(--highlight-hover);
transition: var(--transition-cut);
}
}
}