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.
57 lines
838 B
SCSS
57 lines
838 B
SCSS
.admin .machine-learning-scripts {
|
|
|
|
.alert > :first-child {
|
|
@include has-fa-icon(ban, solid);
|
|
}
|
|
|
|
.success > :first-child {
|
|
@include has-fa-icon(check-circle, solid);
|
|
}
|
|
|
|
.warning > :first-child {
|
|
@include has-fa-icon(hourglass-half, solid);
|
|
}
|
|
|
|
.alert,
|
|
.success,
|
|
.warning {
|
|
> :first-child::before {
|
|
margin-right: $font-icon-margin;
|
|
}
|
|
}
|
|
|
|
dl {
|
|
font-size: $base-font-size;
|
|
|
|
dt,
|
|
dd {
|
|
display: inline;
|
|
}
|
|
|
|
* + dt::before {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
form {
|
|
max-width: $global-width * 3 / 4;
|
|
}
|
|
|
|
select {
|
|
max-width: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
[type=submit] {
|
|
@include regular-button;
|
|
display: block;
|
|
margin-bottom: 0;
|
|
margin-top: $line-height;
|
|
|
|
&.cancel {
|
|
@include hollow-button($alert-color);
|
|
}
|
|
}
|
|
}
|