@patternfly/patternfly 5.0.0-alpha.6 → 5.0.0-alpha.8

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.
Files changed (23) hide show
  1. package/base/_common.scss +0 -22
  2. package/base/patternfly-common.css +0 -10
  3. package/components/Card/card.css +9 -12
  4. package/components/Card/card.scss +11 -17
  5. package/components/ChipGroup/chip-group.css +29 -17
  6. package/components/ChipGroup/chip-group.scss +39 -22
  7. package/components/EmptyState/empty-state.css +46 -52
  8. package/components/EmptyState/empty-state.scss +58 -57
  9. package/docs/components/Card/examples/Card.md +61 -44
  10. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  11. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  12. package/docs/components/Wizard/examples/Wizard.md +4 -7
  13. package/docs/demos/Card/examples/Card.md +141 -106
  14. package/docs/demos/CardView/examples/CardView.md +1 -3
  15. package/docs/demos/Table/examples/Table.md +7 -10
  16. package/package.json +1 -1
  17. package/patternfly-base-no-reset.css +0 -10
  18. package/patternfly-base.css +0 -10
  19. package/patternfly-no-reset.css +84 -91
  20. package/patternfly.css +84 -91
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
  23. package/sass-utilities/scss-variables.scss +0 -1
package/patternfly-no-reset.css CHANGED
@@ -587,16 +587,6 @@
587
587
  font-weight: 300 700;
588
588
  font-display: fallback;
589
589
  }
590
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
591
- padding: 0;
592
- margin: 0;
593
- background-color: transparent;
594
- }
595
-
596
- html {
597
- font-size: var(--pf-global--root--FontSize, unset) !important;
598
- }
599
-
600
590
  .pf-screen-reader {
601
591
  position: fixed;
602
592
  top: 0;
@@ -8066,7 +8056,9 @@ button.pf-c-breadcrumb__link {
8066
8056
  --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
8067
8057
  --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
8068
8058
  --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
8069
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
8059
+ --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
8060
+ --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8061
+ --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
8070
8062
  --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8071
8063
  --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
8072
8064
  --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
@@ -8137,7 +8129,6 @@ button.pf-c-breadcrumb__link {
8137
8129
  --pf-c-card--m-plain--BackgroundColor: transparent;
8138
8130
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
8139
8131
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
8140
- --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
8141
8132
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
8142
8133
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
8143
8134
  display: flex;
@@ -8283,13 +8274,11 @@ button.pf-c-breadcrumb__link {
8283
8274
  --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
8284
8275
  --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
8285
8276
  }
8286
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
8287
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
8288
- }
8289
8277
  .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
8290
8278
  order: 2;
8291
8279
  }
8292
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
8280
+
8281
+ .pf-c-card__header-main {
8293
8282
  flex: 1;
8294
8283
  }
8295
8284
 
@@ -8315,10 +8304,8 @@ button.pf-c-breadcrumb__link {
8315
8304
  align-self: flex-start;
8316
8305
  order: 1;
8317
8306
  padding-left: var(--pf-c-card__actions--PaddingLeft);
8318
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
8319
- }
8320
- .pf-c-card__actions > * + * {
8321
- margin-left: var(--pf-c-card__actions--child--MarginLeft);
8307
+ margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
8308
+ gap: var(--pf-c-card__actions--Gap);
8322
8309
  }
8323
8310
  .pf-c-card__actions + .pf-c-card__title,
8324
8311
  .pf-c-card__actions + .pf-c-card__body,
@@ -8326,8 +8313,8 @@ button.pf-c-breadcrumb__link {
8326
8313
  padding: 0;
8327
8314
  }
8328
8315
  .pf-c-card__actions.pf-m-no-offset {
8329
- --pf-c-card__header-toggle--MarginTop: 0;
8330
- --pf-c-card__header-toggle--MarginBottom: 0;
8316
+ --pf-c-card__actions--MarginTop: 0;
8317
+ --pf-c-card__actions--MarginBottom: 0;
8331
8318
  }
8332
8319
 
8333
8320
  .pf-c-card__header,
@@ -8626,28 +8613,40 @@ label.pf-c-check, .pf-c-check__label,
8626
8613
 
8627
8614
  .pf-c-chip-group {
8628
8615
  color: var(--pf-global--Color--100);
8629
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
8630
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
8616
+ --pf-c-chip-group--PaddingTop: 0;
8617
+ --pf-c-chip-group--PaddingRight: 0;
8618
+ --pf-c-chip-group--PaddingBottom: 0;
8619
+ --pf-c-chip-group--PaddingLeft: 0;
8620
+ --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
8621
+ --pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
8622
+ --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
8623
+ --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
8624
+ --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
8625
+ --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
8631
8626
  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
8632
8627
  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
8633
8628
  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
8634
8629
  --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
8635
8630
  --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
8636
8631
  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
8637
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
8638
8632
  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
8639
8633
  --pf-c-chip-group__label--MaxWidth: 18ch;
8640
8634
  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
8641
8635
  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
8642
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
8643
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
8636
+ --pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
8644
8637
  max-width: 100%;
8638
+ padding-top: var(--pf-c-chip-group--PaddingTop);
8639
+ padding-right: var(--pf-c-chip-group--PaddingRight);
8640
+ padding-bottom: var(--pf-c-chip-group--PaddingBottom);
8641
+ padding-left: var(--pf-c-chip-group--PaddingLeft);
8642
+ row-gap: var(--pf-c-chip-group--RowGap);
8643
+ column-gap: var(--pf-c-chip-group--ColumnGap);
8645
8644
  }
8646
8645
  .pf-c-chip-group.pf-m-category {
8647
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
8648
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
8649
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
8650
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
8646
+ --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
8647
+ --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
8648
+ --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
8649
+ --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
8651
8650
  background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
8652
8651
  border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
8653
8652
  }
@@ -8658,11 +8657,8 @@ label.pf-c-check, .pf-c-check__label,
8658
8657
  flex-wrap: wrap;
8659
8658
  align-items: baseline;
8660
8659
  min-width: 0;
8661
- }
8662
-
8663
- .pf-c-chip-group__list {
8664
- margin-right: var(--pf-c-chip-group__list--MarginRight);
8665
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
8660
+ row-gap: var(--pf-c-chip-group__main--RowGap);
8661
+ column-gap: var(--pf-c-chip-group__main--ColumnGap);
8666
8662
  }
