Mercurial > hg > mpiwgzen_wide
comparison sass/_mixins.scss @ 0:a3750d724105 default tip
initital
author | Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de> |
---|---|
date | Tue, 02 Jun 2015 09:16:36 +0200 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:a3750d724105 |
---|---|
1 // @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 } |