ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

A more modern version of visually-hidden.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-01-25 09:58:06 +01:00
commit d423d1c7e9
1 changed files with 8 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

24
assets/sass/components/visually-hidden/_visually-hidden.scss
View file

@ -1,24 +1,16 @@
// Visually hidden
//
// Make an element visually hidden, but accessible to screen readers, etc.
//
// .visually-hidden--off - Turns off the visually-hidden effect.
// .visually-hidden--focusable - Makes an element visually hidden by default,
// but visible when receiving focus.
// .visually-hidden--focusable:focus - A focused, and visible, element.
.visually-hidden,
%visually-hidden {
@include visually-hidden();
&--off {
@include visually-hidden--off();
}
&--focusable {
&:active,
&:focus {
@extend %visually-hidden--off;
}
&:not(:focus):not(:active) {
position: absolute;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
white-space: nowrap;
}
}