@patternfly/react-core 4.202.2 → 4.202.3

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.
@@ -21,494 +21,6 @@
21
21
  overflow: hidden;
22
22
  }
23
23
 
24
- .pf-c-accordion {
25
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
26
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
27
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
28
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
29
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
30
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
31
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
32
- }
33
-
34
- .pf-c-accordion {
35
- --pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100);
36
- --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm);
37
- --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
38
- --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
39
- --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
40
- --pf-c-accordion__toggle--before--BackgroundColor: transparent;
41
- --pf-c-accordion__toggle--before--Top: 0;
42
- --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
43
- --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
44
- --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
45
- --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
46
- --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
47
- --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
48
- --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
49
- --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
50
- --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
51
- --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
52
- --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
53
- --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
54
- --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
55
- --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
56
- --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
57
- --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
58
- --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
59
- --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
60
- --pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
61
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
62
- --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
63
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
64
- --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
65
- --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
66
- --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
67
- --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
68
- --pf-c-accordion__expanded-content-body--before--Top: 0;
69
- --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
70
- --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
71
- --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
72
- --pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg);
73
- --pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
74
- --pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl);
75
- --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100);
76
- --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100);
77
- --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
78
- --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100);
79
- --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
80
- --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
81
- --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
82
- --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
83
- --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
84
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
85
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
86
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
87
- --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
88
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
89
- --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
90
- --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
91
- --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
92
- --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
93
- --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
94
- --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
95
- --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
96
- --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
97
- color: var(--pf-global--Color--100);
98
- background-color: var(--pf-c-accordion--BackgroundColor);
99
- }
100
-
101
- .pf-c-accordion.pf-m-display-lg {
102
- --pf-c-accordion__toggle--PaddingTop: var(--pf-c-accordion--m-display-lg__toggle--PaddingTop);
103
- --pf-c-accordion__toggle--PaddingRight: var(--pf-c-accordion--m-display-lg__toggle--PaddingRight);
104
- --pf-c-accordion__toggle--PaddingBottom: var(--pf-c-accordion--m-display-lg__toggle--PaddingBottom);
105
- --pf-c-accordion__toggle--PaddingLeft: var(--pf-c-accordion--m-display-lg__toggle--PaddingLeft);
106
- --pf-c-accordion__toggle--FontFamily: var(--pf-c-accordion--m-display-lg__toggle--FontFamily);
107
- --pf-c-accordion__toggle--FontSize: var(--pf-c-accordion--m-display-lg__toggle--FontSize);
108
- --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color);
109
- --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color);
110
- --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight);
111
- --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color);
112
- --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
113
- --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
114
- --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
115
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
116
- --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
117
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
118
- --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
119
- --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
120
- --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
121
- }
122
-
123
- .pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child {
124
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
125
- }
126
-
127
- .pf-c-accordion.pf-m-bordered {
128
- --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
129
- border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
130
- }
131
-
132
- .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle::before {
133
- position: absolute;
134
- top: 0;
135
- right: 0;
136
- bottom: 0;
137
- left: 0;
138
- content: "";
139
- border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
140
- border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
141
- }
142
-
143
- .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded {
144
- --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
145
- }
146
-
147
- .pf-c-accordion.pf-m-bordered .pf-c-accordion__expanded-content.pf-m-expanded .pf-c-accordion__expanded-content-body:last-child::before {
148
- position: absolute;
149
- top: 0;
150
- right: 0;
151
- bottom: 0;
152
- left: 0;
153
- pointer-events: none;
154
- content: "";
155
- border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
156
- }
157
-
158
- .pf-c-accordion__toggle {
159
- position: relative;
160
- display: flex;
161
- align-items: center;
162
- justify-content: space-between;
163
- width: 100%;
164
- padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
165
- font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
166
- font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
167
- border: 0;
168
- }
169
-
170
- .pf-c-accordion__toggle::after {
171
- position: absolute;
172
- top: var(--pf-c-accordion__toggle--before--Top);
173
- bottom: 0;
174
- left: 0;
175
- width: var(--pf-c-accordion__toggle--before--Width);
176
- content: "";
177
- background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
178
- }
179
-
180
- .pf-c-accordion__toggle.pf-m-expanded {
181
- --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
182
- }
183
-
184
- .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-text {
185
- font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
186
- color: var(--pf-c-accordion__toggle--m-expanded__toggle-text--Color);
187
- }
188
-
189
- .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-icon {
190
- transform: rotate(var(--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
191
- }
192
-
193
- .pf-c-accordion__toggle:hover {
194
- background-color: var(--pf-c-accordion__toggle--hover--BackgroundColor);
195
- }
196
-
197
- .pf-c-accordion__toggle:hover .pf-c-accordion__toggle-text {
198
- color: var(--pf-c-accordion__toggle--hover__toggle-text--Color);
199
- }
200
-
201
- .pf-c-accordion__toggle:focus {
202
- background-color: var(--pf-c-accordion__toggle--focus--BackgroundColor);
203
- }
204
-
205
- .pf-c-accordion__toggle:focus .pf-c-accordion__toggle-text {
206
- font-weight: var(--pf-c-accordion__toggle--focus__toggle-text--FontWeight);
207
- color: var(--pf-c-accordion__toggle--focus__toggle-text--Color);
208
- }
209
-
210
- .pf-c-accordion__toggle:active {
211
- background-color: var(--pf-c-accordion__toggle--active--BackgroundColor);
212
- }
213
-
214
- .pf-c-accordion__toggle:active .pf-c-accordion__toggle-text {
215
- font-weight: var(--pf-c-accordion__toggle--active__toggle-text--FontWeight);
216
- color: var(--pf-c-accordion__toggle--active__toggle-text--Color);
217
- }
218
-
219
- .pf-c-accordion__toggle-text {
220
- overflow: hidden;
221
- text-overflow: ellipsis;
222
- white-space: nowrap;
223
- max-width: var(--pf-c-accordion__toggle-text--MaxWidth);
224
- }
225
-
226
- .pf-c-accordion__toggle-icon {
227
- transition: var(--pf-c-accordion__toggle-icon--Transition);
228
- }
229
-
230
- .pf-c-accordion__expanded-content {
231
- font-size: var(--pf-c-accordion__expanded-content--FontSize);
232
- color: var(--pf-c-accordion__expanded-content--Color);
233
- }
234
-
235
- .pf-c-accordion__expanded-content.pf-m-fixed {
236
- max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
237
- overflow-y: auto;
238
- }
239
-
240
- .pf-c-accordion__expanded-content.pf-m-expanded {
241
- --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
242
- }
243
-
244
- .pf-c-accordion__expanded-content-body {
245
- position: relative;
246
- padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
247
- }
248
-
249
- .pf-c-accordion__expanded-content-body::after {
250
- position: absolute;
251
- top: 0;
252
- bottom: 0;
253
- left: 0;
254
- width: var(--pf-c-accordion__expanded-content-body--before--Width);
255
- content: "";
256
- background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
257
- }
258
-
259
- .pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body {
260
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
261
- }
262
-
263
- .pf-c-action-list {
264
- --pf-c-action-list--m-icon--spacer: 0;
265
- --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
266
- --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
267
- }
268
-
269
- .pf-c-action-list,
270
- .pf-c-action-list__group {
271
- --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
272
- --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
273
- display: flex;
274
- align-items: center;
275
- }
276
-
277
- .pf-c-action-list > * + *,
278
- .pf-c-action-list__group > * + * {
279
- margin-left: var(--pf-c-action-list--child--spacer);
280
- }
281
-
282
- .pf-c-action-list > * + .pf-c-action-list__group,
283
- .pf-c-action-list .pf-c-action-list__group + *,
284
- .pf-c-action-list__group > * + .pf-c-action-list__group,
285
- .pf-c-action-list__group .pf-c-action-list__group + * {
286
- margin-left: var(--pf-c-action-list--group--spacer);
287
- }
288
-
289
- .pf-c-action-list.pf-m-icons,
290
- .pf-c-action-list__group.pf-m-icons {
291
- --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
292
- }
293
-
294
- .pf-c-alert {
295
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
296
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
297
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
298
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
299
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
300
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
301
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
302
- }
303
-
304
- .pf-c-alert {
305
- --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
306
- --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
307
- --pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
308
- --pf-c-alert--GridTemplateAreas:
309
- "icon title action"
310
- ". description description"
311
- ". actiongroup actiongroup";
312
- --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
313
- --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
314
- --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
315
- --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
316
- --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
317
- --pf-c-alert--PaddingLeft: var(--pf-global--spacer--md);
318
- --pf-c-alert__FontSize: var(--pf-global--FontSize--sm);
319
- --pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element) - 0.0625rem);
320
- --pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
321
- --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
322
- --pf-c-alert__toggle-icon--Rotate: 0;
323
- --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
324
- --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
325
- --pf-c-alert__icon--MarginTop: 0.0625rem;
326
- --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
327
- --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
328
- --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
329
- --pf-c-alert__title--Color: var(--pf-global--default-color--300);
330
- --pf-c-alert__title--max-lines: 1;
331
- --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
332
- --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
333
- --pf-c-alert__action--TranslateY: 0.125rem;
334
- --pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm) * -1);
335
- --pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs);
336
- --pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs);
337
- --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
338
- --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md);
339
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
340
- --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
341
- --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
342
- --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
343
- --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);
344
- --pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100);
345
- --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100);
346
- --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200);
347
- --pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100);
348
- --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100);
349
- --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200);
350
- --pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100);
351
- --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100);
352
- --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);
353
- --pf-c-alert--m-inline--BoxShadow: none;
354
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
355
- --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
356
- --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50);
357
- --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50);
358
- --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50);
359
- --pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
360
- --pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
361
- --pf-c-alert--m-inline--m-plain--PaddingTop: 0;
362
- --pf-c-alert--m-inline--m-plain--PaddingRight: 0;
363
- --pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
364
- --pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
365
- --pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
366
- --pf-c-alert--m-expandable--GridTemplateAreas:
367
- "toggle icon title action"
368
- ". . description description"
369
- ". . actiongroup actiongroup";
370
- --pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
371
- --pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
372
- --pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
373
- color: var(--pf-global--Color--100);
374
- position: relative;
375
- display: grid;
376
- padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
377
- font-size: var(--pf-c-alert__FontSize);
378
- background-color: var(--pf-c-alert--BackgroundColor);
379
- border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
380
- box-shadow: var(--pf-c-alert--BoxShadow);
381
- grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
382
- grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
383
- }
384
-
385
- .pf-c-alert.pf-m-success {
386
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
387
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
388
- --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
389
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
390
- }
391
-
392
- .pf-c-alert.pf-m-danger {
393
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
394
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
395
- --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
396
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
397
- }
398
-
399
- .pf-c-alert.pf-m-warning {
400
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
401
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
402
- --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
403
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
404
- }
405
-
406
- .pf-c-alert.pf-m-info {
407
- --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
408
- --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
409
- --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
410
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
411
- }
412
-
413
- .pf-c-alert.pf-m-inline {
414
- --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
415
- --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
416
- }
417
-
418
- .pf-c-alert.pf-m-plain {
419
- --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
420
- --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
421
- --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
422
- --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
423
- --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
424
- --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
425
- }
426
-
427
- .pf-c-alert.pf-m-expandable {
428
- --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
429
- --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
430
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
431
- }
432
-
433
- .pf-c-alert.pf-m-expanded {
434
- --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
435
- --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
436
- }
437
-
438
- .pf-c-alert__toggle {
439
- margin-top: var(--pf-c-alert__toggle--MarginTop);
440
- margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
441
- margin-left: var(--pf-c-alert__toggle--MarginLeft);
442
- }
443
-
444
- .pf-c-alert__toggle-icon {
445
- display: inline-block;
446
- transition: var(--pf-c-alert__toggle-icon--Transition);
447
- transform: rotate(var(--pf-c-alert__toggle-icon--Rotate));
448
- }
449
-
450
- .pf-c-alert__icon {
451
- grid-area: icon;
452
- display: flex;
453
- margin-top: var(--pf-c-alert__icon--MarginTop);
454
- margin-right: var(--pf-c-alert__icon--MarginRight);
455
- font-size: var(--pf-c-alert__icon--FontSize);
456
- color: var(--pf-c-alert__icon--Color);
457
- }
458
-
459
- .pf-c-alert__title {
460
- grid-area: title;
461
- font-weight: var(--pf-c-alert__title--FontWeight);
462
- color: var(--pf-c-alert__title--Color);
463
- word-break: break-word;
464
- }
465
-
466
- .pf-c-alert__title.pf-m-truncate {
467
- display: -webkit-box;
468
- -webkit-box-orient: vertical;
469
- -webkit-line-clamp: var(--pf-c-alert__title--max-lines);
470
- overflow: hidden;
471
- }
472
-
473
- .pf-c-alert__description {
474
- grid-area: description;
475
- padding-top: var(--pf-c-alert__description--PaddingTop);
476
- word-break: break-word;
477
- }
478
-
479
- .pf-c-alert__description + .pf-c-alert__action-group {
480
- --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
481
- }
482
-
483
- .pf-c-alert__action {
484
- grid-area: action;
485
- margin-top: var(--pf-c-alert__action--MarginTop);
486
- margin-right: var(--pf-c-alert__action--MarginRight);
487
- margin-bottom: var(--pf-c-alert__action--MarginBottom);
488
- transform: translateY(var(--pf-c-alert__action--TranslateY));
489
- }
490
-
491
- .pf-c-alert__action > .pf-c-button {
492
- --pf-c-button--LineHeight: 1;
493
- }
494
-
495
- .pf-c-alert__action-group {
496
- grid-area: actiongroup;
497
- padding-top: var(--pf-c-alert__action-group--PaddingTop);
498
- }
499
-
500
- .pf-c-alert__action-group > .pf-c-button {
501
- --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
502
- }
503
-
504
- .pf-c-alert__action-group > .pf-c-button:not(:last-child) {
505
- margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
506
- }
507
-
508
- .pf-m-overpass-font .pf-c-alert__title {
509
- --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
510
- }
511
-
512
24
  .pf-c-app-launcher {
513
25
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
514
26
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -1003,226 +515,79 @@
1003
515
  --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
1004
516
  }
1005
517
 
1006
- .pf-c-form-control.pf-m-icon-sprite {
1007
- --pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
1008
- --pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
1009
- --pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
1010
- --pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
1011
- --pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
1012
- --pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
1013
- --pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
1014
- --pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
1015
- --pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
1016
- --pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
1017
- --pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
1018
- --pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
1019
- }
1020
-
1021
- select.pf-c-form-control {
1022
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
1023
- --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
1024
- background-image: var(--pf-c-form-control__select--BackgroundUrl);
1025
- background-position: var(--pf-c-form-control__select--BackgroundPosition);
1026
- background-size: var(--pf-c-form-control__select--BackgroundSize);
1027
- }
1028
-
1029
- @-moz-document url-prefix() {
1030
- select.pf-c-form-control {
1031
- --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
1032
- --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
1033
- }
1034
- }
1035
- select.pf-c-form-control[aria-invalid=true] {
1036
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
1037
- --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
1038
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--invalid--BackgroundUrl);
1039
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--invalid--BackgroundPosition);
1040
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--invalid--BackgroundSize);
1041
- }
1042
-
1043
- select.pf-c-form-control.pf-m-success {
1044
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
1045
- --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
1046
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
1047
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
1048
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
1049
- }
1050
-
1051
- select.pf-c-form-control.pf-m-warning {
1052
- --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
1053
- background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
1054
- background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
1055
- background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
1056
- }
1057
-
1058
- select.pf-c-form-control.pf-m-placeholder {
1059
- color: var(--pf-c-form-control--placeholder--Color);
1060
- }
1061
-
1062
- textarea.pf-c-form-control {
1063
- --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
1064
- --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
1065
- --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
1066
- width: var(--pf-c-form-control--textarea--Width);
1067
- height: var(--pf-c-form-control--textarea--Height);
1068
- vertical-align: bottom;
1069
- }
1070
-
1071
- .pf-c-form-control.pf-m-resize-vertical {
1072
- resize: vertical;
1073
- }
1074
-
1075
- .pf-c-form-control.pf-m-resize-horizontal {
1076
- resize: horizontal;
1077
- }
1078
-
1079
- .pf-u-screen-reader {
1080
- position: fixed;
1081
- top: 0;
1082
- left: 0;
1083
- overflow: hidden;
1084
- clip: rect(0, 0, 0, 0);
1085
- white-space: nowrap;
1086
- border: 0;
1087
- }
1088
-
1089
- .pf-u-visible {
1090
- position: static;
1091
- overflow: visible;
1092
- clip: auto;
1093
- white-space: normal;
1094
- border: inherit;
1095
- }
1096
-
1097
- .pf-u-hidden {
1098
- display: none !important;
1099
- }
1100
-
1101
- @media screen and (min-width: 576px) {
1102
- .pf-u-screen-reader-on-sm {
1103
- position: fixed;
1104
- top: 0;
1105
- left: 0;
1106
- overflow: hidden;
1107
- clip: rect(0, 0, 0, 0);
1108
- white-space: nowrap;
1109
- border: 0;
1110
- }
1111
- }
1112
- @media screen and (min-width: 576px) {
1113
- .pf-u-visible-on-sm {
1114
- position: static;
1115
- overflow: visible;
1116
- clip: auto;
1117
- white-space: normal;
1118
- border: inherit;
1119
- }
1120
- }
1121
- @media screen and (min-width: 576px) {
1122
- .pf-u-hidden-on-sm {
1123
- display: none !important;
1124
- }
1125
- }
1126
- @media screen and (min-width: 768px) {
1127
- .pf-u-screen-reader-on-md {
1128
- position: fixed;
1129
- top: 0;
1130
- left: 0;
1131
- overflow: hidden;
1132
- clip: rect(0, 0, 0, 0);
1133
- white-space: nowrap;
1134
- border: 0;
1135
- }
1136
- }
1137
- @media screen and (min-width: 768px) {
1138
- .pf-u-visible-on-md {
1139
- position: static;
1140
- overflow: visible;
1141
- clip: auto;
1142
- white-space: normal;
1143
- border: inherit;
1144
- }
1145
- }
1146
- @media screen and (min-width: 768px) {
1147
- .pf-u-hidden-on-md {
1148
- display: none !important;
1149
- }
518
+ .pf-c-form-control.pf-m-icon-sprite {
519
+ --pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
520
+ --pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
521
+ --pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
522
+ --pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
523
+ --pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
524
+ --pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
525
+ --pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
526
+ --pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
527
+ --pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
528
+ --pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
529
+ --pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
530
+ --pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
1150
531
  }
1151
- @media screen and (min-width: 992px) {
1152
- .pf-u-screen-reader-on-lg {
1153
- position: fixed;
1154
- top: 0;
1155
- left: 0;
1156
- overflow: hidden;
1157
- clip: rect(0, 0, 0, 0);
1158
- white-space: nowrap;
1159
- border: 0;
1160
- }
532
+
533
+ select.pf-c-form-control {
534
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
535
+ --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
536
+ background-image: var(--pf-c-form-control__select--BackgroundUrl);
537
+ background-position: var(--pf-c-form-control__select--BackgroundPosition);
538
+ background-size: var(--pf-c-form-control__select--BackgroundSize);
1161
539
  }
1162
- @media screen and (min-width: 992px) {
1163
- .pf-u-visible-on-lg {
1164
- position: static;
1165
- overflow: visible;
1166
- clip: auto;
1167
- white-space: normal;
1168
- border: inherit;
540
+
541
+ @-moz-document url-prefix() {
542
+ select.pf-c-form-control {
543
+ --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
544
+ --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
1169
545
  }
1170
546
  }
1171
- @media screen and (min-width: 992px) {
1172
- .pf-u-hidden-on-lg {
1173
- display: none !important;
1174
- }
547
+ select.pf-c-form-control[aria-invalid=true] {
548
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
549
+ --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);
550
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--invalid--BackgroundUrl);
551
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--invalid--BackgroundPosition);
552
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--invalid--BackgroundSize);
1175
553
  }
1176
- @media screen and (min-width: 1200px) {
1177
- .pf-u-screen-reader-on-xl {
1178
- position: fixed;
1179
- top: 0;
1180
- left: 0;
1181
- overflow: hidden;
1182
- clip: rect(0, 0, 0, 0);
1183
- white-space: nowrap;
1184
- border: 0;
1185
- }
554
+
555
+ select.pf-c-form-control.pf-m-success {
556
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--success--PaddingRight);
557
+ --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control__select--success--BackgroundPosition);
558
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--success--BackgroundUrl);
559
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control--success--BackgroundPosition);
560
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--success--BackgroundSize);
1186
561
  }
