045ac648d7
The menu didn't look properly on these screens since commit dcec003d0.
On small screens with enough horizontal space to show the menu button,
the logo, and the contents of the menu, all three elements were shown on
the same row, which looked broken.
Now the contents of the menu are shown below the menu button.
Note that, to force this, we're making the contents of the menu 100%
wide. That means links would take the 100% of the space, which would
make it easy to click on a link while trying to scroll when using
touchscreens. So we're making the links as wide as their text, which
also has a disadvantage: it's harder to click on narrow links like
"SDG".
88 lines
1.5 KiB
SCSS
88 lines
1.5 KiB
SCSS
.subnavigation {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include breakpoint(medium) {
|
|
@include background-with-text-contrast($subnavigation, subnavigation);
|
|
flex-direction: row;
|
|
padding-bottom: 0;
|
|
|
|
> :first-child {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
|
|
li {
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
margin-right: rem-calc(20);
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
display: inline-block;
|
|
padding-bottom: $line-height / 2;
|
|
padding-top: $line-height / 2;
|
|
position: relative;
|
|
text-align: left;
|
|
|
|
@include breakpoint(medium) {
|
|
display: block;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
@include anchor-color;
|
|
}
|
|
|
|
&.is-active {
|
|
@include brand-color;
|
|
border-bottom: 2px solid;
|
|
margin-bottom: 1px;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.input-group {
|
|
padding-top: $line-height / 4;
|
|
|
|
@include breakpoint(medium) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.input-group-field {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.input-group-button {
|
|
line-height: $line-height * 1.5;
|
|
padding-bottom: 0;
|
|
|
|
button {
|
|
@include background-with-text-contrast($border);
|
|
border: 1px solid #ccc;
|
|
border-left: 0;
|
|
height: $line-height * 1.5;
|
|
line-height: $line-height * 1.5;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
input {
|
|
height: $line-height * 1.5 !important;
|
|
margin-bottom: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|