8667
8663
 
8668
8664
  .pf-c-chip-group,
@@ -8673,11 +8669,14 @@ label.pf-c-check, .pf-c-check__label,
8673
8669
  min-width: 0;
8674
8670
  }
8675
8671
 
8672
+ .pf-c-chip-group__list {
8673
+ row-gap: var(--pf-c-chip-group__list--RowGap);
8674
+ column-gap: var(--pf-c-chip-group__list--ColumnGap);
8675
+ }
8676
+
8676
8677
  .pf-c-chip-group__list-item {
8677
8678
  display: inline-flex;
8678
8679
  min-width: 0;
8679
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
8680
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
8681
8680
  }
8682
8681
 
8683
8682
  .pf-c-chip-group__label {
@@ -8685,7 +8684,6 @@ label.pf-c-check, .pf-c-check__label,
8685
8684
  text-overflow: ellipsis;
8686
8685
  white-space: nowrap;
8687
8686
  max-width: var(--pf-c-chip-group__label--MaxWidth);
8688
- margin-right: var(--pf-c-chip-group__label--MarginRight);
8689
8687
  font-size: var(--pf-c-chip-group__label--FontSize);
8690
8688
  }
8691
8689
 
@@ -8694,6 +8692,7 @@ label.pf-c-check, .pf-c-check__label,
8694
8692
  align-self: flex-start;
8695
8693
  margin-top: var(--pf-c-chip-group__close--MarginTop);
8696
8694
  margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
8695
+ margin-left: var(--pf-c-chip-group__close--MarginLeft);
8697
8696
  }
8698
8697
 
