1 |
87dbc3bf
|
Benjamin Luce
|
//
|
2 |
|
|
// @file
|
3 |
|
|
// Accessibility features.
|
4 |
|
|
//
|
5 |
|
|
|
6 |
|
|
// As defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
7 |
|
|
@mixin visually-hidden {
|
8 |
|
|
position: absolute !important;
|
9 |
|
|
height: 1px;
|
10 |
|
|
width: 1px;
|
11 |
|
|
overflow: hidden;
|
12 |
|
|
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
13 |
|
|
clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
|
14 |
|
|
}
|
15 |
|
|
clip: rect(1px, 1px, 1px, 1px);
|
16 |
|
|
}
|
17 |
|
|
|
18 |
|
|
// Turns off the visually-hidden effect.
|
19 |
|
|
@mixin visually-hidden-off {
|
20 |
|
|
position: static !important;
|
21 |
|
|
clip: auto;
|
22 |
|
|
height: auto;
|
23 |
|
|
width: auto;
|
24 |
|
|
overflow: auto;
|
25 |
|
|
}
|
26 |
|
|
|
27 |
|
|
// Makes an element visually hidden, except when it receives focus.
|
28 |
|
|
@mixin visually-focusable {
|
29 |
|
|
@include visually-hidden();
|
30 |
|
|
|
31 |
|
|
&:active,
|
32 |
|
|
&:focus {
|
33 |
|
|
@include visually-hidden-off();
|
34 |
|
|
}
|
35 |
|
|
}
|
36 |
|
|
|
37 |
|
|
// Placeholder styles for use with @extend.
|
38 |
|
|
%visually-hidden {
|
39 |
|
|
@include visually-hidden();
|
40 |
|
|
}
|
41 |
|
|
%visually-hidden-off {
|
42 |
|
|
@include visually-hidden-off();
|
43 |
|
|
}
|
44 |
|
|
%visually-focusable {
|
45 |
|
|
@extend %visually-hidden;
|
46 |
|
|
|
47 |
|
|
&:active,
|
48 |
|
|
&:focus {
|
49 |
|
|
@extend %visually-hidden-off;
|
50 |
|
|
}
|
51 |
|
|
} |