1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| // Only display content to screen readers
| //
| // See: https://a11yproject.com/posts/how-to-hide-content/
| // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
| @mixin sr-only {
| position: absolute;
| width: 1px;
| height: 1px;
| padding: 0;
| overflow: hidden;
| clip: rect(0, 0, 0, 0);
| white-space: nowrap;
| border: 0;
| }
|
| // Use in conjunction with .sr-only to only display content when it's focused.
| //
| // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
| //
| // Credit: HTML5 Boilerplate
|
| @mixin sr-only-focusable {
| &:active,
| &:focus {
| position: static;
| width: auto;
| height: auto;
| overflow: visible;
| clip: auto;
| white-space: normal;
| }
| }
|
|
