_sass/modules/_mainmenu.scss (63 lines of code) (raw):
@use "../taiga/grid";
@use "../taiga/mixins";
@use "../taiga/settings";
nav.mainmenu {
display:block;
margin:0 auto 2rem auto;
text-align:center;
padding-top: 12px;
display:inline-block;
text-transform: uppercase;
font-weight:bold;
&.active { border-bottom: 2px solid white;}
li+li {
margin-left:1*grid.$grid-column;
}
a, a:active {
border:none;
color:settings.$color-brand-50;
font-weight:500;
text-decoration: none;
}
a:hover {
color: #303284;
}
}
.nav-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
&:last-child {
flex-grow: 1;
justify-content: flex-end;
@include mixins.breakpoint(settings.$breakpoint-20, 'max-width') {
justify-content: center;
}
& {
font-size: 2rem;
flex-wrap: nowrap;
}
}
}
.nav-items {
padding-right: 1rem;
&:hover {
color: settings.$color-brand-50;
}
}
.nav-logo {
text-align:center;
display:flex;
padding-right: 1rem;
@include mixins.breakpoint(settings.$breakpoint-20, 'max-width') {
margin:0;
@include grid.prepend(1);
justify-content: center;
align-items: center;
}
img {
display:inline-block;
width: 200px;
}
}