8699
8698
  .pf-c-clipboard-copy {
@@ -14283,38 +14282,39 @@ label.pf-c-check, .pf-c-check__label,
14283
14282
  --pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
14284
14283
  --pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
14285
14284
  --pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
14285
+ --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
14286
+ --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
14287
+ --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
14288
+ --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
14286
14289
  --pf-c-empty-state__content--MaxWidth: none;
14290
+ --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
14291
+ --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
14292
+ --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14287
14293
  --pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
14288
14294
  --pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
14289
14295
  --pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
14290
- --pf-c-empty-state__content--c-title--m-lg--FontSize: var(--pf-global--FontSize--xl);
14296
+ --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
14297
+ --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
14298
+ --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
14299
+ --pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
14300
+ --pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
14301
+ --pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
14302
+ --pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
14303
+ --pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
14304
+ --pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
14305
+ --pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
14291
14306
  --pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
14292
14307
  --pf-c-empty-state__body--Color: var(--pf-global--Color--200);
14293
- --pf-c-empty-state__primary--MarginTop: var(--pf-global--spacer--xl);
14294
- --pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
14295
- --pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
14296
- --pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
14297
- --pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
14298
- --pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
14299
- --pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
14300
- --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
14308
+ --pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
14301
14309
  --pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
14302
- --pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
14303
- --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
14304
- --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
14305
- --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
14306
- --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
14307
- --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
14308
14310
  --pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
14309
- --pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
14310
- --pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
14311
- --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
14312
- --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14313
14311
  --pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
14314
14312
  --pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
14315
- --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
14316
- --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
14317
- --pf-c-empty-state--m-xl--c-button__secondary--MarginTop: var(--pf-global--spacer--md);
14313
+ --pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
14314
+ --pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
14315
+ --pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
14316
+ --pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
14317
+ --pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
14318
14318
  display: flex;
14319
14319
  align-items: center;
14320
14320
  justify-content: center;
@@ -14326,17 +14326,12 @@ label.pf-c-check, .pf-c-check__label,
14326
14326
  --pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
14327
14327
  --pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
14328
14328
  --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
14329
+ --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
14329
14330
  --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
14330
14331
  --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
14331
14332
  --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
14332
- --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
14333
- --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
14334
- }
14335
- .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
14336
- font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
14337
- }
14338
- .pf-c-empty-state.pf-m-xs .pf-c-button {
14339
- --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
14333
+ --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
14334
+ --pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
14340
14335
  }
14341
14336
  .pf-c-empty-state.pf-m-sm {
14342
14337
  --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
@@ -14346,12 +14341,11 @@ label.pf-c-check, .pf-c-check__label,
14346
14341
  }
14347
14342
  .pf-c-empty-state.pf-m-xl {
14348
14343
  --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
14344
+ --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
14349
14345
  --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
14350
14346
  --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
14351
- --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
14352
- }
14353
- .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
14354
- font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
14347
+ --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
14348
+ --pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
14355
14349
  }
14356
14350
  .pf-c-empty-state.pf-m-full-height {
14357
14351
  height: 100%;
@@ -14360,41 +14354,40 @@ label.pf-c-check, .pf-c-check__label,
14360
14354
  .pf-c-empty-state__content {
14361
14355
  max-width: var(--pf-c-empty-state__content--MaxWidth);
14362
14356
  }
14363
- .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
14364
- font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
14365
- }
14366
14357
 
14367
14358
  .pf-c-empty-state__icon {
14368
14359
  margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
14369
14360
  font-size: var(--pf-c-empty-state__icon--FontSize);
14361
+ line-height: 1;
14370
14362
  color: var(--pf-c-empty-state__icon--Color);
14371
14363
  }
14372
14364
 
14365
+ .pf-c-empty-state__title-text {
14366
+ font-family: var(--pf-c-empty-state__title-text--FontFamily);
14367
+ font-size: var(--pf-c-empty-state__title-text--FontSize);
14368
+ font-weight: var(--pf-c-empty-state__title-text--FontWeight);
14369
+ line-height: var(--pf-c-empty-state__title-text--LineHeight);
14370
+ }
14371
+
14373
14372
  .pf-c-empty-state__body {
14374
14373
  margin-top: var(--pf-c-empty-state__body--MarginTop);
14374
+ font-size: var(--pf-c-empty-state--body--FontSize);
14375
14375
  color: var(--pf-c-empty-state__body--Color);
14376
14376
  }
14377
14377
 
14378
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
14379
- .pf-c-empty-state__primary {
14380
- margin-top: var(--pf-c-empty-state__primary--MarginTop);
14381
- }
14382
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
14383
- .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
14384
- margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
14378
+ .pf-c-empty-state__footer {
14379
+ display: flex;
14380
+ flex-direction: column;
14381
+ align-items: center;
14382
+ row-gap: var(--pf-c-empty-state__footer--RowGap);
14383
+ margin-top: var(--pf-c-empty-state__footer--MarginTop);
14385
14384
  }
14386
14385
 
