47 lines
974 B
SCSS
47 lines
974 B
SCSS
|
*:focus, .focus {
|
||
|
|
outline: 2px solid var(--focus-outline);
|
||
|
|
}
|
||
|
|
|
||
|
|
.container:focus {
|
||
|
|
// the outline causes choppy rendering on Edge and isn't visible or necessary anyway
|
||
|
|
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Special class to make focus outlines easier to see in some odd
|
||
|
|
* cases where the outline would be clipped. */
|
||
|
|
.focus-after {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focus-after:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.focus-after:focus::after {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
top: 0;
|
||
|
|
content: '';
|
||
|
|
border: 2px solid var(--focus-outline);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// For KaiOS, do some additional things to improve the focus styles, which don't show up well
|
||
|
|
// for some reason
|
||
|
|
@media (max-width: 320px) {
|
||
|
|
*:focus, .focus {
|
||
|
|
outline: 3px solid var(--focus-outline);
|
||
|
|
}
|
||
|
|
|
||
|
|
a:focus, span:focus {
|
||
|
|
background: var(--focus-bg) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
button:focus {
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
}
|