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
| // Only display content to screen readers
| //
| // See: http://a11yproject.com/posts/how-to-hide-content/
|
| @mixin sr-only {
| position: absolute;
| width: 1px;
| height: 1px;
| padding: 0;
| margin: -1px;
| overflow: hidden;
| clip: rect(0,0,0,0);
| border: 0;
| }
|
| // Use in conjunction with .sr-only to only display content when it's focused.
| //
| // Useful for "Skip to main content" links; see http://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;
| margin: 0;
| overflow: visible;
| clip: auto;
| }
| }
|
|
