/
_visibility.scss
144 lines (110 loc) · 3.85 KB
/
_visibility.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/*
Display/Visibility
Use the `display` and `visibility` utility classes to show and hide elements.
Style guide: utilities.display-visibility
*/
/*
Display
> The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. — [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
**Format**: `sba-u-display--[VALUE]`
#### Available `display` utilities:
- `sba-u-display--block`
- `sba-u-display--inline-block`
- `sba-u-display--flex`
- `sba-u-display--none`
Markup:
<% ['sba-u-display--block',
'sba-u-display--inline-block',
'sba-u-display--flex',
'sba-u-display--none'].forEach(util => { -%>
<p class="<%= util %> ds-base--inverse sba-u-padding--2"><%= util %></p>
<% }) %>
Style guide: utilities.display-visibility.display
*/
.sba-u-display--block {
display: block !important;
}
.sba-u-display--inline-block {
display: inline-block !important;
}
.sba-u-display--flex {
display: flex !important;
}
.sba-u-display--none {
display: none !important;
}
/*
Visibility
> The visibility property can be used to hide an element while leaving the space where it would have been. — [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
**Format**: `sba-u-visibility--[VALUE]`
#### Available `visibility` utilities:
- `sba-u-visibility--hidden`
- `sba-u-visibility--visible`
- `sba-u-visibility--screen-reader`
#### Accessibility
There may be times when you want to hide an element, but still want its text to be read by a screen reader. The `sba-u-visibility--screen-reader` class will hide the content visually, but provide the content to screen readers.
Markup:
<span class="sba-u-visibility--hidden">I'm hidden</span>
<span class="sba-u-visibility--screen-reader">I'm visible to screen readers only</span>
<span class="sba-u-visibility--visible">I'm visible</span>
Style guide: utilities.display-visibility.visibility
*/
.sba-u-visibility--hidden {
visibility: hidden !important;
}
.sba-u-visibility--visible {
visibility: visible !important;
}
.sba-u-visibility--screen-reader {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
// Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1241631
word-wrap: normal;
}
/*
Toggling visibility by breakpoint
@responsive
Use a [breakpoint prefix]({{root}}/guidelines/responsive) to show/hide content at specific breakpoints.
A breakpoint prefix is supported on all of the utility classes mentioned above, except for `sba-u-visibility--screen-reader`.
Markup:
<% ['sm', 'md', 'lg', 'xl'].forEach(breakpoint => { %>
<div class="sba-u-<%= breakpoint %>-display--none sba-u-color--muted">
Hidden on <%= breakpoint %> screens and larger
</div>
<div class="sba-u-<%= breakpoint %>-display--block">
Displayed as block on <%= breakpoint %> screens and larger
</div>
<div class="sba-u-<%= breakpoint %>-visibility--hidden sba-u-color--muted">
Invisible on <%= breakpoint %> screens and larger
</div>
<div class="sba-u-<%= breakpoint %>-visibility--visible">
Visible on <%= breakpoint %> screens and larger
</div>
<% }) %>
Style guide: utilities.display-visibility.responsive
*/
@each $breakpoint in map-keys($breakpoints) {
$value: map-get($breakpoints, $breakpoint);
@media (min-width: $value) {
.sba-u-#{$breakpoint}-display--block {
display: block !important;
}
.sba-u-#{$breakpoint}-display--inline-block {
display: inline-block !important;
}
.sba-u-#{$breakpoint}-display--none {
display: none !important;
}
.sba-u-#{$breakpoint}-visibility--hidden {
visibility: hidden !important;
}
.sba-u-#{$breakpoint}-visibility--visible {
visibility: visible !important;
}
}
}