74 lines
1.7 KiB
SCSS
74 lines
1.7 KiB
SCSS
:focus {
|
|
outline: var(--focus-width) 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. */
|
|
/* TODO: use box-sizing:border-box everywhere so we can get rid of this hack */
|
|
.focus-fix:focus {
|
|
outline-offset: calc(-1 * var(--focus-width)); /* TODO: this is hacky, switch to box-sizing:border-box */
|
|
}
|
|
|
|
/* Another hack to make some focus styles appear better */
|
|
.focus-after {
|
|
position: relative;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus::after {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
content: '';
|
|
border: var(--focus-width) 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: 240px) {
|
|
a:not(.button):focus, span:focus {
|
|
background: var(--focus-bg) !important;
|
|
}
|
|
|
|
button:focus, .button:focus {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
button.primary:focus, .button.primary:focus {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
// add extremely visible styles for buttons, ala .focus-after
|
|
button, .button, a.main-nav-link {
|
|
position: relative;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:focus::after {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
content: '';
|
|
border: var(--focus-width) solid var(--focus-outline);
|
|
pointer-events: none;
|
|
}
|
|
|
|
}
|
|
}
|