14387
- .pf-c-empty-state__secondary {
14386
+ .pf-c-empty-state__actions {
14388
14387
  display: flex;
14389
14388
  flex-wrap: wrap;
14390
14389
  justify-content: center;
14391
- margin-top: var(--pf-c-empty-state__secondary--MarginTop);
14392
- margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
14393
- }
14394
- .pf-c-empty-state__secondary > * {
14395
- margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
14396
- margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
14397
- margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
14390
+ gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
14398
14391
  }
14399
14392
 
14400
14393
  .pf-c-expandable-section {
package/patternfly.css CHANGED
@@ -587,16 +587,6 @@
587
587
  font-weight: 300 700;
588
588
  font-display: fallback;
589
589
  }
590
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
591
- padding: 0;
592
- margin: 0;
593
- background-color: transparent;
594
- }
595
-
596
- html {
597
- font-size: var(--pf-global--root--FontSize, unset) !important;
598
- }
599
-
600
590
  .pf-screen-reader {
601
591
  position: fixed;
602
592
  top: 0;
@@ -8189,7 +8179,9 @@ button.pf-c-breadcrumb__link {
8189
8179
  --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
8190
8180
  --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
8191
8181
  --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
8192
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
8182
+ --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
8183
+ --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8184
+ --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
8193
8185
  --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8194
8186
  --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
8195
8187
  --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
@@ -8260,7 +8252,6 @@ button.pf-c-breadcrumb__link {
8260
8252
  --pf-c-card--m-plain--BackgroundColor: transparent;
8261
8253
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
8262
8254
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
8263
- --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
8264
8255
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
8265
8256
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
8266
8257
  display: flex;
@@ -8406,13 +8397,11 @@ button.pf-c-breadcrumb__link {
8406
8397
  --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
8407
8398
  --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
8408
8399
  }
8409
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
8410
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
8411
- }
8412
8400
  .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
8413
8401
  order: 2;
8414
8402
  }
8415
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
8403
+
8404
+ .pf-c-card__header-main {
8416
8405
  flex: 1;
8417
8406
  }
8418
8407
 
@@ -8438,10 +8427,8 @@ button.pf-c-breadcrumb__link {
8438
8427
  align-self: flex-start;
8439
8428
  order: 1;
8440
8429
  padding-left: var(--pf-c-card__actions--PaddingLeft);
8441
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
8442
- }
8443
- .pf-c-card__actions > * + * {
8444
- margin-left: var(--pf-c-card__actions--child--MarginLeft);
8430
+ margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
8431
+ gap: var(--pf-c-card__actions--Gap);
8445
8432
  }
8446
8433
  .pf-c-card__actions + .pf-c-card__title,
8447
8434
  .pf-c-card__actions + .pf-c-card__body,
@@ -8449,8 +8436,8 @@ button.pf-c-breadcrumb__link {
8449
8436
  padding: 0;
8450
8437
  }
8451
8438
  .pf-c-card__actions.pf-m-no-offset {
8452
- --pf-c-card__header-toggle--MarginTop: 0;
8453
- --pf-c-card__header-toggle--MarginBottom: 0;
8439
+ --pf-c-card__actions--MarginTop: 0;
8440
+ --pf-c-card__actions--MarginBottom: 0;
8454
8441
  }
8455
8442
 
8456
8443
  .pf-c-card__header,
@@ -8749,28 +8736,40 @@ label.pf-c-check, .pf-c-check__label,
8749
8736
 
8750
8737
  .pf-c-chip-group {
8751
8738
  color: var(--pf-global--Color--100);
8752
- --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
8753
- --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
8739
+ --pf-c-chip-group--PaddingTop: 0;
8740
+ --pf-c-chip-group--PaddingRight: 0;
8741
+ --pf-c-chip-group--PaddingBottom: 0;
8742
+ --pf-c-chip-group--PaddingLeft: 0;
8743
+ --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
8744
+ --pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
8745
+ --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
8746
+ --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
8747
+ --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
8748
+ --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
8754
8749
  --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
8755
8750
  --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
8756
8751
  --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
8757
8752
  --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
8758
8753
  --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
8759
8754
  --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
8760
- --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
8761
8755
  --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
8762
8756
  --pf-c-chip-group__label--MaxWidth: 18ch;
8763
8757
  --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
8764
8758
  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
8765
- --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
8766
- --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
8759
+ --pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
8767
8760
  max-width: 100%;
8761
+ padding-top: var(--pf-c-chip-group--PaddingTop);
8762
+ padding-right: var(--pf-c-chip-group--PaddingRight);
8763
+ padding-bottom: var(--pf-c-chip-group--PaddingBottom);
8764
+ padding-left: var(--pf-c-chip-group--PaddingLeft);
8765
+ row-gap: var(--pf-c-chip-group--RowGap);
8766
+ column-gap: var(--pf-c-chip-group--ColumnGap);
8768
8767
  }
8769
8768
  .pf-c-chip-group.pf-m-category {
8770
- padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
8771
- padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
8772
- padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
8773
- padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
8769
+ --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
8770
+ --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
8771
+ --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
8772
+ --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
8774
8773
  background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
8775
8774
  border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
8776
8775
  }
@@ -8781,11 +8780,8 @@ label.pf-c-check, .pf-c-check__label,
8781
8780
  flex-wrap: wrap;
8782
8781
  align-items: baseline;
8783
8782
  min-width: 0;
8784
- }
8785
-
8786
- .pf-c-chip-group__list {
8787
- margin-right: var(--pf-c-chip-group__list--MarginRight);
8788
- margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
8783
+ row-gap: var(--pf-c-chip-group__main--RowGap);
8784
+ column-gap: var(--pf-c-chip-group__main--ColumnGap);
8789
8785
  }
