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 // Visually hidden
// //
// Make an element visually hidden, but accessible to screen readers, etc. // 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,
%visually-hidden { %visually-hidden {
@include visually-hidden(); &:not(:focus):not(:active) {
position: absolute;
&--off { clip: rect(0 0 0 0);
@include visually-hidden--off(); clip-path: inset(50%);
} height: 1px;
width: 1px;
&--focusable { overflow: hidden;
&:active, white-space: nowrap;
&:focus {
@extend %visually-hidden--off;
}
} }
} }