41 lines
860 B
SCSS
41 lines
860 B
SCSS
// 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.
|
|
//
|
|
// Markup: visually-hidden.twig
|
|
//
|
|
// Style guide: components.visually-hidden
|
|
|
|
.visually-hidden,
|
|
%visually-hidden {
|
|
@include visually-hidden();
|
|
|
|
&--off {
|
|
@include visually-hidden--off();
|
|
}
|
|
|
|
&--focusable {
|
|
&:active,
|
|
&:focus {
|
|
@extend %visually-hidden--off;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Drupal selectors.
|
|
//
|
|
|
|
.element-invisible {
|
|
@extend %visually-hidden;
|
|
}
|
|
|
|
.element-focusable {
|
|
@extend %visually-hidden;
|
|
@extend %visually-hidden--focusable;
|
|
}
|