.menu {
margin: $spacing-2; padding: $spacing-2; border-radius: $spacing-2; @include with-theme { background-color: color-for(primary); color: color-for(text-on-primary); }
}
.menu-container {
display: flex; flex-direction: row; align-items: center; @include on-mobile { display: block; }
}
.menu-header {
flex-grow: auto; display: flex; flex-direction: row; align-items: center;
}
.menu-title-container {
flex: 1;
}
.menu-title {
margin: 0pt $spacing-2; font-size: $large-font-size; font-weight: bold; text-decoration: none; color: inherit !important; &:hover { text-decoration: underline; }
}
.menu-dropdown-controls {
> .icon-button { margin: 0pt; @include with-theme { color: color-for(text-on-primary); } }
}
.menu-dropdown {
@include not-on-mobile { flex: 1 !important; display: flex !important; flex-direction: row !important; } @include on-mobile { display: none; }
}
.menu-links {
// Spacing and alignment margin: 0pt; padding: 0pt; list-style-type: none; // Align flex: 1; display: flex; align-items: center; @include on-mobile { display: block; } // List element styling & > li { // Spacing margin: 0pt $spacing-2; @include on-mobile { margin: $spacing-2; } > a { color: inherit !important; text-decoration: none; font-size: $normal-font-size; &:hover { text-decoration: underline; } } }
}
.menu-controls {
// Align display: flex; flex-direction: row-reverse; align-items: center; .icon-button { padding: $spacing-1; font-size: $medium-font-size; @include with-theme { color: color-for(text-on-primary); } }
}