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