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 }