35a45837ff
We were using a focus outline on links, but weren't doing the same for buttons. Since sometimes browsers use a default outline which is barely visible, this was very disorienting when browsing using the keyboard; we were navigating through links that clearly indicated where the keyboard focus was, and when reaching a button suddenly we had this almost imperceptible feedback. Even if I'm used to it, my first reaction is always "where did the focus go?" until I realize it's now on a button. This is even more confusing because we've got buttons looking like links and links looking like buttons. Note that in the rules for the `:focus` styles we're including buttons and the `[type="button"]` attribute. This seems redundant since those styles are already covered by the `button` selector. However, Foundation adds styles to buttons with the `[type]` attribute. Since the attribute selector has precedence over the tag selector, we need to use the attribute selector as well in order to override Foundation's styles.
55 lines
842 B
SCSS
55 lines
842 B
SCSS
.advanced-search-form {
|
|
@include grid-row-nest;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@include breakpoint(large) {
|
|
.filter {
|
|
@include grid-column;
|
|
width: 33%;
|
|
}
|
|
|
|
.date-filters {
|
|
float: left;
|
|
width: 33%;
|
|
|
|
.filter {
|
|
width: 100%;
|
|
}
|
|
|
|
.custom-date-filters {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.submit {
|
|
width: 33%;
|
|
}
|
|
}
|
|
|
|
> [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;
|
|
}
|
|
}
|
|
|
|
.general-search,
|
|
.filter,
|
|
.submit {
|
|
@include grid-column-gutter;
|
|
}
|
|
|
|
select {
|
|
height: $line-height * 2;
|
|
}
|
|
}
|