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

21
src/scss/focus.scss
View file

@ -20,13 +20,12 @@
/* 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;
@ -35,6 +34,7 @@
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,16 +52,15 @@
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 {
position: relative;
&:focus {
outline: none; outline: none;
} }
button:focus::after, .button:focus::after { &:focus::after {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -71,4 +70,6 @@
border: var(--focus-width) solid var(--focus-outline); border: var(--focus-width) solid var(--focus-outline);
pointer-events: none; pointer-events: none;
} }
}
} }