cohabit/website
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ui): ♿ use border instead of outline for focus visible

Browse source
This commit is contained in:
Julien Oculi 2024-02-14 11:13:07 +01:00
parent 1faaf8d2c1
commit 35c2b4e422
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/Header.css
View file

@ -42,6 +42,7 @@ header nav {
& > a { & > a {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
outline: none;
} }
& > * { & > * {
@ -49,10 +50,9 @@ header nav {
} }
} }
& > li:hover { & > li:hover,
border: var(--_border-size) solid currentColor; & > li:has(a:focus-visible),
} & > li:has(summary:focus-visible),
& > li:has(details[open]) { & > li:has(details[open]) {
border: var(--_border-size) solid currentColor; border: var(--_border-size) solid currentColor;
} }
@ -65,6 +65,7 @@ header details {
display: flex; display: flex;
gap: var(--_gap); gap: var(--_gap);
list-style: none; list-style: none;
outline: none;
&::after { &::after {
display: inline-block; display: inline-block;
@ -98,7 +99,8 @@ header details {
border: none; border: none;
} }
& li:hover { & li:hover,
& li:has(a:focus-visible) {
background-color: var(--_translucent); background-color: var(--_translucent);
} }
@ -106,6 +108,7 @@ header details {
text-decoration: none; text-decoration: none;
padding: var(--_gap) calc(var(--_gap) + 0.24rem); padding: var(--_gap) calc(var(--_gap) + 0.24rem);
display: inline-block; display: inline-block;
outline: none;
} }
} }