| 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 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 | } |