data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: more focus style fixes for small devices (#1532)

Browse source
This commit is contained in:
Nolan Lawson 2019-09-24 18:46:58 -07:00 committed by GitHub
parent 65524105f9
commit b8b6556a14
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/scss/focus.scss
View file

@ -20,21 +20,21 @@
/* Another hack to make some focus styles appear better */ /* Another hack to make some focus styles appear better */
.focus-after { .focus-after {
position: relative; position: relative;
}
.focus-after:focus { &:focus {
outline: none; outline: none;
} }
.focus-after:focus::after { &:focus::after {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
content: ''; content: '';
border: var(--focus-width) solid var(--focus-outline); border: var(--focus-width) solid var(--focus-outline);
pointer-events: none; pointer-events: none;
}
} }
// For KaiOS, do some additional things to improve the focus styles, which don't show up well // For KaiOS, do some additional things to improve the focus styles, which don't show up well
@ -52,23 +52,24 @@
opacity: 0.8; opacity: 0.8;
} }
button, .button {
position: relative;
}
// add extremely visible styles for buttons, ala .focus-after // add extremely visible styles for buttons, ala .focus-after
button:focus, .button:focus { button, .button, a.main-nav-link {
outline: none; 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;
}
button:focus::after, .button:focus::after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
border: var(--focus-width) solid var(--focus-outline);
pointer-events: none;
} }
} }