16401dafdb
Since we were using `position: absolute` to position the button to the right, we were assuming there was enough screen space on the left so other elements (mainly, order selector links) could be there. However, that wasn't always the case. In some languages, the texts appearing on the left of the button were much larger than in English, meaning their text and the button text could overlap. Even in English, users could experience the same issue depending on their font size preferences and the size of their screens. The easiest solution is to move the button to its own line, so its text doesn't overlap.
59 lines
894 B
SCSS
59 lines
894 B
SCSS
.advanced-search-form {
|
|
@include grid-row-nest;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include breakpoint(large) {
|
|
.filter {
|
|
@include grid-column;
|
|
width: 25%;
|
|
}
|
|
|
|
.date-filters {
|
|
float: left;
|
|
width: 25%;
|
|
|
|
.filter {
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-date-filters {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.submit {
|
|
width: 25%;
|
|
}
|
|
}
|
|
|
|
> [aria-expanded] {
|
|
@include xy-gutters;
|
|
color: $link;
|
|
cursor: pointer;
|
|
margin-top: $line-height;
|
|
margin-bottom: $line-height;
|
|
max-width: max-content;
|
|
|
|
@include breakpoint(medium) {
|
|
align-self: flex-end;
|
|
margin-bottom: 0;
|
|
margin-top: $line-height / 4;
|
|
}
|
|
|
|
&:focus {
|
|
outline: $outline-focus;
|
|
}
|
|
}
|
|
|
|
.general-search,
|
|
.filter,
|
|
.submit {
|
|
@include grid-column-gutter;
|
|
}
|
|
|
|
select {
|
|
height: $line-height * 2;
|
|
}
|
|
}
|