Experiments page.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / utils / bourbon / library / _hide-visually.scss
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 }