.nav {
background: var(--color-gray-300);
color: var(--color-white-500);
display: flex;
* {
flex: 0 0 auto;
}
a {
color: var(--color-white-300);
display: inline-block;
font-size: 1.3rem;
line-height: 3.4rem;
padding: 0 1rem;
&:link,
&:visited {
text-decoration: none;
color: var(--color-white-500);
}
&:hover {
text-decoration: underline;
}
&:active {
color: var(--color-white-500);
}
}
& &__brand {
font-weight: bold;
margin: 0;
padding: 0;
}
& &__left {
display: inline-flex;
flex-grow: 1;
list-style: none;
margin: 0;
overflow-y: auto;
padding: 0;
white-space: nowrap;
}
& &__right {
display: inline-flex;
list-style: none;
margin: 0;
padding: 0;
}
& &__item {
font-size: 1.2rem;
font-weight: normal;
padding: 0 0.8rem;
a {
padding: 0;
}
}
@media all and (max-width: $display__max--pixel) {
flex-wrap: wrap;
}
}
.nav--search {
& .nav__left {
flex-grow: 0;
order: 4;
width: 100%;
@media all and (min-width: $display__max--pixel) {
flex-grow: 1;
order: 2;
width: auto;
}
}
& .nav__right {
order: 3;
@media all and (min-width: $display__max--pixel) {
order: 4;
}
}
& .nav__search {
display: inline-flex;
flex-grow: 9999;
order: 2;
padding: 0;
input {
flex: 1 0 auto;
font-size: 1.2rem;
line-height: 3.4rem;
margin: 0;
max-width: none;
padding: 0 1.4rem;
}
@media all and (min-width: $display__max--pixel) {
order: 3;
padding: 0 0.8rem;
}
}
}
nav.nav {
@media all and (min-width: $display__max--pixel) {
border-top-left-radius: 0.2rem;
border-top-right-radius: 0.2rem;
}
}
footer.nav {
@media all and (min-width: $display__max--pixel) {
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
}