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,
8 /// @link https://goo.gl/Vf1TGn
10 /// @argument {string} $toggle [hide]
11 /// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
15 /// @include hide-visually;
19 /// @include hide-visually("unhide");
26 /// clip: rect(1px, 1px, 1px, 1px);
27 /// clip-path: inset(100%);
31 /// position: absolute;
35 /// .hide-visually:active,
36 /// .hide-visually:focus {
40 /// overflow: visible;
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" {
53 clip: rect(1px, 1px, 1px, 1px);
54 clip-path: inset(100%);
61 } @else if $toggle == "unhide" {