8790
8786
 
8791
8787
  .pf-c-chip-group,
@@ -8796,11 +8792,14 @@ label.pf-c-check, .pf-c-check__label,
8796
8792
  min-width: 0;
8797
8793
  }
8798
8794
 
8795
+ .pf-c-chip-group__list {
8796
+ row-gap: var(--pf-c-chip-group__list--RowGap);
8797
+ column-gap: var(--pf-c-chip-group__list--ColumnGap);
8798
+ }
8799
+
8799
8800
  .pf-c-chip-group__list-item {
8800
8801
  display: inline-flex;
8801
8802
  min-width: 0;
8802
- margin-right: var(--pf-c-chip-group__list-item--MarginRight);
8803
- margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
8804
8803
  }
8805
8804
 
8806
8805
  .pf-c-chip-group__label {
@@ -8808,7 +8807,6 @@ label.pf-c-check, .pf-c-check__label,
8808
8807
  text-overflow: ellipsis;
8809
8808
  white-space: nowrap;
8810
8809
  max-width: var(--pf-c-chip-group__label--MaxWidth);
8811
- margin-right: var(--pf-c-chip-group__label--MarginRight);
8812
8810
  font-size: var(--pf-c-chip-group__label--FontSize);
8813
8811
  }
8814
8812
 
@@ -8817,6 +8815,7 @@ label.pf-c-check, .pf-c-check__label,
8817
8815
  align-self: flex-start;
8818
8816
  margin-top: var(--pf-c-chip-group__close--MarginTop);
8819
8817
  margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
8818
+ margin-left: var(--pf-c-chip-group__close--MarginLeft);
8820
8819
  }
8821
8820
 
8822
8821
  .pf-c-clipboard-copy {
@@ -14406,38 +14405,39 @@ label.pf-c-check, .pf-c-check__label,
14406
14405
  --pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
14407
14406
  --pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
14408
14407
  --pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
14408
+ --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
14409
+ --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
14410
+ --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
14411
+ --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
14409
14412
  --pf-c-empty-state__content--MaxWidth: none;
14413
+ --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
14414
+ --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
14415
+ --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14410
14416
  --pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
14411
14417
  --pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
14412
14418
  --pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
14413
- --pf-c-empty-state__content--c-title--m-lg--FontSize: var(--pf-global--FontSize--xl);
14419
+ --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
14420
+ --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
14421
+ --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
14422
+ --pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
14423
+ --pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
14424
+ --pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
14425
+ --pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
14426
+ --pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
14427
+ --pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
14428
+ --pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
14414
14429
  --pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
14415
14430
  --pf-c-empty-state__body--Color: var(--pf-global--Color--200);
14416
- --pf-c-empty-state__primary--MarginTop: var(--pf-global--spacer--xl);
14417
- --pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
14418
- --pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
14419
- --pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
14420
- --pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
14421
- --pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
14422
- --pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
14423
- --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
14431
+ --pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
14424
14432
  --pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
14425
- --pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
14426
- --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
14427
- --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
14428
- --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
14429
- --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
14430
- --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
14431
14433
  --pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
14432
- --pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
14433
- --pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
14434
- --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
14435
- --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
14436
14434
  --pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
14437
14435
  --pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
14438
- --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
14439
- --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
14440
- --pf-c-empty-state--m-xl--c-button__secondary--MarginTop: var(--pf-global--spacer--md);
14436
+ --pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
14437
+ --pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
14438
+ --pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
14439
+ --pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
14440
+ --pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
14441
14441
  display: flex;
14442
14442
  align-items: center;
14443
14443
  justify-content: center;
@@ -14449,17 +14449,12 @@ label.pf-c-check, .pf-c-check__label,
14449
14449
  --pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
14450
14450
  --pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
14451
14451
  --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
14452
+ --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
14452
14453
  --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
14453
14454
  --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
14454
14455
  --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
14455
- --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
14456
- --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
14457
- }
14458
- .pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
14459
- font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
14460
- }
14461
- .pf-c-empty-state.pf-m-xs .pf-c-button {
14462
- --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
14456
+ --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
14457
+ --pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
14463
14458
  }