1187
- @media screen and (min-width: 1200px) {
1188
- .pf-u-visible-on-xl {
1189
- position: static;
1190
- overflow: visible;
1191
- clip: auto;
1192
- white-space: normal;
1193
- border: inherit;
1194
- }
562
+
563
+ select.pf-c-form-control.pf-m-warning {
564
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--m-warning--PaddingRight);
565
+ background-image: var(--pf-c-form-control__select--BackgroundUrl), var(--pf-c-form-control--m-warning--BackgroundUrl);
566
+ background-position: var(--pf-c-form-control__select--BackgroundPosition), var(--pf-c-form-control__select--m-warning--BackgroundPosition);
567
+ background-size: var(--pf-c-form-control__select--BackgroundSize), var(--pf-c-form-control--m-warning--BackgroundSize);
1195
568
  }
1196
- @media screen and (min-width: 1200px) {
1197
- .pf-u-hidden-on-xl {
1198
- display: none !important;
1199
- }
569
+
570
+ select.pf-c-form-control.pf-m-placeholder {
571
+ color: var(--pf-c-form-control--placeholder--Color);
1200
572
  }
1201
- @media screen and (min-width: 1450px) {
1202
- .pf-u-screen-reader-on-2xl {
1203
- position: fixed;
1204
- top: 0;
1205
- left: 0;
1206
- overflow: hidden;
1207
- clip: rect(0, 0, 0, 0);
1208
- white-space: nowrap;
1209
- border: 0;
1210
- }
573
+
574
+ textarea.pf-c-form-control {
575
+ --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
576
+ --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
577
+ --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
578
+ width: var(--pf-c-form-control--textarea--Width);
579
+ height: var(--pf-c-form-control--textarea--Height);
580
+ vertical-align: bottom;
1211
581
  }
1212
- @media screen and (min-width: 1450px) {
1213
- .pf-u-visible-on-2xl {
1214
- position: static;
1215
- overflow: visible;
1216
- clip: auto;
1217
- white-space: normal;
1218
- border: inherit;
1219
- }
582
+
583
+ .pf-c-form-control.pf-m-resize-vertical {
584
+ resize: vertical;
1220
585
  }
1221
- @media screen and (min-width: 1450px) {
1222
- .pf-u-hidden-on-2xl {
1223
- display: none !important;
1224
- }
586
+
587
+ .pf-c-form-control.pf-m-resize-horizontal {
588
+ resize: horizontal;
1225
589
  }
590
+
1226
591
  .pf-c-avatar {
1227
592
  --pf-c-avatar--BorderColor: transparent;
1228
593
  --pf-c-avatar--BorderWidth: 0;
@@ -1818,27 +1183,174 @@ button.pf-c-breadcrumb__link {
1818
1183
  .pf-c-breadcrumb__dropdown .pf-c-dropdown__toggle {
1819
1184
  line-height: var(--pf-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
1820
1185
  }
1821
-
1822
- .pf-c-breadcrumb__heading {
1823
- display: inline;
1824
- font-size: var(--pf-c-breadcrumb__heading--FontSize);
1186
+
1187
+ .pf-c-breadcrumb__heading {
1188
+ display: inline;
1189
+ font-size: var(--pf-c-breadcrumb__heading--FontSize);
1190
+ }
1191
+
1192
+ .pf-c-breadcrumb__link,
1193
+ .pf-c-breadcrumb__heading {
1194
+ white-space: normal;
1195
+ }
1196
+
1197
+ .pf-m-overpass-font .pf-c-breadcrumb__link,
1198
+ .pf-m-overpass-font .pf-c-breadcrumb__item {
1199
+ font-weight: var(--pf-global--FontWeight--semi-bold);
1200
+ }
1201
+
1202
+ .pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
1203
+ display: none;
1204
+ visibility: hidden;
1205
+ }
1206
+
1207
+ .pf-u-screen-reader {
1208
+ position: fixed;
1209
+ top: 0;
1210
+ left: 0;
1211
+ overflow: hidden;
1212
+ clip: rect(0, 0, 0, 0);
1213
+ white-space: nowrap;
1214
+ border: 0;
1215
+ }
1216
+
1217
+ .pf-u-visible {
1218
+ position: static;
1219
+ overflow: visible;
1220
+ clip: auto;
1221
+ white-space: normal;
1222
+ border: inherit;
1223
+ }
1224
+
1225
+ .pf-u-hidden {
1226
+ display: none !important;
1227
+ }
1228
+
1229
+ @media screen and (min-width: 576px) {
1230
+ .pf-u-screen-reader-on-sm {
1231
+ position: fixed;
1232
+ top: 0;
1233
+ left: 0;
1234
+ overflow: hidden;
1235
+ clip: rect(0, 0, 0, 0);
1236
+ white-space: nowrap;
1237
+ border: 0;
1238
+ }
1239
+ }
1240
+ @media screen and (min-width: 576px) {
1241
+ .pf-u-visible-on-sm {
1242
+ position: static;
1243
+ overflow: visible;
1244
+ clip: auto;
1245
+ white-space: normal;
1246
+ border: inherit;
1247
+ }
1248
+ }
1249
+ @media screen and (min-width: 576px) {
1250
+ .pf-u-hidden-on-sm {
1251
+ display: none !important;
1252
+ }
1253
+ }
1254
+ @media screen and (min-width: 768px) {
1255
+ .pf-u-screen-reader-on-md {
1256
+ position: fixed;
1257
+ top: 0;
1258
+ left: 0;
1259
+ overflow: hidden;
1260
+ clip: rect(0, 0, 0, 0);
1261
+ white-space: nowrap;
1262
+ border: 0;
1263
+ }
1264
+ }
1265
+ @media screen and (min-width: 768px) {
1266
+ .pf-u-visible-on-md {
1267
+ position: static;
1268
+ overflow: visible;
1269
+ clip: auto;
1270
+ white-space: normal;
1271
+ border: inherit;
1272
+ }
1273
+ }
1274
+ @media screen and (min-width: 768px) {
1275
+ .pf-u-hidden-on-md {
1276
+ display: none !important;
1277
+ }
1278
+ }
1279
+ @media screen and (min-width: 992px) {
1280
+ .pf-u-screen-reader-on-lg {
1281
+ position: fixed;
1282
+ top: 0;
1283
+ left: 0;
1284
+ overflow: hidden;
1285
+ clip: rect(0, 0, 0, 0);
1286
+ white-space: nowrap;
1287
+ border: 0;
1288
+ }
1289
+ }
1290
+ @media screen and (min-width: 992px) {
1291
+ .pf-u-visible-on-lg {
1292
+ position: static;
1293
+ overflow: visible;
1294
+ clip: auto;
1295
+ white-space: normal;
1296
+ border: inherit;
1297
+ }
1298
+ }
1299
+ @media screen and (min-width: 992px) {
1300
+ .pf-u-hidden-on-lg {
1301
+ display: none !important;
1302
+ }
1303
+ }
1304
+ @media screen and (min-width: 1200px) {
1305
+ .pf-u-screen-reader-on-xl {
1306
+ position: fixed;
1307
+ top: 0;
1308
+ left: 0;
1309
+ overflow: hidden;
1310
+ clip: rect(0, 0, 0, 0);
1311
+ white-space: nowrap;
1312
+ border: 0;
1313
+ }
1314
+ }
1315
+ @media screen and (min-width: 1200px) {
1316
+ .pf-u-visible-on-xl {
1317
+ position: static;
1318
+ overflow: visible;
1319
+ clip: auto;
1320
+ white-space: normal;
1321
+ border: inherit;
1322
+ }
1825
1323
  }
1826
-
1827
- .pf-c-breadcrumb__link,
1828
- .pf-c-breadcrumb__heading {
1829
- white-space: normal;
1324
+ @media screen and (min-width: 1200px) {
1325
+ .pf-u-hidden-on-xl {
1326
+ display: none !important;
1327
+ }
1830
1328
  }
1831
-
1832
- .pf-m-overpass-font .pf-c-breadcrumb__link,
1833
- .pf-m-overpass-font .pf-c-breadcrumb__item {
1834
- font-weight: var(--pf-global--FontWeight--semi-bold);
1329
+ @media screen and (min-width: 1450px) {
1330
+ .pf-u-screen-reader-on-2xl {
1331
+ position: fixed;
1332
+ top: 0;
1333
+ left: 0;
1334
+ overflow: hidden;
1335
+ clip: rect(0, 0, 0, 0);
1336
+ white-space: nowrap;
1337
+ border: 0;
1338
+ }
1835
1339
  }
1836
-
1837
- .pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
1838
- display: none;
1839
- visibility: hidden;
1340
+ @media screen and (min-width: 1450px) {
1341
+ .pf-u-visible-on-2xl {
1342
+ position: static;
1343
+ overflow: visible;
1344
+ clip: auto;
1345
+ white-space: normal;
1346
+ border: inherit;
1347
+ }
1348
+ }
1349
+ @media screen and (min-width: 1450px) {
1350
+ .pf-u-hidden-on-2xl {
1351
+ display: none !important;
1352
+ }
1840
1353
  }
1841
-
1842
1354
  .pf-c-button {
1843
1355
  --pf-c-button--PaddingTop: var(--pf-global--spacer--form-element);
1844
1356
  --pf-c-button--PaddingRight: var(--pf-global--spacer--md);
@@ -2010,1004 +1522,1437 @@ button.pf-c-breadcrumb__link {
2010
1522
  border-radius: var(--pf-c-button--BorderRadius);
2011
1523
  }
2012
1524
 
2013
- .pf-c-button::after {
2014
- position: absolute;
2015
- top: 0;
2016
- right: 0;
2017
- bottom: 0;
2018
- left: 0;
2019
- pointer-events: none;
2020
- content: "";
2021
- border: var(--pf-c-button--after--BorderWidth) solid;
2022
- border-color: var(--pf-c-button--after--BorderColor);
2023
- border-radius: var(--pf-c-button--after--BorderRadius);
1525
+ .pf-c-button::after {
1526
+ position: absolute;
1527
+ top: 0;
1528
+ right: 0;
1529
+ bottom: 0;
1530
+ left: 0;
1531
+ pointer-events: none;
1532
+ content: "";
1533
+ border: var(--pf-c-button--after--BorderWidth) solid;
1534
+ border-color: var(--pf-c-button--after--BorderColor);
1535
+ border-radius: var(--pf-c-button--after--BorderRadius);
1536
+ }
1537
+
1538
+ .pf-c-button:hover {
1539
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth);
1540
+ text-decoration: none;
1541
+ }
1542
+
1543
+ .pf-c-button:focus {
1544
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth);
1545
+ }
1546
+
1547
+ .pf-c-button:active, .pf-c-button.pf-m-active {
1548
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth);
1549
+ }
1550
+
1551
+ .pf-c-button.pf-m-block {
1552
+ display: block;
1553
+ width: 100%;
1554
+ }
1555
+
1556
+ .pf-c-button.pf-m-small {
1557
+ --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize);
1558
+ }
1559
+
1560
+ .pf-c-button.pf-m-primary.pf-m-display-lg, .pf-c-button.pf-m-secondary.pf-m-display-lg, .pf-c-button.pf-m-tertiary.pf-m-display-lg, .pf-c-button.pf-m-link.pf-m-display-lg {
1561
+ --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop);
1562
+ --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight);
1563
+ --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom);
1564
+ --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft);
1565
+ --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight);
1566
+ }
1567
+
1568
+ .pf-c-button.pf-m-primary {
1569
+ color: var(--pf-c-button--m-primary--Color);
1570
+ background-color: var(--pf-c-button--m-primary--BackgroundColor);
1571
+ }
1572
+
1573
+ .pf-c-button.pf-m-primary:hover {
1574
+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color);
1575
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor);
1576
+ }
1577
+
1578
+ .pf-c-button.pf-m-primary:focus {
1579
+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color);
1580
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor);
1581
+ }
1582
+
1583
+ .pf-c-button.pf-m-primary:active, .pf-c-button.pf-m-primary.pf-m-active {
1584
+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
1585
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
1586
+ }
1587
+
1588
+ .pf-c-button.pf-m-secondary {
1589
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);
1590
+ color: var(--pf-c-button--m-secondary--Color);
1591
+ background-color: var(--pf-c-button--m-secondary--BackgroundColor);
1592
+ }
1593
+
1594
+ .pf-c-button.pf-m-secondary:hover {
1595
+ --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color);
1596
+ --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor);
1597
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor);
1598
+ }
1599
+
1600
+ .pf-c-button.pf-m-secondary:focus {
1601
+ --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color);
1602
+ --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor);
1603
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor);
1604
+ }
1605
+
1606
+ .pf-c-button.pf-m-secondary.pf-m-active, .pf-c-button.pf-m-secondary:active {
1607
+ --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color);
1608
+ --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor);
1609
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor);
1610
+ }
1611
+
1612
+ .pf-c-button.pf-m-tertiary {
1613
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor);
1614
+ color: var(--pf-c-button--m-tertiary--Color);
1615
+ background-color: var(--pf-c-button--m-tertiary--BackgroundColor);
1616
+ }
1617
+
1618
+ .pf-c-button.pf-m-tertiary:hover {
1619
+ --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color);
1620
+ --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor);
1621
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor);
1622
+ }
1623
+
1624
+ .pf-c-button.pf-m-tertiary:focus {
1625
+ --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color);
1626
+ --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor);
1627
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor);
1628
+ }
1629
+
1630
+ .pf-c-button.pf-m-tertiary:active, .pf-c-button.pf-m-tertiary.pf-m-active {
1631
+ --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color);
1632
+ --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor);
1633
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor);
1634
+ }
1635
+
1636
+ .pf-c-button.pf-m-link {
1637
+ --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
1638
+ color: var(--pf-c-button--m-link--Color);
1639
+ background-color: var(--pf-c-button--m-link--BackgroundColor);
1640
+ }
1641
+
1642
+ .pf-c-button.pf-m-link:not(.pf-m-inline):hover {
1643
+ --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color);
1644
+ --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor);
1645
+ }
1646
+
1647
+ .pf-c-button.pf-m-link:not(.pf-m-inline):focus {
1648
+ --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color);
1649
+ --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--focus--BackgroundColor);
1650
+ }
1651
+
1652
+ .pf-c-button.pf-m-link:not(.pf-m-inline):active, .pf-c-button.pf-m-link:not(.pf-m-inline).pf-m-active {
1653
+ --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color);
1654
+ --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor);
1655
+ }
1656
+
1657
+ .pf-c-button.pf-m-link.pf-m-inline {
1658
+ --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
1659
+ display: inline;
1660
+ padding: 0;
1661
+ text-align: left;
1662
+ white-space: normal;
1663
+ cursor: pointer;
1664
+ }
1665
+
1666
+ .pf-c-button.pf-m-link.pf-m-inline:hover {
1667
+ --pf-c-button--m-link--Color: var(--pf-c-button--m-link--m-inline--hover--Color);
1668
+ text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
1669
+ }
1670
+
1671
+ .pf-c-button.pf-m-link.pf-m-display-lg {
1672
+ --pf-c-button--FontSize: var(--pf-c-button--m-link--m-display-lg--FontSize);
1673
+ }
1674
+
1675
+ .pf-c-button.pf-m-danger {
1676
+ color: var(--pf-c-button--m-danger--Color);
1677
+ background-color: var(--pf-c-button--m-danger--BackgroundColor);
1678
+ }
1679
+
1680
+ .pf-c-button.pf-m-danger:hover {
1681
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color);
1682
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor);
1683
+ }
1684
+
1685
+ .pf-c-button.pf-m-danger:focus {
1686
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color);
1687
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor);
1688
+ }
1689
+
1690
+ .pf-c-button.pf-m-danger:active, .pf-c-button.pf-m-danger.pf-m-active {
1691
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color);
1692
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor);
1693
+ }
1694
+
1695
+ .pf-c-button.pf-m-danger.pf-m-secondary {
1696
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color);
1697
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor);
1698
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor);
1699
+ }
1700
+
1701
+ .pf-c-button.pf-m-danger.pf-m-secondary:hover {
1702
+ --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color);
1703
+ --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor);
1704
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor);
1705
+ }
1706
+
1707
+ .pf-c-button.pf-m-danger.pf-m-secondary:focus {
1708
+ --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--focus--Color);
1709
+ --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor);
1710
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor);
1711
+ }
1712
+
1713
+ .pf-c-button.pf-m-danger.pf-m-secondary:active, .pf-c-button.pf-m-danger.pf-m-secondary.pf-m-active {
1714
+ --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color);
1715
+ --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor);
1716
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor);
1717
+ }
1718
+
1719
+ .pf-c-button.pf-m-danger.pf-m-link {
1720
+ --pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color);
1721
+ --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor);
1722
+ }
1723
+
1724
+ .pf-c-button.pf-m-danger.pf-m-link:hover {
1725
+ --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--hover--Color);
1726
+ --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--hover--BackgroundColor);
1727
+ }
1728
+
1729
+ .pf-c-button.pf-m-danger.pf-m-link:focus {
1730
+ --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--focus--Color);
1731
+ --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor);
2024
1732
  }
