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.
65 lines
1.0 KiB
SCSS
65 lines
1.0 KiB
SCSS
.admin .machine-learning-setting {
|
|
|
|
.card-divider {
|
|
background: $primary-color;
|
|
color: $white;
|
|
|
|
h3 {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
[aria-pressed] {
|
|
@include regular-button;
|
|
border-radius: $line-height;
|
|
font-weight: bold;
|
|
min-width: rem-calc(100);
|
|
position: relative;
|
|
|
|
&::after {
|
|
background: $white;
|
|
border-radius: 100%;
|
|
content: "";
|
|
display: block;
|
|
height: 1.75em;
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
top: 50%;
|
|
width: 1.75em;
|
|
}
|
|
|
|
&[aria-pressed=true] {
|
|
background: $primary-color;
|
|
padding-right: 2.5em;
|
|
text-align: left;
|
|
|
|
&::after {
|
|
right: 0.5em;
|
|
}
|
|
}
|
|
|
|
&[aria-pressed=false] {
|
|
background: $dark-gray;
|
|
padding-left: 2.5em;
|
|
text-align: right;
|
|
|
|
&::after {
|
|
left: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
dl {
|
|
@include callout-size(map-get($callout-sizes, small));
|
|
}
|
|
|
|
dt {
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
* + dt {
|
|
margin-top: $line-height;
|
|
}
|
|
}
|