14464
14459
  .pf-c-empty-state.pf-m-sm {
14465
14460
  --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
@@ -14469,12 +14464,11 @@ label.pf-c-check, .pf-c-check__label,
14469
14464
  }
14470
14465
  .pf-c-empty-state.pf-m-xl {
14471
14466
  --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
14467
+ --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
14472
14468
  --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
14473
14469
  --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
14474
- --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
14475
- }
14476
- .pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
14477
- font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
14470
+ --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
14471
+ --pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
14478
14472
  }
14479
14473
  .pf-c-empty-state.pf-m-full-height {
14480
14474
  height: 100%;
@@ -14483,41 +14477,40 @@ label.pf-c-check, .pf-c-check__label,
14483
14477
  .pf-c-empty-state__content {
14484
14478
  max-width: var(--pf-c-empty-state__content--MaxWidth);
14485
14479
  }
14486
- .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
14487
- font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
14488
- }
14489
14480
 
14490
14481
  .pf-c-empty-state__icon {
14491
14482
  margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
14492
14483
  font-size: var(--pf-c-empty-state__icon--FontSize);
14484
+ line-height: 1;
14493
14485
  color: var(--pf-c-empty-state__icon--Color);
14494
14486
  }
14495
14487
 
14488
+ .pf-c-empty-state__title-text {
14489
+ font-family: var(--pf-c-empty-state__title-text--FontFamily);
14490
+ font-size: var(--pf-c-empty-state__title-text--FontSize);
14491
+ font-weight: var(--pf-c-empty-state__title-text--FontWeight);
14492
+ line-height: var(--pf-c-empty-state__title-text--LineHeight);
14493
+ }
14494
+
14496
14495
  .pf-c-empty-state__body {
14497
14496
  margin-top: var(--pf-c-empty-state__body--MarginTop);
14497
+ font-size: var(--pf-c-empty-state--body--FontSize);
14498
14498
  color: var(--pf-c-empty-state__body--Color);
14499
14499
  }
14500
14500
 
14501
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
14502
- .pf-c-empty-state__primary {
14503
- margin-top: var(--pf-c-empty-state__primary--MarginTop);
14504
- }
14505
- .pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
14506
- .pf-c-empty-state__primary + .pf-c-empty-state__secondary {
14507
- margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
14501
+ .pf-c-empty-state__footer {
14502
+ display: flex;
14503
+ flex-direction: column;
14504
+ align-items: center;
14505
+ row-gap: var(--pf-c-empty-state__footer--RowGap);
14506
+ margin-top: var(--pf-c-empty-state__footer--MarginTop);
14508
14507
  }
14509
14508
 
14510
- .pf-c-empty-state__secondary {
14509
+ .pf-c-empty-state__actions {
14511
14510
  display: flex;
14512
14511
  flex-wrap: wrap;
14513
14512
  justify-content: center;
14514
- margin-top: var(--pf-c-empty-state__secondary--MarginTop);
14515
- margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
14516
- }
14517
- .pf-c-empty-state__secondary > * {
14518
- margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
14519
- margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
14520
- margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
14513
+ gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
14521
14514
  }
14522
14515
 
14523
14516
  .pf-c-expandable-section {