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