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