1 |
87dbc3bf
|
Benjamin Luce
|
// @file
|
2 |
|
|
// Custom sass mixins
|
3 |
|
|
//
|
4 |
|
|
// Define the custom mixins for your project here.
|
5 |
|
|
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin
|
6 |
|
|
|
7 |
|
|
// Makes an element visually hidden, but accessible.
|
8 |
|
|
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
9 |
|
|
@mixin element-invisible {
|
10 |
|
|
position: absolute !important;
|
11 |
|
|
height: 1px;
|
12 |
|
|
width: 1px;
|
13 |
|
|
overflow: hidden;
|
14 |
|
|
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
15 |
|
|
clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
|
16 |
|
|
}
|
17 |
|
|
clip: rect(1px, 1px, 1px, 1px);
|
18 |
|
|
}
|
19 |
|
|
|
20 |
|
|
// Turns off the element-invisible effect.
|
21 |
|
|
@mixin element-invisible-off {
|
22 |
|
|
position: static !important;
|
23 |
|
|
clip: auto;
|
24 |
|
|
height: auto;
|
25 |
|
|
width: auto;
|
26 |
|
|
overflow: auto;
|
27 |
|
|
}
|
28 |
|
|
|
29 |
|
|
// Makes an element visually hidden by default, but visible when focused.
|
30 |
|
|
@mixin element-focusable {
|
31 |
|
|
@include element-invisible;
|
32 |
|
|
|
33 |
|
|
&:active,
|
34 |
|
|
&:focus {
|
35 |
|
|
@include element-invisible-off;
|
36 |
|
|
}
|
37 |
|
|
} |