59 lines
1.2 KiB
SCSS
59 lines
1.2 KiB
SCSS
@use "nav_dropdown";
|
|
@use "nav_title";
|
|
|
|
.nav_menu {
|
|
grid-area: 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-medium);
|
|
align-self: center;
|
|
margin: 0;
|
|
|
|
hr {
|
|
border-color: var(--accent-pink);
|
|
margin: 0 var(--spacing-small);
|
|
}
|
|
}
|
|
|
|
.nav_item {
|
|
// Need to force inheritence, otherwise <a> would require
|
|
// overrides for all color states from base styling for element.
|
|
color: inherit;
|
|
text-decoration: none;
|
|
|
|
padding: 0 var(--spacing-small);
|
|
|
|
background-color: var(--background-2);
|
|
border-radius: var(--border-radius-small);
|
|
transition: var(--transition-fade);
|
|
}
|
|
|
|
.nav_item:hover,
|
|
.nav_dropdown:hover .nav_item {
|
|
transform: var(--transform-scale-x);
|
|
transition: var(--transition-cut);
|
|
|
|
.nav_title,
|
|
ion-icon {
|
|
color: var(--highlight-hover);
|
|
transition: var(--transition-cut);
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
.nav_item {
|
|
padding: var(--padding-mobile);
|
|
background-color: var(--background-1);
|
|
}
|
|
|
|
.nav_item:hover,
|
|
.nav_dropdown:hover .nav_item {
|
|
transform: none;
|
|
}
|
|
}
|