100 lines
2.5 KiB
SCSS
100 lines
2.5 KiB
SCSS
.nav_menu {
|
|
/*
|
|
Remove default padding and style applied to ul for bullets.
|
|
*/
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
display: grid;
|
|
grid-auto-flow: row;
|
|
gap: var(--spacing-menu-gap);
|
|
align-self: center;
|
|
margin: 0;
|
|
|
|
hr {
|
|
border-color: var(--accent-pink);
|
|
margin: 0 var(--spacing-horizontal);
|
|
}
|
|
|
|
.nav_body {
|
|
background-color: var(--background-2);
|
|
border-radius: var(--border-radius-small);
|
|
transition: var(--transition-fade);
|
|
}
|
|
|
|
.dropdown:hover .nav_body,
|
|
.dropdown .nav_body:hover,
|
|
.nav_body:hover {
|
|
transform: var(--transform-scale-x);
|
|
transition: var(--transition-cut);
|
|
|
|
.nav_title,
|
|
ion-icon {
|
|
color: var(--highlight-hover);
|
|
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);
|
|
}
|
|
}
|
|
}
|