Visual hide display
@use "@glsass/tools/tools.vhd" as vhd;
visually-hidden()
Since v1.0.0
The mixin is used to allow to hide content visually, be keep it accessible from screen readers.
This tool is also known as sr-only
on previous version of Bootstrap.
@include visually-hidden();
.hide-it {
@include visually-hidden();
color: blue;
}
// CSS
.hide-it {
position: absolute !important;
// and others rules...
color: blue;
}
visually-hidden-focusable()
Since v1.0.0
This alternate mixin can be used to keep visible focusable element/content when it's active.
@include visually-hidden-focusable();
.hide-it {
@include visually-hidden-focusable();
color: blue;
}
// CSS
.hide-it {
color: blue;
}
.hide-it:not(:focus) {
position: absolute !important;
// and others rules...
}