@patternfly/patternfly 4.176.3 → 4.177.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/UPGRADE-GUIDE.md +3 -0
- package/components/Avatar/avatar.css +224 -0
- package/components/Avatar/avatar.scss +18 -0
- package/components/CodeEditor/code-editor.css +8 -0
- package/components/CodeEditor/code-editor.scss +11 -1
- package/docs/components/Avatar/examples/Avatar.md +53 -5
- package/docs/components/Brand/examples/Brand.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
- package/docs/components/DataList/examples/DataList.md +11 -11
- package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +27 -27
- package/docs/components/Dropdown/examples/Dropdown.md +2 -2
- package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
- package/docs/components/LogViewer/examples/LogViewer.md +19 -19
- package/docs/components/Masthead/examples/masthead.md +10 -10
- package/docs/components/Menu/examples/Menu.md +2 -2
- package/docs/components/Page/examples/Page.md +4 -4
- package/docs/components/Pagination/examples/Pagination.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +14 -14
- package/docs/components/Table/examples/Table.md +8 -8
- package/docs/components/Tabs/examples/Tabs.md +27 -27
- package/docs/components/Toolbar/examples/Toolbar.md +31 -31
- package/docs/demos/Alert/examples/Alert.md +358 -52
- package/docs/demos/BackToTop/examples/BackToTop.md +304 -5
- package/docs/demos/ContextSelector/examples/ContextSelector.md +2199 -45
- package/docs/demos/JumpLinks/examples/JumpLinks.md +1221 -80
- package/docs/demos/Nav/examples/Nav.md +293 -2
- package/docs/demos/Page/examples/Page.md +6098 -161
- package/docs/demos/Table/examples/Table.md +21223 -165
- package/docs/demos/Tabs/examples/Tabs.md +7304 -697
- package/docs/demos/Toolbar/examples/Toolbar.md +1026 -44
- package/docs/layouts/Flex/examples/Flex.md +1 -1
- package/docs/layouts/Gallery/examples/Gallery.md +2 -2
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
- package/docs/utilities/Alignment/examples/Alignment.md +1 -1
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
- package/docs/utilities/Display/examples/Display.md +1 -1
- package/docs/utilities/Flex/examples/Flex.md +1 -1
- package/docs/utilities/Float/examples/Float.md +1 -1
- package/docs/utilities/Sizing/examples/Sizing.md +12 -0
- package/docs/utilities/Spacing/examples/Spacing.md +1 -1
- package/docs/utilities/Text/examples/Text.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +232 -0
- package/patternfly.css +232 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/UPGRADE-GUIDE.md
CHANGED
|
@@ -3,6 +3,9 @@ id: Upgrade guide
|
|
|
3
3
|
section: developer-resources
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
+
**Note:** this guide details upgrading from PatternFly v3 to v4, and references [major release 2020.07](/developer-resources/release-notes/html/#2020.07-release-notes-2020-06-05) from 2020-06-05.
|
|
7
|
+
<hr/>
|
|
8
|
+
|
|
6
9
|
Hey, Flyers! We've been busy for the past 12 weeks working on significant changes to PatternFly's HTML and CSS. We made our components mobile-first and changed colors and the default font. This upgrade guide details **what** was broken and **how** to fix it. To learn **why** a change was made, check out the linked pull requests.
|
|
7
10
|
|
|
8
11
|
## Global
|
|
@@ -4,6 +4,14 @@
|
|
|
4
4
|
--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
|
|
5
5
|
--pf-c-avatar--Width: 2.25rem;
|
|
6
6
|
--pf-c-avatar--Height: 2.25rem;
|
|
7
|
+
--pf-c-avatar--m-sm--Width: 1.5rem;
|
|
8
|
+
--pf-c-avatar--m-sm--Height: 1.5rem;
|
|
9
|
+
--pf-c-avatar--m-md--Width: 2.25rem;
|
|
10
|
+
--pf-c-avatar--m-md--Height: 2.25rem;
|
|
11
|
+
--pf-c-avatar--m-lg--Width: 4.5rem;
|
|
12
|
+
--pf-c-avatar--m-lg--Height: 4.5rem;
|
|
13
|
+
--pf-c-avatar--m-xl--Width: 8rem;
|
|
14
|
+
--pf-c-avatar--m-xl--Height: 8rem;
|
|
7
15
|
--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
|
|
8
16
|
--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
|
|
9
17
|
--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
|
|
@@ -20,4 +28,220 @@
|
|
|
20
28
|
.pf-c-avatar.pf-m-dark {
|
|
21
29
|
--pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
|
|
22
30
|
--pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
|
|
31
|
+
}
|
|
32
|
+
.pf-c-avatar.pf-m-sm {
|
|
33
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
|
|
34
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
|
|
35
|
+
}
|
|
36
|
+
@media (min-width: 576px) {
|
|
37
|
+
.pf-c-avatar.pf-m-sm {
|
|
38
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width));
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
@media (min-width: 768px) {
|
|
42
|
+
.pf-c-avatar.pf-m-sm {
|
|
43
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)));
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
@media (min-width: 992px) {
|
|
47
|
+
.pf-c-avatar.pf-m-sm {
|
|
48
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))));
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
@media (min-width: 1200px) {
|
|
52
|
+
.pf-c-avatar.pf-m-sm {
|
|
53
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width)))));
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
@media (min-width: 1450px) {
|
|
57
|
+
.pf-c-avatar.pf-m-sm {
|
|
58
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width-on-2xl, var(--pf-c-avatar--m-sm--Width-on-xl, var(--pf-c-avatar--m-sm--Width-on-lg, var(--pf-c-avatar--m-sm--Width-on-md, var(--pf-c-avatar--m-sm--Width-on-sm, var(--pf-c-avatar--m-sm--Width))))));
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
@media (min-width: 576px) {
|
|
62
|
+
.pf-c-avatar.pf-m-sm {
|
|
63
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height));
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
@media (min-width: 768px) {
|
|
67
|
+
.pf-c-avatar.pf-m-sm {
|
|
68
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)));
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
@media (min-width: 992px) {
|
|
72
|
+
.pf-c-avatar.pf-m-sm {
|
|
73
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))));
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
@media (min-width: 1200px) {
|
|
77
|
+
.pf-c-avatar.pf-m-sm {
|
|
78
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height)))));
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
@media (min-width: 1450px) {
|
|
82
|
+
.pf-c-avatar.pf-m-sm {
|
|
83
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height-on-2xl, var(--pf-c-avatar--m-sm--Height-on-xl, var(--pf-c-avatar--m-sm--Height-on-lg, var(--pf-c-avatar--m-sm--Height-on-md, var(--pf-c-avatar--m-sm--Height-on-sm, var(--pf-c-avatar--m-sm--Height))))));
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
.pf-c-avatar.pf-m-md {
|
|
87
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
|
|
88
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
|
|
89
|
+
}
|
|
90
|
+
@media (min-width: 576px) {
|
|
91
|
+
.pf-c-avatar.pf-m-md {
|
|
92
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width));
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
@media (min-width: 768px) {
|
|
96
|
+
.pf-c-avatar.pf-m-md {
|
|
97
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)));
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
@media (min-width: 992px) {
|
|
101
|
+
.pf-c-avatar.pf-m-md {
|
|
102
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))));
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
@media (min-width: 1200px) {
|
|
106
|
+
.pf-c-avatar.pf-m-md {
|
|
107
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width)))));
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
@media (min-width: 1450px) {
|
|
111
|
+
.pf-c-avatar.pf-m-md {
|
|
112
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width-on-2xl, var(--pf-c-avatar--m-md--Width-on-xl, var(--pf-c-avatar--m-md--Width-on-lg, var(--pf-c-avatar--m-md--Width-on-md, var(--pf-c-avatar--m-md--Width-on-sm, var(--pf-c-avatar--m-md--Width))))));
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
@media (min-width: 576px) {
|
|
116
|
+
.pf-c-avatar.pf-m-md {
|
|
117
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height));
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
@media (min-width: 768px) {
|
|
121
|
+
.pf-c-avatar.pf-m-md {
|
|
122
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)));
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
@media (min-width: 992px) {
|
|
126
|
+
.pf-c-avatar.pf-m-md {
|
|
127
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))));
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
@media (min-width: 1200px) {
|
|
131
|
+
.pf-c-avatar.pf-m-md {
|
|
132
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height)))));
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
@media (min-width: 1450px) {
|
|
136
|
+
.pf-c-avatar.pf-m-md {
|
|
137
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height-on-2xl, var(--pf-c-avatar--m-md--Height-on-xl, var(--pf-c-avatar--m-md--Height-on-lg, var(--pf-c-avatar--m-md--Height-on-md, var(--pf-c-avatar--m-md--Height-on-sm, var(--pf-c-avatar--m-md--Height))))));
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
.pf-c-avatar.pf-m-lg {
|
|
141
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
|
|
142
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
|
|
143
|
+
}
|
|
144
|
+
@media (min-width: 576px) {
|
|
145
|
+
.pf-c-avatar.pf-m-lg {
|
|
146
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width));
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
@media (min-width: 768px) {
|
|
150
|
+
.pf-c-avatar.pf-m-lg {
|
|
151
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)));
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
@media (min-width: 992px) {
|
|
155
|
+
.pf-c-avatar.pf-m-lg {
|
|
156
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))));
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
@media (min-width: 1200px) {
|
|
160
|
+
.pf-c-avatar.pf-m-lg {
|
|
161
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width)))));
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
@media (min-width: 1450px) {
|
|
165
|
+
.pf-c-avatar.pf-m-lg {
|
|
166
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width-on-2xl, var(--pf-c-avatar--m-lg--Width-on-xl, var(--pf-c-avatar--m-lg--Width-on-lg, var(--pf-c-avatar--m-lg--Width-on-md, var(--pf-c-avatar--m-lg--Width-on-sm, var(--pf-c-avatar--m-lg--Width))))));
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
@media (min-width: 576px) {
|
|
170
|
+
.pf-c-avatar.pf-m-lg {
|
|
171
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height));
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
@media (min-width: 768px) {
|
|
175
|
+
.pf-c-avatar.pf-m-lg {
|
|
176
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)));
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
@media (min-width: 992px) {
|
|
180
|
+
.pf-c-avatar.pf-m-lg {
|
|
181
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))));
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
@media (min-width: 1200px) {
|
|
185
|
+
.pf-c-avatar.pf-m-lg {
|
|
186
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height)))));
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
@media (min-width: 1450px) {
|
|
190
|
+
.pf-c-avatar.pf-m-lg {
|
|
191
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height-on-2xl, var(--pf-c-avatar--m-lg--Height-on-xl, var(--pf-c-avatar--m-lg--Height-on-lg, var(--pf-c-avatar--m-lg--Height-on-md, var(--pf-c-avatar--m-lg--Height-on-sm, var(--pf-c-avatar--m-lg--Height))))));
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
.pf-c-avatar.pf-m-xl {
|
|
195
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
|
|
196
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
|
|
197
|
+
}
|
|
198
|
+
@media (min-width: 576px) {
|
|
199
|
+
.pf-c-avatar.pf-m-xl {
|
|
200
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width));
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
@media (min-width: 768px) {
|
|
204
|
+
.pf-c-avatar.pf-m-xl {
|
|
205
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)));
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
@media (min-width: 992px) {
|
|
209
|
+
.pf-c-avatar.pf-m-xl {
|
|
210
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))));
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
@media (min-width: 1200px) {
|
|
214
|
+
.pf-c-avatar.pf-m-xl {
|
|
215
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width)))));
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
@media (min-width: 1450px) {
|
|
219
|
+
.pf-c-avatar.pf-m-xl {
|
|
220
|
+
--pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width-on-2xl, var(--pf-c-avatar--m-xl--Width-on-xl, var(--pf-c-avatar--m-xl--Width-on-lg, var(--pf-c-avatar--m-xl--Width-on-md, var(--pf-c-avatar--m-xl--Width-on-sm, var(--pf-c-avatar--m-xl--Width))))));
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
@media (min-width: 576px) {
|
|
224
|
+
.pf-c-avatar.pf-m-xl {
|
|
225
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height));
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
@media (min-width: 768px) {
|
|
229
|
+
.pf-c-avatar.pf-m-xl {
|
|
230
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)));
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
@media (min-width: 992px) {
|
|
234
|
+
.pf-c-avatar.pf-m-xl {
|
|
235
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))));
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
@media (min-width: 1200px) {
|
|
239
|
+
.pf-c-avatar.pf-m-xl {
|
|
240
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height)))));
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
@media (min-width: 1450px) {
|
|
244
|
+
.pf-c-avatar.pf-m-xl {
|
|
245
|
+
--pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
|
|
246
|
+
}
|
|
23
247
|
}
|
|
@@ -1,9 +1,20 @@
|
|
|
1
|
+
$pf-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
|
|
2
|
+
$sizes: "sm", "md", "lg", "xl";
|
|
3
|
+
|
|
1
4
|
.pf-c-avatar {
|
|
2
5
|
--pf-c-avatar--BorderColor: transparent;
|
|
3
6
|
--pf-c-avatar--BorderWidth: 0;
|
|
4
7
|
--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
|
|
5
8
|
--pf-c-avatar--Width: #{pf-size-prem(36px)};
|
|
6
9
|
--pf-c-avatar--Height: #{pf-size-prem(36px)};
|
|
10
|
+
--pf-c-avatar--m-sm--Width: #{pf-size-prem(24px)};
|
|
11
|
+
--pf-c-avatar--m-sm--Height: #{pf-size-prem(24px)};
|
|
12
|
+
--pf-c-avatar--m-md--Width: #{pf-size-prem(36px)};
|
|
13
|
+
--pf-c-avatar--m-md--Height: #{pf-size-prem(36px)};
|
|
14
|
+
--pf-c-avatar--m-lg--Width: #{pf-size-prem(72px)};
|
|
15
|
+
--pf-c-avatar--m-lg--Height: #{pf-size-prem(72px)};
|
|
16
|
+
--pf-c-avatar--m-xl--Width: #{pf-size-prem(128px)};
|
|
17
|
+
--pf-c-avatar--m-xl--Height: #{pf-size-prem(128px)};
|
|
7
18
|
|
|
8
19
|
// Light
|
|
9
20
|
--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
|
|
@@ -27,4 +38,11 @@
|
|
|
27
38
|
--pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
|
|
28
39
|
--pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
|
|
29
40
|
}
|
|
41
|
+
|
|
42
|
+
@each $size in $sizes {
|
|
43
|
+
&.pf-m-#{$size} {
|
|
44
|
+
@include pf-build-css-variable-stack("--pf-c-avatar--Width", "--pf-c-avatar--m-#{$size}--Width", $pf-c-avatar--breakpoint-map);
|
|
45
|
+
@include pf-build-css-variable-stack("--pf-c-avatar--Height", "--pf-c-avatar--m-#{$size}--Height", $pf-c-avatar--breakpoint-map);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
30
48
|
}
|
|
@@ -19,6 +19,8 @@
|
|
|
19
19
|
--pf-c-code-editor__code--PaddingLeft: var(--pf-global--spacer--sm);
|
|
20
20
|
--pf-c-code-editor__code-pre--FontSize: var(--pf-global--FontSize--sm);
|
|
21
21
|
--pf-c-code-editor__code-pre--FontFamily: var(--pf-global--FontFamily--monospace);
|
|
22
|
+
--pf-c-code-editor__header-main--PaddingRight: var(--pf-global--spacer--sm);
|
|
23
|
+
--pf-c-code-editor__header-main--PaddingLeft: var(--pf-global--spacer--sm);
|
|
22
24
|
--pf-c-code-editor__tab--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
23
25
|
--pf-c-code-editor__tab--Color: var(--pf-global--Color--200);
|
|
24
26
|
--pf-c-code-editor__tab--PaddingTop: var(--pf-global--spacer--form-element);
|
|
@@ -67,6 +69,12 @@
|
|
|
67
69
|
border-bottom-color: var(--pf-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
|
|
68
70
|
}
|
|
69
71
|
|
|
72
|
+
.pf-c-code-editor__header-main {
|
|
73
|
+
flex-grow: 1;
|
|
74
|
+
padding-right: var(--pf-c-code-editor__header-main--PaddingRight);
|
|
75
|
+
padding-left: var(--pf-c-code-editor__header-main--PaddingLeft);
|
|
76
|
+
}
|
|
77
|
+
|
|
70
78
|
.pf-c-code-editor__main {
|
|
71
79
|
position: relative;
|
|
72
80
|
background-color: var(--pf-c-code-editor__main--BackgroundColor);
|
|
@@ -27,6 +27,10 @@
|
|
|
27
27
|
--pf-c-code-editor__code-pre--FontSize: var(--pf-global--FontSize--sm);
|
|
28
28
|
--pf-c-code-editor__code-pre--FontFamily: var(--pf-global--FontFamily--monospace);
|
|
29
29
|
|
|
30
|
+
// content
|
|
31
|
+
--pf-c-code-editor__header-main--PaddingRight: var(--pf-global--spacer--sm);
|
|
32
|
+
--pf-c-code-editor__header-main--PaddingLeft: var(--pf-global--spacer--sm);
|
|
33
|
+
|
|
30
34
|
// tab
|
|
31
35
|
--pf-c-code-editor__tab--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
|
32
36
|
--pf-c-code-editor__tab--Color: var(--pf-global--Color--200);
|
|
@@ -86,6 +90,12 @@
|
|
|
86
90
|
}
|
|
87
91
|
}
|
|
88
92
|
|
|
93
|
+
.pf-c-code-editor__header-main {
|
|
94
|
+
flex-grow: 1;
|
|
95
|
+
padding-right: var(--pf-c-code-editor__header-main--PaddingRight);
|
|
96
|
+
padding-left: var(--pf-c-code-editor__header-main--PaddingLeft);
|
|
97
|
+
}
|
|
98
|
+
|
|
89
99
|
.pf-c-code-editor__main {
|
|
90
100
|
position: relative;
|
|
91
101
|
background-color: var(--pf-c-code-editor__main--BackgroundColor);
|
|
@@ -142,7 +152,7 @@
|
|
|
142
152
|
display: flex;
|
|
143
153
|
align-items: center;
|
|
144
154
|
padding: var(--pf-c-code-editor__tab--PaddingTop) var(--pf-c-code-editor__tab--PaddingRight) var(--pf-c-code-editor__tab--PaddingBottom) var(--pf-c-code-editor__tab--PaddingLeft);
|
|
145
|
-
margin-left: auto;
|
|
155
|
+
margin-left: auto; // remove at breaking change
|
|
146
156
|
color: var(--pf-c-code-editor__tab--Color);
|
|
147
157
|
background-color: var(--pf-c-code-editor__tab--BackgroundColor);
|
|
148
158
|
border-color: var(--pf-c-code-editor__tab--BorderColor);
|
|
@@ -39,6 +39,50 @@ cssPrefix: pf-c-avatar
|
|
|
39
39
|
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
+
### Small
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<img
|
|
46
|
+
class="pf-c-avatar pf-m-sm"
|
|
47
|
+
src="/assets/images/img_avatar-light.svg"
|
|
48
|
+
alt="Avatar image small"
|
|
49
|
+
/>
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Medium
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<img
|
|
57
|
+
class="pf-c-avatar pf-m-md"
|
|
58
|
+
src="/assets/images/img_avatar-light.svg"
|
|
59
|
+
alt="Avatar image medium"
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Large
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<img
|
|
68
|
+
class="pf-c-avatar pf-m-lg"
|
|
69
|
+
src="/assets/images/img_avatar-light.svg"
|
|
70
|
+
alt="Avatar image large"
|
|
71
|
+
/>
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Extra large
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<img
|
|
79
|
+
class="pf-c-avatar pf-m-xl"
|
|
80
|
+
src="/assets/images/img_avatar-light.svg"
|
|
81
|
+
alt="Avatar image extra large"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
|
|
42
86
|
## Documentation
|
|
43
87
|
|
|
44
88
|
### Overview
|
|
@@ -53,8 +97,12 @@ The avatar component provides a default SVG icon. If an image is used it should
|
|
|
53
97
|
|
|
54
98
|
### Usage
|
|
55
99
|
|
|
56
|
-
| Class
|
|
57
|
-
|
|
|
58
|
-
| `.pf-c-avatar`
|
|
59
|
-
| `.pf-m-light`
|
|
60
|
-
| `.pf-m-dark`
|
|
100
|
+
| Class | Applied to | Outcome |
|
|
101
|
+
| ---------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
102
|
+
| `.pf-c-avatar` | `<img>` | Initiates an avatar image. **Required** |
|
|
103
|
+
| `.pf-m-light` | `.pf-c-avatar` | Modifies an avatar for use against a light background. |
|
|
104
|
+
| `.pf-m-dark` | `.pf-c-avatar` | Modifies an avatar for use against a dark background. |
|
|
105
|
+
| `.pf-m-sm{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
106
|
+
| `.pf-m-md{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
|
|
107
|
+
| `.pf-m-lg{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
108
|
+
| `.pf-m-xl{-on-[breakpoint]}` | `.pf-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -56,9 +56,9 @@ Simple brand component.
|
|
|
56
56
|
|
|
57
57
|
### Usage
|
|
58
58
|
|
|
59
|
-
| Class | Applied to | Outcome
|
|
60
|
-
| -------------------------------------------------- | ------------------ |
|
|
61
|
-
| `.pf-c-brand` | `<img>, <picture>` | Initiates a brand image. **Required**
|
|
62
|
-
| `.pf-m-picture` | `.pf-c-brand` | Modifies a brand image to a picture.
|
|
63
|
-
| `--pf-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-c-brand` | Modifies the width value of a picture. |
|
|
64
|
-
| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand` | Modifies the height value of a picture. |
|
|
59
|
+
| Class | Applied to | Outcome |
|
|
60
|
+
| -------------------------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
61
|
+
| `.pf-c-brand` | `<img>, <picture>` | Initiates a brand image. **Required** |
|
|
62
|
+
| `.pf-m-picture` | `.pf-c-brand` | Modifies a brand image to a picture. |
|
|
63
|
+
| `--pf-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-c-brand` | Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
64
|
+
| `--pf-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-c-brand` | Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -33,6 +33,7 @@ cssPrefix: pf-c-code-editor
|
|
|
33
33
|
<i class="fas fa-upload"></i>
|
|
34
34
|
</button>
|
|
35
35
|
</div>
|
|
36
|
+
<div class="pf-c-code-editor__header-main"></div>
|
|
36
37
|
<div class="pf-c-code-editor__tab">
|
|
37
38
|
<span class="pf-c-code-editor__tab-icon">
|
|
38
39
|
<i class="fas fa-code"></i>
|
|
@@ -80,6 +81,7 @@ cssPrefix: pf-c-code-editor
|
|
|
80
81
|
<i class="fas fa-upload"></i>
|
|
81
82
|
</button>
|
|
82
83
|
</div>
|
|
84
|
+
<div class="pf-c-code-editor__header-main"></div>
|
|
83
85
|
<div class="pf-c-code-editor__tab">
|
|
84
86
|
<span class="pf-c-code-editor__tab-icon">
|
|
85
87
|
<i class="fas fa-code"></i>
|
|
@@ -103,6 +105,7 @@ cssPrefix: pf-c-code-editor
|
|
|
103
105
|
```html
|
|
104
106
|
<div class="pf-c-code-editor">
|
|
105
107
|
<div class="pf-c-code-editor__header">
|
|
108
|
+
<div class="pf-c-code-editor__header-main"></div>
|
|
106
109
|
<div class="pf-c-code-editor__tab">
|
|
107
110
|
<span class="pf-c-code-editor__tab-icon">
|
|
108
111
|
<i class="fas fa-code"></i>
|
|
@@ -136,6 +139,7 @@ cssPrefix: pf-c-code-editor
|
|
|
136
139
|
```html
|
|
137
140
|
<div class="pf-c-code-editor">
|
|
138
141
|
<div class="pf-c-code-editor__header">
|
|
142
|
+
<div class="pf-c-code-editor__header-main"></div>
|
|
139
143
|
<div class="pf-c-code-editor__tab">
|
|
140
144
|
<span class="pf-c-code-editor__tab-icon">
|
|
141
145
|
<i class="fas fa-code"></i>
|
|
@@ -164,6 +168,61 @@ cssPrefix: pf-c-code-editor
|
|
|
164
168
|
|
|
165
169
|
```
|
|
166
170
|
|
|
171
|
+
### With optional header content and keyboard shortcuts
|
|
172
|
+
|
|
173
|
+
```html
|
|
174
|
+
<div class="pf-c-code-editor">
|
|
175
|
+
<div class="pf-c-code-editor__header">
|
|
176
|
+
<div class="pf-c-code-editor__controls">
|
|
177
|
+
<button
|
|
178
|
+
class="pf-c-button pf-m-control"
|
|
179
|
+
type="button"
|
|
180
|
+
aria-label="Copy to clipboard"
|
|
181
|
+
>
|
|
182
|
+
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
183
|
+
</button>
|
|
184
|
+
<button
|
|
185
|
+
class="pf-c-button pf-m-control"
|
|
186
|
+
type="button"
|
|
187
|
+
aria-label="Download code"
|
|
188
|
+
>
|
|
189
|
+
<i class="fas fa-download"></i>
|
|
190
|
+
</button>
|
|
191
|
+
<button
|
|
192
|
+
class="pf-c-button pf-m-control"
|
|
193
|
+
type="button"
|
|
194
|
+
aria-label="Upload code"
|
|
195
|
+
>
|
|
196
|
+
<i class="fas fa-upload"></i>
|
|
197
|
+
</button>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="pf-c-code-editor__header-main">Header main content</div>
|
|
200
|
+
<div class="pf-c-code-editor__keyboard-shortcuts">
|
|
201
|
+
<button class="pf-c-button pf-m-link" type="button">
|
|
202
|
+
<span class="pf-c-button__icon pf-m-start">
|
|
203
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
204
|
+
</span>
|
|
205
|
+
View shortcuts
|
|
206
|
+
</button>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="pf-c-code-editor__tab">
|
|
209
|
+
<span class="pf-c-code-editor__tab-icon">
|
|
210
|
+
<i class="fas fa-code"></i>
|
|
211
|
+
</span>
|
|
212
|
+
<span class="pf-c-code-editor__tab-text">HTML</span>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="pf-c-code-editor__main">
|
|
216
|
+
<code class="pf-c-code-editor__code">
|
|
217
|
+
<pre class="pf-c-code-editor__code-pre">
|
|
218
|
+
code goes here
|
|
219
|
+
</pre>
|
|
220
|
+
</code>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
```
|
|
225
|
+
|
|
167
226
|
## Documentation
|
|
168
227
|
|
|
169
228
|
### Overview
|
|
@@ -175,13 +234,15 @@ cssPrefix: pf-c-code-editor
|
|
|
175
234
|
|
|
176
235
|
### Usage
|
|
177
236
|
|
|
178
|
-
| Class
|
|
179
|
-
|
|
|
180
|
-
| `.pf-c-code-editor`
|
|
181
|
-
| `.pf-c-code-editor__header`
|
|
182
|
-
| `.pf-c-code-editor__main`
|
|
183
|
-
| `.pf-c-code-editor__code`
|
|
184
|
-
| `.pf-c-code-editor__controls`
|
|
185
|
-
| `.pf-c-code-
|
|
186
|
-
| `.pf-c-code-
|
|
187
|
-
| `.pf-c-code-editor__tab
|
|
237
|
+
| Class | Applied to | Outcome |
|
|
238
|
+
| --------------------------------------- | ---------- | ----------------------------------------------------------------------------------------- |
|
|
239
|
+
| `.pf-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
|
|
240
|
+
| `.pf-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
|
|
241
|
+
| `.pf-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
|
|
242
|
+
| `.pf-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
|
|
243
|
+
| `.pf-c-code-editor__controls` | `<div>` | Initiates the code editor controls. |
|
|
244
|
+
| `.pf-c-code-editor__header-main` | `<div>` | Initiates the code editor header content area. |
|
|
245
|
+
| `.pf-c-code-editor__keyboard-shortcuts` | `<div>` | Initiates the code editor header keyboard shortcuts area. |
|
|
246
|
+
| `.pf-c-code-editor__tab` | `<div>` | Initiates the code editor tab. |
|
|
247
|
+
| `.pf-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text. |
|
|
248
|
+
| `.pf-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon. |
|
|
@@ -372,14 +372,14 @@ When a list item includes more than one block of content, it can be difficult fo
|
|
|
372
372
|
|
|
373
373
|
### Usage
|
|
374
374
|
|
|
375
|
-
| Class | Applied to | Outcome
|
|
376
|
-
| --------------------------------- | ------------------------------ |
|
|
377
|
-
| `.pf-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. **Required**
|
|
378
|
-
| `.pf-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. **Required**
|
|
379
|
-
| `.pf-c-data-list__check` | `<div>` | Initiates a data list check cell. **Required**
|
|
380
|
-
| `.pf-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required**
|
|
381
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Hides an actions container at
|
|
382
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Shows an actions container at
|
|
375
|
+
| Class | Applied to | Outcome |
|
|
376
|
+
| --------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
377
|
+
| `.pf-c-data-list__item-control` | `<div>` | Initiates a container for data list controls. For example, add `.pf-c-data-list__check` here. **Required** |
|
|
378
|
+
| `.pf-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-c-data-list__action` here. **Required** |
|
|
379
|
+
| `.pf-c-data-list__check` | `<div>` | Initiates a data list check cell. **Required** |
|
|
380
|
+
| `.pf-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
|
|
381
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
|
|
382
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
383
383
|
|
|
384
384
|
### Expandable
|
|
385
385
|
|
|
@@ -2622,6 +2622,6 @@ The DataList component provides a flexible alternative to the Table component, w
|
|
|
2622
2622
|
|
|
2623
2623
|
### Usage
|
|
2624
2624
|
|
|
2625
|
-
| Class | Applied to | Outcome
|
|
2626
|
-
| ------------------------------------------ | ----------------- |
|
|
2627
|
-
| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-c-data-list` | Modifies the data list to switch to a grid layout at a specified breakpoint. `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
|
|
2625
|
+
| Class | Applied to | Outcome |
|
|
2626
|
+
| ------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
2627
|
+
| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
|
|
@@ -1264,25 +1264,25 @@ Column fill will modify the default placement of description list groups to fill
|
|
|
1264
1264
|
|
|
1265
1265
|
### Usage
|
|
1266
1266
|
|
|
1267
|
-
| Class | Applied to | Outcome
|
|
1268
|
-
| ------------------------------------------------------------------------------- | ---------------------------------------- |
|
|
1269
|
-
| `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required**
|
|
1270
|
-
| `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required**
|
|
1271
|
-
| `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required**
|
|
1272
|
-
| `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required**
|
|
1273
|
-
| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required**
|
|
1274
|
-
| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element.
|
|
1275
|
-
| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing.
|
|
1276
|
-
| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid.
|
|
1277
|
-
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text.
|
|
1278
|
-
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout.
|
|
1279
|
-
| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout.
|
|
1280
|
-
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.
|
|
1281
|
-
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically.
|
|
1282
|
-
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid.
|
|
1283
|
-
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns.
|
|
1284
|
-
| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration.
|
|
1285
|
-
| `--pf-c-description-list__term--m-horizontal--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the value for `--pf-c-description-list--m-horizontal__term--width` declaration.
|
|
1267
|
+
| Class | Applied to | Outcome |
|
|
1268
|
+
| ------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1269
|
+
| `.pf-c-description-list` | `<dl>` | Initiates the description list component. **Required** |
|
|
1270
|
+
| `.pf-c-description-list__group` | `<div>` | Initiates a description list component group. **Required** |
|
|
1271
|
+
| `.pf-c-description-list__term` | `<dt>` | Initiates a description list component term. **Required** |
|
|
1272
|
+
| `.pf-c-description-list__description` | `<dd>` | Initiates a description list component description. **Required** |
|
|
1273
|
+
| `.pf-c-description-list__text` | `<span>`, `<div>` | Initiates a description list component text element. Use a `<span>` when a child of `.pf-c-description-list__term`. **Required** |
|
|
1274
|
+
| `.pf-c-description-list__term-icon` | `<span>` | Initiates a description list component term icon element. |
|
|
1275
|
+
| `.pf-m-compact` | `.pf-c-description-list` | Modifies the description list for compact horizontal and vertical spacing. |
|
|
1276
|
+
| `.pf-m-fluid` | `.pf-c-description-list.pf-m-horizontal` | Modifies the description list term width to be fluid. |
|
|
1277
|
+
| `.pf-m-help-text` | `.pf-c-description-list__text` | Indicates there is more information available for the description list component term text. |
|
|
1278
|
+
| `.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a horizontal layout. |
|
|
1279
|
+
| `.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list component term and description pair to a vertical layout. |
|
|
1280
|
+
| `.pf-m-fill-columns` | `.pf-c-description-list` | Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right. |
|
|
1281
|
+
| `.pf-m-auto-column-widths` | `.pf-c-description-list` | Modifies the description list to format automatically. |
|
|
1282
|
+
| `.pf-m-inline-grid` | `.pf-c-description-list` | Modifies the description list display to inline-grid. |
|
|
1283
|
+
| `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-description-list` | Modifies the description list number of columns. |
|
|
1284
|
+
| `--pf-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1285
|
+
| `--pf-c-description-list__term--m-horizontal--width{-on-[breakpoint]}: {width}` | `.pf-c-description-list.pf-m-horizontal` | Modifies the value for `--pf-c-description-list--m-horizontal__term--width` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
1286
1286
|
|
|
1287
1287
|
<!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element. |
|
|
1288
1288
|
| `.pf-m-order-first{-on-[breakpoint]}` | `.pf-c-description-list__group` | Modifies the order of the flex layout element to -1. |
|