|
0
|
1 @charset "UTF-8";
|
|
|
2
|
|
|
3 /// Hides an element visually while still allowing the content to be accessible
|
|
|
4 /// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
|
|
|
5 /// the affects of the hiding, which is handy for showing the element on focus,
|
|
|
6 /// for example.
|
|
|
7 ///
|
|
|
8 /// @link http://goo.gl/Vf1TGn
|
|
|
9 ///
|
|
|
10 /// @argument {string} $toggle [hide]
|
|
|
11 /// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
|
|
|
12 ///
|
|
|
13 /// @example scss
|
|
|
14 /// .element {
|
|
|
15 /// @include hide-visually;
|
|
|
16 ///
|
|
|
17 /// &:active,
|
|
|
18 /// &:focus {
|
|
|
19 /// @include hide-visually(unhide);
|
|
|
20 /// }
|
|
|
21 /// }
|
|
|
22 ///
|
|
|
23 /// // CSS Output
|
|
|
24 /// .element {
|
|
|
25 /// border: 0;
|
|
|
26 /// clip: rect(1px, 1px, 1px, 1px);
|
|
|
27 /// clip-path: circle(1% at 1% 1%);
|
|
|
28 /// height: 1px;
|
|
|
29 /// overflow: hidden;
|
|
|
30 /// padding: 0;
|
|
|
31 /// position: absolute;
|
|
|
32 /// width: 1px;
|
|
|
33 /// }
|
|
|
34 ///
|
|
|
35 /// .hide-visually:active,
|
|
|
36 /// .hide-visually:focus {
|
|
|
37 /// clip: auto;
|
|
|
38 /// clip-path: none;
|
|
|
39 /// height: auto;
|
|
|
40 /// overflow: visible;
|
|
|
41 /// position: static;
|
|
|
42 /// width: auto;
|
|
|
43 /// }
|
|
|
44 ///
|
|
|
45 /// @since 5.0.0
|
|
|
46
|
|
|
47 @mixin hide-visually($toggle: hide) {
|
|
|
48 @if $toggle == "hide" {
|
|
|
49 border: 0;
|
|
|
50 clip: rect(1px, 1px, 1px, 1px);
|
|
|
51 clip-path: circle(1% at 1% 1%);
|
|
|
52 height: 1px;
|
|
|
53 overflow: hidden;
|
|
|
54 padding: 0;
|
|
|
55 position: absolute;
|
|
|
56 width: 1px;
|
|
|
57 } @else if $toggle == "unhide" {
|
|
|
58 clip: auto;
|
|
|
59 clip-path: none;
|
|
|
60 height: auto;
|
|
|
61 overflow: visible;
|
|
|
62 position: static;
|
|
|
63 width: auto;
|
|
|
64 }
|
|
|
65 }
|
