This repository has been archived by the owner on Sep 13, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 876
/
_hide-visually.scss
70 lines (68 loc) · 1.7 KB
/
_hide-visually.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
@charset "UTF-8";
/// Hides an element visually while still allowing the content to be accessible
/// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
/// the affects of the hiding, which is handy for showing the element on focus,
/// for example.
///
/// @link https://goo.gl/Vf1TGn
///
/// @argument {string} $toggle [hide]
/// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
///
/// @example scss
/// .element {
/// @include hide-visually;
///
/// &:active,
/// &:focus {
/// @include hide-visually("unhide");
/// }
/// }
///
/// // CSS Output
/// .element {
/// border: 0;
/// clip: rect(1px, 1px, 1px, 1px);
/// clip-path: inset(100%);
/// height: 1px;
/// overflow: hidden;
/// padding: 0;
/// position: absolute;
/// width: 1px;
/// }
///
/// .hide-visually:active,
/// .hide-visually:focus {
/// clip: auto;
/// clip-path: none;
/// height: auto;
/// overflow: visible;
/// position: static;
/// width: auto;
/// }
///
/// @since 5.0.0
@mixin hide-visually($toggle: "hide") {
@if not index("hide" "unhide", $toggle) {
@error "`#{$toggle}` is not a valid value for the `$toggle` argument in " +
"the `hide-visually` mixin. Must be either `hide` or `unhide`.";
} @else if $toggle == "hide" {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
} @else if $toggle == "unhide" {
clip: auto;
clip-path: none;
height: auto;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
}