2025
1733
 
2026
- .pf-c-button:hover {
2027
- --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth);
2028
- text-decoration: none;
1734
+ .pf-c-button.pf-m-danger.pf-m-link:active, .pf-c-button.pf-m-danger.pf-m-link.pf-m-active {
1735
+ --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color);
1736
+ --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor);
2029
1737
  }
2030
1738
 
2031
- .pf-c-button:focus {
2032
- --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth);
1739
+ .pf-c-button.pf-m-warning {
1740
+ color: var(--pf-c-button--m-warning--Color);
1741
+ background-color: var(--pf-c-button--m-warning--BackgroundColor);
2033
1742
  }
2034
1743
 
2035
- .pf-c-button:active, .pf-c-button.pf-m-active {
2036
- --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth);
1744
+ .pf-c-button.pf-m-warning:hover {
1745
+ --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--hover--Color);
1746
+ --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor);
2037
1747
  }
2038
1748
 
2039
- .pf-c-button.pf-m-block {
2040
- display: block;
2041
- width: 100%;
1749
+ .pf-c-button.pf-m-warning:focus {
1750
+ --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color);
1751
+ --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--focus--BackgroundColor);
2042
1752
  }
2043
1753
 
2044
- .pf-c-button.pf-m-small {
2045
- --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize);
1754
+ .pf-c-button.pf-m-warning:active, .pf-c-button.pf-m-warning.pf-m-active {
1755
+ --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color);
1756
+ --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor);
2046
1757
  }
2047
1758
 
2048
- .pf-c-button.pf-m-primary.pf-m-display-lg, .pf-c-button.pf-m-secondary.pf-m-display-lg, .pf-c-button.pf-m-tertiary.pf-m-display-lg, .pf-c-button.pf-m-link.pf-m-display-lg {
2049
- --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop);
2050
- --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight);
2051
- --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom);
2052
- --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft);
2053
- --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight);
1759
+ .pf-c-button.pf-m-control {
1760
+ --pf-c-button--BorderRadius: var(--pf-c-button--m-control--BorderRadius);
1761
+ --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-control--disabled--BackgroundColor);
1762
+ --pf-c-button--after--BorderWidth: var(--pf-c-button--m-control--after--BorderWidth);
1763
+ --pf-c-button--after--BorderColor: var(--pf-c-button--m-control--after--BorderTopColor) var(--pf-c-button--m-control--after--BorderRightColor) var(--pf-c-button--m-control--after--BorderBottomColor) var(--pf-c-button--m-control--after--BorderLeftColor);
1764
+ color: var(--pf-c-button--m-control--Color);
1765
+ background-color: var(--pf-c-button--m-control--BackgroundColor);
2054
1766
  }
2055
1767
 
2056
- .pf-c-button.pf-m-primary {
2057
- color: var(--pf-c-button--m-primary--Color);
2058
- background-color: var(--pf-c-button--m-primary--BackgroundColor);
1768
+ .pf-c-button.pf-m-control::after {
1769
+ border-radius: initial;
2059
1770
  }
2060
1771
 
2061
- .pf-c-button.pf-m-primary:hover {
2062
- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color);
2063
- --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor);
1772
+ .pf-c-button.pf-m-control:hover {
1773
+ --pf-c-button--m-control--Color: var(--pf-c-button--m-control--hover--Color);
1774
+ --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor);
1775
+ --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--hover--after--BorderBottomColor);
2064
1776
  }
2065
1777
 
2066
- .pf-c-button.pf-m-primary:focus {
2067
- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color);
2068
- --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor);
1778
+ .pf-c-button.pf-m-control:hover::after {
1779
+ border-bottom-width: var(--pf-c-button--m-control--hover--after--BorderBottomWidth);
2069
1780
  }
2070
1781
 
2071
- .pf-c-button.pf-m-primary:active, .pf-c-button.pf-m-primary.pf-m-active {
2072
- --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color);
2073
- --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor);
1782
+ .pf-c-button.pf-m-control:active, .pf-c-button.pf-m-control.pf-m-active {
1783
+ --pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color);
1784
+ --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor);
1785
+ --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor);
2074
1786
  }
2075
1787
 
2076
- .pf-c-button.pf-m-secondary {
2077
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor);
2078
- color: var(--pf-c-button--m-secondary--Color);
2079
- background-color: var(--pf-c-button--m-secondary--BackgroundColor);
1788
+ .pf-c-button.pf-m-control:active::after, .pf-c-button.pf-m-control.pf-m-active::after {
1789
+ border-bottom-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth);
2080
1790
  }
2081
1791
 
2082
- .pf-c-button.pf-m-secondary:hover {
2083
- --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color);
2084
- --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor);
2085
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor);
1792
+ .pf-c-button.pf-m-control:focus {
1793
+ --pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color);
1794
+ --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--focus--BackgroundColor);
1795
+ --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--focus--after--BorderBottomColor);
2086
1796
  }
2087
1797
 
2088
- .pf-c-button.pf-m-secondary:focus {
2089
- --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color);
2090
- --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor);
2091
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor);
1798
+ .pf-c-button.pf-m-control:focus::after {
1799
+ border-bottom-width: var(--pf-c-button--m-control--focus--after--BorderBottomWidth);
2092
1800
  }
2093
1801
 
2094
- .pf-c-button.pf-m-secondary.pf-m-active, .pf-c-button.pf-m-secondary:active {
2095
- --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color);
2096
- --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor);
2097
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor);
1802
+ .pf-c-button.pf-m-control.pf-m-expanded {
1803
+ --pf-c-button--m-control--Color: var(--pf-c-button--m-control--m-expanded--Color);
1804
+ --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--m-expanded--BackgroundColor);
1805
+ --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--m-expanded--after--BorderBottomColor);
2098
1806
  }
2099
1807
 
2100
- .pf-c-button.pf-m-tertiary {
2101
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor);
2102
- color: var(--pf-c-button--m-tertiary--Color);
2103
- background-color: var(--pf-c-button--m-tertiary--BackgroundColor);
1808
+ .pf-c-button.pf-m-control.pf-m-expanded::after {
1809
+ border-bottom-width: var(--pf-c-button--m-control--m-expanded--after--BorderBottomWidth);
2104
1810
  }
2105
1811
 
2106
- .pf-c-button.pf-m-tertiary:hover {
2107
- --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color);
2108
- --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor);
2109
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor);
1812
+ .pf-c-button.pf-m-plain {
1813
+ --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color);
1814
+ --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor);
1815
+ color: var(--pf-c-button--m-plain--Color);
1816
+ background-color: var(--pf-c-button--m-plain--BackgroundColor);
2110
1817
  }
2111
1818
 
2112
- .pf-c-button.pf-m-tertiary:focus {
2113
- --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color);
2114
- --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor);
2115
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor);
1819
+ .pf-c-button.pf-m-plain:hover {
1820
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color);
1821
+ --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor);
2116
1822
  }
2117
1823
 
2118
- .pf-c-button.pf-m-tertiary:active, .pf-c-button.pf-m-tertiary.pf-m-active {
2119
- --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color);
2120
- --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor);
2121
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor);
1824
+ .pf-c-button.pf-m-plain:active, .pf-c-button.pf-m-plain.pf-m-active {
1825
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color);
1826
+ --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor);
2122
1827
  }
2123
1828
 
2124
- .pf-c-button.pf-m-link {
2125
- --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
2126
- color: var(--pf-c-button--m-link--Color);
2127
- background-color: var(--pf-c-button--m-link--BackgroundColor);
1829
+ .pf-c-button.pf-m-plain:focus {
1830
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color);
1831
+ --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor);
2128
1832
  }
2129
1833
 
2130
- .pf-c-button.pf-m-link:not(.pf-m-inline):hover {
2131
- --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color);
2132
- --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor);
1834
+ .pf-c-button:disabled, .pf-c-button.pf-m-disabled {
1835
+ pointer-events: none;
2133
1836
  }
2134
1837
 
2135
- .pf-c-button.pf-m-link:not(.pf-m-inline):focus {
2136
- --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color);
2137
- --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--focus--BackgroundColor);
1838
+ .pf-c-button:disabled, .pf-c-button.pf-m-disabled, .pf-c-button.pf-m-aria-disabled {
1839
+ color: var(--pf-c-button--disabled--Color);
1840
+ background-color: var(--pf-c-button--disabled--BackgroundColor);
2138
1841
  }
2139
1842
 
2140
- .pf-c-button.pf-m-link:not(.pf-m-inline):active, .pf-c-button.pf-m-link:not(.pf-m-inline).pf-m-active {
2141
- --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color);
2142
- --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor);
1843
+ .pf-c-button:disabled::after, .pf-c-button.pf-m-disabled::after, .pf-c-button.pf-m-aria-disabled::after {
1844
+ border-color: var(--pf-c-button--disabled--after--BorderColor);
2143
1845
  }
2144
1846
 
2145
- .pf-c-button.pf-m-link.pf-m-inline {
2146
- --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
2147
- display: inline;
2148
- padding: 0;
2149
- text-align: left;
2150
- white-space: normal;
2151
- cursor: pointer;
1847
+ .pf-c-button.pf-m-aria-disabled {
1848
+ --pf-c-button--after--BorderWidth: 0;
1849
+ --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
1850
+ cursor: default;
2152
1851
  }
2153
1852
 
2154
- .pf-c-button.pf-m-link.pf-m-inline:hover {
2155
- --pf-c-button--m-link--Color: var(--pf-c-button--m-link--m-inline--hover--Color);
2156
- text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
1853
+ .pf-c-button.pf-m-progress {
1854
+ --pf-c-button--PaddingRight: var(--pf-c-button--m-progress--PaddingRight);
1855
+ --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
1856
+ transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
1857
+ }
1858
+
1859
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
1860
+ --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
1861
+ --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
1862
+ }
1863
+
1864
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
1865
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
1866
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
1867
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
1868
+ }
1869
+
1870
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
1871
+ opacity: 0;
1872
+ }
1873
+
1874
+ .pf-c-button__icon.pf-m-start {
1875
+ margin-right: var(--pf-c-button__icon--m-start--MarginRight);
1876
+ }
1877
+
1878
+ .pf-c-button__icon.pf-m-end {
1879
+ margin-left: var(--pf-c-button__icon--m-end--MarginLeft);
1880
+ }
1881
+
1882
+ .pf-c-button__progress {
1883
+ position: absolute;
1884
+ top: var(--pf-c-button__progress--Top);
1885
+ left: var(--pf-c-button__progress--Left);
1886
+ line-height: 1;
1887
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
1888
+ }
1889
+
1890
+ .pf-c-button__progress .pf-c-spinner {
1891
+ --pf-c-spinner--Color: currentColor;
1892
+ }
1893
+
1894
+ .pf-m-overpass-font .pf-c-button {
1895
+ --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
1896
+ }
1897
+
1898
+ .pf-c-calendar-month {
1899
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
1900
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
1901
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
1902
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
1903
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
1904
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
1905
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
1906
+ }
1907
+
1908
+ .pf-c-calendar-month {
1909
+ --pf-c-calendar-month--BackgroundColor: var(--pf-global--BackgroundColor--100);
1910
+ --pf-c-calendar-month--PaddingTop: var(--pf-global--spacer--lg);
1911
+ --pf-c-calendar-month--PaddingRight: var(--pf-global--spacer--lg);
1912
+ --pf-c-calendar-month--PaddingBottom: var(--pf-global--spacer--md);
1913
+ --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
1914
+ --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
1915
+ --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
1916
+ --pf-c-calendar-month__header-year--Width: 8ch;
1917
+ --pf-c-calendar-month__header-nav-control--MarginRight: 0;
1918
+ --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
1919
+ --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: var(--pf-global--spacer--sm);
1920
+ --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
1921
+ --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: calc(var(--pf-global--spacer--md) * -1);
1922
+ --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: var(--pf-global--spacer--sm);
1923
+ --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
1924
+ --pf-c-calendar-month__days--BorderBottomColor: var(--pf-global--BorderColor--100);
1925
+ --pf-c-calendar-month__day--PaddingBottom: var(--pf-global--spacer--md);
1926
+ --pf-c-calendar-month__day--FontWeight: var(--pf-global--FontWeight--normal);
1927
+ --pf-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
1928
+ --pf-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
1929
+ --pf-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
1930
+ --pf-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
1931
+ --pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-global--spacer--sm);
1932
+ --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--BackgroundColor--200);
1933
+ --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--active-color--100);
1934
+ --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--active-color--100);
1935
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--primary-color--200);
1936
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-global--primary-color--200);
1937
+ --pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow: 0 0 0.3125rem var(--pf-global--primary-color--100);
1938
+ --pf-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-global--Color--light-100);
1939
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
1940
+ --pf-c-calendar-month__dates-cell--before--Top: 0;
1941
+ --pf-c-calendar-month__dates-cell--before--Right: 0;
1942
+ --pf-c-calendar-month__dates-cell--before--Bottom: var(--pf-c-calendar-month__dates-cell--PaddingBottom);
1943
+ --pf-c-calendar-month__dates-cell--before--Left: 0;
1944
+ --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--palette--blue-50);
1945
+ --pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
1946
+ --pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
1947
+ --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--palette--blue-100);
1948
+ --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--palette--blue-100);
1949
+ --pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-global--disabled-color--100);
1950
+ --pf-c-calendar-month__date--Width: 4ch;
1951
+ --pf-c-calendar-month__date--Height: 4ch;
1952
+ --pf-c-calendar-month__date--BorderRadius: var(--pf-global--BorderRadius--lg);
1953
+ --pf-c-calendar-month__date--Color: var(--pf-global--Color--100);
1954
+ --pf-c-calendar-month__date--BackgroundColor: transparent;
1955
+ --pf-c-calendar-month__date--disabled--Color: var(--pf-global--disabled-color--200);
1956
+ --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--md);
1957
+ --pf-c-calendar-month__date--after--BorderColor: transparent;
1958
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--palette--blue-50);
1959
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--palette--blue-50);
1960
+ --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-global--active-color--100);
1961
+ --pf-c-calendar-month__date--focus--BoxShadow: none;
1962
+ color: var(--pf-global--Color--100);
1963
+ display: inline-flex;
1964
+ flex-direction: column;
1965
+ padding: var(--pf-c-calendar-month--PaddingTop) var(--pf-c-calendar-month--PaddingRight) var(--pf-c-calendar-month--PaddingBottom) var(--pf-c-calendar-month--PaddingLeft);
1966
+ font-size: var(--pf-c-calendar-month--FontSize);
1967
+ background-color: var(--pf-c-calendar-month--BackgroundColor);
2157
1968
  }
2158
1969
 
2159
- .pf-c-button.pf-m-link.pf-m-display-lg {
2160
- --pf-c-button--FontSize: var(--pf-c-button--m-link--m-display-lg--FontSize);
1970
+ .pf-c-calendar-month__header {
1971
+ display: flex;
1972
+ margin-bottom: var(--pf-c-calendar-month__header--MarginBottom);
2161
1973
  }
2162
1974
 
2163
- .pf-c-button.pf-m-danger {
2164
- color: var(--pf-c-button--m-danger--Color);
2165
- background-color: var(--pf-c-button--m-danger--BackgroundColor);
1975
+ .pf-c-calendar-month__header-nav-control {
1976
+ margin-right: var(--pf-c-calendar-month__header-nav-control--MarginRight);
1977
+ margin-left: var(--pf-c-calendar-month__header-nav-control--MarginLeft);
2166
1978
  }
2167
1979
 
2168
- .pf-c-button.pf-m-danger:hover {
2169
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color);
2170
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor);
1980
+ .pf-c-calendar-month__header-nav-control.pf-m-prev-month {
1981
+ --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
1982
+ --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
2171
1983
  }
2172
1984
 
2173
- .pf-c-button.pf-m-danger:focus {
2174
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color);
2175
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor);
1985
+ .pf-c-calendar-month__header-nav-control.pf-m-next-month {
1986
+ --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginRight);
1987
+ --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
2176
1988
  }
