@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

package/components/LabelGroup/label-group.scss

@@ -1,7 +1,21 @@
 .pf-c-label-group {
-  // List
-  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  // Label group - spaces main with the close button
+  --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group--ColumnGap: 0;
+  --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
+
+  // Main - spaces the category label with the list
+  --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
+
+  // List - spaces the items
+  --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
 
   // Category
   --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
@@ -15,9 +29,6 @@
   --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
   // Label
-  --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group__label--MarginBottom: 0;
-  --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-label-group__label--MaxWidth: 18ch;
 
@@ -26,14 +37,9 @@
   --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
 
-  // List item
-  --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
-
   // Textarea
   --pf-c-label-group__textarea--MinWidth: #{pf-size-prem(200px)};
   --pf-c-label-group__textarea--PaddingTop: #{pf-size-prem(2px)};
@@ -43,6 +49,8 @@
 
   display: inline-flex;
   align-items: center;
+  row-gap: var(--pf-c-label-group--RowGap);
+  column-gap: var(--pf-c-label-group--ColumnGap);
 
   &.pf-m-category {
     padding-top: var(--pf-c-label-group--m-category--PaddingTop);
@@ -55,11 +63,12 @@
   }
 
   &.pf-m-vertical {
-    --pf-c-label-group__list--MarginRight: 0;
-    --pf-c-label-group__list--MarginBottom: 0;
-    --pf-c-label-group__list-item--MarginRight: 0;
-    --pf-c-label-group__label--MarginRight: 0;
-    --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
+    --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
+    --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
+    --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
+    --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
+    --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
+    --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
     --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
     --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
     --pf-c-label-group__close--MarginBottom: 0;
@@ -79,10 +88,6 @@
       flex-direction: column;
     }
 
-    .pf-c-label-group__list-item:last-child {
-      --pf-c-label-group__list-item--MarginBottom: 0;
-    }
-
     .pf-c-label-group__close .pf-c-button {
       --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
       --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
@@ -110,31 +115,31 @@
   flex: 1;
   flex-wrap: wrap;
   align-items: baseline;
+  row-gap: var(--pf-c-label-group__main--RowGap);
+  column-gap: var(--pf-c-label-group__main--ColumnGap);
 }
 
 .pf-c-label-group__list {
   display: inline-flex;
   flex-wrap: wrap;
-  margin-right: var(--pf-c-label-group__list--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list--MarginBottom);
+  row-gap: var(--pf-c-label-group__list--RowGap);
+  column-gap: var(--pf-c-label-group__list--ColumnGap);
 }
 
 .pf-c-label-group__list-item {
   display: inline-flex;
-  margin-right: var(--pf-c-label-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
 }
 
 .pf-c-label-group__label {
   @include pf-text-overflow;
 
   max-width: var(--pf-c-label-group__label--MaxWidth);
-  margin-right: var(--pf-c-label-group__label--MarginRight);
-  margin-bottom: var(--pf-c-label-group__label--MarginBottom);
   font-size: var(--pf-c-label-group__label--FontSize);
 }
 
 .pf-c-label-group__close {
+  display: flex;
+  align-self: start;
   margin-top: var(--pf-c-label-group__close--MarginTop);
   margin-right: var(--pf-c-label-group__close--MarginRight);
   margin-bottom: var(--pf-c-label-group__close--MarginBottom);

package/components/Login/login.css

@@ -215,7 +215,7 @@
 }
 @media (min-width: 768px) {
   .pf-c-login__main-header-utilities,
-.pf-c-login__main-header .pf-c-dropdown {
+  .pf-c-login__main-header .pf-c-dropdown {
     grid-column: 2/3;
     grid-row: 1;
   }

package/components/Menu/menu.css

@@ -150,6 +150,7 @@
   --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
+  --pf-c-menu__item-action--BackgroundColor: transparent;
   --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
   --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
@@ -270,6 +271,7 @@
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
   position: relative;
   overflow: hidden;
+  visibility: visible;
   transition: var(--pf-c-menu--m-drilldown__list--Transition);
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
@@ -296,11 +298,15 @@
 }
 .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
   overflow: visible;
+  visibility: hidden;
 }
 .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-divider,
 .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
   display: none;
 }
+.pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item.pf-m-current-path {
+  visibility: hidden;
+}
 .pf-c-menu.pf-m-plain {
   --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
 }
@@ -576,6 +582,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
   padding-left: var(--pf-c-menu__item-action--PaddingLeft);
   color: var(--pf-c-menu__item-action--Color);
+  background-color: var(--pf-c-menu__item-action--BackgroundColor);
   border: none;
 }
 .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {

package/components/Menu/menu.scss

@@ -141,6 +141,7 @@
   --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
+  --pf-c-menu__item-action--BackgroundColor: transparent;
   --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
   --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
@@ -274,6 +275,7 @@
     .pf-c-menu__list {
       position: relative;
       overflow: hidden;
+      visibility: visible;
       transition: var(--pf-c-menu--m-drilldown__list--Transition);
 
       & .pf-c-menu__list {
@@ -316,11 +318,16 @@
   // stylelint-disable selector-max-class
   &.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list {
     overflow: visible;
+    visibility: hidden;
 
     > .pf-c-divider,
     > .pf-c-menu__list-item:not(.pf-m-current-path) {
       display: none; // hide all siblings of current path to maintain proper menu height
     }
+
+    > .pf-c-menu__list-item.pf-m-current-path {
+      visibility: hidden;
+    }
   }
   // stylelint-enable
 
@@ -696,6 +703,7 @@
   padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
   padding-left: var(--pf-c-menu__item-action--PaddingLeft);
   color: var(--pf-c-menu__item-action--Color);
+  background-color: var(--pf-c-menu__item-action--BackgroundColor);
   border: none;
 
   &.pf-m-favorite {

package/components/MenuToggle/menu-toggle.css

@@ -106,6 +106,7 @@
   --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle__button--BackgroundColor: transparent;
   --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
@@ -361,6 +362,7 @@
   --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
   --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
   color: inherit;
+  background-color: var(--pf-c-menu-toggle__button--BackgroundColor);
   border: 0;
 }
 

package/components/MenuToggle/menu-toggle.scss

@@ -149,6 +149,7 @@
   --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
 
   // Split button, controls, check
+  --pf-c-menu-toggle__button--BackgroundColor: transparent;
   --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
 
@@ -502,6 +503,7 @@
   --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
 
   color: inherit;
+  background-color: var(--pf-c-menu-toggle__button--BackgroundColor);
   border: 0;
 }
 

package/components/ModalBox/modal-box.css

@@ -34,9 +34,9 @@
   --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
-  --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
-  --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
+  --pf-c-modal-box__close--Top: calc(var(--pf-global--spacer--lg));
+  --pf-c-modal-box__close--Right: var(--pf-global--spacer--md);
+  --pf-c-modal-box__close--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
   --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
   --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
@@ -88,13 +88,14 @@
 .pf-c-modal-box.pf-m-info {
   --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
 }
-.pf-c-modal-box > .pf-c-button {
+
+.pf-c-modal-box__close {
   position: absolute;
-  top: var(--pf-c-modal-box--c-button--Top);
-  right: var(--pf-c-modal-box--c-button--Right);
+  top: var(--pf-c-modal-box__close--Top);
+  right: var(--pf-c-modal-box__close--Right);
 }
-.pf-c-modal-box > .pf-c-button + * {
-  margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
+.pf-c-modal-box__close + * {
+  margin-right: var(--pf-c-modal-box__close--sibling--MarginRight);
 }
 
 .pf-c-modal-box__header {

package/components/ModalBox/modal-box.scss

@@ -52,9 +52,9 @@
   --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
 
   // Close
-  --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
-  --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
-  --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
+  --pf-c-modal-box__close--Top: calc(var(--pf-global--spacer--lg));
+  --pf-c-modal-box__close--Right: var(--pf-global--spacer--md);
+  --pf-c-modal-box__close--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
 
   // Footer
   --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
@@ -114,16 +114,16 @@
   &.pf-m-info {
     --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
   }
+}
 
-  // Close button
-  > .pf-c-button {
-    position: absolute;
-    top: var(--pf-c-modal-box--c-button--Top);
-    right: var(--pf-c-modal-box--c-button--Right);
+// Close button
+.pf-c-modal-box__close {
+  position: absolute;
+  top: var(--pf-c-modal-box__close--Top);
+  right: var(--pf-c-modal-box__close--Right);
 
-    + * {
-      margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight); // Create room for the close button
-    }
+  + * {
+    margin-right: var(--pf-c-modal-box__close--sibling--MarginRight); // Create room for the close button
   }
 }
 

package/components/Page/page.css

@@ -547,24 +547,24 @@
 }
 @media (min-height: 0) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -573,24 +573,24 @@
 }
 @media (min-height: 40rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -599,24 +599,24 @@
 }
 @media (min-height: 48rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -625,24 +625,24 @@
 }
 @media (min-height: 60rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -651,24 +651,24 @@
 }
 @media (min-height: 80rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);