@patternfly/patternfly 5.0.0-alpha.6 → 5.0.0-alpha.7
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/components/ChipGroup/chip-group.css +29 -17
- package/components/ChipGroup/chip-group.scss +39 -22
- package/components/EmptyState/empty-state.css +46 -52
- package/components/EmptyState/empty-state.scss +58 -57
- package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
- package/docs/components/EmptyState/examples/EmptyState.md +127 -79
- package/docs/components/Wizard/examples/Wizard.md +4 -7
- package/docs/demos/CardView/examples/CardView.md +1 -3
- package/docs/demos/Table/examples/Table.md +7 -10
- package/package.json +1 -1
- package/patternfly-no-reset.css +75 -69
- package/patternfly.css +75 -69
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -9,20 +9,31 @@ cssPrefix: pf-c-empty-state
|
|
|
9
9
|
```html
|
|
10
10
|
<div class="pf-c-empty-state">
|
|
11
11
|
<div class="pf-c-empty-state__content">
|
|
12
|
-
<
|
|
12
|
+
<div class="pf-c-empty-state__header">
|
|
13
|
+
<div class="pf-c-empty-state__icon">
|
|
14
|
+
<i class="fas fa-cubes" aria-hidden="true"></i>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="pf-c-empty-state__title">
|
|
17
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
13
20
|
|
|
14
|
-
<h1 class="pf-c-title pf-m-lg">Empty state</h1>
|
|
15
21
|
<div
|
|
16
22
|
class="pf-c-empty-state__body"
|
|
17
|
-
>This represents an the empty state pattern in PatternFly
|
|
18
|
-
|
|
19
|
-
<div class="pf-c-empty-
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
24
|
+
|
|
25
|
+
<div class="pf-c-empty-state__footer">
|
|
26
|
+
<div class="pf-c-empty-state__actions">
|
|
27
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary action</button>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="pf-c-empty-state__actions">
|
|
30
|
+
<button class="pf-c-button pf-m-link" type="button">Multiple</button>
|
|
31
|
+
<button class="pf-c-button pf-m-link" type="button">Action buttons</button>
|
|
32
|
+
<button class="pf-c-button pf-m-link" type="button">Can</button>
|
|
33
|
+
<button class="pf-c-button pf-m-link" type="button">Go here</button>
|
|
34
|
+
<button class="pf-c-button pf-m-link" type="button">In the second</button>
|
|
35
|
+
<button class="pf-c-button pf-m-link" type="button">Action area</button>
|
|
36
|
+
</div>
|
|
26
37
|
</div>
|
|
27
38
|
</div>
|
|
28
39
|
</div>
|
|
@@ -34,17 +45,31 @@ cssPrefix: pf-c-empty-state
|
|
|
34
45
|
```html
|
|
35
46
|
<div class="pf-c-empty-state pf-m-xs">
|
|
36
47
|
<div class="pf-c-empty-state__content">
|
|
37
|
-
<
|
|
48
|
+
<div class="pf-c-empty-state__header">
|
|
49
|
+
<div class="pf-c-empty-state__title">
|
|
50
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
38
54
|
<div
|
|
39
55
|
class="pf-c-empty-state__body"
|
|
40
|
-
>This represents an the empty state pattern in PatternFly
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
56
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
57
|
+
|
|
58
|
+
<div class="pf-c-empty-state__footer">
|
|
59
|
+
<div class="pf-c-empty-state__actions">
|
|
60
|
+
<button class="pf-c-button pf-m-link pf-m-small" type="button">Multiple</button>
|
|
61
|
+
<button
|
|
62
|
+
class="pf-c-button pf-m-link pf-m-small"
|
|
63
|
+
type="button"
|
|
64
|
+
>Action buttons</button>
|
|
65
|
+
<button class="pf-c-button pf-m-link pf-m-small" type="button">Can</button>
|
|
66
|
+
<button class="pf-c-button pf-m-link pf-m-small" type="button">Go here</button>
|
|
67
|
+
<button class="pf-c-button pf-m-link pf-m-small" type="button">In the</button>
|
|
68
|
+
<button
|
|
69
|
+
class="pf-c-button pf-m-link pf-m-small"
|
|
70
|
+
type="button"
|
|
71
|
+
>Action area</button>
|
|
72
|
+
</div>
|
|
48
73
|
</div>
|
|
49
74
|
</div>
|
|
50
75
|
</div>
|
|
@@ -56,20 +81,32 @@ cssPrefix: pf-c-empty-state
|
|
|
56
81
|
```html
|
|
57
82
|
<div class="pf-c-empty-state pf-m-sm">
|
|
58
83
|
<div class="pf-c-empty-state__content">
|
|
59
|
-
<
|
|
84
|
+
<div class="pf-c-empty-state__header">
|
|
85
|
+
<div class="pf-c-empty-state__icon">
|
|
86
|
+
<i class="fas fa-cubes" aria-hidden="true"></i>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="pf-c-empty-state__title">
|
|
89
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
60
92
|
|
|
61
|
-
<h1 class="pf-c-title pf-m-lg">Empty state</h1>
|
|
62
93
|
<div
|
|
63
94
|
class="pf-c-empty-state__body"
|
|
64
|
-
>This represents an the empty state pattern in PatternFly
|
|
65
|
-
|
|
66
|
-
<div class="pf-c-empty-
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<
|
|
72
|
-
|
|
95
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
96
|
+
|
|
97
|
+
<div class="pf-c-empty-state__footer">
|
|
98
|
+
<div class="pf-c-empty-state__actions">
|
|
99
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary action</button>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="pf-c-empty-state__actions">
|
|
103
|
+
<button class="pf-c-button pf-m-link" type="button">Multiple</button>
|
|
104
|
+
<button class="pf-c-button pf-m-link" type="button">Action buttons</button>
|
|
105
|
+
<button class="pf-c-button pf-m-link" type="button">Can</button>
|
|
106
|
+
<button class="pf-c-button pf-m-link" type="button">Go here</button>
|
|
107
|
+
<button class="pf-c-button pf-m-link" type="button">In the second</button>
|
|
108
|
+
<button class="pf-c-button pf-m-link" type="button">Action area</button>
|
|
109
|
+
</div>
|
|
73
110
|
</div>
|
|
74
111
|
</div>
|
|
75
112
|
</div>
|
|
@@ -81,20 +118,31 @@ cssPrefix: pf-c-empty-state
|
|
|
81
118
|
```html
|
|
82
119
|
<div class="pf-c-empty-state pf-m-lg">
|
|
83
120
|
<div class="pf-c-empty-state__content">
|
|
84
|
-
<
|
|
121
|
+
<div class="pf-c-empty-state__header">
|
|
122
|
+
<div class="pf-c-empty-state__icon">
|
|
123
|
+
<i class="fas fa-cubes" aria-hidden="true"></i>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="pf-c-empty-state__title">
|
|
126
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
85
129
|
|
|
86
|
-
<h1 class="pf-c-title pf-m-lg">Empty state</h1>
|
|
87
130
|
<div
|
|
88
131
|
class="pf-c-empty-state__body"
|
|
89
|
-
>This represents an the empty state pattern in PatternFly
|
|
90
|
-
|
|
91
|
-
<div class="pf-c-empty-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
132
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
133
|
+
|
|
134
|
+
<div class="pf-c-empty-state__footer">
|
|
135
|
+
<div class="pf-c-empty-state__actions">
|
|
136
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary action</button>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="pf-c-empty-state__actions">
|
|
139
|
+
<button class="pf-c-button pf-m-link" type="button">Multiple</button>
|
|
140
|
+
<button class="pf-c-button pf-m-link" type="button">Action buttons</button>
|
|
141
|
+
<button class="pf-c-button pf-m-link" type="button">Can</button>
|
|
142
|
+
<button class="pf-c-button pf-m-link" type="button">Go here</button>
|
|
143
|
+
<button class="pf-c-button pf-m-link" type="button">In the second</button>
|
|
144
|
+
<button class="pf-c-button pf-m-link" type="button">Action area</button>
|
|
145
|
+
</div>
|
|
98
146
|
</div>
|
|
99
147
|
</div>
|
|
100
148
|
</div>
|
|
@@ -106,31 +154,30 @@ cssPrefix: pf-c-empty-state
|
|
|
106
154
|
```html
|
|
107
155
|
<div class="pf-c-empty-state pf-m-xl">
|
|
108
156
|
<div class="pf-c-empty-state__content">
|
|
109
|
-
<
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
class="pf-c-empty-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
</div>
|
|
118
|
-
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### With primary element
|
|
122
|
-
|
|
123
|
-
```html
|
|
124
|
-
<div class="pf-c-empty-state">
|
|
125
|
-
<div class="pf-c-empty-state__content">
|
|
126
|
-
<i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
|
|
157
|
+
<div class="pf-c-empty-state__header">
|
|
158
|
+
<div class="pf-c-empty-state__icon">
|
|
159
|
+
<i class="fas fa-cubes" aria-hidden="true"></i>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="pf-c-empty-state__title">
|
|
162
|
+
<h1 class="pf-c-empty-state__title-text">Empty state</h1>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
127
165
|
|
|
128
|
-
<h1 class="pf-c-title pf-m-lg">Empty State</h1>
|
|
129
166
|
<div
|
|
130
167
|
class="pf-c-empty-state__body"
|
|
131
|
-
>This represents an the empty state pattern in PatternFly
|
|
132
|
-
<div class="pf-c-empty-
|
|
133
|
-
<
|
|
168
|
+
>This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
|
|
169
|
+
<div class="pf-c-empty-state__footer">
|
|
170
|
+
<div class="pf-c-empty-state__actions">
|
|
171
|
+
<button class="pf-c-button pf-m-primary" type="button">Primary action</button>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="pf-c-empty-state__actions">
|
|
174
|
+
<button class="pf-c-button pf-m-link" type="button">Multiple</button>
|
|
175
|
+
<button class="pf-c-button pf-m-link" type="button">Action buttons</button>
|
|
176
|
+
<button class="pf-c-button pf-m-link" type="button">Can</button>
|
|
177
|
+
<button class="pf-c-button pf-m-link" type="button">Go here</button>
|
|
178
|
+
<button class="pf-c-button pf-m-link" type="button">In the second</button>
|
|
179
|
+
<button class="pf-c-button pf-m-link" type="button">Action area</button>
|
|
180
|
+
</div>
|
|
134
181
|
</div>
|
|
135
182
|
</div>
|
|
136
183
|
</div>
|
|
@@ -147,18 +194,19 @@ cssPrefix: pf-c-empty-state
|
|
|
147
194
|
|
|
148
195
|
### Usage
|
|
149
196
|
|
|
150
|
-
| Class
|
|
151
|
-
|
|
|
152
|
-
| `.pf-c-empty-state`
|
|
153
|
-
| `.pf-c-empty-state__content`
|
|
154
|
-
| `.pf-c-empty-
|
|
155
|
-
| `.pf-c-
|
|
156
|
-
| `.pf-c-empty-
|
|
157
|
-
| `.pf-c-
|
|
158
|
-
| `.pf-c-empty-
|
|
159
|
-
| `.pf-c-empty-
|
|
160
|
-
| `.pf-
|
|
161
|
-
| `.pf-m-
|
|
162
|
-
| `.pf-m-
|
|
163
|
-
| `.pf-m-
|
|
164
|
-
| `.pf-m-
|
|
197
|
+
| Class | Applied to | Outcome |
|
|
198
|
+
| ------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
199
|
+
| `.pf-c-empty-state` | `<div>` | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
|
|
200
|
+
| `.pf-c-empty-state__content` | `<div>` | Creates the content container. **Required** |
|
|
201
|
+
| `.pf-c-empty-state__header` | `<div>` | Creates the header container. **Required** |
|
|
202
|
+
| `.pf-c-empty-state__title` | `<div>` | Creates the empty state title container. **Required** |
|
|
203
|
+
| `.pf-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates the empty state title text container. |
|
|
204
|
+
| `.pf-c-empty-state__icon` | `<div>` | Creates the empty state icon container. |
|
|
205
|
+
| `.pf-c-empty-state__body` | `<div>` | Creates the empty state body content. There can be more than one `.pf-c-empty-state__body` elements. |
|
|
206
|
+
| `.pf-c-empty-state__footer` | `<div>` | Creates the footer container. **Required** |
|
|
207
|
+
| `.pf-c-empty-state__actions` | `<div>` | Container for actions. **Required** |
|
|
208
|
+
| `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
|
|
209
|
+
| `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
|
|
210
|
+
| `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
|
|
211
|
+
| `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
|
|
212
|
+
| `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
|
|
@@ -1214,10 +1214,9 @@ wrapperTag: div
|
|
|
1214
1214
|
<div class="pf-l-bullseye">
|
|
1215
1215
|
<div class="pf-c-empty-state pf-m-lg">
|
|
1216
1216
|
<div class="pf-c-empty-state__content">
|
|
1217
|
-
<
|
|
1218
|
-
class="fas fa- fa-cogs
|
|
1219
|
-
|
|
1220
|
-
></i>
|
|
1217
|
+
<div class="pf-c-empty-state__icon">
|
|
1218
|
+
<i class="fas fa- fa-cogs" aria-hidden="true"></i>
|
|
1219
|
+
</div>
|
|
1221
1220
|
|
|
1222
1221
|
<h1
|
|
1223
1222
|
class="pf-c-title pf-m-lg"
|
|
@@ -1251,9 +1250,7 @@ wrapperTag: div
|
|
|
1251
1250
|
<div
|
|
1252
1251
|
class="pf-c-empty-state__body"
|
|
1253
1252
|
>Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
|
|
1254
|
-
<
|
|
1255
|
-
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
1256
|
-
</div>
|
|
1253
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
1257
1254
|
</div>
|
|
1258
1255
|
</div>
|
|
1259
1256
|
</div>
|
|
@@ -1263,9 +1263,7 @@ section: demos
|
|
|
1263
1263
|
<div class="pf-c-empty-state__content">
|
|
1264
1264
|
<i class="fas fa-plus-circle pf-c-empty-state__icon"></i>
|
|
1265
1265
|
<h2 class="pf-c-title pf-m-md">Add a new card to your page</h2>
|
|
1266
|
-
<
|
|
1267
|
-
<button class="pf-c-button pf-m-link" type="button">Add card</button>
|
|
1268
|
-
</div>
|
|
1266
|
+
<button class="pf-c-button pf-m-link" type="button">Add card</button>
|
|
1269
1267
|
</div>
|
|
1270
1268
|
</div>
|
|
1271
1269
|
</div>
|
|
@@ -14184,21 +14184,18 @@ wrapperTag: div
|
|
|
14184
14184
|
<td role="cell" colspan="8">
|
|
14185
14185
|
<div class="pf-c-empty-state pf-m-sm">
|
|
14186
14186
|
<div class="pf-c-empty-state__content">
|
|
14187
|
-
<
|
|
14188
|
-
class="fas fa- fa-search
|
|
14189
|
-
|
|
14190
|
-
></i>
|
|
14187
|
+
<div class="pf-c-empty-state__icon">
|
|
14188
|
+
<i class="fas fa- fa-search" aria-hidden="true"></i>
|
|
14189
|
+
</div>
|
|
14191
14190
|
|
|
14192
14191
|
<h2 class="pf-c-title pf-m-lg">No results found</h2>
|
|
14193
14192
|
<div
|
|
14194
14193
|
class="pf-c-empty-state__body"
|
|
14195
14194
|
>No results match the filter criteria. Remove all filters or clear all filters to show results.</div>
|
|
14196
|
-
<
|
|
14197
|
-
|
|
14198
|
-
|
|
14199
|
-
|
|
14200
|
-
>Clear all filters</button>
|
|
14201
|
-
</div>
|
|
14195
|
+
<button
|
|
14196
|
+
class="pf-c-button pf-m-link"
|
|
14197
|
+
type="button"
|
|
14198
|
+
>Clear all filters</button>
|
|
14202
14199
|
</div>
|
|
14203
14200
|
</div>
|
|
14204
14201
|
</td>
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -8626,28 +8626,40 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
8626
8626
|
|
|
8627
8627
|
.pf-c-chip-group {
|
|
8628
8628
|
color: var(--pf-global--Color--100);
|
|
8629
|
-
--pf-c-chip-
|
|
8630
|
-
--pf-c-chip-
|
|
8629
|
+
--pf-c-chip-group--PaddingTop: 0;
|
|
8630
|
+
--pf-c-chip-group--PaddingRight: 0;
|
|
8631
|
+
--pf-c-chip-group--PaddingBottom: 0;
|
|
8632
|
+
--pf-c-chip-group--PaddingLeft: 0;
|
|
8633
|
+
--pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
|
|
8634
|
+
--pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
|
|
8635
|
+
--pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
|
|
8636
|
+
--pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
|
|
8637
|
+
--pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
|
|
8638
|
+
--pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
|
|
8631
8639
|
--pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
|
|
8632
8640
|
--pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
|
|
8633
8641
|
--pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
|
|
8634
8642
|
--pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
|
|
8635
8643
|
--pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
|
|
8636
8644
|
--pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
|
|
8637
|
-
--pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
|
|
8638
8645
|
--pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
|
|
8639
8646
|
--pf-c-chip-group__label--MaxWidth: 18ch;
|
|
8640
8647
|
--pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
|
|
8641
8648
|
--pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
|
|
8642
|
-
--pf-c-chip-
|
|
8643
|
-
--pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
|
|
8649
|
+
--pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
|
|
8644
8650
|
max-width: 100%;
|
|
8651
|
+
padding-top: var(--pf-c-chip-group--PaddingTop);
|
|
8652
|
+
padding-right: var(--pf-c-chip-group--PaddingRight);
|
|
8653
|
+
padding-bottom: var(--pf-c-chip-group--PaddingBottom);
|
|
8654
|
+
padding-left: var(--pf-c-chip-group--PaddingLeft);
|
|
8655
|
+
row-gap: var(--pf-c-chip-group--RowGap);
|
|
8656
|
+
column-gap: var(--pf-c-chip-group--ColumnGap);
|
|
8645
8657
|
}
|
|
8646
8658
|
.pf-c-chip-group.pf-m-category {
|
|
8647
|
-
|
|
8648
|
-
|
|
8649
|
-
|
|
8650
|
-
|
|
8659
|
+
--pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
|
|
8660
|
+
--pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
|
|
8661
|
+
--pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
|
|
8662
|
+
--pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
|
|
8651
8663
|
background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
|
|
8652
8664
|
border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
|
|
8653
8665
|
}
|
|
@@ -8658,11 +8670,8 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
8658
8670
|
flex-wrap: wrap;
|
|
8659
8671
|
align-items: baseline;
|
|
8660
8672
|
min-width: 0;
|
|
8661
|
-
|
|
8662
|
-
|
|
8663
|
-
.pf-c-chip-group__list {
|
|
8664
|
-
margin-right: var(--pf-c-chip-group__list--MarginRight);
|
|
8665
|
-
margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
|
|
8673
|
+
row-gap: var(--pf-c-chip-group__main--RowGap);
|
|
8674
|
+
column-gap: var(--pf-c-chip-group__main--ColumnGap);
|
|
8666
8675
|
}
|
|
8667
8676
|
|
|
8668
8677
|
.pf-c-chip-group,
|
|
@@ -8673,11 +8682,14 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
8673
8682
|
min-width: 0;
|
|
8674
8683
|
}
|
|
8675
8684
|
|
|
8685
|
+
.pf-c-chip-group__list {
|
|
8686
|
+
row-gap: var(--pf-c-chip-group__list--RowGap);
|
|
8687
|
+
column-gap: var(--pf-c-chip-group__list--ColumnGap);
|
|
8688
|
+
}
|
|
8689
|
+
|
|
8676
8690
|
.pf-c-chip-group__list-item {
|
|
8677
8691
|
display: inline-flex;
|
|
8678
8692
|
min-width: 0;
|
|
8679
|
-
margin-right: var(--pf-c-chip-group__list-item--MarginRight);
|
|
8680
|
-
margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
|
|
8681
8693
|
}
|
|
8682
8694
|
|
|
8683
8695
|
.pf-c-chip-group__label {
|
|
@@ -8685,7 +8697,6 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
8685
8697
|
text-overflow: ellipsis;
|
|
8686
8698
|
white-space: nowrap;
|
|
8687
8699
|
max-width: var(--pf-c-chip-group__label--MaxWidth);
|
|
8688
|
-
margin-right: var(--pf-c-chip-group__label--MarginRight);
|
|
8689
8700
|
font-size: var(--pf-c-chip-group__label--FontSize);
|
|
8690
8701
|
}
|
|
8691
8702
|
|
|
@@ -8694,6 +8705,7 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
8694
8705
|
align-self: flex-start;
|
|
8695
8706
|
margin-top: var(--pf-c-chip-group__close--MarginTop);
|
|
8696
8707
|
margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
|
|
8708
|
+
margin-left: var(--pf-c-chip-group__close--MarginLeft);
|
|
8697
8709
|
}
|
|
8698
8710
|
|
|
8699
8711
|
.pf-c-clipboard-copy {
|
|
@@ -14283,38 +14295,39 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14283
14295
|
--pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
|
|
14284
14296
|
--pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
|
|
14285
14297
|
--pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
|
|
14298
|
+
--pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
|
|
14299
|
+
--pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
|
|
14300
|
+
--pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
|
|
14301
|
+
--pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
|
|
14286
14302
|
--pf-c-empty-state__content--MaxWidth: none;
|
|
14303
|
+
--pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
|
|
14304
|
+
--pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
|
|
14305
|
+
--pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
|
|
14287
14306
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
|
|
14288
14307
|
--pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
|
|
14289
14308
|
--pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
|
|
14290
|
-
--pf-c-empty-
|
|
14309
|
+
--pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
|
|
14310
|
+
--pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
|
|
14311
|
+
--pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
|
|
14312
|
+
--pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
|
|
14313
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
|
|
14314
|
+
--pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
|
|
14315
|
+
--pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
|
|
14316
|
+
--pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
|
|
14317
|
+
--pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
|
|
14318
|
+
--pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
|
|
14291
14319
|
--pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
|
|
14292
14320
|
--pf-c-empty-state__body--Color: var(--pf-global--Color--200);
|
|
14293
|
-
--pf-c-empty-
|
|
14294
|
-
--pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
|
|
14295
|
-
--pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
|
|
14296
|
-
--pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
|
|
14297
|
-
--pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
|
|
14298
|
-
--pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
|
|
14299
|
-
--pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
|
|
14300
|
-
--pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
|
|
14321
|
+
--pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
|
|
14301
14322
|
--pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
|
|
14302
|
-
--pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
|
|
14303
|
-
--pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
|
|
14304
|
-
--pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
|
|
14305
|
-
--pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
|
|
14306
|
-
--pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
|
|
14307
|
-
--pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
|
|
14308
14323
|
--pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
|
|
14309
|
-
--pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
|
|
14310
|
-
--pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
|
|
14311
|
-
--pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
|
|
14312
|
-
--pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
|
|
14313
14324
|
--pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
|
|
14314
14325
|
--pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
|
|
14315
|
-
--pf-c-empty-
|
|
14316
|
-
--pf-c-empty-
|
|
14317
|
-
--pf-c-empty-state--m-
|
|
14326
|
+
--pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
|
|
14327
|
+
--pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
|
|
14328
|
+
--pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
|
|
14329
|
+
--pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
|
|
14330
|
+
--pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
|
|
14318
14331
|
display: flex;
|
|
14319
14332
|
align-items: center;
|
|
14320
14333
|
justify-content: center;
|
|
@@ -14326,17 +14339,12 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14326
14339
|
--pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
|
|
14327
14340
|
--pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
|
|
14328
14341
|
--pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
|
|
14342
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
|
|
14329
14343
|
--pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
|
|
14330
14344
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
|
|
14331
14345
|
--pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
|
|
14332
|
-
--pf-c-empty-
|
|
14333
|
-
--pf-c-empty-
|
|
14334
|
-
}
|
|
14335
|
-
.pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
|
|
14336
|
-
font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
|
|
14337
|
-
}
|
|
14338
|
-
.pf-c-empty-state.pf-m-xs .pf-c-button {
|
|
14339
|
-
--pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
|
|
14346
|
+
--pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
|
|
14347
|
+
--pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
|
|
14340
14348
|
}
|
|
14341
14349
|
.pf-c-empty-state.pf-m-sm {
|
|
14342
14350
|
--pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
|
|
@@ -14346,12 +14354,11 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14346
14354
|
}
|
|
14347
14355
|
.pf-c-empty-state.pf-m-xl {
|
|
14348
14356
|
--pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
|
|
14357
|
+
--pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
|
|
14349
14358
|
--pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
|
|
14350
14359
|
--pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
|
|
14351
|
-
--pf-c-empty-
|
|
14352
|
-
|
|
14353
|
-
.pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
|
|
14354
|
-
font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
|
|
14360
|
+
--pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
|
|
14361
|
+
--pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
|
|
14355
14362
|
}
|
|
14356
14363
|
.pf-c-empty-state.pf-m-full-height {
|
|
14357
14364
|
height: 100%;
|
|
@@ -14360,41 +14367,40 @@ label.pf-c-check, .pf-c-check__label,
|
|
|
14360
14367
|
.pf-c-empty-state__content {
|
|
14361
14368
|
max-width: var(--pf-c-empty-state__content--MaxWidth);
|
|
14362
14369
|
}
|
|
14363
|
-
.pf-c-empty-state__content > .pf-c-title.pf-m-lg {
|
|
14364
|
-
font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
|
|
14365
|
-
}
|
|
14366
14370
|
|
|
14367
14371
|
.pf-c-empty-state__icon {
|
|
14368
14372
|
margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
|
|
14369
14373
|
font-size: var(--pf-c-empty-state__icon--FontSize);
|
|
14374
|
+
line-height: 1;
|
|
14370
14375
|
color: var(--pf-c-empty-state__icon--Color);
|
|
14371
14376
|
}
|
|
14372
14377
|
|
|
14378
|
+
.pf-c-empty-state__title-text {
|
|
14379
|
+
font-family: var(--pf-c-empty-state__title-text--FontFamily);
|
|
14380
|
+
font-size: var(--pf-c-empty-state__title-text--FontSize);
|
|
14381
|
+
font-weight: var(--pf-c-empty-state__title-text--FontWeight);
|
|
14382
|
+
line-height: var(--pf-c-empty-state__title-text--LineHeight);
|
|
14383
|
+
}
|
|
14384
|
+
|
|
14373
14385
|
.pf-c-empty-state__body {
|
|
14374
14386
|
margin-top: var(--pf-c-empty-state__body--MarginTop);
|
|
14387
|
+
font-size: var(--pf-c-empty-state--body--FontSize);
|
|
14375
14388
|
color: var(--pf-c-empty-state__body--Color);
|
|
14376
14389
|
}
|
|
14377
14390
|
|
|
14378
|
-
.pf-c-empty-
|
|
14379
|
-
|
|
14380
|
-
|
|
14381
|
-
|
|
14382
|
-
|
|
14383
|
-
|
|
14384
|
-
margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
|
|
14391
|
+
.pf-c-empty-state__footer {
|
|
14392
|
+
display: flex;
|
|
14393
|
+
flex-direction: column;
|
|
14394
|
+
align-items: center;
|
|
14395
|
+
row-gap: var(--pf-c-empty-state__footer--RowGap);
|
|
14396
|
+
margin-top: var(--pf-c-empty-state__footer--MarginTop);
|
|
14385
14397
|
}
|
|
14386
14398
|
|
|
14387
|
-
.pf-c-empty-
|
|
14399
|
+
.pf-c-empty-state__actions {
|
|
14388
14400
|
display: flex;
|
|
14389
14401
|
flex-wrap: wrap;
|
|
14390
14402
|
justify-content: center;
|
|
14391
|
-
|
|
14392
|
-
margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
|
|
14393
|
-
}
|
|
14394
|
-
.pf-c-empty-state__secondary > * {
|
|
14395
|
-
margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
|
|
14396
|
-
margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
|
|
14397
|
-
margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
|
|
14403
|
+
gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
|
|
14398
14404
|
}
|
|
14399
14405
|
|
|
14400
14406
|
.pf-c-expandable-section {
|