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

package/patternfly.css

@@ -8749,28 +8749,40 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-chip-group {
   color: var(--pf-global--Color--100);
-  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-chip-group--PaddingTop: 0;
+  --pf-c-chip-group--PaddingRight: 0;
+  --pf-c-chip-group--PaddingBottom: 0;
+  --pf-c-chip-group--PaddingLeft: 0;
+  --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-chip-group__label--MaxWidth: 18ch;
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
   max-width: 100%;
+  padding-top: var(--pf-c-chip-group--PaddingTop);
+  padding-right: var(--pf-c-chip-group--PaddingRight);
+  padding-bottom: var(--pf-c-chip-group--PaddingBottom);
+  padding-left: var(--pf-c-chip-group--PaddingLeft);
+  row-gap: var(--pf-c-chip-group--RowGap);
+  column-gap: var(--pf-c-chip-group--ColumnGap);
 }
 .pf-c-chip-group.pf-m-category {
-  padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
-  padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
-  padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
-  padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
+  --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
+  --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
+  --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
+  --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
   background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
   border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
 }
@@ -8781,11 +8793,8 @@ label.pf-c-check, .pf-c-check__label,
   flex-wrap: wrap;
   align-items: baseline;
   min-width: 0;
-}
-
-.pf-c-chip-group__list {
-  margin-right: var(--pf-c-chip-group__list--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
+  row-gap: var(--pf-c-chip-group__main--RowGap);
+  column-gap: var(--pf-c-chip-group__main--ColumnGap);
 }
 
 .pf-c-chip-group,
@@ -8796,11 +8805,14 @@ label.pf-c-check, .pf-c-check__label,
   min-width: 0;
 }
 
+.pf-c-chip-group__list {
+  row-gap: var(--pf-c-chip-group__list--RowGap);
+  column-gap: var(--pf-c-chip-group__list--ColumnGap);
+}
+
 .pf-c-chip-group__list-item {
   display: inline-flex;
   min-width: 0;
-  margin-right: var(--pf-c-chip-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
 }
 
 .pf-c-chip-group__label {
@@ -8808,7 +8820,6 @@ label.pf-c-check, .pf-c-check__label,
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: var(--pf-c-chip-group__label--MaxWidth);
-  margin-right: var(--pf-c-chip-group__label--MarginRight);
   font-size: var(--pf-c-chip-group__label--FontSize);
 }
 
@@ -8817,6 +8828,7 @@ label.pf-c-check, .pf-c-check__label,
   align-self: flex-start;
   margin-top: var(--pf-c-chip-group__close--MarginTop);
   margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
+  margin-left: var(--pf-c-chip-group__close--MarginLeft);
 }
 
 .pf-c-clipboard-copy {
@@ -14406,38 +14418,39 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
   --pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-empty-state__content--MaxWidth: none;
+  --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
+  --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
+  --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
   --pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
   --pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
   --pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
-  --pf-c-empty-state__content--c-title--m-lg--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
+  --pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
+  --pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
   --pf-c-empty-state__body--Color: var(--pf-global--Color--200);
-  --pf-c-empty-state__primary--MarginTop: var(--pf-global--spacer--xl);
-  --pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
-  --pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
-  --pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
-  --pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
-  --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
+  --pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
-  --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
   --pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
-  --pf-c-empty-state--m-xl__icon--FontSize: 6.25rem;
-  --pf-c-empty-state--m-xl--c-button__secondary--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
+  --pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14449,17 +14462,12 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
   --pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
   --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
+  --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
   --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
   --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
   --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
-  --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
-  --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
-}
-.pf-c-empty-state.pf-m-xs .pf-c-empty-state__body {
-  font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
-}
-.pf-c-empty-state.pf-m-xs .pf-c-button {
-  --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
+  --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
+  --pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
 }
 .pf-c-empty-state.pf-m-sm {
   --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
@@ -14469,12 +14477,11 @@ label.pf-c-check, .pf-c-check__label,
 }
 .pf-c-empty-state.pf-m-xl {
   --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
+  --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
   --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
   --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
-  --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
-}
-.pf-c-empty-state.pf-m-xl .pf-c-empty-state__body {
-  font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
+  --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
+  --pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
 }
 .pf-c-empty-state.pf-m-full-height {
   height: 100%;
@@ -14483,41 +14490,40 @@ label.pf-c-check, .pf-c-check__label,
 .pf-c-empty-state__content {
   max-width: var(--pf-c-empty-state__content--MaxWidth);
 }
-.pf-c-empty-state__content > .pf-c-title.pf-m-lg {
-  font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
-}
 
 .pf-c-empty-state__icon {
   margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
   font-size: var(--pf-c-empty-state__icon--FontSize);
+  line-height: 1;
   color: var(--pf-c-empty-state__icon--Color);
 }
 
+.pf-c-empty-state__title-text {
+  font-family: var(--pf-c-empty-state__title-text--FontFamily);
+  font-size: var(--pf-c-empty-state__title-text--FontSize);
+  font-weight: var(--pf-c-empty-state__title-text--FontWeight);
+  line-height: var(--pf-c-empty-state__title-text--LineHeight);
+}
+
 .pf-c-empty-state__body {
   margin-top: var(--pf-c-empty-state__body--MarginTop);
+  font-size: var(--pf-c-empty-state--body--FontSize);
   color: var(--pf-c-empty-state__body--Color);
 }
 
-.pf-c-empty-state__content > .pf-c-button.pf-m-primary,
-.pf-c-empty-state__primary {
-  margin-top: var(--pf-c-empty-state__primary--MarginTop);
-}
-.pf-c-empty-state__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
-.pf-c-empty-state__primary + .pf-c-empty-state__secondary {
-  margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
+.pf-c-empty-state__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: var(--pf-c-empty-state__footer--RowGap);
+  margin-top: var(--pf-c-empty-state__footer--MarginTop);
 }
 
-.pf-c-empty-state__secondary {
+.pf-c-empty-state__actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  margin-top: var(--pf-c-empty-state__secondary--MarginTop);
-  margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
-}
-.pf-c-empty-state__secondary > * {
-  margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
-  margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
-  margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
+  gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
 }
 
 .pf-c-expandable-section {