2177
1989
 
2178
- .pf-c-button.pf-m-danger:active, .pf-c-button.pf-m-danger.pf-m-active {
2179
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color);
2180
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor);
1990
+ .pf-c-calendar-month__header-month {
1991
+ flex-grow: 1;
2181
1992
  }
2182
1993
 
2183
- .pf-c-button.pf-m-danger.pf-m-secondary {
2184
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color);
2185
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor);
2186
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor);
1994
+ .pf-c-calendar-month__header-year {
1995
+ width: var(--pf-c-calendar-month__header-year--Width);
2187
1996
  }
2188
1997
 
2189
- .pf-c-button.pf-m-danger.pf-m-secondary:hover {
2190
- --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color);
2191
- --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor);
2192
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor);
1998
+ .pf-c-calendar-month__calendar {
1999
+ table-layout: fixed;
2193
2000
  }
2194
2001
 
2195
- .pf-c-button.pf-m-danger.pf-m-secondary:focus {
2196
- --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--focus--Color);
2197
- --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor);
2198
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor);
2002
+ .pf-c-calendar-month__days {
2003
+ border-bottom: var(--pf-c-calendar-month__days--BorderBottomWidth) solid var(--pf-c-calendar-month__days--BorderBottomColor);
2199
2004
  }
2200
2005
 
2201
- .pf-c-button.pf-m-danger.pf-m-secondary:active, .pf-c-button.pf-m-danger.pf-m-secondary.pf-m-active {
2202
- --pf-c-button--m-secondary--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color);
2203
- --pf-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor);
2204
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor);
2006
+ .pf-c-calendar-month__day {
2007
+ padding-bottom: var(--pf-c-calendar-month__day--PaddingBottom);
2008
+ font-weight: var(--pf-c-calendar-month__day--FontWeight);
2009
+ text-align: center;
2205
2010
  }
2206
2011
 
2207
- .pf-c-button.pf-m-danger.pf-m-link {
2208
- --pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color);
2209
- --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor);
2012
+ .pf-c-calendar-month__dates-row:first-child {
2013
+ --pf-c-calendar-month__dates-cell--PaddingTop: var(--pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop);
2210
2014
  }
2211
2015
 
2212
- .pf-c-button.pf-m-danger.pf-m-link:hover {
2213
- --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--hover--Color);
2214
- --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--hover--BackgroundColor);
2016
+ .pf-c-calendar-month__dates-cell {
2017
+ --pf-c-calendar-month__dates-cell--before--Top: var(--pf-c-calendar-month__dates-cell--PaddingTop);
2018
+ position: relative;
2019
+ padding: var(--pf-c-calendar-month__dates-cell--PaddingTop) var(--pf-c-calendar-month__dates-cell--PaddingRight) var(--pf-c-calendar-month__dates-cell--PaddingBottom) var(--pf-c-calendar-month__dates-cell--PaddingLeft);
2020
+ text-align: center;
2215
2021
  }
2216
2022
 
2217
- .pf-c-button.pf-m-danger.pf-m-link:focus {
2218
- --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--focus--Color);
2219
- --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor);
2023
+ .pf-c-calendar-month__dates-cell::before {
2024
+ position: absolute;
2025
+ top: var(--pf-c-calendar-month__dates-cell--before--Top);
2026
+ right: var(--pf-c-calendar-month__dates-cell--before--Right);
2027
+ bottom: var(--pf-c-calendar-month__dates-cell--before--Bottom);
2028
+ left: var(--pf-c-calendar-month__dates-cell--before--Left);
2029
+ content: "";
2030
+ background-color: var(--pf-c-calendar-month__dates-cell--before--BackgroundColor);
2220
2031
  }
2221
2032
 
2222
- .pf-c-button.pf-m-danger.pf-m-link:active, .pf-c-button.pf-m-danger.pf-m-link.pf-m-active {
2223
- --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color);
2224
- --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor);
2033
+ .pf-c-calendar-month__dates-cell.pf-m-current {
2034
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
2225
2035
  }
2226
2036
 
2227
- .pf-c-button.pf-m-warning {
2228
- color: var(--pf-c-button--m-warning--Color);
2229
- background-color: var(--pf-c-button--m-warning--BackgroundColor);
2037
+ .pf-c-calendar-month__dates-cell.pf-m-in-range {
2038
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
2039
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
2040
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
2230
2041
  }
2231
2042
 
2232
- .pf-c-button.pf-m-warning:hover {
2233
- --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--hover--Color);
2234
- --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor);
2043
+ .pf-c-calendar-month__dates-cell.pf-m-start-range {
2044
+ --pf-c-calendar-month__dates-cell--before--Left: var(--pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left);
2235
2045
  }
2236
2046
 
2237
- .pf-c-button.pf-m-warning:focus {
2238
- --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color);
2239
- --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--focus--BackgroundColor);
2047
+ .pf-c-calendar-month__dates-cell.pf-m-end-range {
2048
+ --pf-c-calendar-month__dates-cell--before--Right: var(--pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right);
2240
2049
  }
2241
2050
 
2242
- .pf-c-button.pf-m-warning:active, .pf-c-button.pf-m-warning.pf-m-active {
2243
- --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color);
2244
- --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor);
2051
+ .pf-c-calendar-month__dates-cell.pf-m-adjacent-month {
2052
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color);
2245
2053
  }
2246
2054
 
2247
- .pf-c-button.pf-m-control {
2248
- --pf-c-button--BorderRadius: var(--pf-c-button--m-control--BorderRadius);
2249
- --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-control--disabled--BackgroundColor);
2250
- --pf-c-button--after--BorderWidth: var(--pf-c-button--m-control--after--BorderWidth);
2251
- --pf-c-button--after--BorderColor: var(--pf-c-button--m-control--after--BorderTopColor) var(--pf-c-button--m-control--after--BorderRightColor) var(--pf-c-button--m-control--after--BorderBottomColor) var(--pf-c-button--m-control--after--BorderLeftColor);
2252
- color: var(--pf-c-button--m-control--Color);
2253
- background-color: var(--pf-c-button--m-control--BackgroundColor);
2055
+ .pf-c-calendar-month__dates-cell.pf-m-selected {
2056
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
2057
+ --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
2058
+ --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
2059
+ --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
2060
+ --pf-c-calendar-month__date--focus--BoxShadow: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow);
2061
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-selected__date--Color);
2254
2062
  }
2255
2063
 
2256
- .pf-c-button.pf-m-control::after {
2257
- border-radius: initial;
2064
+ .pf-c-calendar-month__dates-cell.pf-m-disabled {
2065
+ --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2066
+ --pf-c-calendar-month__date--BackgroundColor: transparent;
2258
2067
  }
2259
2068
 
2260
- .pf-c-button.pf-m-control:hover {
2261
- --pf-c-button--m-control--Color: var(--pf-c-button--m-control--hover--Color);
2262
- --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor);
2263
- --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--hover--after--BorderBottomColor);
2069
+ .pf-c-calendar-month__date {
2070
+ position: relative;
2071
+ display: inline-flex;
2072
+ align-items: center;
2073
+ justify-content: center;
2074
+ width: var(--pf-c-calendar-month__date--Width);
2075
+ height: var(--pf-c-calendar-month__date--Height);
2076
+ line-height: 1;
2077
+ color: var(--pf-c-calendar-month__date--Color);
2078
+ background-color: var(--pf-c-calendar-month__date--BackgroundColor);
2079
+ border: 0;
2264
2080
  }
2265
2081
 
2266
- .pf-c-button.pf-m-control:hover::after {
2267
- border-bottom-width: var(--pf-c-button--m-control--hover--after--BorderBottomWidth);
2082
+ .pf-c-calendar-month__date::after {
2083
+ position: absolute;
2084
+ top: 0;
2085
+ right: 0;
2086
+ bottom: 0;
2087
+ left: 0;
2088
+ content: "";
2089
+ border: var(--pf-c-calendar-month__date--after--BorderWidth) solid var(--pf-c-calendar-month__date--after--BorderColor);
2268
2090
  }
2269
2091
 
2270
- .pf-c-button.pf-m-control:active, .pf-c-button.pf-m-control.pf-m-active {
2271
- --pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color);
2272
- --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor);
2273
- --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor);
2092
+ .pf-c-calendar-month__date, .pf-c-calendar-month__date::after {
2093
+ border-radius: var(--pf-c-calendar-month__date--BorderRadius);
2274
2094
  }
2275
2095
 
2276
- .pf-c-button.pf-m-control:active::after, .pf-c-button.pf-m-control.pf-m-active::after {
2277
- border-bottom-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth);
2096
+ .pf-c-calendar-month__date:hover, .pf-c-calendar-month__date.pf-m-hover {
2097
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--hover--BackgroundColor);
2278
2098
  }
2279
2099
 
2280
- .pf-c-button.pf-m-control:focus {
2281
- --pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color);
2282
- --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--focus--BackgroundColor);
2283
- --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--focus--after--BorderBottomColor);
2100
+ .pf-c-calendar-month__date:focus, .pf-c-calendar-month__date.pf-m-focus {
2101
+ --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--focus--BackgroundColor);
2102
+ --pf-c-calendar-month__date--after--BorderColor: var(--pf-c-calendar-month__date--focus--after--BorderColor);
2103
+ outline: 0;
2104
+ box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
2284
2105
  }
2285
2106
 
2286
- .pf-c-button.pf-m-control:focus::after {
2287
- border-bottom-width: var(--pf-c-button--m-control--focus--after--BorderBottomWidth);
2107
+ .pf-c-calendar-month__date:disabled {
2108
+ pointer-events: none;
2109
+ --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
2110
+ --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
2288
2111
  }
2289
2112
 
2290
- .pf-c-button.pf-m-control.pf-m-expanded {
2291
- --pf-c-button--m-control--Color: var(--pf-c-button--m-control--m-expanded--Color);
2292
- --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--m-expanded--BackgroundColor);
2293
- --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--m-expanded--after--BorderBottomColor);
2113
+ .pf-c-card {
2114
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
2115
+ --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
2116
+ --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
2117
+ --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
2118
+ --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
2119
+ --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
2120
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
2121
+ --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
2122
+ --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
2123
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
2124
+ --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
2125
+ --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
2126
+ --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
2127
+ --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
2128
+ --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
2129
+ --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
2130
+ --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
2131
+ --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
2132
+ --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
2133
+ --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2134
+ --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
2135
+ --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
2136
+ --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
2137
+ --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
2138
+ --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
2139
+ --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
2140
+ --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
2141
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
2142
+ --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
2143
+ --pf-c-card--m-selectable-raised--before--Right: 0;
2144
+ --pf-c-card--m-selectable-raised--before--Bottom: 0;
2145
+ --pf-c-card--m-selectable-raised--before--Left: 0;
2146
+ --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2147
+ --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2148
+ --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2149
+ --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
2150
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
2151
+ --pf-c-card--m-selectable-raised--before--Transition: none;
2152
+ --pf-c-card--m-selectable-raised--before--ScaleY: 1;
2153
+ --pf-c-card--m-selectable-raised--before--TranslateY: 0;
2154
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
2155
+ --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
2156
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
2157
+ --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
2158
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
2159
+ --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
2160
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
2161
+ --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
2162
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
2163
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
2164
+ --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
2165
+ --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
2166
+ --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
2167
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
2168
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
2169
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
2170
+ --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
2171
+ --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
2172
+ --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
2173
+ --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
2174
+ --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
2175
+ --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
2176
+ --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
2177
+ --pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md);
2178
+ --pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md);
2179
+ --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
2180
+ --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
2181
+ --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
2182
+ --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
2183
+ --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
2184
+ --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
2185
+ --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
2186
+ --pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl);
2187
+ --pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl);
2188
+ --pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg);
2189
+ --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
2190
+ --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
2191
+ --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
2192
+ --pf-c-card--m-full-height--Height: 100%;
2193
+ --pf-c-card--m-plain--BoxShadow: none;
2194
+ --pf-c-card--m-plain--BackgroundColor: transparent;
2195
+ --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
2196
+ --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
2197
+ --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
2198
+ display: flex;
2199
+ flex-direction: column;
2200
+ background-color: var(--pf-c-card--BackgroundColor);
2201
+ box-shadow: var(--pf-c-card--BoxShadow);
2294
2202
  }
2295
2203
 
2296
- .pf-c-button.pf-m-control.pf-m-expanded::after {
2297
- border-bottom-width: var(--pf-c-button--m-control--m-expanded--after--BorderBottomWidth);
2204
+ .pf-c-card.pf-m-hoverable:hover {
2205
+ box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
2298
2206
  }
2299
2207
 
2300
- .pf-c-button.pf-m-plain {
2301
- --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color);
2302
- --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor);
2303
- color: var(--pf-c-button--m-plain--Color);
2304
- background-color: var(--pf-c-button--m-plain--BackgroundColor);
2208
+ .pf-c-card.pf-m-selectable {
2209
+ position: relative;
2210
+ cursor: pointer;
2305
2211
  }
2306
2212
 
2307
- .pf-c-button.pf-m-plain:hover {
2308
- --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color);
2309
- --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor);
2213
+ .pf-c-card.pf-m-selectable:hover {
2214
+ box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
2310
2215
  }
2311
2216
 
2312
- .pf-c-button.pf-m-plain:active, .pf-c-button.pf-m-plain.pf-m-active {
2313
- --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color);
2314
- --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor);
2217
+ .pf-c-card.pf-m-selectable:focus {
2218
+ box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
2315
2219
  }
2316
2220
 
2317
- .pf-c-button.pf-m-plain:focus {
2318
- --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color);
2319
- --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor);
2221
+ .pf-c-card.pf-m-selectable:active {
2222
+ box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
2320
2223
  }
2321
2224
 
2322
- .pf-c-button:disabled, .pf-c-button.pf-m-disabled {
2323
- pointer-events: none;
2225
+ .pf-c-card.pf-m-selectable.pf-m-selected {
2226
+ box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
2324
2227
  }
2325
2228
 
2326
- .pf-c-button:disabled, .pf-c-button.pf-m-disabled, .pf-c-button.pf-m-aria-disabled {
2327
- color: var(--pf-c-button--disabled--Color);
2328
- background-color: var(--pf-c-button--disabled--BackgroundColor);
2229
+ .pf-c-card.pf-m-selectable.pf-m-selected::before {
2230
+ position: absolute;
2231
+ top: 0;
2232
+ right: 0;
2233
+ left: 0;
2234
+ height: var(--pf-c-card--m-selectable--m-selected--before--Height);
2235
+ content: "";
2236
+ background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
2329
2237
  }
2330
2238
 
2331
- .pf-c-button:disabled::after, .pf-c-button.pf-m-disabled::after, .pf-c-button.pf-m-aria-disabled::after {
2332
- border-color: var(--pf-c-button--disabled--after--BorderColor);
2239
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
2240
+ position: relative;
2333
2241
  }
2334
2242
 
2335
- .pf-c-button.pf-m-aria-disabled {
2336
- --pf-c-button--after--BorderWidth: 0;
2337
- --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
2338
- cursor: default;
2243
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
2244
+ position: absolute;
2245
+ right: var(--pf-c-card--m-selectable-raised--before--Right);
2246
+ bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
2247
+ left: var(--pf-c-card--m-selectable-raised--before--Left);
2248
+ height: var(--pf-c-card--m-selectable-raised--before--Height);
2249
+ content: "";
2250
+ background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
2251
+ transition: var(--pf-c-card--m-selectable-raised--before--Transition);
2252
+ transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
2253
+ transform-origin: center bottom;
2339
2254
  }
2340
2255
 
2341
- .pf-c-button.pf-m-progress {
2342
- --pf-c-button--PaddingRight: var(--pf-c-button--m-progress--PaddingRight);
2343
- --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
2344
- transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
2256
+ .pf-c-card.pf-m-hoverable-raised:hover {
2257
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
2258
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
2345
2259
  }
2346
2260
 
2347
- .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
2348
- --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
2349
- --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
2261
+ .pf-c-card.pf-m-selectable-raised {
2262
+ cursor: pointer;
2350
2263
  }
2351
2264
 
2352
- .pf-c-button.pf-m-in-progress.pf-m-plain {
2353
- --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
2354
- --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
2355
- --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
2265
+ .pf-c-card.pf-m-selectable-raised:hover {
2266
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
2267
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
2356
2268
  }
2357
2269
 
2358
- .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
2359
- opacity: 0;
2270
+ .pf-c-card.pf-m-selectable-raised:focus {
2271
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
2272
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
2360
2273
  }
2361
2274
 
2362
- .pf-c-button__icon.pf-m-start {
2363
- margin-right: var(--pf-c-button__icon--m-start--MarginRight);
2275
+ .pf-c-card.pf-m-selectable-raised:active {
2276
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
2277
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
2364
2278
  }
2365
2279
 
2366
- .pf-c-button__icon.pf-m-end {
2367
- margin-left: var(--pf-c-button__icon--m-end--MarginLeft);
2280
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
2281
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
2282
+ --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
2283
+ --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
2284
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
2285
+ box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
2286
+ transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
2287
+ transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
2368
2288
  }
2369
2289
 
2370
- .pf-c-button__progress {
2371
- position: absolute;
2372
- top: var(--pf-c-button__progress--Top);
2373
- left: var(--pf-c-button__progress--Left);
2374
- line-height: 1;
2375
- transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
2290
+ .pf-c-card.pf-m-non-selectable-raised {
2291
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
2292
+ --pf-c-card--BoxShadow: none;
2293
+ --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
2294
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
2295
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
2376
2296
  }
2377
2297
 
2378
- .pf-c-button__progress .pf-c-spinner {
2379
- --pf-c-spinner--Color: currentColor;
2298
+ .pf-c-card.pf-m-compact {
2299
+ --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
2300
+ --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
2301
+ --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);
2302
+ --pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);
2303
+ --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);
2304
+ --pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);
2305
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);
2306
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
2380
2307
  }
2381
2308
 
2382
- .pf-m-overpass-font .pf-c-button {
2383
- --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
2309
+ .pf-c-card.pf-m-display-lg {
2310
+ --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
2311
+ --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
2312
+ --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
2313
+ --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
2314
+ --pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);
2315
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);
2316
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);
2384
2317
  }
2385
2318
 
2386
- .pf-c-calendar-month {
2387
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
2388
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
2389
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2390
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2391
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
2392
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2393
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2319
+ .pf-c-card.pf-m-flat {
2320
+ --pf-c-card--BoxShadow: none;
2321
+ --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
2322
+ --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
2323
+ --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
2324
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
2325
+ border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
2394
2326
  }
2395
2327
 
2396
- .pf-c-calendar-month {
2397
- --pf-c-calendar-month--BackgroundColor: var(--pf-global--BackgroundColor--100);
2398
- --pf-c-calendar-month--PaddingTop: var(--pf-global--spacer--lg);
2399
- --pf-c-calendar-month--PaddingRight: var(--pf-global--spacer--lg);
2400
- --pf-c-calendar-month--PaddingBottom: var(--pf-global--spacer--md);
2401
- --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
2402
- --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
2403
- --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
2404
- --pf-c-calendar-month__header-year--Width: 8ch;
2405
- --pf-c-calendar-month__header-nav-control--MarginRight: 0;
2406
- --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
2407
- --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: var(--pf-global--spacer--sm);
2408
- --pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
2409
- --pf-c-calendar-month__header-nav-control--m-next-month--MarginRight: calc(var(--pf-global--spacer--md) * -1);
2410
- --pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft: var(--pf-global--spacer--sm);
2411
- --pf-c-calendar-month__days--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
2412
- --pf-c-calendar-month__days--BorderBottomColor: var(--pf-global--BorderColor--100);
2413
- --pf-c-calendar-month__day--PaddingBottom: var(--pf-global--spacer--md);
2414
- --pf-c-calendar-month__day--FontWeight: var(--pf-global--FontWeight--normal);
2415
- --pf-c-calendar-month__dates-cell--PaddingTop: 0.125rem;
2416
- --pf-c-calendar-month__dates-cell--PaddingRight: 0.125rem;
2417
- --pf-c-calendar-month__dates-cell--PaddingBottom: 0.125rem;
2418
- --pf-c-calendar-month__dates-cell--PaddingLeft: 0.125rem;
2419
- --pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop: var(--pf-global--spacer--sm);
2420
- --pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-global--BackgroundColor--200);
2421
- --pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-global--active-color--100);
2422
- --pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor: var(--pf-global--active-color--100);
2423
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor: var(--pf-global--primary-color--200);
2424
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor: var(--pf-global--primary-color--200);
2425
- --pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow: 0 0 0.3125rem var(--pf-global--primary-color--100);
2426
- --pf-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-global--Color--light-100);
2427
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2428
- --pf-c-calendar-month__dates-cell--before--Top: 0;
2429
- --pf-c-calendar-month__dates-cell--before--Right: 0;
2430
- --pf-c-calendar-month__dates-cell--before--Bottom: var(--pf-c-calendar-month__dates-cell--PaddingBottom);
2431
- --pf-c-calendar-month__dates-cell--before--Left: 0;
2432
- --pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor: var(--pf-global--palette--blue-50);
2433
- --pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left: 50%;
2434
- --pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right: 50%;
2435
- --pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor: var(--pf-global--palette--blue-100);
2436
- --pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor: var(--pf-global--palette--blue-100);
2437
- --pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-global--disabled-color--100);
2438
- --pf-c-calendar-month__date--Width: 4ch;
2439
- --pf-c-calendar-month__date--Height: 4ch;
2440
- --pf-c-calendar-month__date--BorderRadius: var(--pf-global--BorderRadius--lg);
2441
- --pf-c-calendar-month__date--Color: var(--pf-global--Color--100);
2442
- --pf-c-calendar-month__date--BackgroundColor: transparent;
2443
- --pf-c-calendar-month__date--disabled--Color: var(--pf-global--disabled-color--200);
2444
- --pf-c-calendar-month__date--after--BorderWidth: var(--pf-global--BorderWidth--md);
2445
- --pf-c-calendar-month__date--after--BorderColor: transparent;
2446
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-global--palette--blue-50);
2447
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-global--palette--blue-50);
2448
- --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-global--active-color--100);
2449
- --pf-c-calendar-month__date--focus--BoxShadow: none;
2450
- color: var(--pf-global--Color--100);
2451
- display: inline-flex;
2452
- flex-direction: column;
2453
- padding: var(--pf-c-calendar-month--PaddingTop) var(--pf-c-calendar-month--PaddingRight) var(--pf-c-calendar-month--PaddingBottom) var(--pf-c-calendar-month--PaddingLeft);
2454
- font-size: var(--pf-c-calendar-month--FontSize);
2455
- background-color: var(--pf-c-calendar-month--BackgroundColor);
2328
+ .pf-c-card.pf-m-plain {
2329
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);
2330
+ --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
2456
2331
  }
2457
2332
 
2458
- .pf-c-calendar-month__header {
2459
- display: flex;
2460
- margin-bottom: var(--pf-c-calendar-month__header--MarginBottom);
2333
+ .pf-c-card.pf-m-rounded {
2334
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
2335
+ border-radius: var(--pf-c-card--m-rounded--BorderRadius);
2461
2336
  }
2462
2337
 
2463
- .pf-c-calendar-month__header-nav-control {
2464
- margin-right: var(--pf-c-calendar-month__header-nav-control--MarginRight);
2465
- margin-left: var(--pf-c-calendar-month__header-nav-control--MarginLeft);
2338
+ .pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {
2339
+ transform: rotate(var(--pf-c-card--m-expanded__header-toggle-icon--Rotate));
2466
2340
  }
2467
2341
 
2468
- .pf-c-calendar-month__header-nav-control.pf-m-prev-month {
2469
- --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
2470
- --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);
2342
+ .pf-c-card.pf-m-full-height {
2343
+ height: var(--pf-c-card--m-full-height--Height);
2471
2344
  }
2472
2345
 
2473
- .pf-c-calendar-month__header-nav-control.pf-m-next-month {
2474
- --pf-c-calendar-month__header-nav-control--MarginRight: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginRight);
2475
- --pf-c-calendar-month__header-nav-control--MarginLeft: var(--pf-c-calendar-month__header-nav-control--m-next-month--MarginLeft);
2346
+ .pf-c-card > .pf-c-divider + .pf-c-card__header, .pf-c-card > .pf-c-divider + .pf-c-card__title, .pf-c-card > .pf-c-divider + .pf-c-card__body, .pf-c-card > .pf-c-divider + .pf-c-card__footer {
2347
+ padding-top: var(--pf-c-card--c-divider--child--PaddingTop);
2476
2348
  }
2477
2349
 
2478
- .pf-c-calendar-month__header-month {
2479
- flex-grow: 1;
2350
+ .pf-c-card__header {
2351
+ display: flex;
2352
+ flex-direction: row;
2353
+ align-items: center;
2480
2354
  }
2481
2355
 
2482
- .pf-c-calendar-month__header-year {
2483
- width: var(--pf-c-calendar-month__header-year--Width);
2356
+ .pf-c-card__header .pf-c-card__title {
2357
+ --pf-c-card--first-child--PaddingTop: 0;
2358
+ --pf-c-card__title--not--last-child--PaddingBottom: 0;
2359
+ padding: 0;
2484
2360
  }
2485
2361
 
2486
- .pf-c-calendar-month__calendar {
2487
- table-layout: fixed;
2362
+ .pf-c-card__header.pf-m-toggle-right {
2363
+ --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
2364
+ --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
2488
2365
  }
2489
2366
 
2490
- .pf-c-calendar-month__days {
2491
- border-bottom: var(--pf-c-calendar-month__days--BorderBottomWidth) solid var(--pf-c-calendar-month__days--BorderBottomColor);
2367
+ .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
2368
+ --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
2492
2369
  }
2493
2370
 
2494
- .pf-c-calendar-month__day {
2495
- padding-bottom: var(--pf-c-calendar-month__day--PaddingBottom);
2496
- font-weight: var(--pf-c-calendar-month__day--FontWeight);
2497
- text-align: center;
2371
+ .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
2372
+ order: 2;
2498
2373
  }
2499
2374
 
2500
- .pf-c-calendar-month__dates-row:first-child {
2501
- --pf-c-calendar-month__dates-cell--PaddingTop: var(--pf-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop);
2375
+ .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
2376
+ flex: 1;
2502
2377
  }
2503
2378
 
2504
- .pf-c-calendar-month__dates-cell {
2505
- --pf-c-calendar-month__dates-cell--before--Top: var(--pf-c-calendar-month__dates-cell--PaddingTop);
2506
- position: relative;
2507
- padding: var(--pf-c-calendar-month__dates-cell--PaddingTop) var(--pf-c-calendar-month__dates-cell--PaddingRight) var(--pf-c-calendar-month__dates-cell--PaddingBottom) var(--pf-c-calendar-month__dates-cell--PaddingLeft);
2508
- text-align: center;
2379
+ .pf-c-card__header-toggle {
2380
+ align-self: flex-start;
2381
+ margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) var(--pf-c-card__header-toggle--MarginLeft);
2509
2382
  }
2510
2383
 
2511
- .pf-c-calendar-month__dates-cell::before {
2512
- position: absolute;
2513
- top: var(--pf-c-calendar-month__dates-cell--before--Top);
2514
- right: var(--pf-c-calendar-month__dates-cell--before--Right);
2515
- bottom: var(--pf-c-calendar-month__dates-cell--before--Bottom);
2516
- left: var(--pf-c-calendar-month__dates-cell--before--Left);
2517
- content: "";
2518
- background-color: var(--pf-c-calendar-month__dates-cell--before--BackgroundColor);
2384
+ .pf-c-card__header-toggle-icon {
2385
+ display: inline-block;
2386
+ transition: var(--pf-c-card__header-toggle-icon--Transition);
2519
2387
  }
2520
2388
 
2521
- .pf-c-calendar-month__dates-cell.pf-m-current {
2522
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
2389
+ .pf-c-card__title {
2390
+ font-family: var(--pf-c-card__title--FontFamily);
2391
+ font-size: var(--pf-c-card__title--FontSize);
2392
+ font-weight: var(--pf-c-card__title--FontWeight);
2523
2393
  }
2524
2394
 
2525
- .pf-c-calendar-month__dates-cell.pf-m-in-range {
2526
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor);
2527
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor);
2528
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor);
2395
+ .pf-c-card__actions {
2396
+ display: flex;
2397
+ align-items: center;
2398
+ align-self: flex-start;
2399
+ order: 1;
2400
+ padding-left: var(--pf-c-card__actions--PaddingLeft);
2401
+ margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
2529
2402
  }
2530
2403
 
2531
- .pf-c-calendar-month__dates-cell.pf-m-start-range {
2532
- --pf-c-calendar-month__dates-cell--before--Left: var(--pf-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left);
2404
+ .pf-c-card__actions > * + * {
2405
+ margin-left: var(--pf-c-card__actions--child--MarginLeft);
2533
2406
  }
2534
2407
 
2535
- .pf-c-calendar-month__dates-cell.pf-m-end-range {
2536
- --pf-c-calendar-month__dates-cell--before--Right: var(--pf-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right);
2408
+ .pf-c-card__actions + .pf-c-card__title,
2409
+ .pf-c-card__actions + .pf-c-card__body,
2410
+ .pf-c-card__actions + .pf-c-card__footer {
2411
+ padding: 0;
2537
2412
  }
2538
2413
 
2539
- .pf-c-calendar-month__dates-cell.pf-m-adjacent-month {
2540
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-adjacent-month__date--Color);
2414
+ .pf-c-card__actions.pf-m-no-offset {
2415
+ --pf-c-card__header-toggle--MarginTop: 0;
2416
+ --pf-c-card__header-toggle--MarginBottom: 0;
2541
2417
  }
2542
2418
 
2543
- .pf-c-calendar-month__dates-cell.pf-m-selected {
2544
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
2545
- --pf-c-calendar-month__date--hover--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
2546
- --pf-c-calendar-month__date--focus--BackgroundColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
2547
- --pf-c-calendar-month__date--focus--after--BorderColor: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
2548
- --pf-c-calendar-month__date--focus--BoxShadow: var(--pf-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow);
2549
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__dates-cell--m-selected__date--Color);
2419
+ .pf-c-card__header,
2420
+ .pf-c-card__title,
2421
+ .pf-c-card__body,
2422
+ .pf-c-card__footer {
2423
+ padding-right: var(--pf-c-card--child--PaddingRight);
2424
+ padding-bottom: var(--pf-c-card--child--PaddingBottom);
2425
+ padding-left: var(--pf-c-card--child--PaddingLeft);
2550
2426
  }
2551
2427
 
2552
- .pf-c-calendar-month__dates-cell.pf-m-disabled {
2553
- --pf-c-calendar-month__dates-cell--before--BackgroundColor: transparent;
2554
- --pf-c-calendar-month__date--BackgroundColor: transparent;
2428
+ .pf-c-card__header:first-child,
2429
+ .pf-c-card__title:first-child,
2430
+ .pf-c-card__body:first-child,
2431
+ .pf-c-card__footer:first-child {
2432
+ padding-top: var(--pf-c-card--first-child--PaddingTop);
2555
2433
  }
2556
2434
 
2557
- .pf-c-calendar-month__date {
2558
- position: relative;
2559
- display: inline-flex;
2560
- align-items: center;
2561
- justify-content: center;
2562
- width: var(--pf-c-calendar-month__date--Width);
2563
- height: var(--pf-c-calendar-month__date--Height);
2564
- line-height: 1;
2565
- color: var(--pf-c-calendar-month__date--Color);
2566
- background-color: var(--pf-c-calendar-month__date--BackgroundColor);
2567
- border: 0;
2435
+ .pf-c-card__header:not(:last-child),
2436
+ .pf-c-card__title:not(:last-child) {
2437
+ padding-bottom: var(--pf-c-card__title--not--last-child--PaddingBottom);
2568
2438
  }
2569
2439
 
2570
- .pf-c-calendar-month__date::after {
2571
- position: absolute;
2572
- top: 0;
2573
- right: 0;
2574
- bottom: 0;
2575
- left: 0;
2576
- content: "";
2577
- border: var(--pf-c-calendar-month__date--after--BorderWidth) solid var(--pf-c-calendar-month__date--after--BorderColor);
2440
+ .pf-c-card__expandable-content {
2441
+ --pf-c-card--first-child--PaddingTop: 0;
2578
2442
  }
2579
2443
 
2580
- .pf-c-calendar-month__date, .pf-c-calendar-month__date::after {
2581
- border-radius: var(--pf-c-calendar-month__date--BorderRadius);
2444
+ .pf-c-card__body:not(.pf-m-no-fill) {
2445
+ flex: 1 1 auto;
2582
2446
  }
2583
2447
 
2584
- .pf-c-calendar-month__date:hover, .pf-c-calendar-month__date.pf-m-hover {
2585
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--hover--BackgroundColor);
2448
+ .pf-c-card__body {
2449
+ font-size: var(--pf-c-card__body--FontSize);
2586
2450
  }
2587
2451
 
2588
- .pf-c-calendar-month__date:focus, .pf-c-calendar-month__date.pf-m-focus {
2589
- --pf-c-calendar-month__date--BackgroundColor: var(--pf-c-calendar-month__date--focus--BackgroundColor);
2590
- --pf-c-calendar-month__date--after--BorderColor: var(--pf-c-calendar-month__date--focus--after--BorderColor);
2591
- outline: 0;
2592
- box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
2452
+ .pf-c-card__footer {
2453
+ font-size: var(--pf-c-card__footer--FontSize);
2593
2454
  }
2594
2455
 
2595
- .pf-c-calendar-month__date:disabled {
2596
- pointer-events: none;
2597
- --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
2598
- --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
2456
+ .pf-m-overpass-font .pf-c-card .pf-c-card__title {
2457
+ font-weight: var(--pf-global--FontWeight--normal);
2599
2458
  }
2600
2459
 
2601
- .pf-c-card {
2602
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
2603
- --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
2604
- --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
2605
- --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
2606
- --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
2607
- --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
2608
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
2609
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
2610
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
2611
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
2612
- --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
2613
- --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
2614
- --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
2615
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
2616
- --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
2617
- --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
2618
- --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
2619
- --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
2620
- --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
2621
- --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2622
- --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
2623
- --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
2624
- --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
2625
- --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
2626
- --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
2627
- --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
2628
- --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
2629
- --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
2630
- --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
2631
- --pf-c-card--m-selectable-raised--before--Right: 0;
2632
- --pf-c-card--m-selectable-raised--before--Bottom: 0;
2633
- --pf-c-card--m-selectable-raised--before--Left: 0;
2634
- --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2635
- --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2636
- --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
2637
- --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
2638
- --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
2639
- --pf-c-card--m-selectable-raised--before--Transition: none;
2640
- --pf-c-card--m-selectable-raised--before--ScaleY: 1;
2641
- --pf-c-card--m-selectable-raised--before--TranslateY: 0;
2642
- --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
2643
- --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
2644
- --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
2645
- --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
2646
- --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
2647
- --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
2648
- --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
2649
- --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
2650
- --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
2651
- --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
2652
- --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
2653
- --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
2654
- --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
2655
- --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
2656
- --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
2657
- --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
2658
- --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
2659
- --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
2660
- --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
2661
- --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
2662
- --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
2663
- --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
2664
- --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
2665
- --pf-c-card--m-compact--child--PaddingRight: var(--pf-global--spacer--md);
2666
- --pf-c-card--m-compact--child--PaddingBottom: var(--pf-global--spacer--md);
2667
- --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
2668
- --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
2669
- --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
2670
- --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
2671
- --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
2672
- --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
2673
- --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
2674
- --pf-c-card--m-display-lg--child--PaddingLeft: var(--pf-global--spacer--xl);
2675
- --pf-c-card--m-display-lg--c-divider--child--PaddingTop: var(--pf-global--spacer--xl);
2676
- --pf-c-card--m-display-lg__title--not--last-child--PaddingBottom: var(--pf-global--spacer--lg);
2677
- --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
2678
- --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
2679
- --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
2680
- --pf-c-card--m-full-height--Height: 100%;
2681
- --pf-c-card--m-plain--BoxShadow: none;
2682
- --pf-c-card--m-plain--BackgroundColor: transparent;
2683
- --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
2684
- --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
2685
- --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
2686
- display: flex;
2687
- flex-direction: column;
2688
- background-color: var(--pf-c-card--BackgroundColor);
2689
- box-shadow: var(--pf-c-card--BoxShadow);
2460
+ .pf-c-check {
2461
+ --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
2462
+ --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
2463
+ --pf-c-check__label--Color: var(--pf-global--Color--100);
2464
+ --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
2465
+ --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
2466
+ --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
2467
+ --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
2468
+ --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
2469
+ --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
2470
+ --pf-c-check__description--Color: var(--pf-global--Color--200);
2471
+ --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
2472
+ display: grid;
2473
+ grid-template-columns: auto 1fr;
2474
+ grid-gap: var(--pf-c-check--GridGap);
2475
+ align-items: start;
2476
+ justify-items: start;
2690
2477
  }
2691
2478
 
2692
- .pf-c-card.pf-m-hoverable:hover {
2693
- box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
2479
+ .pf-c-check.pf-m-standalone {
2480
+ --pf-c-check--GridGap: 0;
2481
+ --pf-c-check__input--Height: auto;
2482
+ --pf-c-check__input--MarginTop: 0;
2483
+ display: inline-grid;
2484
+ line-height: 1;
2694
2485
  }
2695
2486
 
2696
- .pf-c-card.pf-m-selectable {
2697
- position: relative;
2698
- cursor: pointer;
2487
+ .pf-c-check__label {
2488
+ font-size: var(--pf-c-check__label--FontSize);
2489
+ font-weight: var(--pf-c-check__label--FontWeight);
2490
+ line-height: var(--pf-c-check__label--LineHeight);
2491
+ color: var(--pf-c-check__label--Color);
2699
2492
  }
2700
2493
 
2701
- .pf-c-card.pf-m-selectable:hover {
2702
- box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
2494
+ .pf-c-check__input {
2495
+ height: var(--pf-c-check__input--Height);
2496
+ margin-top: var(--pf-c-check__input--MarginTop);
2703
2497
  }
2704
2498
 
2705
- .pf-c-card.pf-m-selectable:focus {
2706
- box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
2499
+ .pf-c-check__description {
2500
+ grid-column: 2;
2501
+ font-size: var(--pf-c-check__description--FontSize);
2502
+ color: var(--pf-c-check__description--Color);
2707
2503
  }
2708
2504
 
2709
- .pf-c-card.pf-m-selectable:active {
2710
- box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
2505
+ .pf-c-check__body {
2506
+ grid-column: 2;
2507
+ margin-top: var(--pf-c-check__body--MarginTop);
2711
2508
  }
2712
2509
 
2713
- .pf-c-card.pf-m-selectable.pf-m-selected {
2714
- box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
2510
+ label.pf-c-check, .pf-c-check__label,
2511
+ .pf-c-check__input {
2512
+ cursor: pointer;
2715
2513
  }
2716
2514
 
2717
- .pf-c-card.pf-m-selectable.pf-m-selected::before {
2718
- position: absolute;
2719
- top: 0;
2720
- right: 0;
2721
- left: 0;
2722
- height: var(--pf-c-card--m-selectable--m-selected--before--Height);
2723
- content: "";
2724
- background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
2515
+ .pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
2516
+ .pf-c-check__input:disabled,
2517
+ .pf-c-check__input.pf-m-disabled {
2518
+ --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
2519
+ cursor: not-allowed;
2725
2520
  }
2726
2521
 
2727
- .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
2522
+ .pf-c-chip {
2523
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
2524
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
2525
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2526
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2527
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
2528
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2529
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2530
+ }
2531
+
2532
+ .pf-c-chip {
2533
+ --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
2534
+ --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
2535
+ --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
2536
+ --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
2537
+ --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
2538
+ --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
2539
+ --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
2540
+ --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
2541
+ --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
2542
+ --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
2543
+ --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
2544
+ --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
2545
+ --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
2546
+ --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
2547
+ --pf-c-chip__text--Color: var(--pf-global--Color--100);
2548
+ --pf-c-chip__text--MaxWidth: 16ch;
2549
+ --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
2550
+ --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
2551
+ --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
2552
+ --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
2553
+ --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
2554
+ --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
2555
+ --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
2556
+ --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
2557
+ --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
2558
+ --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
2559
+ color: var(--pf-global--Color--100);
2728
2560
  position: relative;
2561
+ display: inline-flex;
2562
+ align-items: center;
2563
+ padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
2564
+ list-style: none;
2565
+ background-color: var(--pf-c-chip--BackgroundColor);
2566
+ border-radius: var(--pf-c-chip--BorderRadius);
2729
2567
  }
2730
2568
 
2731
- .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
2569
+ .pf-c-chip::before {
2732
2570
  position: absolute;
2733
- right: var(--pf-c-card--m-selectable-raised--before--Right);
2734
- bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
2735
- left: var(--pf-c-card--m-selectable-raised--before--Left);
2736
- height: var(--pf-c-card--m-selectable-raised--before--Height);
2571
+ top: 0;
2572
+ right: 0;
2573
+ bottom: 0;
2574
+ left: 0;
2737
2575
  content: "";
2738
- background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
2739
- transition: var(--pf-c-card--m-selectable-raised--before--Transition);
2740
- transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
2741
- transform-origin: center bottom;
2576
+ border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
2577
+ border-radius: var(--pf-c-chip--before--BorderRadius);
2742
2578
  }
2743
2579
 
2744
- .pf-c-card.pf-m-hoverable-raised:hover {
2745
- --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
2746
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
2580
+ .pf-c-chip.pf-m-overflow {
2581
+ border: 0;
2747
2582
  }
2748
2583
 
2749
- .pf-c-card.pf-m-selectable-raised {
2750
- cursor: pointer;
2584
+ .pf-c-chip.pf-m-overflow .pf-c-chip__text {
2585
+ color: var(--pf-c-chip--m-overflow__text--Color);
2751
2586
  }
2752
2587
 
2753
- .pf-c-card.pf-m-selectable-raised:hover {
2754
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
2755
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
2588
+ .pf-c-chip.pf-m-draggable {
2589
+ --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
2590
+ box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
2756
2591
  }
2757
2592
 
2758
- .pf-c-card.pf-m-selectable-raised:focus {
2759
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
2760
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
2593
+ .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
2594
+ font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
2761
2595
  }
2762
2596
 
2763
- .pf-c-card.pf-m-selectable-raised:active {
2764
- --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
2765
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
2597
+ .pf-c-chip .pf-c-button {
2598
+ --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
2599
+ --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
2600
+ --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
2601
+ --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
2602
+ --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
2603
+ margin-top: var(--pf-c-chip__c-button--MarginTop);
2604
+ margin-right: var(--pf-c-chip__c-button--MarginRight);
2605
+ margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
2766
2606
  }
2767
2607
 
2768
- .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
2769
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
2770
- --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
2771
- --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
2772
- --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
2773
- box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
2774
- transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
2775
- transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
2608
+ .pf-c-chip .pf-c-badge {
2609
+ margin-left: var(--pf-c-chip__c-badge--MarginLeft);
2776
2610
  }
2777
2611
 
2778
- .pf-c-card.pf-m-non-selectable-raised {
2779
- --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
2780
- --pf-c-card--BoxShadow: none;
2781
- --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
2782
- --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
2783
- --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
2612
+ .pf-c-chip__text {
2613
+ overflow: hidden;
2614
+ text-overflow: ellipsis;
2615
+ white-space: nowrap;
2616
+ position: relative;
2617
+ max-width: var(--pf-c-chip__text--MaxWidth);
2618
+ font-size: var(--pf-c-chip__text--FontSize);
2619
+ color: var(--pf-c-chip__text--Color);
2784
2620
  }
2785
2621
 
2786
- .pf-c-card.pf-m-compact {
2787
- --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
2788
- --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
2789
- --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-compact--first-child--PaddingTop);
2790
- --pf-c-card--child--PaddingRight: var(--pf-c-card--m-compact--child--PaddingRight);
2791
- --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-compact--child--PaddingBottom);
2792
- --pf-c-card--child--PaddingLeft: var(--pf-c-card--m-compact--child--PaddingLeft);
2793
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-compact--c-divider--child--PaddingTop);
2794
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
2622
+ .pf-c-chip__icon + .pf-c-chip__text,
2623
+ .pf-c-chip__text + .pf-c-chip__icon {
2624
+ margin-left: var(--pf-c-chip__icon--MarginLeft);
2795
2625
  }
2796
2626
 
2797
- .pf-c-card.pf-m-display-lg {
2798
- --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
2799
- --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
2800
- --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
2801
- --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
2802
- --pf-c-card--child--PaddingLeft: var(--pf-c-card--m-display-lg--child--PaddingLeft);
2803
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-c-card--m-display-lg--c-divider--child--PaddingTop);
2804
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-display-lg__title--not--last-child--PaddingBottom);
2627
+ .pf-c-chip-group {
2628
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
2629
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
2630
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2631
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2632
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
2633
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2634
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2805
2635
  }
2806
2636
 
2807
- .pf-c-card.pf-m-flat {
2808
- --pf-c-card--BoxShadow: none;
2809
- --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
2810
- --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
2811
- --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
2812
- --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
2813
- border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
2637
+ .pf-c-chip-group {
2638
+ color: var(--pf-global--Color--100);
2639
+ --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
2640
+ --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
2641
+ --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
2642
+ --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
2643
+ --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
2644
+ --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
2645
+ --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
2646
+ --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
2647
+ --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
2648
+ --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
2649
+ --pf-c-chip-group__label--MaxWidth: 18ch;
2650
+ --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
2651
+ --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
2652
+ --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
2653
+ --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
2814
2654
  }
2815
2655
 
2816
- .pf-c-card.pf-m-plain {
2817
- --pf-c-card--BoxShadow: var(--pf-c-card--m-plain--BoxShadow);
2818
- --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
2656
+ .pf-c-chip-group.pf-m-category {
2657
+ padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
2658
+ padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
2659
+ padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
2660
+ padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
2661
+ background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
2662
+ border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
2819
2663
  }
2820
2664
 
2821
- .pf-c-card.pf-m-rounded {
2822
- --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
2823
- border-radius: var(--pf-c-card--m-rounded--BorderRadius);
2665
+ .pf-c-chip-group__main {
2666
+ display: flex;
2667
+ flex: 1;
2668
+ flex-wrap: wrap;
2669
+ align-items: baseline;
2670
+ }
2671
+
2672
+ .pf-c-chip-group__list {
2673
+ margin-right: var(--pf-c-chip-group__list--MarginRight);
2674
+ margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
2824
2675
  }
2825
2676
 
2826
- .pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {
2827
- transform: rotate(var(--pf-c-card--m-expanded__header-toggle-icon--Rotate));
2677
+ .pf-c-chip-group,
2678
+ .pf-c-chip-group__list {
2679
+ display: inline-flex;
2680
+ flex-wrap: wrap;
2681
+ align-items: center;
2828
2682
  }
2829
2683
 
2830
- .pf-c-card.pf-m-full-height {
2831
- height: var(--pf-c-card--m-full-height--Height);
2684
+ .pf-c-chip-group__list-item {
2685
+ display: inline-flex;
2686
+ margin-right: var(--pf-c-chip-group__list-item--MarginRight);
2687
+ margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
2832
2688
  }
2833
2689
 
2834
- .pf-c-card > .pf-c-divider + .pf-c-card__header, .pf-c-card > .pf-c-divider + .pf-c-card__title, .pf-c-card > .pf-c-divider + .pf-c-card__body, .pf-c-card > .pf-c-divider + .pf-c-card__footer {
2835
- padding-top: var(--pf-c-card--c-divider--child--PaddingTop);
2690
+ .pf-c-chip-group__label {
2691
+ overflow: hidden;
2692
+ text-overflow: ellipsis;
2693
+ white-space: nowrap;
2694
+ max-width: var(--pf-c-chip-group__label--MaxWidth);
2695
+ margin-right: var(--pf-c-chip-group__label--MarginRight);
2696
+ font-size: var(--pf-c-chip-group__label--FontSize);
2836
2697
  }
2837
2698
 
2838
- .pf-c-card__header {
2699
+ .pf-c-chip-group__close {
2839
2700
  display: flex;
2840
- flex-direction: row;
2841
- align-items: center;
2701
+ align-self: flex-start;
2702
+ margin-top: var(--pf-c-chip-group__close--MarginTop);
2703
+ margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
2842
2704
  }
2843
2705
 
2844
- .pf-c-card__header .pf-c-card__title {
2845
- --pf-c-card--first-child--PaddingTop: 0;
2846
- --pf-c-card__title--not--last-child--PaddingBottom: 0;
2847
- padding: 0;
2706
+ .pf-c-alert {
2707
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
2708
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
2709
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
2710
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
2711
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
2712
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
2713
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
2848
2714
  }
2849
2715
 
2850
- .pf-c-card__header.pf-m-toggle-right {
2851
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
2852
- --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
2716
+ .pf-c-alert {
2717
+ --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
2718
+ --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
2719
+ --pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
2720
+ --pf-c-alert--GridTemplateAreas:
2721
+ "icon title action"
2722
+ ". description description"
2723
+ ". actiongroup actiongroup";
2724
+ --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
2725
+ --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
2726
+ --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
2727
+ --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
2728
+ --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
2729
+ --pf-c-alert--PaddingLeft: var(--pf-global--spacer--md);
2730
+ --pf-c-alert__FontSize: var(--pf-global--FontSize--sm);
2731
+ --pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element) - 0.0625rem);
2732
+ --pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element));
2733
+ --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
2734
+ --pf-c-alert__toggle-icon--Rotate: 0;
2735
+ --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
2736
+ --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
2737
+ --pf-c-alert__icon--MarginTop: 0.0625rem;
2738
+ --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
2739
+ --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
2740
+ --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
2741
+ --pf-c-alert__title--Color: var(--pf-global--default-color--300);
2742
+ --pf-c-alert__title--max-lines: 1;
2743
+ --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
2744
+ --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
2745
+ --pf-c-alert__action--TranslateY: 0.125rem;
2746
+ --pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm) * -1);
2747
+ --pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs);
2748
+ --pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs);
2749
+ --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
2750
+ --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md);
2751
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
2752
+ --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
2753
+ --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
2754
+ --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
2755
+ --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);
2756
+ --pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100);
2757
+ --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100);
2758
+ --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200);
2759
+ --pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100);
2760
+ --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100);
2761
+ --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200);
2762
+ --pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100);
2763
+ --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100);
2764
+ --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);
2765
+ --pf-c-alert--m-inline--BoxShadow: none;
2766
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
2767
+ --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
2768
+ --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50);
2769
+ --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50);
2770
+ --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50);
2771
+ --pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
2772
+ --pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
2773
+ --pf-c-alert--m-inline--m-plain--PaddingTop: 0;
2774
+ --pf-c-alert--m-inline--m-plain--PaddingRight: 0;
2775
+ --pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
2776
+ --pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
2777
+ --pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
2778
+ --pf-c-alert--m-expandable--GridTemplateAreas:
2779
+ "toggle icon title action"
2780
+ ". . description description"
2781
+ ". . actiongroup actiongroup";
2782
+ --pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
2783
+ --pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
2784
+ --pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
2785
+ color: var(--pf-global--Color--100);
2786
+ position: relative;
2787
+ display: grid;
2788
+ padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
2789
+ font-size: var(--pf-c-alert__FontSize);
2790
+ background-color: var(--pf-c-alert--BackgroundColor);
2791
+ border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
2792
+ box-shadow: var(--pf-c-alert--BoxShadow);
2793
+ grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
2794
+ grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
2853
2795
  }
2854
2796
 
2855
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
2856
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
2797
+ .pf-c-alert.pf-m-success {
2798
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
2799
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
2800
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
2801
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
2857
2802
  }
2858
2803
 
2859
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
2860
- order: 2;
2804
+ .pf-c-alert.pf-m-danger {
2805
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
2806
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
2807
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
2808
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
2861
2809
  }
2862
2810
 
2863
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
2864
- flex: 1;
2811
+ .pf-c-alert.pf-m-warning {
2812
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
2813
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
2814
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
2815
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
2865
2816
  }
2866
2817
 
2867
- .pf-c-card__header-toggle {
2868
- align-self: flex-start;
2869
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) var(--pf-c-card__header-toggle--MarginLeft);
2818
+ .pf-c-alert.pf-m-info {
2819
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
2820
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
2821
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
2822
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
2870
2823
  }
2871
2824
 
2872
- .pf-c-card__header-toggle-icon {
2873
- display: inline-block;
2874
- transition: var(--pf-c-card__header-toggle-icon--Transition);
2825
+ .pf-c-alert.pf-m-inline {
2826
+ --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
2827
+ --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
2875
2828
  }
2876
2829
 
2877
- .pf-c-card__title {
2878
- font-family: var(--pf-c-card__title--FontFamily);
2879
- font-size: var(--pf-c-card__title--FontSize);
2880
- font-weight: var(--pf-c-card__title--FontWeight);
2830
+ .pf-c-alert.pf-m-plain {
2831
+ --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
2832
+ --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
2833
+ --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
2834
+ --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
2835
+ --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
2836
+ --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
2881
2837
  }
2882
2838
 
2883
- .pf-c-card__actions {
2884
- display: flex;
2885
- align-items: center;
2886
- align-self: flex-start;
2887
- order: 1;
2888
- padding-left: var(--pf-c-card__actions--PaddingLeft);
2889
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
2839
+ .pf-c-alert.pf-m-expandable {
2840
+ --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
2841
+ --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
2842
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
2890
2843
  }
2891
2844
 
2892
- .pf-c-card__actions > * + * {
2893
- margin-left: var(--pf-c-card__actions--child--MarginLeft);
2845
+ .pf-c-alert.pf-m-expanded {
2846
+ --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
2847
+ --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
2894
2848
  }
2895
2849
 
2896
- .pf-c-card__actions + .pf-c-card__title,
2897
- .pf-c-card__actions + .pf-c-card__body,
2898
- .pf-c-card__actions + .pf-c-card__footer {
2899
- padding: 0;
2850
+ .pf-c-alert__toggle {
2851
+ margin-top: var(--pf-c-alert__toggle--MarginTop);
2852
+ margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
2853
+ margin-left: var(--pf-c-alert__toggle--MarginLeft);
2900
2854
  }
2901
2855
 
2902
- .pf-c-card__actions.pf-m-no-offset {
2903
- --pf-c-card__header-toggle--MarginTop: 0;
2904
- --pf-c-card__header-toggle--MarginBottom: 0;
2856
+ .pf-c-alert__toggle-icon {
2857
+ display: inline-block;
2858
+ transition: var(--pf-c-alert__toggle-icon--Transition);
2859
+ transform: rotate(var(--pf-c-alert__toggle-icon--Rotate));
2905
2860
  }
2906
2861
 
2907
- .pf-c-card__header,
2908
- .pf-c-card__title,
2909
- .pf-c-card__body,
2910
- .pf-c-card__footer {
2911
- padding-right: var(--pf-c-card--child--PaddingRight);
2912
- padding-bottom: var(--pf-c-card--child--PaddingBottom);
2913
- padding-left: var(--pf-c-card--child--PaddingLeft);
2862
+ .pf-c-alert__icon {
2863
+ grid-area: icon;
2864
+ display: flex;
2865
+ margin-top: var(--pf-c-alert__icon--MarginTop);
2866
+ margin-right: var(--pf-c-alert__icon--MarginRight);
2867
+ font-size: var(--pf-c-alert__icon--FontSize);
2868
+ color: var(--pf-c-alert__icon--Color);
2914
2869
  }
2915
2870
 
2916
- .pf-c-card__header:first-child,
2917
- .pf-c-card__title:first-child,
2918
- .pf-c-card__body:first-child,
2919
- .pf-c-card__footer:first-child {
2920
- padding-top: var(--pf-c-card--first-child--PaddingTop);
2871
+ .pf-c-alert__title {
2872
+ grid-area: title;
2873
+ font-weight: var(--pf-c-alert__title--FontWeight);
2874
+ color: var(--pf-c-alert__title--Color);
2875
+ word-break: break-word;
2921
2876
  }
2922
2877
 
2923
- .pf-c-card__header:not(:last-child),
2924
- .pf-c-card__title:not(:last-child) {
2925
- padding-bottom: var(--pf-c-card__title--not--last-child--PaddingBottom);
2878
+ .pf-c-alert__title.pf-m-truncate {
2879
+ display: -webkit-box;
2880
+ -webkit-box-orient: vertical;
2881
+ -webkit-line-clamp: var(--pf-c-alert__title--max-lines);
2882
+ overflow: hidden;
2926
2883
  }
2927
2884
 
2928
- .pf-c-card__expandable-content {
2929
- --pf-c-card--first-child--PaddingTop: 0;
2885
+ .pf-c-alert__description {
2886
+ grid-area: description;
2887
+ padding-top: var(--pf-c-alert__description--PaddingTop);
2888
+ word-break: break-word;
2930
2889
  }
2931
2890
 
2932
- .pf-c-card__body:not(.pf-m-no-fill) {
2933
- flex: 1 1 auto;
2891
+ .pf-c-alert__description + .pf-c-alert__action-group {
2892
+ --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
2934
2893
  }
2935
2894
 
2936
- .pf-c-card__body {
2937
- font-size: var(--pf-c-card__body--FontSize);
2895
+ .pf-c-alert__action {
2896
+ grid-area: action;
2897
+ margin-top: var(--pf-c-alert__action--MarginTop);
2898
+ margin-right: var(--pf-c-alert__action--MarginRight);
2899
+ margin-bottom: var(--pf-c-alert__action--MarginBottom);
2900
+ transform: translateY(var(--pf-c-alert__action--TranslateY));
2938
2901
  }
2939
-
2940
- .pf-c-card__footer {
2941
- font-size: var(--pf-c-card__footer--FontSize);
2902
+
2903
+ .pf-c-alert__action > .pf-c-button {
2904
+ --pf-c-button--LineHeight: 1;
2942
2905
  }
2943
2906
 
2944
- .pf-m-overpass-font .pf-c-card .pf-c-card__title {
2945
- font-weight: var(--pf-global--FontWeight--normal);
2907
+ .pf-c-alert__action-group {
2908
+ grid-area: actiongroup;
2909
+ padding-top: var(--pf-c-alert__action-group--PaddingTop);
2946
2910
  }
2947
2911
 
2948
- .pf-c-check {
2949
- --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
2950
- --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
2951
- --pf-c-check__label--Color: var(--pf-global--Color--100);
2952
- --pf-c-check__label--FontWeight: var(--pf-global--FontWeight--normal);
2953
- --pf-c-check__label--FontSize: var(--pf-global--FontSize--md);
2954
- --pf-c-check__label--LineHeight: var(--pf-global--LineHeight--sm);
2955
- --pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
2956
- --pf-c-check__input--MarginTop: calc(((var(--pf-c-check__label--FontSize) * var(--pf-c-check__label--LineHeight)) - var(--pf-c-check__input--Height)) / 2);
2957
- --pf-c-check__description--FontSize: var(--pf-global--FontSize--sm);
2958
- --pf-c-check__description--Color: var(--pf-global--Color--200);
2959
- --pf-c-check__body--MarginTop: var(--pf-global--spacer--sm);
2960
- display: grid;
2961
- grid-template-columns: auto 1fr;
2962
- grid-gap: var(--pf-c-check--GridGap);
2963
- align-items: start;
2964
- justify-items: start;
2912
+ .pf-c-alert__action-group > .pf-c-button {
2913
+ --pf-c-button--m-link--m-inline--hover--TextDecoration: none;
2965
2914
  }
2966
2915
 
2967
- .pf-c-check.pf-m-standalone {
2968
- --pf-c-check--GridGap: 0;
2969
- --pf-c-check__input--Height: auto;
2970
- --pf-c-check__input--MarginTop: 0;
2971
- display: inline-grid;
2972
- line-height: 1;
2916
+ .pf-c-alert__action-group > .pf-c-button:not(:last-child) {
2917
+ margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
2973
2918
  }
2974
2919
 
2975
- .pf-c-check__label {
2976
- font-size: var(--pf-c-check__label--FontSize);
2977
- font-weight: var(--pf-c-check__label--FontWeight);
2978
- line-height: var(--pf-c-check__label--LineHeight);
2979
- color: var(--pf-c-check__label--Color);
2920
+ .pf-m-overpass-font .pf-c-alert__title {
2921
+ --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
2980
2922
  }
2981
2923
 
2982
- .pf-c-check__input {
2983
- height: var(--pf-c-check__input--Height);
2984
- margin-top: var(--pf-c-check__input--MarginTop);
2924
+ .pf-c-action-list {
2925
+ --pf-c-action-list--m-icon--spacer: 0;
2926
+ --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
2927
+ --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
2985
2928
  }
2986
2929
 
2987
- .pf-c-check__description {
2988
- grid-column: 2;
2989
- font-size: var(--pf-c-check__description--FontSize);
2990
- color: var(--pf-c-check__description--Color);
2930
+ .pf-c-action-list,
2931
+ .pf-c-action-list__group {
2932
+ --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
2933
+ --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
2934
+ display: flex;
2935
+ align-items: center;
2991
2936
  }
2992
2937
 
2993
- .pf-c-check__body {
2994
- grid-column: 2;
2995
- margin-top: var(--pf-c-check__body--MarginTop);
2938
+ .pf-c-action-list > * + *,
2939
+ .pf-c-action-list__group > * + * {
2940
+ margin-left: var(--pf-c-action-list--child--spacer);
2996
2941
  }
2997
2942
 
2998
- label.pf-c-check, .pf-c-check__label,
2999
- .pf-c-check__input {
3000
- cursor: pointer;
2943
+ .pf-c-action-list > * + .pf-c-action-list__group,
2944
+ .pf-c-action-list .pf-c-action-list__group + *,
2945
+ .pf-c-action-list__group > * + .pf-c-action-list__group,
2946
+ .pf-c-action-list__group .pf-c-action-list__group + * {
2947
+ margin-left: var(--pf-c-action-list--group--spacer);
3001
2948
  }
3002
2949
 
3003
- .pf-c-check__label:disabled, .pf-c-check__label.pf-m-disabled,
3004
- .pf-c-check__input:disabled,
3005
- .pf-c-check__input.pf-m-disabled {
3006
- --pf-c-check__label--Color: var(--pf-c-check__label--disabled--Color);
3007
- cursor: not-allowed;
2950
+ .pf-c-action-list.pf-m-icons,
2951
+ .pf-c-action-list__group.pf-m-icons {
2952
+ --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
3008
2953
  }
3009
2954
 
3010
- .pf-c-chip {
2955
+ .pf-c-accordion {
3011
2956
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3012
2957
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
3013
2958
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -3017,178 +2962,233 @@ label.pf-c-check, .pf-c-check__label,
3017
2962
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3018
2963
  }
3019
2964
 
3020
- .pf-c-chip {
3021
- --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
3022
- --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
3023
- --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
3024
- --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
3025
- --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
3026
- --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
3027
- --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
3028
- --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
3029
- --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
3030
- --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
3031
- --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
3032
- --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
3033
- --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
3034
- --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
3035
- --pf-c-chip__text--Color: var(--pf-global--Color--100);
3036
- --pf-c-chip__text--MaxWidth: 16ch;
3037
- --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
3038
- --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
3039
- --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
3040
- --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
3041
- --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
3042
- --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
3043
- --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
3044
- --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
3045
- --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
3046
- --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
2965
+ .pf-c-accordion {
2966
+ --pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100);
2967
+ --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm);
2968
+ --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
2969
+ --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
2970
+ --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
2971
+ --pf-c-accordion__toggle--before--BackgroundColor: transparent;
2972
+ --pf-c-accordion__toggle--before--Top: 0;
2973
+ --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
2974
+ --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
2975
+ --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
2976
+ --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
2977
+ --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
2978
+ --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
2979
+ --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
2980
+ --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
2981
+ --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
2982
+ --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
2983
+ --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
2984
+ --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
2985
+ --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
2986
+ --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
2987
+ --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
2988
+ --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
2989
+ --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
2990
+ --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
2991
+ --pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
2992
+ --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
2993
+ --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
2994
+ --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
2995
+ --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
2996
+ --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
2997
+ --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
2998
+ --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
2999
+ --pf-c-accordion__expanded-content-body--before--Top: 0;
3000
+ --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
3001
+ --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
3002
+ --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
3003
+ --pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg);
3004
+ --pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
3005
+ --pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl);
3006
+ --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100);
3007
+ --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100);
3008
+ --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
3009
+ --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100);
3010
+ --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
3011
+ --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
3012
+ --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
3013
+ --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
3014
+ --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
3015
+ --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
3016
+ --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
3017
+ --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
3018
+ --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
3019
+ --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
3020
+ --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
3021
+ --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
3022
+ --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
3023
+ --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
3024
+ --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
3025
+ --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3026
+ --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
3027
+ --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
3047
3028
  color: var(--pf-global--Color--100);
3048
- position: relative;
3049
- display: inline-flex;
3050
- align-items: center;
3051
- padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
3052
- list-style: none;
3053
- background-color: var(--pf-c-chip--BackgroundColor);
3054
- border-radius: var(--pf-c-chip--BorderRadius);
3029
+ background-color: var(--pf-c-accordion--BackgroundColor);
3055
3030
  }
3056
3031
 
3057
- .pf-c-chip::before {
3032
+ .pf-c-accordion.pf-m-display-lg {
3033
+ --pf-c-accordion__toggle--PaddingTop: var(--pf-c-accordion--m-display-lg__toggle--PaddingTop);
3034
+ --pf-c-accordion__toggle--PaddingRight: var(--pf-c-accordion--m-display-lg__toggle--PaddingRight);
3035
+ --pf-c-accordion__toggle--PaddingBottom: var(--pf-c-accordion--m-display-lg__toggle--PaddingBottom);
3036
+ --pf-c-accordion__toggle--PaddingLeft: var(--pf-c-accordion--m-display-lg__toggle--PaddingLeft);
3037
+ --pf-c-accordion__toggle--FontFamily: var(--pf-c-accordion--m-display-lg__toggle--FontFamily);
3038
+ --pf-c-accordion__toggle--FontSize: var(--pf-c-accordion--m-display-lg__toggle--FontSize);
3039
+ --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color);
3040
+ --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color);
3041
+ --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight);
3042
+ --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color);
3043
+ --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
3044
+ --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
3045
+ --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
3046
+ --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
3047
+ --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
3048
+ --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
3049
+ --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
3050
+ --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
3051
+ --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
3052
+ }
3053
+
3054
+ .pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child {
3055
+ --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
3056
+ }
3057
+
3058
+ .pf-c-accordion.pf-m-bordered {
3059
+ --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
3060
+ border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
3061
+ }
3062
+
3063
+ .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle::before {
3058
3064
  position: absolute;
3059
3065
  top: 0;
3060
3066
  right: 0;
3061
3067
  bottom: 0;
3062
3068
  left: 0;
3063
3069
  content: "";
3064
- border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
3065
- border-radius: var(--pf-c-chip--before--BorderRadius);
3070
+ border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
3071
+ border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
3066
3072
  }
3067
3073
 
3068
- .pf-c-chip.pf-m-overflow {
3074
+ .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded {
3075
+ --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
3076
+ }
3077
+
3078
+ .pf-c-accordion.pf-m-bordered .pf-c-accordion__expanded-content.pf-m-expanded .pf-c-accordion__expanded-content-body:last-child::before {
3079
+ position: absolute;
3080
+ top: 0;
3081
+ right: 0;
3082
+ bottom: 0;
3083
+ left: 0;
3084
+ pointer-events: none;
3085
+ content: "";
3086
+ border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
3087
+ }
3088
+
3089
+ .pf-c-accordion__toggle {
3090
+ position: relative;
3091
+ display: flex;
3092
+ align-items: center;
3093
+ justify-content: space-between;
3094
+ width: 100%;
3095
+ padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
3096
+ font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
3097
+ font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
3069
3098
  border: 0;
3070
3099
  }
3071
3100
 
3072
- .pf-c-chip.pf-m-overflow .pf-c-chip__text {
3073
- color: var(--pf-c-chip--m-overflow__text--Color);
3101
+ .pf-c-accordion__toggle::after {
3102
+ position: absolute;
3103
+ top: var(--pf-c-accordion__toggle--before--Top);
3104
+ bottom: 0;
3105
+ left: 0;
3106
+ width: var(--pf-c-accordion__toggle--before--Width);
3107
+ content: "";
3108
+ background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
3109
+ }
3110
+
3111
+ .pf-c-accordion__toggle.pf-m-expanded {
3112
+ --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
3113
+ }
3114
+
3115
+ .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-text {
3116
+ font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
3117
+ color: var(--pf-c-accordion__toggle--m-expanded__toggle-text--Color);
3074
3118
  }
3075
3119
 
3076
- .pf-c-chip.pf-m-draggable {
3077
- --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
3078
- box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
3120
+ .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-icon {
3121
+ transform: rotate(var(--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
3079
3122
  }
3080
3123
 
3081
- .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
3082
- font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
3124
+ .pf-c-accordion__toggle:hover {
3125
+ background-color: var(--pf-c-accordion__toggle--hover--BackgroundColor);
3083
3126
  }
3084
3127
 
3085
- .pf-c-chip .pf-c-button {
3086
- --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
3087
- --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
3088
- --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
3089
- --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
3090
- --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
3091
- margin-top: var(--pf-c-chip__c-button--MarginTop);
3092
- margin-right: var(--pf-c-chip__c-button--MarginRight);
3093
- margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
3128
+ .pf-c-accordion__toggle:hover .pf-c-accordion__toggle-text {
3129
+ color: var(--pf-c-accordion__toggle--hover__toggle-text--Color);
3094
3130
  }
3095
3131
 
3096
- .pf-c-chip .pf-c-badge {
3097
- margin-left: var(--pf-c-chip__c-badge--MarginLeft);
3132
+ .pf-c-accordion__toggle:focus {
3133
+ background-color: var(--pf-c-accordion__toggle--focus--BackgroundColor);
3098
3134
  }
3099
3135
 
3100
- .pf-c-chip__text {
3101
- overflow: hidden;
3102
- text-overflow: ellipsis;
3103
- white-space: nowrap;
3104
- position: relative;
3105
- max-width: var(--pf-c-chip__text--MaxWidth);
3106
- font-size: var(--pf-c-chip__text--FontSize);
3107
- color: var(--pf-c-chip__text--Color);
3136
+ .pf-c-accordion__toggle:focus .pf-c-accordion__toggle-text {
3137
+ font-weight: var(--pf-c-accordion__toggle--focus__toggle-text--FontWeight);
3138
+ color: var(--pf-c-accordion__toggle--focus__toggle-text--Color);
3108
3139
  }
3109
3140
 
3110
- .pf-c-chip__icon + .pf-c-chip__text,
3111
- .pf-c-chip__text + .pf-c-chip__icon {
3112
- margin-left: var(--pf-c-chip__icon--MarginLeft);
3141
+ .pf-c-accordion__toggle:active {
3142
+ background-color: var(--pf-c-accordion__toggle--active--BackgroundColor);
3113
3143
  }
3114
3144
 
3115
- .pf-c-chip-group {
3116
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3117
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3118
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3119
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3120
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3121
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3122
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3145
+ .pf-c-accordion__toggle:active .pf-c-accordion__toggle-text {
3146
+ font-weight: var(--pf-c-accordion__toggle--active__toggle-text--FontWeight);
3147
+ color: var(--pf-c-accordion__toggle--active__toggle-text--Color);
3123
3148
  }
3124
3149
 
3125
- .pf-c-chip-group {
3126
- color: var(--pf-global--Color--100);
3127
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3128
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
3129
- --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
3130
- --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
3131
- --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
3132
- --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
3133
- --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
3134
- --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
3135
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
3136
- --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
3137
- --pf-c-chip-group__label--MaxWidth: 18ch;
3138
- --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
3139
- --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
3140
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
3141
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
3150
+ .pf-c-accordion__toggle-text {
3151
+ overflow: hidden;
3152
+ text-overflow: ellipsis;
3153
+ white-space: nowrap;
3154
+ max-width: var(--pf-c-accordion__toggle-text--MaxWidth);
3142
3155
  }
3143
3156
 
3144
- .pf-c-chip-group.pf-m-category {
3145
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
3146
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
3147
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
3148
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
3149
- background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
3150
- border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
3157
+ .pf-c-accordion__toggle-icon {
3158
+ transition: var(--pf-c-accordion__toggle-icon--Transition);
3151
3159
  }
3152
3160
 
3153
- .pf-c-chip-group__main {
3154
- display: flex;
3155
- flex: 1;
3156
- flex-wrap: wrap;
3157
- align-items: baseline;
3161
+ .pf-c-accordion__expanded-content {
3162
+ font-size: var(--pf-c-accordion__expanded-content--FontSize);
3163
+ color: var(--pf-c-accordion__expanded-content--Color);
3158
3164
  }
3159
3165
 
3160
- .pf-c-chip-group__list {
3161
- margin-right: var(--pf-c-chip-group__list--MarginRight);
3162
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
3166
+ .pf-c-accordion__expanded-content.pf-m-fixed {
3167
+ max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
3168
+ overflow-y: auto;
3163
3169
  }
3164
3170
 
3165
- .pf-c-chip-group,
3166
- .pf-c-chip-group__list {
3167
- display: inline-flex;
3168
- flex-wrap: wrap;
3169
- align-items: center;
3171
+ .pf-c-accordion__expanded-content.pf-m-expanded {
3172
+ --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
3170
3173
  }
3171
3174
 
3172
- .pf-c-chip-group__list-item {
3173
- display: inline-flex;
3174
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
3175
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
3175
+ .pf-c-accordion__expanded-content-body {
3176
+ position: relative;
3177
+ padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
3176
3178
  }
3177
3179
 
3178
- .pf-c-chip-group__label {
3179
- overflow: hidden;
3180
- text-overflow: ellipsis;
3181
- white-space: nowrap;
3182
- max-width: var(--pf-c-chip-group__label--MaxWidth);
3183
- margin-right: var(--pf-c-chip-group__label--MarginRight);
3184
- font-size: var(--pf-c-chip-group__label--FontSize);
3180
+ .pf-c-accordion__expanded-content-body::after {
3181
+ position: absolute;
3182
+ top: 0;
3183
+ bottom: 0;
3184
+ left: 0;
3185
+ width: var(--pf-c-accordion__expanded-content-body--before--Width);
3186
+ content: "";
3187
+ background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
3185
3188
  }
3186
3189
 
3187
- .pf-c-chip-group__close {
3188
- display: flex;
3189
- align-self: flex-start;
3190
- margin-top: var(--pf-c-chip-group__close--MarginTop);
3191
- margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
3190
+ .pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body {
3191
+ --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
3192
3192
  }
3193
3193
 
3194
3194
  .pf-c-clipboard-copy {
@@ -9365,64 +9365,207 @@ label.pf-c-input-group__text {
9365
9365
  --pf-c-sidebar__panel--FlexBasis: 100%;
9366
9366
  }
9367
9367
  }
9368
- @media (min-width: 1200px) {
9369
- .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9370
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9371
- }
9368
+ @media (min-width: 1200px) {
9369
+ .pf-c-sidebar__panel.pf-m-width-default-on-xl {
9370
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9371
+ }
9372
+
9373
+ .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9374
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9375
+ }
9376
+
9377
+ .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9378
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9379
+ }
9380
+
9381
+ .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9382
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9383
+ }
9384
+
9385
+ .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9386
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9387
+ }
9388
+
9389
+ .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9390
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9391
+ }
9392
+
9393
+ .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9394
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9395
+ }
9396
+ }
9397
+ @media (min-width: 1450px) {
9398
+ .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9399
+ --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9400
+ }
9401
+
9402
+ .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9403
+ --pf-c-sidebar__panel--FlexBasis: 25%;
9404
+ }
9405
+
9406
+ .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9407
+ --pf-c-sidebar__panel--FlexBasis: 33%;
9408
+ }
9409
+
9410
+ .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9411
+ --pf-c-sidebar__panel--FlexBasis: 50%;
9412
+ }
9413
+
9414
+ .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9415
+ --pf-c-sidebar__panel--FlexBasis: 66%;
9416
+ }
9417
+
9418
+ .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9419
+ --pf-c-sidebar__panel--FlexBasis: 75%;
9420
+ }
9421
+
9422
+ .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9423
+ --pf-c-sidebar__panel--FlexBasis: 100%;
9424
+ }
9425
+ }
9426
+ .pf-c-label-group {
9427
+ --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9428
+ --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
9429
+ --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
9430
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
9431
+ --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
9432
+ --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
9433
+ --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
9434
+ --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
9435
+ --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
9436
+ --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
9437
+ --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
9438
+ --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
9439
+ --pf-c-label-group__label--MarginBottom: 0;
9440
+ --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
9441
+ --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
9442
+ --pf-c-label-group__label--MaxWidth: 18ch;
9443
+ --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
9444
+ --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9445
+ --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9446
+ --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9447
+ --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
9448
+ --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
9449
+ --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
9450
+ --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
9451
+ --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
9452
+ --pf-c-label-group__textarea--MinWidth: 12.5rem;
9453
+ --pf-c-label-group__textarea--PaddingTop: 0.125rem;
9454
+ --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
9455
+ --pf-c-label-group__textarea--PaddingBottom: 0;
9456
+ --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
9457
+ display: inline-flex;
9458
+ }
9459
+
9460
+ .pf-c-label-group.pf-m-category {
9461
+ padding-top: var(--pf-c-label-group--m-category--PaddingTop);
9462
+ padding-right: var(--pf-c-label-group--m-category--PaddingRight);
9463
+ padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
9464
+ padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
9465
+ background-color: var(--pf-c-label-group--m-category--BackgroundColor);
9466
+ border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
9467
+ border-radius: var(--pf-c-label-group--m-category--BorderRadius);
9468
+ }
9469
+
9470
+ .pf-c-label-group.pf-m-vertical {
9471
+ --pf-c-label-group__list--MarginRight: 0;
9472
+ --pf-c-label-group__list--MarginBottom: 0;
9473
+ --pf-c-label-group__list-item--MarginRight: 0;
9474
+ --pf-c-label-group__label--MarginRight: 0;
9475
+ --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
9476
+ --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
9477
+ --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
9478
+ --pf-c-label-group__close--MarginBottom: 0;
9479
+ --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
9480
+ --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
9481
+ }
9482
+
9483
+ .pf-c-label-group.pf-m-vertical.pf-c-label-group {
9484
+ align-items: flex-start;
9485
+ }
9372
9486
 
9373
- .pf-c-sidebar__panel.pf-m-width-25-on-xl {
9374
- --pf-c-sidebar__panel--FlexBasis: 25%;
9375
- }
9487
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
9488
+ flex-direction: column;
9489
+ align-items: flex-start;
9490
+ }
9376
9491
 
9377
- .pf-c-sidebar__panel.pf-m-width-33-on-xl {
9378
- --pf-c-sidebar__panel--FlexBasis: 33%;
9379
- }
9492
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
9493
+ flex-direction: column;
9494
+ }
9380
9495
 
9381
- .pf-c-sidebar__panel.pf-m-width-50-on-xl {
9382
- --pf-c-sidebar__panel--FlexBasis: 50%;
9383
- }
9496
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
9497
+ --pf-c-label-group__list-item--MarginBottom: 0;
9498
+ }
9384
9499
 
9385
- .pf-c-sidebar__panel.pf-m-width-66-on-xl {
9386
- --pf-c-sidebar__panel--FlexBasis: 66%;
9387
- }
9500
+ .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
9501
+ --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
9502
+ --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
9503
+ }
9388
9504
 
9389
- .pf-c-sidebar__panel.pf-m-width-75-on-xl {
9390
- --pf-c-sidebar__panel--FlexBasis: 75%;
9391
- }
9505
+ .pf-c-label-group.pf-m-editable,
9506
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
9507
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
9508
+ display: flex;
9509
+ }
9392
9510
 
9393
- .pf-c-sidebar__panel.pf-m-width-100-on-xl {
9394
- --pf-c-sidebar__panel--FlexBasis: 100%;
9395
- }
9511
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
9512
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
9513
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
9514
+ .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
9515
+ flex: 1;
9396
9516
  }
9397
- @media (min-width: 1450px) {
9398
- .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
9399
- --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
9400
- }
9401
9517
 
9402
- .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
9403
- --pf-c-sidebar__panel--FlexBasis: 25%;
9404
- }
9518
+ .pf-c-label-group__main {
9519
+ display: flex;
9520
+ flex: 1;
9521
+ flex-wrap: wrap;
9522
+ align-items: baseline;
9523
+ }
9405
9524
 
9406
- .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
9407
- --pf-c-sidebar__panel--FlexBasis: 33%;
9408
- }
9525
+ .pf-c-label-group__list {
9526
+ display: inline-flex;
9527
+ flex-wrap: wrap;
9528
+ margin-right: var(--pf-c-label-group__list--MarginRight);
9529
+ margin-bottom: var(--pf-c-label-group__list--MarginBottom);
9530
+ }
9409
9531
 
9410
- .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
9411
- --pf-c-sidebar__panel--FlexBasis: 50%;
9412
- }
9532
+ .pf-c-label-group__list-item {
9533
+ display: inline-flex;
9534
+ margin-right: var(--pf-c-label-group__list-item--MarginRight);
9535
+ margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
9536
+ }
9413
9537
 
9414
- .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
9415
- --pf-c-sidebar__panel--FlexBasis: 66%;
9416
- }
9538
+ .pf-c-label-group__label {
9539
+ overflow: hidden;
9540
+ text-overflow: ellipsis;
9541
+ white-space: nowrap;
9542
+ max-width: var(--pf-c-label-group__label--MaxWidth);
9543
+ margin-right: var(--pf-c-label-group__label--MarginRight);
9544
+ margin-bottom: var(--pf-c-label-group__label--MarginBottom);
9545
+ font-size: var(--pf-c-label-group__label--FontSize);
9546
+ }
9417
9547
 
9418
- .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
9419
- --pf-c-sidebar__panel--FlexBasis: 75%;
9420
- }
9548
+ .pf-c-label-group__close {
9549
+ margin-top: var(--pf-c-label-group__close--MarginTop);
9550
+ margin-right: var(--pf-c-label-group__close--MarginRight);
9551
+ margin-bottom: var(--pf-c-label-group__close--MarginBottom);
9552
+ margin-left: var(--pf-c-label-group__close--MarginLeft);
9553
+ }
9421
9554
 
9422
- .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
9423
- --pf-c-sidebar__panel--FlexBasis: 100%;
9424
- }
9555
+ .pf-c-label-group__textarea {
9556
+ min-width: var(--pf-c-label-group__textarea--MinWidth);
9557
+ padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
9558
+ white-space: nowrap;
9559
+ resize: none;
9560
+ border: 0;
9561
+ -ms-overflow-style: none;
9562
+ scrollbar-width: none;
9563
+ }
9564
+
9565
+ .pf-c-label-group__textarea::-webkit-scrollbar {
9566
+ display: none;
9425
9567
  }
9568
+
9426
9569
  .pf-c-label {
9427
9570
  --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
9428
9571
  --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -9814,149 +9957,6 @@ button.pf-c-label__content:focus {
9814
9957
  color: var(--pf-c-label__icon--Color);
9815
9958
  }
9816
9959
 
9817
- .pf-c-label-group {
9818
- --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9819
- --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
9820
- --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
9821
- --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
9822
- --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
9823
- --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
9824
- --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
9825
- --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
9826
- --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
9827
- --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
9828
- --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
9829
- --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
9830
- --pf-c-label-group__label--MarginBottom: 0;
9831
- --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
9832
- --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
9833
- --pf-c-label-group__label--MaxWidth: 18ch;
9834
- --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
9835
- --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
9836
- --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9837
- --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
9838
- --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
9839
- --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
9840
- --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
9841
- --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
9842
- --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
9843
- --pf-c-label-group__textarea--MinWidth: 12.5rem;
9844
- --pf-c-label-group__textarea--PaddingTop: 0.125rem;
9845
- --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
9846
- --pf-c-label-group__textarea--PaddingBottom: 0;
9847
- --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
9848
- display: inline-flex;
9849
- }
9850
-
9851
- .pf-c-label-group.pf-m-category {
9852
- padding-top: var(--pf-c-label-group--m-category--PaddingTop);
9853
- padding-right: var(--pf-c-label-group--m-category--PaddingRight);
9854
- padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
9855
- padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
9856
- background-color: var(--pf-c-label-group--m-category--BackgroundColor);
9857
- border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
9858
- border-radius: var(--pf-c-label-group--m-category--BorderRadius);
9859
- }
9860
-
9861
- .pf-c-label-group.pf-m-vertical {
9862
- --pf-c-label-group__list--MarginRight: 0;
9863
- --pf-c-label-group__list--MarginBottom: 0;
9864
- --pf-c-label-group__list-item--MarginRight: 0;
9865
- --pf-c-label-group__label--MarginRight: 0;
9866
- --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
9867
- --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
9868
- --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
9869
- --pf-c-label-group__close--MarginBottom: 0;
9870
- --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
9871
- --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
9872
- }
9873
-
9874
- .pf-c-label-group.pf-m-vertical.pf-c-label-group {
9875
- align-items: flex-start;
9876
- }
9877
-
9878
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
9879
- flex-direction: column;
9880
- align-items: flex-start;
9881
- }
9882
-
9883
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
9884
- flex-direction: column;
9885
- }
9886
-
9887
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
9888
- --pf-c-label-group__list-item--MarginBottom: 0;
9889
- }
9890
-
9891
- .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
9892
- --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
9893
- --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
9894
- }
9895
-
9896
- .pf-c-label-group.pf-m-editable,
9897
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
9898
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list {
9899
- display: flex;
9900
- }
9901
-
9902
- .pf-c-label-group.pf-m-editable .pf-c-label-group__main,
9903
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list,
9904
- .pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
9905
- .pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
9906
- flex: 1;
9907
- }
9908
-
9909
- .pf-c-label-group__main {
9910
- display: flex;
9911
- flex: 1;
9912
- flex-wrap: wrap;
9913
- align-items: baseline;
9914
- }
9915
-
9916
- .pf-c-label-group__list {
9917
- display: inline-flex;
9918
- flex-wrap: wrap;
9919
- margin-right: var(--pf-c-label-group__list--MarginRight);
9920
- margin-bottom: var(--pf-c-label-group__list--MarginBottom);
9921
- }
9922
-
9923
- .pf-c-label-group__list-item {
9924
- display: inline-flex;
9925
- margin-right: var(--pf-c-label-group__list-item--MarginRight);
9926
- margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
9927
- }
9928
-
9929
- .pf-c-label-group__label {
9930
- overflow: hidden;
9931
- text-overflow: ellipsis;
9932
- white-space: nowrap;
9933
- max-width: var(--pf-c-label-group__label--MaxWidth);
9934
- margin-right: var(--pf-c-label-group__label--MarginRight);
9935
- margin-bottom: var(--pf-c-label-group__label--MarginBottom);
9936
- font-size: var(--pf-c-label-group__label--FontSize);
9937
- }
9938
-
9939
- .pf-c-label-group__close {
9940
- margin-top: var(--pf-c-label-group__close--MarginTop);
9941
- margin-right: var(--pf-c-label-group__close--MarginRight);
9942
- margin-bottom: var(--pf-c-label-group__close--MarginBottom);
9943
- margin-left: var(--pf-c-label-group__close--MarginLeft);
9944
- }
9945
-
9946
- .pf-c-label-group__textarea {
9947
- min-width: var(--pf-c-label-group__textarea--MinWidth);
9948
- padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
9949
- white-space: nowrap;
9950
- resize: none;
9951
- border: 0;
9952
- -ms-overflow-style: none;
9953
- scrollbar-width: none;
9954
- }
9955
-
9956
- .pf-c-label-group__textarea::-webkit-scrollbar {
9957
- display: none;
9958
- }
9959
-
9960
9960
  .pf-c-list {
9961
9961
  --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
9962
9962
  --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);