748286b5 |
1 | /// hide-visually mixin from Bourbon < https://bourbon.io > |
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 https://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: inset(100%); |
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 not index("hide" "unhide", $toggle) { |
49 | @error "`#{$toggle}` is not a valid value for the `$toggle` argument in " + |
50 | "the `hide-visually` mixin. Must be either `hide` or `unhide`."; |
51 | } @else if $toggle == "hide" { |
52 | border: 0; |
53 | clip: rect(1px, 1px, 1px, 1px); |
54 | clip-path: inset(100%); |
55 | height: 1px; |
56 | overflow: hidden; |
57 | padding: 0; |
58 | position: absolute; |
59 | white-space: nowrap; |
60 | width: 1px; |
61 | } @else if $toggle == "unhide" { |
62 | clip: auto; |
63 | clip-path: none; |
64 | height: auto; |
65 | overflow: visible; |
66 | position: static; |
67 | white-space: inherit; |
68 | width: auto; |
69 | } |
70 | } |