UNPKG

733 BSCSSView Raw
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 overflow: hidden;
12 clip: rect(0, 0, 0, 0);
13 white-space: nowrap;
14 border: 0;
15}
16
17// Use in conjunction with .sr-only to only display content when it's focused.
18//
19// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
20//
21// Credit: HTML5 Boilerplate
22
23@mixin sr-only-focusable {
24 &:active,
25 &:focus {
26 position: static;
27 width: auto;
28 height: auto;
29 overflow: visible;
30 clip: auto;
31 white-space: normal;
32 }
33}