feat: additional styling for focus indicators
This commit is contained in:
parent
1d96d6170d
commit
f746b1f66b
|
@ -49,6 +49,29 @@ main > a:nth-child(3n+3) {
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
clip-path: inset(50%);
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible,
|
||||||
|
a:focus-visible,
|
||||||
|
.focus-visible {
|
||||||
|
position: relative;
|
||||||
|
z-index: 10000 !important;
|
||||||
|
outline: 3px solid var(--blue);
|
||||||
|
box-shadow: 0 0 0 6px var(--lightBlue);
|
||||||
|
}
|
||||||
|
|
||||||
|
div:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* ------- Eye -------
|
/* ------- Eye -------
|
||||||
CSS blinking eye animation from
|
CSS blinking eye animation from
|
||||||
https://codepen.io/creme/pen/rdjXav
|
https://codepen.io/creme/pen/rdjXav
|
||||||
|
@ -58,6 +81,7 @@ https://codepen.io/creme/pen/rdjXav
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eye .iris {
|
.eye .iris {
|
||||||
|
|
|
@ -51,7 +51,8 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<a href="/test">
|
<a href="/test" aria-label="test">
|
||||||
|
<span class="hidden">Test</span>
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris lightBlue indigo"></div>
|
<div class="iris lightBlue indigo"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue