@patternfly/react-core 4.235.0 → 4.235.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,33 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 4.235.3 (2022-08-25)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * react-core should export all contents of dist directory ([#7883](https://github.com/patternfly/patternfly-react/issues/7883)) ([f5088d0](https://github.com/patternfly/patternfly-react/commit/f5088d069916d7c37335503251d13b4b846f3f62))
12
+
13
+
14
+
15
+
16
+
17
+ ## 4.235.2 (2022-08-24)
18
+
19
+ **Note:** Version bump only for package @patternfly/react-core
20
+
21
+
22
+
23
+
24
+
25
+ ## 4.235.1 (2022-08-24)
26
+
27
+ **Note:** Version bump only for package @patternfly/react-core
28
+
29
+
30
+
31
+
32
+
6
33
  # 4.235.0 (2022-08-23)
7
34
 
8
35
 
@@ -3303,118 +3303,6 @@ label.pf-c-check, .pf-c-check__label,
3303
3303
  color: var(--pf-c-check__label-required--Color);
3304
3304
  }
3305
3305
 
3306
- .pf-c-chip {
3307
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3308
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3309
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3310
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3311
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3312
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3313
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3314
- }
3315
-
3316
- .pf-c-chip {
3317
- --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
3318
- --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
3319
- --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
3320
- --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
3321
- --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
3322
- --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
3323
- --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
3324
- --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
3325
- --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
3326
- --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
3327
- --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
3328
- --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
3329
- --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
3330
- --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
3331
- --pf-c-chip__text--Color: var(--pf-global--Color--100);
3332
- --pf-c-chip__text--MaxWidth: 16ch;
3333
- --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
3334
- --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
3335
- --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
3336
- --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
3337
- --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
3338
- --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
3339
- --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
3340
- --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
3341
- --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
3342
- --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
3343
- color: var(--pf-global--Color--100);
3344
- position: relative;
3345
- display: inline-flex;
3346
- align-items: center;
3347
- min-width: 0;
3348
- padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
3349
- list-style: none;
3350
- background-color: var(--pf-c-chip--BackgroundColor);
3351
- border-radius: var(--pf-c-chip--BorderRadius);
3352
- }
3353
-
3354
- .pf-c-chip::before {
3355
- position: absolute;
3356
- top: 0;
3357
- right: 0;
3358
- bottom: 0;
3359
- left: 0;
3360
- content: "";
3361
- border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
3362
- border-radius: var(--pf-c-chip--before--BorderRadius);
3363
- }
3364
-
3365
- .pf-c-chip.pf-m-overflow {
3366
- border: 0;
3367
- }
3368
-
3369
- .pf-c-chip.pf-m-overflow .pf-c-chip__text {
3370
- color: var(--pf-c-chip--m-overflow__text--Color);
3371
- }
3372
-
3373
- .pf-c-chip.pf-m-draggable {
3374
- --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
3375
- box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
3376
- }
3377
-
3378
- .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
3379
- font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
3380
- }
3381
-
3382
- .pf-c-chip .pf-c-button {
3383
- --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
3384
- --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
3385
- --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
3386
- --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
3387
- --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
3388
- margin-top: var(--pf-c-chip__c-button--MarginTop);
3389
- margin-right: var(--pf-c-chip__c-button--MarginRight);
3390
- margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
3391
- }
3392
-
3393
- .pf-c-chip .pf-c-badge {
3394
- margin-left: var(--pf-c-chip__c-badge--MarginLeft);
3395
- }
3396
-
3397
- .pf-c-chip__text {
3398
- overflow: hidden;
3399
- text-overflow: ellipsis;
3400
- white-space: nowrap;
3401
- position: relative;
3402
- max-width: var(--pf-c-chip__text--MaxWidth);
3403
- font-size: var(--pf-c-chip__text--FontSize);
3404
- color: var(--pf-c-chip__text--Color);
3405
- }
3406
-
3407
- .pf-c-chip__icon + .pf-c-chip__text,
3408
- .pf-c-chip__text + .pf-c-chip__icon {
3409
- margin-left: var(--pf-c-chip__icon--MarginLeft);
3410
- }
3411
-
3412
- :where(.pf-theme-dark) .pf-c-chip {
3413
- --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
3414
- --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
3415
- --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
3416
- }
3417
-
3418
3306
  .pf-c-chip-group {
3419
3307
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
3420
3308
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -6337,6 +6225,118 @@ label.pf-c-check, .pf-c-check__label,
6337
6225
  --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
6338
6226
  }
6339
6227
  }
6228
+ .pf-c-chip {
6229
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
6230
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
6231
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
6232
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
6233
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
6234
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
6235
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
6236
+ }
6237
+
6238
+ .pf-c-chip {
6239
+ --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
6240
+ --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
6241
+ --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
6242
+ --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
6243
+ --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
6244
+ --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
6245
+ --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
6246
+ --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
6247
+ --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
6248
+ --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
6249
+ --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
6250
+ --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
6251
+ --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
6252
+ --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
6253
+ --pf-c-chip__text--Color: var(--pf-global--Color--100);
6254
+ --pf-c-chip__text--MaxWidth: 16ch;
6255
+ --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
6256
+ --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
6257
+ --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
6258
+ --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
6259
+ --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
6260
+ --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
6261
+ --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
6262
+ --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
6263
+ --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
6264
+ --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
6265
+ color: var(--pf-global--Color--100);
6266
+ position: relative;
6267
+ display: inline-flex;
6268
+ align-items: center;
6269
+ min-width: 0;
6270
+ padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
6271
+ list-style: none;
6272
+ background-color: var(--pf-c-chip--BackgroundColor);
6273
+ border-radius: var(--pf-c-chip--BorderRadius);
6274
+ }
6275
+
6276
+ .pf-c-chip::before {
6277
+ position: absolute;
6278
+ top: 0;
6279
+ right: 0;
6280
+ bottom: 0;
6281
+ left: 0;
6282
+ content: "";
6283
+ border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
6284
+ border-radius: var(--pf-c-chip--before--BorderRadius);
6285
+ }
6286
+
6287
+ .pf-c-chip.pf-m-overflow {
6288
+ border: 0;
6289
+ }
6290
+
6291
+ .pf-c-chip.pf-m-overflow .pf-c-chip__text {
6292
+ color: var(--pf-c-chip--m-overflow__text--Color);
6293
+ }
6294
+
6295
+ .pf-c-chip.pf-m-draggable {
6296
+ --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
6297
+ box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
6298
+ }
6299
+
6300
+ .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
6301
+ font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
6302
+ }
6303
+
6304
+ .pf-c-chip .pf-c-button {
6305
+ --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
6306
+ --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
6307
+ --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
6308
+ --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
6309
+ --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
6310
+ margin-top: var(--pf-c-chip__c-button--MarginTop);
6311
+ margin-right: var(--pf-c-chip__c-button--MarginRight);
6312
+ margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
6313
+ }
6314
+
6315
+ .pf-c-chip .pf-c-badge {
6316
+ margin-left: var(--pf-c-chip__c-badge--MarginLeft);
6317
+ }
6318
+
6319
+ .pf-c-chip__text {
6320
+ overflow: hidden;
6321
+ text-overflow: ellipsis;
6322
+ white-space: nowrap;
6323
+ position: relative;
6324
+ max-width: var(--pf-c-chip__text--MaxWidth);
6325
+ font-size: var(--pf-c-chip__text--FontSize);
6326
+ color: var(--pf-c-chip__text--Color);
6327
+ }
6328
+
6329
+ .pf-c-chip__icon + .pf-c-chip__text,
6330
+ .pf-c-chip__text + .pf-c-chip__icon {
6331
+ margin-left: var(--pf-c-chip__icon--MarginLeft);
6332
+ }
6333
+
6334
+ :where(.pf-theme-dark) .pf-c-chip {
6335
+ --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
6336
+ --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
6337
+ --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
6338
+ }
6339
+
6340
6340
  .pf-c-drawer {
6341
6341
  --pf-c-drawer__section--BackgroundColor: var(--pf-global--BackgroundColor--100);
6342
6342
  --pf-c-drawer__section--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
@@ -13115,210 +13115,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13115
13115
  background: transparent;
13116
13116
  }
13117
13117
 
13118
- .pf-c-modal-box {
13119
- --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
13120
- --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
13121
- --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
13122
- --pf-c-modal-box--Width: 100%;
13123
- --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
13124
- --pf-c-modal-box--m-sm--sm--MaxWidth: 35rem;
13125
- --pf-c-modal-box--m-md--Width: 52.5rem;
13126
- --pf-c-modal-box--m-lg--lg--MaxWidth: 70rem;
13127
- --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl));
13128
- --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
13129
- --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
13130
- --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
13131
- --pf-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer), var(--pf-global--spacer--2xl)) - var(--pf-c-modal-box--m-align-top--spacer));
13132
- --pf-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer) * 2, var(--pf-global--spacer--xl)));
13133
- --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
13134
- --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
13135
- --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
13136
- --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
13137
- --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
13138
- --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
13139
- --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
13140
- --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
13141
- --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
13142
- --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
13143
- --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
13144
- --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);
13145
- --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
13146
- --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);
13147
- --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);
13148
- --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
13149
- --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
13150
- --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
13151
- --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
13152
- --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
13153
- --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
13154
- --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
13155
- --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
13156
- --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
13157
- --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
13158
- --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
13159
- --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
13160
- --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);
13161
- --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
13162
- --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
13163
- position: relative;
13164
- z-index: var(--pf-c-modal-box--ZIndex);
13165
- display: flex;
13166
- flex-direction: column;
13167
- width: var(--pf-c-modal-box--Width);
13168
- max-width: var(--pf-c-modal-box--MaxWidth);
13169
- max-height: var(--pf-c-modal-box--MaxHeight);
13170
- background-color: var(--pf-c-modal-box--BackgroundColor);
13171
- box-shadow: var(--pf-c-modal-box--BoxShadow);
13172
- }
13173
-
13174
- @media (min-width: 1200px) {
13175
- .pf-c-modal-box {
13176
- --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
13177
- }
13178
- }
13179
- .pf-c-modal-box.pf-m-sm {
13180
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
13181
- }
13182
-
13183
- .pf-c-modal-box.pf-m-md {
13184
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
13185
- }
13186
-
13187
- .pf-c-modal-box.pf-m-lg {
13188
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
13189
- }
13190
-
13191
- .pf-c-modal-box.pf-m-align-top {
13192
- top: var(--pf-c-modal-box--m-align-top--MarginTop);
13193
- align-self: flex-start;
13194
- max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
13195
- max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
13196
- }
13197
-
13198
- .pf-c-modal-box.pf-m-danger {
13199
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
13200
- }
13201
-
13202
- .pf-c-modal-box.pf-m-warning {
13203
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
13204
- }
13205
-
13206
- .pf-c-modal-box.pf-m-success {
13207
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
13208
- }
13209
-
13210
- .pf-c-modal-box.pf-m-default {
13211
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
13212
- }
13213
-
13214
- .pf-c-modal-box.pf-m-info {
13215
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
13216
- }
13217
-
13218
- .pf-c-modal-box > .pf-c-button {
13219
- position: absolute;
13220
- top: var(--pf-c-modal-box--c-button--Top);
13221
- right: var(--pf-c-modal-box--c-button--Right);
13222
- }
13223
-
13224
- .pf-c-modal-box > .pf-c-button + * {
13225
- margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
13226
- }
13227
-
13228
- .pf-c-modal-box__header {
13229
- display: flex;
13230
- flex-direction: column;
13231
- flex-shrink: 0;
13232
- padding-top: var(--pf-c-modal-box__header--PaddingTop);
13233
- padding-right: var(--pf-c-modal-box__header--PaddingRight);
13234
- padding-left: var(--pf-c-modal-box__header--PaddingLeft);
13235
- }
13236
-
13237
- .pf-c-modal-box__header.pf-m-help {
13238
- display: flex;
13239
- flex-direction: row;
13240
- }
13241
-
13242
- .pf-c-modal-box__header:last-child {
13243
- padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
13244
- }
13245
-
13246
- .pf-c-modal-box__header + .pf-c-modal-box__body {
13247
- --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
13248
- }
13249
-
13250
- .pf-c-modal-box__header-main {
13251
- flex-grow: 1;
13252
- min-width: 0;
13253
- }
13254
-
13255
- .pf-c-modal-box__title,
13256
- .pf-c-modal-box__title-text {
13257
- overflow: hidden;
13258
- text-overflow: ellipsis;
13259
- white-space: nowrap;
13260
- }
13261
-
13262
- .pf-c-modal-box__title {
13263
- flex: 0 0 auto;
13264
- font-family: var(--pf-c-modal-box__title--FontFamily);
13265
- font-size: var(--pf-c-modal-box__title--FontSize);
13266
- line-height: var(--pf-c-modal-box__title--LineHeight);
13267
- }
13268
-
13269
- .pf-c-modal-box__title.pf-m-icon {
13270
- display: flex;
13271
- }
13272
-
13273
- .pf-c-modal-box__title-icon {
13274
- margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
13275
- color: var(--pf-c-modal-box__title-icon--Color);
13276
- }
13277
-
13278
- .pf-c-modal-box__description {
13279
- padding-top: var(--pf-c-modal-box__description--PaddingTop);
13280
- }
13281
-
13282
- .pf-c-modal-box__body {
13283
- flex: 1 1 auto;
13284
- min-height: var(--pf-c-modal-box__body--MinHeight);
13285
- padding-top: var(--pf-c-modal-box__body--PaddingTop);
13286
- padding-right: var(--pf-c-modal-box__body--PaddingRight);
13287
- padding-left: var(--pf-c-modal-box__body--PaddingLeft);
13288
- overflow-x: hidden;
13289
- overflow-y: auto;
13290
- overscroll-behavior: contain;
13291
- word-break: break-word;
13292
- -webkit-overflow-scrolling: touch;
13293
- }
13294
-
13295
- .pf-c-modal-box__body:last-child {
13296
- padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
13297
- }
13298
-
13299
- .pf-c-modal-box__footer {
13300
- display: flex;
13301
- flex: 0 0 auto;
13302
- align-items: center;
13303
- padding-top: var(--pf-c-modal-box__footer--PaddingTop);
13304
- padding-right: var(--pf-c-modal-box__footer--PaddingRight);
13305
- padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
13306
- padding-left: var(--pf-c-modal-box__footer--PaddingLeft);
13307
- }
13308
-
13309
- .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
13310
- margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);
13311
- }
13312
-
13313
- @media screen and (min-width: 576px) {
13314
- .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
13315
- --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
13316
- }
13317
- }
13318
- :where(.pf-theme-dark) .pf-c-modal-box {
13319
- --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--300);
13320
- }
13321
-
13322
13118
  .pf-c-multiple-file-upload {
13323
13119
  --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
13324
13120
  --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
@@ -13503,6 +13299,210 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
13503
13299
  color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
13504
13300
  }
13505
13301
 
13302
+ .pf-c-modal-box {
13303
+ --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
13304
+ --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
13305
+ --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
13306
+ --pf-c-modal-box--Width: 100%;
13307
+ --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
13308
+ --pf-c-modal-box--m-sm--sm--MaxWidth: 35rem;
13309
+ --pf-c-modal-box--m-md--Width: 52.5rem;
13310
+ --pf-c-modal-box--m-lg--lg--MaxWidth: 70rem;
13311
+ --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl));
13312
+ --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
13313
+ --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
13314
+ --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
13315
+ --pf-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer), var(--pf-global--spacer--2xl)) - var(--pf-c-modal-box--m-align-top--spacer));
13316
+ --pf-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer) * 2, var(--pf-global--spacer--xl)));
13317
+ --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
13318
+ --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
13319
+ --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
13320
+ --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
13321
+ --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
13322
+ --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
13323
+ --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
13324
+ --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
13325
+ --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
13326
+ --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
13327
+ --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
13328
+ --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);
13329
+ --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
13330
+ --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);
13331
+ --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);
13332
+ --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
13333
+ --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
13334
+ --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
13335
+ --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
13336
+ --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
13337
+ --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
13338
+ --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
13339
+ --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
13340
+ --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
13341
+ --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
13342
+ --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
13343
+ --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
13344
+ --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);
13345
+ --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
13346
+ --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
13347
+ position: relative;
13348
+ z-index: var(--pf-c-modal-box--ZIndex);
13349
+ display: flex;
13350
+ flex-direction: column;
13351
+ width: var(--pf-c-modal-box--Width);
13352
+ max-width: var(--pf-c-modal-box--MaxWidth);
13353
+ max-height: var(--pf-c-modal-box--MaxHeight);
13354
+ background-color: var(--pf-c-modal-box--BackgroundColor);
13355
+ box-shadow: var(--pf-c-modal-box--BoxShadow);
13356
+ }
13357
+
13358
+ @media (min-width: 1200px) {
13359
+ .pf-c-modal-box {
13360
+ --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
13361
+ }
13362
+ }
13363
+ .pf-c-modal-box.pf-m-sm {
13364
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
13365
+ }
13366
+
13367
+ .pf-c-modal-box.pf-m-md {
13368
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
13369
+ }
13370
+
13371
+ .pf-c-modal-box.pf-m-lg {
13372
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
13373
+ }
13374
+
13375
+ .pf-c-modal-box.pf-m-align-top {
13376
+ top: var(--pf-c-modal-box--m-align-top--MarginTop);
13377
+ align-self: flex-start;
13378
+ max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
13379
+ max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
13380
+ }
13381
+
13382
+ .pf-c-modal-box.pf-m-danger {
13383
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
13384
+ }
13385
+
13386
+ .pf-c-modal-box.pf-m-warning {
13387
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
13388
+ }
13389
+
13390
+ .pf-c-modal-box.pf-m-success {
13391
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
13392
+ }
13393
+
13394
+ .pf-c-modal-box.pf-m-default {
13395
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
13396
+ }
13397
+
13398
+ .pf-c-modal-box.pf-m-info {
13399
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
13400
+ }
13401
+
13402
+ .pf-c-modal-box > .pf-c-button {
13403
+ position: absolute;
13404
+ top: var(--pf-c-modal-box--c-button--Top);
13405
+ right: var(--pf-c-modal-box--c-button--Right);
13406
+ }
13407
+
13408
+ .pf-c-modal-box > .pf-c-button + * {
13409
+ margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
13410
+ }
13411
+
13412
+ .pf-c-modal-box__header {
13413
+ display: flex;
13414
+ flex-direction: column;
13415
+ flex-shrink: 0;
13416
+ padding-top: var(--pf-c-modal-box__header--PaddingTop);
13417
+ padding-right: var(--pf-c-modal-box__header--PaddingRight);
13418
+ padding-left: var(--pf-c-modal-box__header--PaddingLeft);
13419
+ }
13420
+
13421
+ .pf-c-modal-box__header.pf-m-help {
13422
+ display: flex;
13423
+ flex-direction: row;
13424
+ }
13425
+
13426
+ .pf-c-modal-box__header:last-child {
13427
+ padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
13428
+ }
13429
+
13430
+ .pf-c-modal-box__header + .pf-c-modal-box__body {
13431
+ --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
13432
+ }
13433
+
13434
+ .pf-c-modal-box__header-main {
13435
+ flex-grow: 1;
13436
+ min-width: 0;
13437
+ }
13438
+
13439
+ .pf-c-modal-box__title,
13440
+ .pf-c-modal-box__title-text {
13441
+ overflow: hidden;
13442
+ text-overflow: ellipsis;
13443
+ white-space: nowrap;
13444
+ }
13445
+
13446
+ .pf-c-modal-box__title {
13447
+ flex: 0 0 auto;
13448
+ font-family: var(--pf-c-modal-box__title--FontFamily);
13449
+ font-size: var(--pf-c-modal-box__title--FontSize);
13450
+ line-height: var(--pf-c-modal-box__title--LineHeight);
13451
+ }
13452
+
13453
+ .pf-c-modal-box__title.pf-m-icon {
13454
+ display: flex;
13455
+ }
13456
+
13457
+ .pf-c-modal-box__title-icon {
13458
+ margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
13459
+ color: var(--pf-c-modal-box__title-icon--Color);
13460
+ }
13461
+
13462
+ .pf-c-modal-box__description {
13463
+ padding-top: var(--pf-c-modal-box__description--PaddingTop);
13464
+ }
13465
+
13466
+ .pf-c-modal-box__body {
13467
+ flex: 1 1 auto;
13468
+ min-height: var(--pf-c-modal-box__body--MinHeight);
13469
+ padding-top: var(--pf-c-modal-box__body--PaddingTop);
13470
+ padding-right: var(--pf-c-modal-box__body--PaddingRight);
13471
+ padding-left: var(--pf-c-modal-box__body--PaddingLeft);
13472
+ overflow-x: hidden;
13473
+ overflow-y: auto;
13474
+ overscroll-behavior: contain;
13475
+ word-break: break-word;
13476
+ -webkit-overflow-scrolling: touch;
13477
+ }
13478
+
13479
+ .pf-c-modal-box__body:last-child {
13480
+ padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
13481
+ }
13482
+
13483
+ .pf-c-modal-box__footer {
13484
+ display: flex;
13485
+ flex: 0 0 auto;
13486
+ align-items: center;
13487
+ padding-top: var(--pf-c-modal-box__footer--PaddingTop);
13488
+ padding-right: var(--pf-c-modal-box__footer--PaddingRight);
13489
+ padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
13490
+ padding-left: var(--pf-c-modal-box__footer--PaddingLeft);
13491
+ }
13492
+
13493
+ .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
13494
+ margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);
13495
+ }
13496
+
13497
+ @media screen and (min-width: 576px) {
13498
+ .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
13499
+ --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
13500
+ }
13501
+ }
13502
+ :where(.pf-theme-dark) .pf-c-modal-box {
13503
+ --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--300);
13504
+ }
13505
+
13506
13506
  .pf-l-bullseye {
13507
13507
  --pf-l-bullseye--Padding: 0;
13508
13508
  display: flex;