@patternfly/react-table 4.38.1 → 4.39.0

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 (20) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/esm/components/Table/TableTypes.d.ts +4 -0
  3. package/dist/esm/components/Table/TableTypes.d.ts.map +1 -1
  4. package/dist/esm/components/Table/TableTypes.js.map +1 -1
  5. package/dist/esm/components/Table/utils/decorators/sortable.js +1 -1
  6. package/dist/esm/components/Table/utils/decorators/sortable.js.map +1 -1
  7. package/dist/js/components/Table/TableTypes.d.ts +4 -0
  8. package/dist/js/components/Table/TableTypes.d.ts.map +1 -1
  9. package/dist/js/components/Table/TableTypes.js.map +1 -1
  10. package/dist/js/components/Table/utils/decorators/sortable.js +1 -1
  11. package/dist/js/components/Table/utils/decorators/sortable.js.map +1 -1
  12. package/dist/umd/react-table.css +1204 -1184
  13. package/dist/umd/react-table.js +16 -5
  14. package/dist/umd/react-table.min.css +47 -27
  15. package/dist/umd/react-table.min.js +1 -1
  16. package/package.json +6 -6
  17. package/src/components/Table/{TableTypes.ts → TableTypes.tsx} +4 -0
  18. package/src/components/Table/examples/Table.md +4 -2
  19. package/src/components/Table/utils/decorators/sortable.tsx +1 -1
  20. package/src/components/TableComposable/examples/ComposableTable.md +3 -1
package/dist/umd/react-table.css CHANGED
@@ -5194,30 +5194,48 @@ label.pf-c-check, .pf-c-check__label,
5194
5194
  box-shadow: var(--pf-c-tooltip--BoxShadow);
5195
5195
  }
5196
5196
 
5197
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
5197
+ .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
5198
5198
  bottom: 0;
5199
5199
  left: 50%;
5200
5200
  transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
5201
5201
  }
5202
5202
 
5203
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
5203
+ .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
5204
5204
  top: 0;
5205
5205
  left: 50%;
5206
5206
  transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
5207
5207
  }
5208
5208
 
5209
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
5209
+ .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
5210
5210
  top: 50%;
5211
5211
  right: 0;
5212
5212
  transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
5213
5213
  }
5214
5214
 
5215
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
5215
+ .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
5216
5216
  top: 50%;
5217
5217
  left: 0;
5218
5218
  transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
5219
5219
  }
5220
5220
 
5221
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
5222
+ top: var(--pf-c-tooltip__arrow--Height);
5223
+ }
5224
+
5225
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
5226
+ top: auto;
5227
+ bottom: 0;
5228
+ }
5229
+
5230
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
5231
+ left: var(--pf-c-tooltip__arrow--Width);
5232
+ }
5233
+
5234
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
5235
+ right: 0;
5236
+ left: auto;
5237
+ }
5238
+
5221
5239
  .pf-c-tooltip__content {
5222
5240
  position: relative;
5223
5241
  padding: var(--pf-c-tooltip__content--PaddingTop) var(--pf-c-tooltip__content--PaddingRight) var(--pf-c-tooltip__content--PaddingBottom) var(--pf-c-tooltip__content--PaddingLeft);
@@ -15545,7 +15563,7 @@ ul.pf-c-list {
15545
15563
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
15546
15564
  }
15547
15565
 
15548
- .pf-c-menu-toggle.pf-m-plain {
15566
+ .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
15549
15567
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
15550
15568
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
15551
15569
  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -15630,6 +15648,206 @@ ul.pf-c-list {
15630
15648
  margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
15631
15649
  }
15632
15650
 
15651
+ .pf-c-modal-box {
15652
+ --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
15653
+ --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
15654
+ --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
15655
+ --pf-c-modal-box--Width: 100%;
15656
+ --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
15657
+ --pf-c-modal-box--m-sm--sm--MaxWidth: 35rem;
15658
+ --pf-c-modal-box--m-md--Width: 52.5rem;
15659
+ --pf-c-modal-box--m-lg--lg--MaxWidth: 70rem;
15660
+ --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl));
15661
+ --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
15662
+ --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
15663
+ --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
15664
+ --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));
15665
+ --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)));
15666
+ --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
15667
+ --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
15668
+ --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
15669
+ --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
15670
+ --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
15671
+ --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
15672
+ --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
15673
+ --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
15674
+ --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
15675
+ --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
15676
+ --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
15677
+ --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);
15678
+ --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
15679
+ --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);
15680
+ --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);
15681
+ --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
15682
+ --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
15683
+ --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
15684
+ --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
15685
+ --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
15686
+ --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
15687
+ --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
15688
+ --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
15689
+ --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
15690
+ --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
15691
+ --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
15692
+ --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
15693
+ --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);
15694
+ --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
15695
+ --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
15696
+ position: relative;
15697
+ z-index: var(--pf-c-modal-box--ZIndex);
15698
+ display: flex;
15699
+ flex-direction: column;
15700
+ width: var(--pf-c-modal-box--Width);
15701
+ max-width: var(--pf-c-modal-box--MaxWidth);
15702
+ max-height: var(--pf-c-modal-box--MaxHeight);
15703
+ background-color: var(--pf-c-modal-box--BackgroundColor);
15704
+ box-shadow: var(--pf-c-modal-box--BoxShadow);
15705
+ }
15706
+
15707
+ @media (min-width: 1200px) {
15708
+ .pf-c-modal-box {
15709
+ --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
15710
+ }
15711
+ }
15712
+ .pf-c-modal-box.pf-m-sm {
15713
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
15714
+ }
15715
+
15716
+ .pf-c-modal-box.pf-m-md {
15717
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
15718
+ }
15719
+
15720
+ .pf-c-modal-box.pf-m-lg {
15721
+ --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
15722
+ }
15723
+
15724
+ .pf-c-modal-box.pf-m-align-top {
15725
+ top: var(--pf-c-modal-box--m-align-top--MarginTop);
15726
+ align-self: flex-start;
15727
+ max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
15728
+ max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
15729
+ }
15730
+
15731
+ .pf-c-modal-box.pf-m-danger {
15732
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
15733
+ }
15734
+
15735
+ .pf-c-modal-box.pf-m-warning {
15736
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
15737
+ }
15738
+
15739
+ .pf-c-modal-box.pf-m-success {
15740
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
15741
+ }
15742
+
15743
+ .pf-c-modal-box.pf-m-default {
15744
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
15745
+ }
15746
+
15747
+ .pf-c-modal-box.pf-m-info {
15748
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
15749
+ }
15750
+
15751
+ .pf-c-modal-box > .pf-c-button {
15752
+ position: absolute;
15753
+ top: var(--pf-c-modal-box--c-button--Top);
15754
+ right: var(--pf-c-modal-box--c-button--Right);
15755
+ }
15756
+
15757
+ .pf-c-modal-box > .pf-c-button + * {
15758
+ margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
15759
+ }
15760
+
15761
+ .pf-c-modal-box__header {
15762
+ display: flex;
15763
+ flex-direction: column;
15764
+ flex-shrink: 0;
15765
+ padding-top: var(--pf-c-modal-box__header--PaddingTop);
15766
+ padding-right: var(--pf-c-modal-box__header--PaddingRight);
15767
+ padding-left: var(--pf-c-modal-box__header--PaddingLeft);
15768
+ }
15769
+
15770
+ .pf-c-modal-box__header.pf-m-help {
15771
+ display: flex;
15772
+ flex-direction: row;
15773
+ }
15774
+
15775
+ .pf-c-modal-box__header:last-child {
15776
+ padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
15777
+ }
15778
+
15779
+ .pf-c-modal-box__header + .pf-c-modal-box__body {
15780
+ --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
15781
+ }
15782
+
15783
+ .pf-c-modal-box__header-main {
15784
+ flex-grow: 1;
15785
+ min-width: 0;
15786
+ }
15787
+
15788
+ .pf-c-modal-box__title,
15789
+ .pf-c-modal-box__title-text {
15790
+ overflow: hidden;
15791
+ text-overflow: ellipsis;
15792
+ white-space: nowrap;
15793
+ }
15794
+
15795
+ .pf-c-modal-box__title {
15796
+ flex: 0 0 auto;
15797
+ font-family: var(--pf-c-modal-box__title--FontFamily);
15798
+ font-size: var(--pf-c-modal-box__title--FontSize);
15799
+ line-height: var(--pf-c-modal-box__title--LineHeight);
15800
+ }
15801
+
15802
+ .pf-c-modal-box__title.pf-m-icon {
15803
+ display: flex;
15804
+ }
15805
+
15806
+ .pf-c-modal-box__title-icon {
15807
+ margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
15808
+ color: var(--pf-c-modal-box__title-icon--Color);
15809
+ }
15810
+
15811
+ .pf-c-modal-box__description {
15812
+ padding-top: var(--pf-c-modal-box__description--PaddingTop);
15813
+ }
15814
+
15815
+ .pf-c-modal-box__body {
15816
+ flex: 1 1 auto;
15817
+ min-height: var(--pf-c-modal-box__body--MinHeight);
15818
+ padding-top: var(--pf-c-modal-box__body--PaddingTop);
15819
+ padding-right: var(--pf-c-modal-box__body--PaddingRight);
15820
+ padding-left: var(--pf-c-modal-box__body--PaddingLeft);
15821
+ overflow-x: hidden;
15822
+ overflow-y: auto;
15823
+ overscroll-behavior: contain;
15824
+ word-break: break-word;
15825
+ -webkit-overflow-scrolling: touch;
15826
+ }
15827
+
15828
+ .pf-c-modal-box__body:last-child {
15829
+ padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
15830
+ }
15831
+
15832
+ .pf-c-modal-box__footer {
15833
+ display: flex;
15834
+ flex: 0 0 auto;
15835
+ align-items: center;
15836
+ padding-top: var(--pf-c-modal-box__footer--PaddingTop);
15837
+ padding-right: var(--pf-c-modal-box__footer--PaddingRight);
15838
+ padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
15839
+ padding-left: var(--pf-c-modal-box__footer--PaddingLeft);
15840
+ }
15841
+
15842
+ .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
15843
+ margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);
15844
+ }
15845
+
15846
+ @media screen and (min-width: 576px) {
15847
+ .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
15848
+ --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
15849
+ }
15850
+ }
15633
15851
  .pf-c-nav {
15634
15852
  --pf-c-nav--Transition: var(--pf-global--Transition);
15635
15853
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -16130,14 +16348,12 @@ ul.pf-c-list {
16130
16348
  }
16131
16349
 
16132
16350
  .pf-c-nav__item {
16133
- --pf-c-nav__item__toggle-icon--Rotate: 0;
16134
16351
  position: relative;
16135
16352
  margin-top: var(--pf-c-nav__item--MarginTop);
16136
16353
  }
16137
16354
 
16138
16355
  .pf-c-nav__item.pf-m-expandable {
16139
16356
  --pf-c-nav__link--before--BorderBottomWidth: 0;
16140
- --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
16141
16357
  }
16142
16358
 
16143
16359
  .pf-c-nav__item.pf-m-expandable::before {
@@ -16149,6 +16365,10 @@ ul.pf-c-list {
16149
16365
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
16150
16366
  }
16151
16367
 
16368
+ .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
16369
+ transform: rotate(0);
16370
+ }
16371
+
16152
16372
  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
16153
16373
  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
16154
16374
  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -16436,11 +16656,7 @@ ul.pf-c-list {
16436
16656
  transition: var(--pf-c-nav__toggle-icon--Transition);
16437
16657
  }
16438
16658
 
16439
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
16440
- transform: rotate(0deg);
16441
- }
16442
-
16443
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
16659
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
16444
16660
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
16445
16661
  }
16446
16662
 
@@ -16532,6 +16748,16 @@ ul.pf-c-list {
16532
16748
  left: 0;
16533
16749
  }
16534
16750
 
16751
+ .pf-l-bullseye {
16752
+ --pf-l-bullseye--Padding: 0;
16753
+ display: flex;
16754
+ align-items: center;
16755
+ justify-content: center;
16756
+ height: 100%;
16757
+ padding: var(--pf-l-bullseye--Padding);
16758
+ margin: 0;
16759
+ }
16760
+
16535
16761
  .pf-c-notification-badge {
16536
16762
  --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
16537
16763
  --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
@@ -17027,44 +17253,34 @@ ul.pf-c-list {
17027
17253
  justify-content: space-between;
17028
17254
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
17029
17255
  max-width: 100%;
17030
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
17256
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
17031
17257
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
17032
17258
  color: var(--pf-c-options-menu__toggle--Color);
17033
17259
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
17034
17260
  border: none;
17035
17261
  }
17036
17262
 
17037
- .pf-c-options-menu__toggle:not(.pf-m-text) {
17038
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
17039
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
17040
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
17041
- }
17042
-
17043
17263
  .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
17044
17264
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
17045
17265
  border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
17046
17266
  }
17047
17267
 
17048
- .pf-c-options-menu__toggle.pf-m-plain {
17268
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17049
17269
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
17050
17270
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
17051
17271
  display: inline-block;
17052
- }
17053
-
17054
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17055
- justify-content: center;
17056
17272
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
17057
17273
  }
17058
17274
 
17059
- .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
17275
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
17060
17276
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
17061
17277
  }
17062
17278
 
17063
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
17279
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17064
17280
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
17065
17281
  }
17066
17282
 
17067
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
17283
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
17068
17284
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
17069
17285
  }
17070
17286
 
@@ -17246,469 +17462,118 @@ ul.pf-c-list {
17246
17462
  --pf-c-overflow-menu--spacer: 0;
17247
17463
  }
17248
17464
 
17249
- .pf-c-pagination {
17250
- --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
17251
- --pf-c-pagination--m-bottom--child--MarginRight: 0;
17252
- --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
17253
- --pf-c-pagination--m-compact--child--MarginRight: var(--pf-global--spacer--sm);
17254
- --pf-c-pagination--c-options-menu__toggle--FontSize: var(--pf-global--FontSize--sm);
17255
- --pf-c-pagination__nav--Display: none;
17256
- --pf-c-pagination__nav--Visibility: hidden;
17257
- --pf-c-pagination--m-display-summary__nav--Display: none;
17258
- --pf-c-pagination--m-display-summary__nav--Visibility: hidden;
17259
- --pf-c-pagination--m-display-full__nav--Display: inline-flex;
17260
- --pf-c-pagination--m-display-full__nav--Visibility: visible;
17261
- --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-global--spacer--sm);
17262
- --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-global--spacer--sm);
17263
- --pf-c-pagination__nav-control--c-button--FontSize: var(--pf-global--FontSize--md);
17264
- --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
17265
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-global--spacer--md);
17266
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-global--spacer--md);
17267
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-global--spacer--md);
17268
- --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-global--spacer--form-element);
17269
- --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-global--spacer--sm);
17270
- --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-global--spacer--form-element);
17271
- --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-global--spacer--sm);
17272
- --pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-global--spacer--md);
17273
- --pf-c-pagination__nav-page-select--FontSize: var(--pf-global--FontSize--sm);
17274
- --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
17275
- --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
17276
- --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
17277
- --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
17278
- --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
17279
- --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
17280
- --pf-c-pagination__total-items--Display: block;
17281
- --pf-c-pagination__total-items--Visibility: visible;
17282
- --pf-c-pagination--m-display-summary__total-items--Display: block;
17283
- --pf-c-pagination--m-display-summary__total-items--Visibility: visible;
17284
- --pf-c-pagination--m-display-full__total-items--Display: none;
17285
- --pf-c-pagination--m-display-full__total-items--Visibility: hidden;
17286
- --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--100);
17287
- --pf-c-pagination--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
17288
- --pf-c-pagination--m-sticky--md--PaddingTop: var(--pf-global--spacer--md);
17289
- --pf-c-pagination--m-sticky--md--PaddingRight: var(--pf-global--spacer--md);
17290
- --pf-c-pagination--m-sticky--md--PaddingBottom: var(--pf-global--spacer--md);
17291
- --pf-c-pagination--m-sticky--md--PaddingLeft: var(--pf-global--spacer--md);
17292
- --pf-c-pagination--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
17293
- --pf-c-pagination--m-sticky--Top: 0;
17294
- --pf-c-pagination--m-bottom--BackgroundColor: var(--pf-global--BackgroundColor--100);
17295
- --pf-c-pagination--m-bottom--BoxShadow: var(--pf-global--BoxShadow--sm-top);
17296
- --pf-c-pagination--m-bottom--Bottom: 0;
17297
- --pf-c-pagination--m-bottom--md--PaddingTop: var(--pf-global--spacer--md);
17298
- --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-global--spacer--md);
17299
- --pf-c-pagination--m-bottom--md--PaddingBottom: var(--pf-global--spacer--md);
17300
- --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-global--spacer--md);
17301
- --pf-c-pagination--m-bottom--xl--PaddingRight: var(--pf-global--spacer--lg);
17302
- --pf-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-global--spacer--lg);
17303
- --pf-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-top);
17304
- --pf-c-pagination--c-options-menu--Display: none;
17305
- --pf-c-pagination--c-options-menu--Visibility: hidden;
17306
- --pf-c-pagination--m-display-summary--c-options-menu--Display: none;
17307
- --pf-c-pagination--m-display-summary--c-options-menu--Visibility: hidden;
17308
- --pf-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
17309
- --pf-c-pagination--m-display-full--c-options-menu--Visibility: visible;
17310
- display: flex;
17311
- flex-wrap: wrap;
17312
- align-items: center;
17313
- justify-content: flex-end;
17314
- }
17315
-
17316
- @media screen and (min-width: 768px) {
17317
- .pf-c-pagination {
17318
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
17319
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
17320
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
17321
- --pf-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
17322
- --pf-c-pagination--m-bottom--child--MarginRight: var(--pf-c-pagination--m-bottom--child--md--MarginRight);
17323
- --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
17324
- --pf-c-pagination--m-bottom--BoxShadow: none;
17325
- --pf-c-pagination--c-options-menu--Display: inline-flex;
17326
- --pf-c-pagination--c-options-menu--Visibility: visible;
17327
- --pf-c-pagination__nav--Display: inline-flex;
17328
- --pf-c-pagination__nav--Visibility: visible;
17329
- --pf-c-pagination__total-items--Display: none;
17330
- --pf-c-pagination__total-items--Visibility: hidden;
17331
- }
17332
- }
17333
- @media screen and (min-width: 1200px) {
17334
- .pf-c-pagination {
17335
- --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
17336
- --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
17337
- }
17338
- }
17339
- .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
17340
- margin-right: var(--pf-c-pagination--child--MarginRight);
17465
+ .pf-c-page__sidebar.pf-m-light {
17466
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
17467
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
17468
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
17469
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
17470
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
17471
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
17472
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
17341
17473
  }
17342
17474
 
17343
- .pf-c-pagination .pf-c-options-menu {
17344
- display: var(--pf-c-pagination--c-options-menu--Display);
17345
- visibility: var(--pf-c-pagination--c-options-menu--Visibility);
17475
+ .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
17476
+ --pf-global--Color--100: var(--pf-global--Color--light-100);
17477
+ --pf-global--Color--200: var(--pf-global--Color--light-200);
17478
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
17479
+ --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
17480
+ --pf-global--link--Color: var(--pf-global--link--Color--light);
17481
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
17482
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
17346
17483
  }
17347
17484
 
17348
- .pf-c-pagination.pf-m-bottom {
17349
- --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight);
17350
- --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
17351
- --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
17352
- --pf-c-pagination--m-sticky--BoxShadow: var(--pf-c-pagination--m-bottom--m-sticky--BoxShadow);
17353
- --pf-c-pagination--m-sticky--Top: auto;
17354
- position: sticky;
17355
- bottom: var(--pf-c-pagination--m-bottom--Bottom);
17356
- justify-content: center;
17357
- background-color: var(--pf-c-pagination--m-bottom--BackgroundColor);
17358
- box-shadow: var(--pf-c-pagination--m-bottom--BoxShadow);
17485
+ .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
17486
+ --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
17359
17487
  }
17360
17488
 
17361
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button {
17362
- --pf-c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
17363
- --pf-c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
17364
- outline-offset: var(--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
17489
+ .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button {
17490
+ --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
17491
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
17492
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
17493
+ --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
17494
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
17495
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17496
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17497
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17498
+ --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
17499
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
17500
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
17501
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
17502
+ --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
17503
+ --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
17504
+ --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
17505
+ --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
17365
17506
  }
17366
17507
 
17367
- .pf-c-pagination.pf-m-bottom.pf-m-static {
17368
- --pf-c-pagination--m-bottom--MarginTop: 0;
17369
- --pf-c-pagination--m-bottom--BorderTopWidth: 0;
17370
- position: relative;
17371
- box-shadow: none;
17508
+ .pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
17509
+ --pf-hidden-visible--visible--Visibility: visible;
17510
+ --pf-hidden-visible--hidden--Display: none;
17511
+ --pf-hidden-visible--hidden--Visibility: hidden;
17512
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17513
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17514
+ display: var(--pf-hidden-visible--Display);
17515
+ visibility: var(--pf-hidden-visible--Visibility);
17372
17516
  }
17373
17517
 
17374
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
17375
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
17376
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
17377
- display: none;
17378
- visibility: hidden;
17518
+ .pf-m-hidden.pf-c-page__header-tools-item, .pf-m-hidden.pf-c-page__header-tools-group {
17519
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17520
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17379
17521
  }
17380
17522
 
17381
- .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
17382
- position: absolute;
17383
- display: block;
17384
- visibility: visible;
17385
- }
17523
+ @media screen and (min-width: 576px) {
17524
+ .pf-m-hidden-on-sm.pf-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-c-page__header-tools-group {
17525
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17526
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17527
+ }
17386
17528
 
17387
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
17388
- display: flex;
17389
- flex-basis: 100%;
17390
- justify-content: space-between;
17391
- visibility: visible;
17529
+ .pf-m-visible-on-sm.pf-c-page__header-tools-item, .pf-m-visible-on-sm.pf-c-page__header-tools-group {
17530
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17531
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17532
+ }
17392
17533
  }
17393
-
17394
17534
  @media screen and (min-width: 768px) {
17395
- .pf-c-pagination.pf-m-bottom {
17396
- --pf-c-pagination--m-bottom--BorderTopWidth: 0;
17397
- --pf-c-pagination--m-bottom--MarginTop: 0;
17398
- --pf-c-pagination--m-bottom--Bottom: auto;
17399
- position: relative;
17400
- justify-content: flex-end;
17401
- padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft);
17535
+ .pf-m-hidden-on-md.pf-c-page__header-tools-item, .pf-m-hidden-on-md.pf-c-page__header-tools-group {
17536
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17537
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17402
17538
  }
17403
17539
 
17404
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
17405
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
17406
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
17407
- display: block;
17408
- visibility: visible;
17540
+ .pf-m-visible-on-md.pf-c-page__header-tools-item, .pf-m-visible-on-md.pf-c-page__header-tools-group {
17541
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17542
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17409
17543
  }
17410
-
17411
- .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
17412
- position: relative;
17544
+ }
17545
+ @media screen and (min-width: 992px) {
17546
+ .pf-m-hidden-on-lg.pf-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-c-page__header-tools-group {
17547
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17548
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17413
17549
  }
17414
17550
 
17415
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
17416
- display: inline-flex;
17417
- flex-basis: auto;
17551
+ .pf-m-visible-on-lg.pf-c-page__header-tools-item, .pf-m-visible-on-lg.pf-c-page__header-tools-group {
17552
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17553
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17418
17554
  }
17419
17555
  }
17420
- .pf-c-pagination.pf-m-sticky {
17421
- --pf-c-pagination--m-bottom--Bottom: 0;
17422
- position: sticky;
17423
- top: var(--pf-c-pagination--m-sticky--Top);
17424
- z-index: var(--pf-c-pagination--m-sticky--ZIndex);
17425
- padding-top: var(--pf-c-pagination--m-sticky--PaddingTop);
17426
- padding-right: var(--pf-c-pagination--m-sticky--PaddingRight);
17427
- padding-bottom: var(--pf-c-pagination--m-sticky--PaddingBottom);
17428
- padding-left: var(--pf-c-pagination--m-sticky--PaddingLeft);
17429
- background-color: var(--pf-c-pagination--m-sticky--BackgroundColor);
17430
- box-shadow: var(--pf-c-pagination--m-sticky--BoxShadow);
17431
- }
17432
-
17433
- @media screen and (min-width: 768px) {
17434
- .pf-c-pagination.pf-m-sticky {
17435
- padding: var(--pf-c-pagination--m-sticky--md--PaddingTop) var(--pf-c-pagination--m-sticky--md--PaddingRight) var(--pf-c-pagination--m-sticky--md--PaddingBottom) var(--pf-c-pagination--m-sticky--md--PaddingLeft);
17556
+ @media screen and (min-width: 1200px) {
17557
+ .pf-m-hidden-on-xl.pf-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-c-page__header-tools-group {
17558
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17559
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17436
17560
  }
17437
- }
17438
- .pf-c-pagination .pf-c-options-menu__toggle {
17439
- font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
17440
- }
17441
-
17442
- .pf-c-pagination.pf-m-compact {
17443
- --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
17444
- }
17445
17561
 
17446
- .pf-c-pagination__nav {
17447
- display: var(--pf-c-pagination__nav--Display);
17448
- justify-content: flex-end;
17449
- visibility: var(--pf-c-pagination__nav--Visibility);
17450
- }
17451
-
17452
- .pf-c-pagination__nav-control .pf-c-button {
17453
- padding-right: var(--pf-c-pagination__nav-control--c-button--PaddingRight);
17454
- padding-left: var(--pf-c-pagination__nav-control--c-button--PaddingLeft);
17455
- font-size: var(--pf-c-pagination__nav-control--c-button--FontSize);
17456
- }
17457
-
17458
- .pf-c-pagination.pf-m-compact .pf-c-pagination__nav-control + .pf-c-pagination__nav-control {
17459
- margin-left: var(--pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
17562
+ .pf-m-visible-on-xl.pf-c-page__header-tools-item, .pf-m-visible-on-xl.pf-c-page__header-tools-group {
17563
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17564
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17565
+ }
17460
17566
  }
17567
+ @media screen and (min-width: 1450px) {
17568
+ .pf-m-hidden-on-2xl.pf-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-c-page__header-tools-group {
17569
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17570
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17571
+ }
17461
17572
 
17462
- .pf-c-pagination__nav-page-select {
17463
- display: flex;
17464
- align-items: center;
17465
- padding-right: var(--pf-c-pagination__nav-page-select--PaddingRight);
17466
- padding-left: var(--pf-c-pagination__nav-page-select--PaddingLeft);
17467
- }
17468
-
17469
- .pf-c-pagination__nav-page-select > * {
17470
- font-size: var(--pf-c-pagination__nav-page-select--FontSize);
17471
- white-space: nowrap;
17472
- }
17473
-
17474
- .pf-c-pagination__nav-page-select > *:not(:last-child) {
17475
- margin-right: var(--pf-c-pagination__nav-page-select--child--MarginRight);
17476
- }
17477
-
17478
- .pf-c-pagination__nav-page-select .pf-c-form-control {
17479
- width: var(--pf-c-pagination__nav-page-select--c-form-control--Width);
17480
- }
17481
-
17482
- .pf-c-pagination__total-items {
17483
- display: var(--pf-c-pagination__total-items--Display);
17484
- visibility: var(--pf-c-pagination__total-items--Visibility);
17485
- }
17486
-
17487
- .pf-c-pagination.pf-m-display-summary {
17488
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
17489
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
17490
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
17491
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
17492
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
17493
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
17494
- }
17495
-
17496
- .pf-c-pagination.pf-m-display-full {
17497
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
17498
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
17499
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
17500
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
17501
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
17502
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
17503
- }
17504
-
17505
- @media (min-width: 576px) {
17506
- .pf-c-pagination.pf-m-display-summary-on-sm {
17507
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
17508
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
17509
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
17510
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
17511
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
17512
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
17513
- }
17514
-
17515
- .pf-c-pagination.pf-m-display-full-on-sm {
17516
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
17517
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
17518
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
17519
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
17520
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
17521
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
17522
- }
17523
- }
17524
- @media (min-width: 768px) {
17525
- .pf-c-pagination.pf-m-display-summary-on-md {
17526
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
17527
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
17528
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
17529
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
17530
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
17531
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
17532
- }
17533
-
17534
- .pf-c-pagination.pf-m-display-full-on-md {
17535
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
17536
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
17537
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
17538
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
17539
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
17540
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
17541
- }
17542
- }
17543
- @media (min-width: 992px) {
17544
- .pf-c-pagination.pf-m-display-summary-on-lg {
17545
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
17546
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
17547
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
17548
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
17549
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
17550
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
17551
- }
17552
-
17553
- .pf-c-pagination.pf-m-display-full-on-lg {
17554
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
17555
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
17556
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
17557
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
17558
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
17559
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
17560
- }
17561
- }
17562
- @media (min-width: 1200px) {
17563
- .pf-c-pagination.pf-m-display-summary-on-xl {
17564
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
17565
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
17566
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
17567
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
17568
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
17569
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
17570
- }
17571
-
17572
- .pf-c-pagination.pf-m-display-full-on-xl {
17573
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
17574
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
17575
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
17576
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
17577
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
17578
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
17579
- }
17580
- }
17581
- @media (min-width: 1450px) {
17582
- .pf-c-pagination.pf-m-display-summary-on-2xl {
17583
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
17584
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
17585
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
17586
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
17587
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
17588
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
17589
- }
17590
-
17591
- .pf-c-pagination.pf-m-display-full-on-2xl {
17592
- --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
17593
- --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
17594
- --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
17595
- --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
17596
- --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
17597
- --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
17598
- }
17599
- }
17600
- .pf-c-page__sidebar.pf-m-light {
17601
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
17602
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
17603
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
17604
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
17605
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
17606
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
17607
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
17608
- }
17609
-
17610
- .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
17611
- --pf-global--Color--100: var(--pf-global--Color--light-100);
17612
- --pf-global--Color--200: var(--pf-global--Color--light-200);
17613
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
17614
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
17615
- --pf-global--link--Color: var(--pf-global--link--Color--light);
17616
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
17617
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
17618
- }
17619
-
17620
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
17621
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
17622
- }
17623
-
17624
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button {
17625
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
17626
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
17627
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
17628
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
17629
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
17630
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17631
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17632
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
17633
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
17634
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
17635
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
17636
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
17637
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
17638
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
17639
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
17640
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
17641
- }
17642
-
17643
- .pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
17644
- --pf-hidden-visible--visible--Visibility: visible;
17645
- --pf-hidden-visible--hidden--Display: none;
17646
- --pf-hidden-visible--hidden--Visibility: hidden;
17647
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17648
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17649
- display: var(--pf-hidden-visible--Display);
17650
- visibility: var(--pf-hidden-visible--Visibility);
17651
- }
17652
-
17653
- .pf-m-hidden.pf-c-page__header-tools-item, .pf-m-hidden.pf-c-page__header-tools-group {
17654
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17655
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17656
- }
17657
-
17658
- @media screen and (min-width: 576px) {
17659
- .pf-m-hidden-on-sm.pf-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-c-page__header-tools-group {
17660
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17661
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17662
- }
17663
-
17664
- .pf-m-visible-on-sm.pf-c-page__header-tools-item, .pf-m-visible-on-sm.pf-c-page__header-tools-group {
17665
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17666
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17667
- }
17668
- }
17669
- @media screen and (min-width: 768px) {
17670
- .pf-m-hidden-on-md.pf-c-page__header-tools-item, .pf-m-hidden-on-md.pf-c-page__header-tools-group {
17671
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17672
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17673
- }
17674
-
17675
- .pf-m-visible-on-md.pf-c-page__header-tools-item, .pf-m-visible-on-md.pf-c-page__header-tools-group {
17676
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17677
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17678
- }
17679
- }
17680
- @media screen and (min-width: 992px) {
17681
- .pf-m-hidden-on-lg.pf-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-c-page__header-tools-group {
17682
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17683
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17684
- }
17685
-
17686
- .pf-m-visible-on-lg.pf-c-page__header-tools-item, .pf-m-visible-on-lg.pf-c-page__header-tools-group {
17687
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17688
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17689
- }
17690
- }
17691
- @media screen and (min-width: 1200px) {
17692
- .pf-m-hidden-on-xl.pf-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-c-page__header-tools-group {
17693
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17694
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17695
- }
17696
-
17697
- .pf-m-visible-on-xl.pf-c-page__header-tools-item, .pf-m-visible-on-xl.pf-c-page__header-tools-group {
17698
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17699
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17700
- }
17701
- }
17702
- @media screen and (min-width: 1450px) {
17703
- .pf-m-hidden-on-2xl.pf-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-c-page__header-tools-group {
17704
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
17705
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
17706
- }
17707
-
17708
- .pf-m-visible-on-2xl.pf-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-c-page__header-tools-group {
17709
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17710
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17711
- }
17573
+ .pf-m-visible-on-2xl.pf-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-c-page__header-tools-group {
17574
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
17575
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
17576
+ }
17712
17577
  }
17713
17578
  .pf-c-page {
17714
17579
  --pf-c-page--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
@@ -17874,574 +17739,925 @@ ul.pf-c-list {
17874
17739
  grid-template-areas: "header header" "nav main";
17875
17740
  }
17876
17741
  }
17877
- .pf-c-page__header,
17878
- .pf-c-page > .pf-c-masthead {
17879
- grid-area: header;
17742
+ .pf-c-page__header,
17743
+ .pf-c-page > .pf-c-masthead {
17744
+ grid-area: header;
17745
+ }
17746
+
17747
+ .pf-c-page__header {
17748
+ color: var(--pf-global--Color--100);
17749
+ z-index: var(--pf-c-page__header--ZIndex);
17750
+ grid-template-columns: auto auto;
17751
+ display: grid;
17752
+ align-items: center;
17753
+ min-width: 0;
17754
+ min-height: var(--pf-c-page__header--MinHeight);
17755
+ background-color: var(--pf-c-page__header--BackgroundColor);
17756
+ }
17757
+
17758
+ .pf-c-page__header > * {
17759
+ display: flex;
17760
+ align-items: center;
17761
+ }
17762
+
17763
+ @media screen and (min-width: 992px) {
17764
+ .pf-c-page__header {
17765
+ grid-template-columns: auto 1fr auto;
17766
+ }
17767
+ }
17768
+ .pf-c-page__header .pf-c-masthead {
17769
+ grid-column: span 2;
17770
+ align-self: stretch;
17771
+ }
17772
+
17773
+ .pf-c-page__header-brand {
17774
+ grid-column: 1/2;
17775
+ padding-left: var(--pf-c-page__header-brand--PaddingLeft);
17776
+ }
17777
+
17778
+ @media (min-width: 1200px) {
17779
+ .pf-c-page__header-brand {
17780
+ padding-right: var(--pf-c-page__header-brand--xl--PaddingRight);
17781
+ }
17782
+ }
17783
+ .pf-c-page__header-brand-link {
17784
+ display: flex;
17785
+ flex: 1;
17786
+ align-items: center;
17787
+ }
17788
+
17789
+ .pf-c-page__header-brand-link .pf-c-brand {
17790
+ max-height: var(--pf-c-page__header-brand-link--c-brand--MaxHeight);
17791
+ }
17792
+
17793
+ .pf-c-page__header-brand-toggle .pf-c-button {
17794
+ padding: var(--pf-c-page__header-sidebar-toggle__c-button--PaddingTop) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingRight) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft);
17795
+ margin-right: var(--pf-c-page__header-sidebar-toggle__c-button--MarginRight);
17796
+ margin-left: var(--pf-c-page__header-sidebar-toggle__c-button--MarginLeft);
17797
+ font-size: var(--pf-c-page__header-sidebar-toggle__c-button--FontSize);
17798
+ line-height: 1;
17799
+ }
17800
+
17801
+ .pf-c-page__header-nav {
17802
+ align-self: stretch;
17803
+ min-width: 0;
17804
+ padding-right: var(--pf-c-page__header-nav--PaddingRight);
17805
+ padding-left: var(--pf-c-page__header-nav--PaddingLeft);
17806
+ background-color: var(--pf-c-page__header-nav--BackgroundColor);
17807
+ grid-column: 1/-1;
17808
+ grid-row: 2/3;
17809
+ }
17810
+
17811
+ @media screen and (min-width: 1200px) {
17812
+ .pf-c-page__header-nav {
17813
+ grid-column: 2/3;
17814
+ grid-row: 1/2;
17815
+ }
17816
+ }
17817
+ .pf-c-page__header-nav .pf-c-nav {
17818
+ align-self: stretch;
17819
+ }
17820
+
17821
+ .pf-c-page__header-tools {
17822
+ grid-column: 2/3;
17823
+ margin-right: var(--pf-c-page__header-tools--MarginRight);
17824
+ margin-left: auto;
17825
+ }
17826
+
17827
+ .pf-c-page__header-tools .pf-c-avatar {
17828
+ margin-left: var(--pf-c-page__header-tools--c-avatar--MarginLeft);
17829
+ }
17830
+
17831
+ @media screen and (min-width: 992px) {
17832
+ .pf-c-page__header-tools {
17833
+ grid-column: 3/4;
17834
+ }
17835
+ }
17836
+ .pf-c-page__header-tools-group {
17837
+ --pf-hidden-visible--visible--Display: var(--pf-c-page__header-tools-group--Display);
17838
+ align-items: center;
17839
+ }
17840
+
17841
+ .pf-c-page__header-tools-group + .pf-c-page__header-tools-group {
17842
+ margin-left: var(--pf-c-page__header-tools-group--MarginLeft);
17843
+ }
17844
+
17845
+ .pf-c-page__header-tools-item {
17846
+ --pf-hidden-visible--visible--Display: var(--pf-c-page__header-tools-item--Display);
17847
+ }
17848
+
17849
+ .pf-c-page__header-tools-item .pf-c-notification-badge.pf-m-read:hover {
17850
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor);
17851
+ }
17852
+
17853
+ .pf-c-page__header-tools-item.pf-m-selected .pf-c-button {
17854
+ background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
17855
+ border-radius: var(--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius);
17856
+ }
17857
+
17858
+ .pf-c-page__header-tools-item.pf-m-selected .pf-c-button::before {
17859
+ position: absolute;
17860
+ top: 0;
17861
+ right: 0;
17862
+ bottom: 0;
17863
+ left: 0;
17864
+ width: var(--pf-c-page__header-tools--c-button--m-selected--before--Width);
17865
+ height: var(--pf-c-page__header-tools--c-button--m-selected--before--Height);
17866
+ content: "";
17867
+ }
17868
+
17869
+ .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread {
17870
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor);
17871
+ }
17872
+
17873
+ .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread::after {
17874
+ border-color: var(--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor);
17875
+ }
17876
+
17877
+ .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-attention {
17878
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-global--danger-color--200);
17879
+ }
17880
+
17881
+ .pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-unread {
17882
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor);
17883
+ }
17884
+
17885
+ .pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-attention {
17886
+ --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor);
17887
+ }
17888
+
17889
+ .pf-c-page__sidebar {
17890
+ grid-area: nav;
17891
+ grid-row-start: 2;
17892
+ grid-column-start: 1;
17893
+ z-index: var(--pf-c-page__sidebar--ZIndex);
17894
+ width: var(--pf-c-page__sidebar--Width);
17895
+ overflow-x: hidden;
17896
+ overflow-y: auto;
17897
+ -webkit-overflow-scrolling: touch;
17898
+ background-color: var(--pf-c-page__sidebar--BackgroundColor);
17899
+ transition: var(--pf-c-page__sidebar--Transition);
17900
+ transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
17901
+ }
17902
+
17903
+ @media screen and (min-width: 1200px) {
17904
+ .pf-c-page__sidebar {
17905
+ box-shadow: var(--pf-c-page__sidebar--BoxShadow);
17906
+ }
17907
+ }
17908
+ .pf-c-page__sidebar.pf-m-expanded {
17909
+ --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
17910
+ box-shadow: var(--pf-c-page__sidebar--BoxShadow);
17911
+ }
17912
+
17913
+ .pf-c-page__sidebar.pf-m-collapsed {
17914
+ max-width: 0;
17915
+ overflow: hidden;
17916
+ }
17917
+
17918
+ .pf-c-page__sidebar.pf-m-light {
17919
+ color: var(--pf-global--Color--100);
17920
+ --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
17921
+ }
17922
+
17923
+ .pf-c-page__sidebar-body {
17924
+ padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
17925
+ padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
17926
+ }
17927
+
17928
+ .pf-c-page__sidebar-body.pf-m-menu {
17929
+ --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
17930
+ --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
17931
+ background-color: var(--pf-global--palette--black-900);
17932
+ border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
17933
+ }
17934
+
17935
+ .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
17936
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
17937
+ }
17938
+
17939
+ .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
17940
+ --pf-c-context-selector__toggle--BorderTopColor: transparent;
17941
+ --pf-c-context-selector__toggle--BorderRightColor: transparent;
17942
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
17943
+ --pf-c-context-selector__toggle--BorderLeftColor: transparent;
17944
+ --pf-c-context-selector__menu--Top: 100%;
17945
+ color: var(--pf-global--Color--100);
17946
+ width: 100%;
17947
+ }
17948
+
17949
+ .pf-c-page__main-nav.pf-m-limit-width,
17950
+ .pf-c-page__main-breadcrumb.pf-m-limit-width,
17951
+ .pf-c-page__main-tabs.pf-m-limit-width,
17952
+ .pf-c-page__main-section.pf-m-limit-width,
17953
+ .pf-c-page__main-wizard.pf-m-limit-width {
17954
+ display: flex;
17955
+ flex-direction: column;
17956
+ padding: 0;
17957
+ }
17958
+
17959
+ .pf-c-page__main-nav.pf-m-limit-width > .pf-c-page__main-body,
17960
+ .pf-c-page__main-breadcrumb.pf-m-limit-width > .pf-c-page__main-body,
17961
+ .pf-c-page__main-tabs.pf-m-limit-width > .pf-c-page__main-body,
17962
+ .pf-c-page__main-section.pf-m-limit-width > .pf-c-page__main-body,
17963
+ .pf-c-page__main-wizard.pf-m-limit-width > .pf-c-page__main-body {
17964
+ flex: 1;
17965
+ max-width: var(--pf-c-page--section--m-limit-width--MaxWidth);
17966
+ }
17967
+
17968
+ .pf-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
17969
+ .pf-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
17970
+ .pf-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
17971
+ .pf-c-page__main-section.pf-m-limit-width.pf-m-align-center,
17972
+ .pf-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
17973
+ align-items: center;
17974
+ }
17975
+
17976
+ .pf-c-page__main-nav.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
17977
+ .pf-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
17978
+ .pf-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
17979
+ .pf-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
17980
+ .pf-c-page__main-wizard.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body {
17981
+ width: 100%;
17982
+ }
17983
+
17984
+ .pf-c-page__main-nav,
17985
+ .pf-c-page__main-breadcrumb,
17986
+ .pf-c-page__main-tabs,
17987
+ .pf-c-page__main-section,
17988
+ .pf-c-page__main-wizard,
17989
+ .pf-c-page__main-group,
17990
+ .pf-c-page__main-subnav {
17991
+ flex-shrink: 0;
17992
+ }
17993
+
17994
+ .pf-c-page__main-nav.pf-m-sticky-top,
17995
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top,
17996
+ .pf-c-page__main-tabs.pf-m-sticky-top,
17997
+ .pf-c-page__main-section.pf-m-sticky-top,
17998
+ .pf-c-page__main-wizard.pf-m-sticky-top,
17999
+ .pf-c-page__main-group.pf-m-sticky-top,
18000
+ .pf-c-page__main-subnav.pf-m-sticky-top {
18001
+ position: sticky;
18002
+ top: 0;
18003
+ z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
18004
+ box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
18005
+ }
18006
+
18007
+ .pf-c-page__main-nav.pf-m-sticky-bottom,
18008
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
18009
+ .pf-c-page__main-tabs.pf-m-sticky-bottom,
18010
+ .pf-c-page__main-section.pf-m-sticky-bottom,
18011
+ .pf-c-page__main-wizard.pf-m-sticky-bottom,
18012
+ .pf-c-page__main-group.pf-m-sticky-bottom,
18013
+ .pf-c-page__main-subnav.pf-m-sticky-bottom {
18014
+ position: sticky;
18015
+ bottom: 0;
18016
+ z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
18017
+ box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
18018
+ }
18019
+
18020
+ .pf-c-page__main-nav.pf-m-overflow-scroll,
18021
+ .pf-c-page__main-breadcrumb.pf-m-overflow-scroll,
18022
+ .pf-c-page__main-tabs.pf-m-overflow-scroll,
18023
+ .pf-c-page__main-section.pf-m-overflow-scroll,
18024
+ .pf-c-page__main-wizard.pf-m-overflow-scroll,
18025
+ .pf-c-page__main-group.pf-m-overflow-scroll,
18026
+ .pf-c-page__main-subnav.pf-m-overflow-scroll {
18027
+ position: relative;
18028
+ flex-shrink: 1;
18029
+ overflow: auto;
18030
+ }
18031
+
18032
+ .pf-c-page__main-nav.pf-m-shadow-bottom,
18033
+ .pf-c-page__main-breadcrumb.pf-m-shadow-bottom,
18034
+ .pf-c-page__main-tabs.pf-m-shadow-bottom,
18035
+ .pf-c-page__main-section.pf-m-shadow-bottom,
18036
+ .pf-c-page__main-wizard.pf-m-shadow-bottom,
18037
+ .pf-c-page__main-group.pf-m-shadow-bottom,
18038
+ .pf-c-page__main-subnav.pf-m-shadow-bottom {
18039
+ z-index: var(--pf-c-page--section--m-shadow-bottom--ZIndex);
18040
+ box-shadow: var(--pf-c-page--section--m-shadow-bottom--BoxShadow);
18041
+ }
18042
+
18043
+ .pf-c-page__main-nav.pf-m-shadow-top,
18044
+ .pf-c-page__main-breadcrumb.pf-m-shadow-top,
18045
+ .pf-c-page__main-tabs.pf-m-shadow-top,
18046
+ .pf-c-page__main-section.pf-m-shadow-top,
18047
+ .pf-c-page__main-wizard.pf-m-shadow-top,
18048
+ .pf-c-page__main-group.pf-m-shadow-top,
18049
+ .pf-c-page__main-subnav.pf-m-shadow-top {
18050
+ z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
18051
+ box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
18052
+ }
18053
+
18054
+ .pf-c-page__main,
18055
+ .pf-c-page__drawer {
18056
+ grid-area: main;
18057
+ z-index: var(--pf-c-page__main--ZIndex);
18058
+ overflow-x: hidden;
18059
+ overflow-y: auto;
18060
+ -webkit-overflow-scrolling: touch;
17880
18061
  }
17881
18062
 
17882
- .pf-c-page__header {
17883
- color: var(--pf-global--Color--100);
17884
- z-index: var(--pf-c-page__header--ZIndex);
17885
- grid-template-columns: auto auto;
17886
- display: grid;
17887
- align-items: center;
17888
- min-width: 0;
17889
- min-height: var(--pf-c-page__header--MinHeight);
17890
- background-color: var(--pf-c-page__header--BackgroundColor);
18063
+ .pf-c-page__main:focus,
18064
+ .pf-c-page__drawer:focus {
18065
+ outline: 0;
17891
18066
  }
17892
18067
 
17893
- .pf-c-page__header > * {
18068
+ .pf-c-page__main,
18069
+ .pf-c-page__main-drawer,
18070
+ .pf-c-page__main-group {
17894
18071
  display: flex;
17895
- align-items: center;
18072
+ flex-direction: column;
17896
18073
  }
17897
18074
 
17898
- @media screen and (min-width: 992px) {
17899
- .pf-c-page__header {
17900
- grid-template-columns: auto 1fr auto;
17901
- }
18075
+ .pf-c-page__main-nav {
18076
+ padding-top: var(--pf-c-page__main-nav--PaddingTop);
18077
+ padding-right: var(--pf-c-page__main-nav--PaddingRight);
18078
+ padding-left: var(--pf-c-page__main-nav--PaddingLeft);
18079
+ background-color: var(--pf-c-page__main-nav--BackgroundColor);
17902
18080
  }
17903
- .pf-c-page__header .pf-c-masthead {
17904
- grid-column: span 2;
17905
- align-self: stretch;
18081
+
18082
+ .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
18083
+ padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
17906
18084
  }
17907
18085
 
17908
- .pf-c-page__header-brand {
17909
- grid-column: 1/2;
17910
- padding-left: var(--pf-c-page__header-brand--PaddingLeft);
18086
+ .pf-c-page__main-subnav {
18087
+ background-color: var(--pf-c-page__main-subnav--BackgroundColor);
18088
+ border-top: var(--pf-c-page__main-subnav--BorderTopWidth) solid var(--pf-c-page__main-subnav--BorderTopColor);
18089
+ border-left: var(--pf-c-page__main-subnav--BorderLeftWidth) solid var(--pf-c-page__main-subnav--BorderLeftColor);
17911
18090
  }
17912
18091
 
17913
- @media (min-width: 1200px) {
17914
- .pf-c-page__header-brand {
17915
- padding-right: var(--pf-c-page__header-brand--xl--PaddingRight);
18092
+ @media screen and (min-width: 1200px) {
18093
+ .pf-c-page__sidebar ~ .pf-c-page__main {
18094
+ --pf-c-page__main-subnav--BorderLeftWidth: var(--pf-c-page__sidebar--main__main-subnav--BorderLeftWidth);
17916
18095
  }
17917
18096
  }
17918
- .pf-c-page__header-brand-link {
17919
- display: flex;
17920
- flex: 1;
17921
- align-items: center;
18097
+ .pf-c-page__sidebar.pf-m-collapsed ~ .pf-c-page__main {
18098
+ --pf-c-page__main-subnav--BorderLeftWidth: var(--pf-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth);
17922
18099
  }
17923
18100
 
17924
- .pf-c-page__header-brand-link .pf-c-brand {
17925
- max-height: var(--pf-c-page__header-brand-link--c-brand--MaxHeight);
18101
+ .pf-c-page__main-breadcrumb {
18102
+ padding: var(--pf-c-page__main-breadcrumb--PaddingTop) var(--pf-c-page__main-breadcrumb--PaddingRight) var(--pf-c-page__main-breadcrumb--PaddingBottom) var(--pf-c-page__main-breadcrumb--PaddingLeft);
18103
+ background-color: var(--pf-c-page__main-breadcrumb--BackgroundColor);
17926
18104
  }
17927
18105
 
17928
- .pf-c-page__header-brand-toggle .pf-c-button {
17929
- padding: var(--pf-c-page__header-sidebar-toggle__c-button--PaddingTop) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingRight) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingBottom) var(--pf-c-page__header-sidebar-toggle__c-button--PaddingLeft);
17930
- margin-right: var(--pf-c-page__header-sidebar-toggle__c-button--MarginRight);
17931
- margin-left: var(--pf-c-page__header-sidebar-toggle__c-button--MarginLeft);
17932
- font-size: var(--pf-c-page__header-sidebar-toggle__c-button--FontSize);
17933
- line-height: 1;
18106
+ .pf-c-page__main-breadcrumb + .pf-c-page__main-section {
18107
+ --pf-c-page__main-section--PaddingTop: var(--pf-c-page__main-breadcrumb--main-section--PaddingTop);
17934
18108
  }
17935
18109
 
17936
- .pf-c-page__header-nav {
17937
- align-self: stretch;
17938
- min-width: 0;
17939
- padding-right: var(--pf-c-page__header-nav--PaddingRight);
17940
- padding-left: var(--pf-c-page__header-nav--PaddingLeft);
17941
- background-color: var(--pf-c-page__header-nav--BackgroundColor);
17942
- grid-column: 1/-1;
17943
- grid-row: 2/3;
18110
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
18111
+ --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
17944
18112
  }
17945
18113
 
17946
- @media screen and (min-width: 1200px) {
17947
- .pf-c-page__header-nav {
17948
- grid-column: 2/3;
17949
- grid-row: 1/2;
17950
- }
18114
+ .pf-c-page__main-tabs {
18115
+ padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
18116
+ background-color: var(--pf-c-page__main-tabs--BackgroundColor);
17951
18117
  }
17952
- .pf-c-page__header-nav .pf-c-nav {
17953
- align-self: stretch;
18118
+
18119
+ .pf-c-page__main-nav + .pf-c-page__main-tabs {
18120
+ --pf-c-page__main-tabs--PaddingTop: var(--pf-c-page__main-nav--page__main-tabs--PaddingTop);
17954
18121
  }
17955
18122
 
17956
- .pf-c-page__header-tools {
17957
- grid-column: 2/3;
17958
- margin-right: var(--pf-c-page__header-tools--MarginRight);
17959
- margin-left: auto;
18123
+ .pf-c-page__main-breadcrumb + .pf-c-page__main-tabs {
18124
+ --pf-c-page__main-tabs--PaddingTop: var(--pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop);
17960
18125
  }
17961
18126
 
17962
- .pf-c-page__header-tools .pf-c-avatar {
17963
- margin-left: var(--pf-c-page__header-tools--c-avatar--MarginLeft);
18127
+ .pf-c-page__main-section:last-child, .pf-c-page__main-section:only-child, .pf-c-page__main-section.pf-m-fill,
18128
+ .pf-c-page__main-group:last-child,
18129
+ .pf-c-page__main-group:only-child,
18130
+ .pf-c-page__main-group.pf-m-fill,
18131
+ .pf-c-page__main-wizard:last-child,
18132
+ .pf-c-page__main-wizard:only-child,
18133
+ .pf-c-page__main-wizard.pf-m-fill {
18134
+ flex-grow: 1;
17964
18135
  }
17965
18136
 
17966
- @media screen and (min-width: 992px) {
17967
- .pf-c-page__header-tools {
17968
- grid-column: 3/4;
17969
- }
18137
+ .pf-c-page__main-section.pf-m-no-fill,
18138
+ .pf-c-page__main-group.pf-m-no-fill,
18139
+ .pf-c-page__main-wizard.pf-m-no-fill {
18140
+ flex-grow: 0;
17970
18141
  }
17971
- .pf-c-page__header-tools-group {
17972
- --pf-hidden-visible--visible--Display: var(--pf-c-page__header-tools-group--Display);
17973
- align-items: center;
18142
+
18143
+ .pf-c-page__main-section {
18144
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18145
+ background-color: var(--pf-c-page__main-section--BackgroundColor);
17974
18146
  }
17975
18147
 
17976
- .pf-c-page__header-tools-group + .pf-c-page__header-tools-group {
17977
- margin-left: var(--pf-c-page__header-tools-group--MarginLeft);
18148
+ .pf-c-page__main-section.pf-m-light {
18149
+ --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor);
17978
18150
  }
17979
18151
 
17980
- .pf-c-page__header-tools-item {
17981
- --pf-hidden-visible--visible--Display: var(--pf-c-page__header-tools-item--Display);
18152
+ .pf-c-page__main-section[class*=pf-m-dark-] {
18153
+ color: var(--pf-global--Color--100);
17982
18154
  }
17983
18155
 
17984
- .pf-c-page__header-tools-item .pf-c-notification-badge.pf-m-read:hover {
17985
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor);
18156
+ .pf-c-page__main-section.pf-m-dark-100 {
18157
+ --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-dark-100--BackgroundColor);
17986
18158
  }
17987
18159
 
17988
- .pf-c-page__header-tools-item.pf-m-selected .pf-c-button {
17989
- background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
17990
- border-radius: var(--pf-c-page__header-tools--c-button--m-selected--before--BorderRadius);
18160
+ .pf-c-page__main-section.pf-m-dark-200 {
18161
+ --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-dark-200--BackgroundColor);
17991
18162
  }
17992
18163
 
17993
- .pf-c-page__header-tools-item.pf-m-selected .pf-c-button::before {
17994
- position: absolute;
17995
- top: 0;
17996
- right: 0;
17997
- bottom: 0;
17998
- left: 0;
17999
- width: var(--pf-c-page__header-tools--c-button--m-selected--before--Width);
18000
- height: var(--pf-c-page__header-tools--c-button--m-selected--before--Height);
18001
- content: "";
18164
+ .pf-c-page__main-section.pf-m-padding {
18165
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18002
18166
  }
18003
18167
 
18004
- .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread {
18005
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor);
18168
+ .pf-c-page__main-section.pf-m-padding.pf-m-limit-width {
18169
+ padding: 0;
18006
18170
  }
18007
18171
 
18008
- .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-unread::after {
18009
- border-color: var(--pf-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor);
18172
+ .pf-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-c-page__main-body {
18173
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18010
18174
  }
18011
18175
 
18012
- .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge.pf-m-attention {
18013
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-global--danger-color--200);
18176
+ .pf-c-page__main-section.pf-m-no-padding, .pf-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-c-page__main-body {
18177
+ padding: 0;
18014
18178
  }
18015
18179
 
18016
- .pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-unread {
18017
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor);
18180
+ @media (min-width: 576px) {
18181
+ .pf-c-page__main-section.pf-m-padding-on-sm {
18182
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18183
+ }
18184
+
18185
+ .pf-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
18186
+ padding: 0;
18187
+ }
18188
+
18189
+ .pf-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-c-page__main-body {
18190
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18191
+ }
18192
+
18193
+ .pf-c-page__main-section.pf-m-no-padding-on-sm, .pf-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-c-page__main-body {
18194
+ padding: 0;
18195
+ }
18018
18196
  }
18197
+ @media (min-width: 768px) {
18198
+ .pf-c-page__main-section.pf-m-padding-on-md {
18199
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18200
+ }
18019
18201
 
18020
- .pf-c-page__header-tools-item .pf-c-button:focus .pf-c-notification-badge.pf-m-attention {
18021
- --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor);
18202
+ .pf-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
18203
+ padding: 0;
18204
+ }
18205
+
18206
+ .pf-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-c-page__main-body {
18207
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18208
+ }
18209
+
18210
+ .pf-c-page__main-section.pf-m-no-padding-on-md, .pf-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-c-page__main-body {
18211
+ padding: 0;
18212
+ }
18022
18213
  }
18214
+ @media (min-width: 992px) {
18215
+ .pf-c-page__main-section.pf-m-padding-on-lg {
18216
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18217
+ }
18023
18218
 
18024
- .pf-c-page__sidebar {
18025
- grid-area: nav;
18026
- grid-row-start: 2;
18027
- grid-column-start: 1;
18028
- z-index: var(--pf-c-page__sidebar--ZIndex);
18029
- width: var(--pf-c-page__sidebar--Width);
18030
- overflow-x: hidden;
18031
- overflow-y: auto;
18032
- -webkit-overflow-scrolling: touch;
18033
- background-color: var(--pf-c-page__sidebar--BackgroundColor);
18034
- transition: var(--pf-c-page__sidebar--Transition);
18035
- transform: translateX(var(--pf-c-page__sidebar--TranslateX)) translateZ(var(--pf-c-page__sidebar--TranslateZ));
18219
+ .pf-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
18220
+ padding: 0;
18221
+ }
18222
+
18223
+ .pf-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-c-page__main-body {
18224
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18225
+ }
18226
+
18227
+ .pf-c-page__main-section.pf-m-no-padding-on-lg, .pf-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-c-page__main-body {
18228
+ padding: 0;
18229
+ }
18230
+ }
18231
+ @media (min-width: 1200px) {
18232
+ .pf-c-page__main-section.pf-m-padding-on-xl {
18233
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18234
+ }
18235
+
18236
+ .pf-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
18237
+ padding: 0;
18238
+ }
18239
+
18240
+ .pf-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-c-page__main-body {
18241
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18242
+ }
18243
+
18244
+ .pf-c-page__main-section.pf-m-no-padding-on-xl, .pf-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-c-page__main-body {
18245
+ padding: 0;
18246
+ }
18036
18247
  }
18248
+ @media (min-width: 1450px) {
18249
+ .pf-c-page__main-section.pf-m-padding-on-2xl {
18250
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18251
+ }
18037
18252
 
18038
- @media screen and (min-width: 1200px) {
18039
- .pf-c-page__sidebar {
18040
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
18253
+ .pf-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
18254
+ padding: 0;
18041
18255
  }
18042
- }
18043
- .pf-c-page__sidebar.pf-m-expanded {
18044
- --pf-c-page__sidebar--TranslateX: var(--pf-c-page__sidebar--m-expanded--TranslateX);
18045
- box-shadow: var(--pf-c-page__sidebar--BoxShadow);
18046
- }
18047
18256
 
18048
- .pf-c-page__sidebar.pf-m-collapsed {
18049
- max-width: 0;
18050
- overflow: hidden;
18051
- }
18257
+ .pf-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-c-page__main-body {
18258
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18259
+ }
18052
18260
 
18053
- .pf-c-page__sidebar.pf-m-light {
18054
- color: var(--pf-global--Color--100);
18055
- --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
18261
+ .pf-c-page__main-section.pf-m-no-padding-on-2xl, .pf-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-c-page__main-body {
18262
+ padding: 0;
18263
+ }
18056
18264
  }
18057
-
18058
- .pf-c-page__sidebar-body {
18059
- padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
18060
- padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
18265
+ .pf-c-page__main-wizard {
18266
+ flex: 1 1;
18267
+ min-height: 0;
18268
+ background-color: var(--pf-c-page__main-wizard--BackgroundColor);
18269
+ border-top: var(--pf-c-page__main-wizard--BorderTopWidth) solid var(--pf-c-page__main-wizard--BorderTopColor);
18061
18270
  }
18062
18271
 
18063
- .pf-c-page__sidebar-body.pf-m-menu {
18064
- --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
18065
- --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
18066
- background-color: var(--pf-global--palette--black-900);
18067
- border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
18272
+ .pf-c-page__main-wizard:first-child {
18273
+ --pf-c-page__main-wizard--BorderTopWidth: 0;
18068
18274
  }
18069
18275
 
18070
- .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
18071
- --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
18276
+ .pf-c-page__main-wizard .pf-c-page__main-body {
18277
+ min-height: 0;
18072
18278
  }
18073
18279
 
18074
- .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
18075
- --pf-c-context-selector__toggle--BorderTopColor: transparent;
18076
- --pf-c-context-selector__toggle--BorderRightColor: transparent;
18077
- --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
18078
- --pf-c-context-selector__toggle--BorderLeftColor: transparent;
18079
- --pf-c-context-selector__menu--Top: 100%;
18080
- color: var(--pf-global--Color--100);
18081
- width: 100%;
18280
+ .pf-c-page__main-group {
18281
+ flex-shrink: 0;
18082
18282
  }
18083
18283
 
18084
- .pf-c-page__main-nav.pf-m-limit-width,
18085
- .pf-c-page__main-breadcrumb.pf-m-limit-width,
18086
- .pf-c-page__main-tabs.pf-m-limit-width,
18087
- .pf-c-page__main-section.pf-m-limit-width,
18088
- .pf-c-page__main-wizard.pf-m-limit-width {
18089
- display: flex;
18090
- flex-direction: column;
18091
- padding: 0;
18284
+ .pf-c-page__main-nav .pf-c-page__main-body {
18285
+ padding-top: var(--pf-c-page__main-nav--PaddingTop);
18286
+ padding-right: var(--pf-c-page__main-nav--PaddingRight);
18287
+ padding-left: var(--pf-c-page__main-nav--PaddingLeft);
18092
18288
  }
18093
18289
 
18094
- .pf-c-page__main-nav.pf-m-limit-width > .pf-c-page__main-body,
18095
- .pf-c-page__main-breadcrumb.pf-m-limit-width > .pf-c-page__main-body,
18096
- .pf-c-page__main-tabs.pf-m-limit-width > .pf-c-page__main-body,
18097
- .pf-c-page__main-section.pf-m-limit-width > .pf-c-page__main-body,
18098
- .pf-c-page__main-wizard.pf-m-limit-width > .pf-c-page__main-body {
18099
- flex: 1;
18100
- max-width: var(--pf-c-page--section--m-limit-width--MaxWidth);
18290
+ .pf-c-page__main-breadcrumb .pf-c-page__main-body {
18291
+ padding: var(--pf-c-page__main-breadcrumb--PaddingTop) var(--pf-c-page__main-breadcrumb--PaddingRight) var(--pf-c-page__main-breadcrumb--PaddingBottom) var(--pf-c-page__main-breadcrumb--PaddingLeft);
18101
18292
  }
18102
18293
 
18103
- .pf-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
18104
- .pf-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
18105
- .pf-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
18106
- .pf-c-page__main-section.pf-m-limit-width.pf-m-align-center,
18107
- .pf-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
18108
- align-items: center;
18294
+ .pf-c-page__main-section .pf-c-page__main-body {
18295
+ padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18109
18296
  }
18110
18297
 
18111
- .pf-c-page__main-nav.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
18112
- .pf-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
18113
- .pf-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
18114
- .pf-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body,
18115
- .pf-c-page__main-wizard.pf-m-limit-width.pf-m-align-center > .pf-c-page__main-body {
18116
- width: 100%;
18298
+ .pf-c-page__main-tabs .pf-c-page__main-body {
18299
+ padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
18117
18300
  }
18118
18301
 
18119
- .pf-c-page__main-nav,
18120
- .pf-c-page__main-breadcrumb,
18121
- .pf-c-page__main-tabs,
18122
- .pf-c-page__main-section,
18123
- .pf-c-page__main-wizard,
18124
- .pf-c-page__main-group,
18125
- .pf-c-page__main-subnav {
18126
- flex-shrink: 0;
18302
+ .pf-c-page__drawer {
18303
+ grid-area: main;
18127
18304
  }
18128
18305
 
18129
- .pf-c-page__main-nav.pf-m-sticky-top,
18130
- .pf-c-page__main-breadcrumb.pf-m-sticky-top,
18131
- .pf-c-page__main-tabs.pf-m-sticky-top,
18132
- .pf-c-page__main-section.pf-m-sticky-top,
18133
- .pf-c-page__main-wizard.pf-m-sticky-top,
18134
- .pf-c-page__main-group.pf-m-sticky-top,
18135
- .pf-c-page__main-subnav.pf-m-sticky-top {
18136
- position: sticky;
18137
- top: 0;
18138
- z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
18139
- box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
18306
+ .pf-c-page__drawer > .pf-c-drawer {
18307
+ flex: 1 0 auto;
18140
18308
  }
18141
18309
 
18142
- .pf-c-page__main-nav.pf-m-sticky-bottom,
18143
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
18144
- .pf-c-page__main-tabs.pf-m-sticky-bottom,
18145
- .pf-c-page__main-section.pf-m-sticky-bottom,
18146
- .pf-c-page__main-wizard.pf-m-sticky-bottom,
18147
- .pf-c-page__main-group.pf-m-sticky-bottom,
18148
- .pf-c-page__main-subnav.pf-m-sticky-bottom {
18149
- position: sticky;
18150
- bottom: 0;
18151
- z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
18152
- box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
18310
+ .pf-c-pagination {
18311
+ --pf-c-pagination--child--MarginRight: var(--pf-global--spacer--lg);
18312
+ --pf-c-pagination--m-bottom--child--MarginRight: 0;
18313
+ --pf-c-pagination--m-bottom--child--md--MarginRight: var(--pf-global--spacer--lg);
18314
+ --pf-c-pagination--m-compact--child--MarginRight: var(--pf-global--spacer--sm);
18315
+ --pf-c-pagination--c-options-menu__toggle--FontSize: var(--pf-global--FontSize--sm);
18316
+ --pf-c-pagination__nav--Display: none;
18317
+ --pf-c-pagination__nav--Visibility: hidden;
18318
+ --pf-c-pagination--m-display-summary__nav--Display: none;
18319
+ --pf-c-pagination--m-display-summary__nav--Visibility: hidden;
18320
+ --pf-c-pagination--m-display-full__nav--Display: inline-flex;
18321
+ --pf-c-pagination--m-display-full__nav--Visibility: visible;
18322
+ --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-global--spacer--sm);
18323
+ --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-global--spacer--sm);
18324
+ --pf-c-pagination__nav-control--c-button--FontSize: var(--pf-global--FontSize--md);
18325
+ --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
18326
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-global--spacer--md);
18327
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-global--spacer--md);
18328
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-global--spacer--md);
18329
+ --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop: var(--pf-global--spacer--form-element);
18330
+ --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight: var(--pf-global--spacer--sm);
18331
+ --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom: var(--pf-global--spacer--form-element);
18332
+ --pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft: var(--pf-global--spacer--sm);
18333
+ --pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft: var(--pf-global--spacer--md);
18334
+ --pf-c-pagination__nav-page-select--FontSize: var(--pf-global--FontSize--sm);
18335
+ --pf-c-pagination__nav-page-select--PaddingLeft: var(--pf-global--spacer--md);
18336
+ --pf-c-pagination__nav-page-select--PaddingRight: var(--pf-global--spacer--md);
18337
+ --pf-c-pagination__nav-page-select--child--MarginRight: var(--pf-global--spacer--xs);
18338
+ --pf-c-pagination__nav-page-select--c-form-control--width-base: 3.5ch;
18339
+ --pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
18340
+ --pf-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
18341
+ --pf-c-pagination__total-items--Display: block;
18342
+ --pf-c-pagination__total-items--Visibility: visible;
18343
+ --pf-c-pagination--m-display-summary__total-items--Display: block;
18344
+ --pf-c-pagination--m-display-summary__total-items--Visibility: visible;
18345
+ --pf-c-pagination--m-display-full__total-items--Display: none;
18346
+ --pf-c-pagination--m-display-full__total-items--Visibility: hidden;
18347
+ --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--100);
18348
+ --pf-c-pagination--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
18349
+ --pf-c-pagination--m-sticky--md--PaddingTop: var(--pf-global--spacer--md);
18350
+ --pf-c-pagination--m-sticky--md--PaddingRight: var(--pf-global--spacer--md);
18351
+ --pf-c-pagination--m-sticky--md--PaddingBottom: var(--pf-global--spacer--md);
18352
+ --pf-c-pagination--m-sticky--md--PaddingLeft: var(--pf-global--spacer--md);
18353
+ --pf-c-pagination--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
18354
+ --pf-c-pagination--m-sticky--Top: 0;
18355
+ --pf-c-pagination--m-bottom--BackgroundColor: var(--pf-global--BackgroundColor--100);
18356
+ --pf-c-pagination--m-bottom--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18357
+ --pf-c-pagination--m-bottom--Bottom: 0;
18358
+ --pf-c-pagination--m-bottom--md--PaddingTop: var(--pf-global--spacer--md);
18359
+ --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-global--spacer--md);
18360
+ --pf-c-pagination--m-bottom--md--PaddingBottom: var(--pf-global--spacer--md);
18361
+ --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-global--spacer--md);
18362
+ --pf-c-pagination--m-bottom--xl--PaddingRight: var(--pf-global--spacer--lg);
18363
+ --pf-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-global--spacer--lg);
18364
+ --pf-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-top);
18365
+ --pf-c-pagination--c-options-menu--Display: none;
18366
+ --pf-c-pagination--c-options-menu--Visibility: hidden;
18367
+ --pf-c-pagination--m-display-summary--c-options-menu--Display: none;
18368
+ --pf-c-pagination--m-display-summary--c-options-menu--Visibility: hidden;
18369
+ --pf-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
18370
+ --pf-c-pagination--m-display-full--c-options-menu--Visibility: visible;
18371
+ display: flex;
18372
+ flex-wrap: wrap;
18373
+ align-items: center;
18374
+ justify-content: flex-end;
18153
18375
  }
18154
18376
 
18155
- .pf-c-page__main-nav.pf-m-overflow-scroll,
18156
- .pf-c-page__main-breadcrumb.pf-m-overflow-scroll,
18157
- .pf-c-page__main-tabs.pf-m-overflow-scroll,
18158
- .pf-c-page__main-section.pf-m-overflow-scroll,
18159
- .pf-c-page__main-wizard.pf-m-overflow-scroll,
18160
- .pf-c-page__main-group.pf-m-overflow-scroll,
18161
- .pf-c-page__main-subnav.pf-m-overflow-scroll {
18162
- position: relative;
18163
- flex-shrink: 1;
18164
- overflow: auto;
18377
+ @media screen and (min-width: 768px) {
18378
+ .pf-c-pagination {
18379
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop);
18380
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight);
18381
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom);
18382
+ --pf-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft);
18383
+ --pf-c-pagination--m-bottom--child--MarginRight: var(--pf-c-pagination--m-bottom--child--md--MarginRight);
18384
+ --pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
18385
+ --pf-c-pagination--m-bottom--BoxShadow: none;
18386
+ --pf-c-pagination--c-options-menu--Display: inline-flex;
18387
+ --pf-c-pagination--c-options-menu--Visibility: visible;
18388
+ --pf-c-pagination__nav--Display: inline-flex;
18389
+ --pf-c-pagination__nav--Visibility: visible;
18390
+ --pf-c-pagination__total-items--Display: none;
18391
+ --pf-c-pagination__total-items--Visibility: hidden;
18392
+ }
18165
18393
  }
18166
-
18167
- .pf-c-page__main-nav.pf-m-shadow-bottom,
18168
- .pf-c-page__main-breadcrumb.pf-m-shadow-bottom,
18169
- .pf-c-page__main-tabs.pf-m-shadow-bottom,
18170
- .pf-c-page__main-section.pf-m-shadow-bottom,
18171
- .pf-c-page__main-wizard.pf-m-shadow-bottom,
18172
- .pf-c-page__main-group.pf-m-shadow-bottom,
18173
- .pf-c-page__main-subnav.pf-m-shadow-bottom {
18174
- z-index: var(--pf-c-page--section--m-shadow-bottom--ZIndex);
18175
- box-shadow: var(--pf-c-page--section--m-shadow-bottom--BoxShadow);
18394
+ @media screen and (min-width: 1200px) {
18395
+ .pf-c-pagination {
18396
+ --pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight);
18397
+ --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft);
18398
+ }
18399
+ }
18400
+ .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
18401
+ margin-right: var(--pf-c-pagination--child--MarginRight);
18176
18402
  }
18177
18403
 
18178
- .pf-c-page__main-nav.pf-m-shadow-top,
18179
- .pf-c-page__main-breadcrumb.pf-m-shadow-top,
18180
- .pf-c-page__main-tabs.pf-m-shadow-top,
18181
- .pf-c-page__main-section.pf-m-shadow-top,
18182
- .pf-c-page__main-wizard.pf-m-shadow-top,
18183
- .pf-c-page__main-group.pf-m-shadow-top,
18184
- .pf-c-page__main-subnav.pf-m-shadow-top {
18185
- z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
18186
- box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
18404
+ .pf-c-pagination .pf-c-options-menu {
18405
+ display: var(--pf-c-pagination--c-options-menu--Display);
18406
+ visibility: var(--pf-c-pagination--c-options-menu--Visibility);
18187
18407
  }
18188
18408
 
18189
- .pf-c-page__main,
18190
- .pf-c-page__drawer {
18191
- grid-area: main;
18192
- z-index: var(--pf-c-page__main--ZIndex);
18193
- overflow-x: hidden;
18194
- overflow-y: auto;
18195
- -webkit-overflow-scrolling: touch;
18409
+ .pf-c-pagination.pf-m-bottom {
18410
+ --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight);
18411
+ --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
18412
+ --pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
18413
+ --pf-c-pagination--m-sticky--BoxShadow: var(--pf-c-pagination--m-bottom--m-sticky--BoxShadow);
18414
+ --pf-c-pagination--m-sticky--Top: auto;
18415
+ position: sticky;
18416
+ bottom: var(--pf-c-pagination--m-bottom--Bottom);
18417
+ justify-content: center;
18418
+ background-color: var(--pf-c-pagination--m-bottom--BackgroundColor);
18419
+ box-shadow: var(--pf-c-pagination--m-bottom--BoxShadow);
18196
18420
  }
18197
18421
 
18198
- .pf-c-page__main:focus,
18199
- .pf-c-page__drawer:focus {
18200
- outline: 0;
18422
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control .pf-c-button {
18423
+ --pf-c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
18424
+ --pf-c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
18425
+ outline-offset: var(--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset);
18201
18426
  }
18202
18427
 
18203
- .pf-c-page__main,
18204
- .pf-c-page__main-drawer,
18205
- .pf-c-page__main-group {
18206
- display: flex;
18207
- flex-direction: column;
18428
+ .pf-c-pagination.pf-m-bottom.pf-m-static {
18429
+ --pf-c-pagination--m-bottom--MarginTop: 0;
18430
+ --pf-c-pagination--m-bottom--BorderTopWidth: 0;
18431
+ position: relative;
18432
+ box-shadow: none;
18208
18433
  }
18209
18434
 
18210
- .pf-c-page__main-nav {
18211
- padding-top: var(--pf-c-page__main-nav--PaddingTop);
18212
- padding-right: var(--pf-c-page__main-nav--PaddingRight);
18213
- padding-left: var(--pf-c-page__main-nav--PaddingLeft);
18214
- background-color: var(--pf-c-page__main-nav--BackgroundColor);
18435
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
18436
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
18437
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
18438
+ display: none;
18439
+ visibility: hidden;
18215
18440
  }
18216
18441
 
18217
- .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
18218
- padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
18442
+ .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
18443
+ position: absolute;
18444
+ display: block;
18445
+ visibility: visible;
18219
18446
  }
18220
18447
 
18221
- .pf-c-page__main-subnav {
18222
- background-color: var(--pf-c-page__main-subnav--BackgroundColor);
18223
- border-top: var(--pf-c-page__main-subnav--BorderTopWidth) solid var(--pf-c-page__main-subnav--BorderTopColor);
18224
- border-left: var(--pf-c-page__main-subnav--BorderLeftWidth) solid var(--pf-c-page__main-subnav--BorderLeftColor);
18448
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
18449
+ display: flex;
18450
+ flex-basis: 100%;
18451
+ justify-content: space-between;
18452
+ visibility: visible;
18225
18453
  }
18226
18454
 
18227
- @media screen and (min-width: 1200px) {
18228
- .pf-c-page__sidebar ~ .pf-c-page__main {
18229
- --pf-c-page__main-subnav--BorderLeftWidth: var(--pf-c-page__sidebar--main__main-subnav--BorderLeftWidth);
18455
+ @media screen and (min-width: 768px) {
18456
+ .pf-c-pagination.pf-m-bottom {
18457
+ --pf-c-pagination--m-bottom--BorderTopWidth: 0;
18458
+ --pf-c-pagination--m-bottom--MarginTop: 0;
18459
+ --pf-c-pagination--m-bottom--Bottom: auto;
18460
+ position: relative;
18461
+ justify-content: flex-end;
18462
+ padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft);
18230
18463
  }
18231
- }
18232
- .pf-c-page__sidebar.pf-m-collapsed ~ .pf-c-page__main {
18233
- --pf-c-page__main-subnav--BorderLeftWidth: var(--pf-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth);
18234
- }
18235
18464
 
18236
- .pf-c-page__main-breadcrumb {
18237
- padding: var(--pf-c-page__main-breadcrumb--PaddingTop) var(--pf-c-page__main-breadcrumb--PaddingRight) var(--pf-c-page__main-breadcrumb--PaddingBottom) var(--pf-c-page__main-breadcrumb--PaddingLeft);
18238
- background-color: var(--pf-c-page__main-breadcrumb--BackgroundColor);
18239
- }
18465
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
18466
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
18467
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
18468
+ display: block;
18469
+ visibility: visible;
18470
+ }
18240
18471
 
18241
- .pf-c-page__main-breadcrumb + .pf-c-page__main-section {
18242
- --pf-c-page__main-section--PaddingTop: var(--pf-c-page__main-breadcrumb--main-section--PaddingTop);
18243
- }
18472
+ .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
18473
+ position: relative;
18474
+ }
18244
18475
 
18245
- .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
18246
- --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
18476
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav {
18477
+ display: inline-flex;
18478
+ flex-basis: auto;
18479
+ }
18247
18480
  }
18248
-
18249
- .pf-c-page__main-tabs {
18250
- padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
18251
- background-color: var(--pf-c-page__main-tabs--BackgroundColor);
18481
+ .pf-c-pagination.pf-m-sticky {
18482
+ --pf-c-pagination--m-bottom--Bottom: 0;
18483
+ position: sticky;
18484
+ top: var(--pf-c-pagination--m-sticky--Top);
18485
+ z-index: var(--pf-c-pagination--m-sticky--ZIndex);
18486
+ padding-top: var(--pf-c-pagination--m-sticky--PaddingTop);
18487
+ padding-right: var(--pf-c-pagination--m-sticky--PaddingRight);
18488
+ padding-bottom: var(--pf-c-pagination--m-sticky--PaddingBottom);
18489
+ padding-left: var(--pf-c-pagination--m-sticky--PaddingLeft);
18490
+ background-color: var(--pf-c-pagination--m-sticky--BackgroundColor);
18491
+ box-shadow: var(--pf-c-pagination--m-sticky--BoxShadow);
18252
18492
  }
18253
18493
 
18254
- .pf-c-page__main-nav + .pf-c-page__main-tabs {
18255
- --pf-c-page__main-tabs--PaddingTop: var(--pf-c-page__main-nav--page__main-tabs--PaddingTop);
18494
+ @media screen and (min-width: 768px) {
18495
+ .pf-c-pagination.pf-m-sticky {
18496
+ padding: var(--pf-c-pagination--m-sticky--md--PaddingTop) var(--pf-c-pagination--m-sticky--md--PaddingRight) var(--pf-c-pagination--m-sticky--md--PaddingBottom) var(--pf-c-pagination--m-sticky--md--PaddingLeft);
18497
+ }
18256
18498
  }
18257
-
18258
- .pf-c-page__main-breadcrumb + .pf-c-page__main-tabs {
18259
- --pf-c-page__main-tabs--PaddingTop: var(--pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop);
18499
+ .pf-c-pagination .pf-c-options-menu__toggle {
18500
+ font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize);
18260
18501
  }
18261
18502
 
18262
- .pf-c-page__main-section:last-child, .pf-c-page__main-section:only-child, .pf-c-page__main-section.pf-m-fill,
18263
- .pf-c-page__main-group:last-child,
18264
- .pf-c-page__main-group:only-child,
18265
- .pf-c-page__main-group.pf-m-fill,
18266
- .pf-c-page__main-wizard:last-child,
18267
- .pf-c-page__main-wizard:only-child,
18268
- .pf-c-page__main-wizard.pf-m-fill {
18269
- flex-grow: 1;
18503
+ .pf-c-pagination.pf-m-compact {
18504
+ --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight);
18270
18505
  }
18271
18506
 
18272
- .pf-c-page__main-section.pf-m-no-fill,
18273
- .pf-c-page__main-group.pf-m-no-fill,
18274
- .pf-c-page__main-wizard.pf-m-no-fill {
18275
- flex-grow: 0;
18507
+ .pf-c-pagination__nav {
18508
+ display: var(--pf-c-pagination__nav--Display);
18509
+ justify-content: flex-end;
18510
+ visibility: var(--pf-c-pagination__nav--Visibility);
18276
18511
  }
18277
18512
 
18278
- .pf-c-page__main-section {
18279
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18280
- background-color: var(--pf-c-page__main-section--BackgroundColor);
18513
+ .pf-c-pagination__nav-control .pf-c-button {
18514
+ padding-right: var(--pf-c-pagination__nav-control--c-button--PaddingRight);
18515
+ padding-left: var(--pf-c-pagination__nav-control--c-button--PaddingLeft);
18516
+ font-size: var(--pf-c-pagination__nav-control--c-button--FontSize);
18281
18517
  }
18282
18518
 
18283
- .pf-c-page__main-section.pf-m-light {
18284
- --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor);
18519
+ .pf-c-pagination.pf-m-compact .pf-c-pagination__nav-control + .pf-c-pagination__nav-control {
18520
+ margin-left: var(--pf-c-pagination--m-compact__nav-control--nav-control--MarginLeft);
18285
18521
  }
18286
18522
 
18287
- .pf-c-page__main-section[class*=pf-m-dark-] {
18288
- color: var(--pf-global--Color--100);
18523
+ .pf-c-pagination__nav-page-select {
18524
+ display: flex;
18525
+ align-items: center;
18526
+ padding-right: var(--pf-c-pagination__nav-page-select--PaddingRight);
18527
+ padding-left: var(--pf-c-pagination__nav-page-select--PaddingLeft);
18289
18528
  }
18290
18529
 
18291
- .pf-c-page__main-section.pf-m-dark-100 {
18292
- --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-dark-100--BackgroundColor);
18530
+ .pf-c-pagination__nav-page-select > * {
18531
+ font-size: var(--pf-c-pagination__nav-page-select--FontSize);
18532
+ white-space: nowrap;
18293
18533
  }
18294
18534
 
18295
- .pf-c-page__main-section.pf-m-dark-200 {
18296
- --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-dark-200--BackgroundColor);
18535
+ .pf-c-pagination__nav-page-select > *:not(:last-child) {
18536
+ margin-right: var(--pf-c-pagination__nav-page-select--child--MarginRight);
18297
18537
  }
18298
18538
 
18299
- .pf-c-page__main-section.pf-m-padding {
18300
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18539
+ .pf-c-pagination__nav-page-select .pf-c-form-control {
18540
+ width: var(--pf-c-pagination__nav-page-select--c-form-control--Width);
18301
18541
  }
18302
18542
 
18303
- .pf-c-page__main-section.pf-m-padding.pf-m-limit-width {
18304
- padding: 0;
18543
+ .pf-c-pagination__total-items {
18544
+ display: var(--pf-c-pagination__total-items--Display);
18545
+ visibility: var(--pf-c-pagination__total-items--Visibility);
18305
18546
  }
18306
18547
 
18307
- .pf-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-c-page__main-body {
18308
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18548
+ .pf-c-pagination.pf-m-display-summary {
18549
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18550
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18551
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18552
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18553
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18554
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18309
18555
  }
18310
18556
 
18311
- .pf-c-page__main-section.pf-m-no-padding, .pf-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-c-page__main-body {
18312
- padding: 0;
18557
+ .pf-c-pagination.pf-m-display-full {
18558
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18559
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18560
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18561
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18562
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18563
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18313
18564
  }
18314
18565
 
18315
18566
  @media (min-width: 576px) {
18316
- .pf-c-page__main-section.pf-m-padding-on-sm {
18317
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18318
- }
18319
-
18320
- .pf-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
18321
- padding: 0;
18322
- }
18323
-
18324
- .pf-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-c-page__main-body {
18325
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18567
+ .pf-c-pagination.pf-m-display-summary-on-sm {
18568
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18569
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18570
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18571
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18572
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18573
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18326
18574
  }
18327
18575
 
18328
- .pf-c-page__main-section.pf-m-no-padding-on-sm, .pf-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-c-page__main-body {
18329
- padding: 0;
18576
+ .pf-c-pagination.pf-m-display-full-on-sm {
18577
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18578
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18579
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18580
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18581
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18582
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18330
18583
  }
18331
18584
  }
18332
18585
  @media (min-width: 768px) {
18333
- .pf-c-page__main-section.pf-m-padding-on-md {
18334
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18335
- }
18336
-
18337
- .pf-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
18338
- padding: 0;
18339
- }
18340
-
18341
- .pf-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-c-page__main-body {
18342
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18586
+ .pf-c-pagination.pf-m-display-summary-on-md {
18587
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18588
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18589
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18590
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18591
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18592
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18343
18593
  }
18344
18594
 
18345
- .pf-c-page__main-section.pf-m-no-padding-on-md, .pf-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-c-page__main-body {
18346
- padding: 0;
18595
+ .pf-c-pagination.pf-m-display-full-on-md {
18596
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18597
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18598
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18599
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18600
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18601
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18347
18602
  }
18348
18603
  }
18349
18604
  @media (min-width: 992px) {
18350
- .pf-c-page__main-section.pf-m-padding-on-lg {
18351
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18352
- }
18353
-
18354
- .pf-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
18355
- padding: 0;
18356
- }
18357
-
18358
- .pf-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-c-page__main-body {
18359
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18605
+ .pf-c-pagination.pf-m-display-summary-on-lg {
18606
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18607
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18608
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18609
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18610
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18611
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18360
18612
  }
18361
18613
 
18362
- .pf-c-page__main-section.pf-m-no-padding-on-lg, .pf-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-c-page__main-body {
18363
- padding: 0;
18614
+ .pf-c-pagination.pf-m-display-full-on-lg {
18615
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18616
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18617
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18618
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18619
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18620
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18364
18621
  }
18365
18622
  }
18366
18623
  @media (min-width: 1200px) {
18367
- .pf-c-page__main-section.pf-m-padding-on-xl {
18368
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18369
- }
18370
-
18371
- .pf-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
18372
- padding: 0;
18373
- }
18374
-
18375
- .pf-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-c-page__main-body {
18376
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18624
+ .pf-c-pagination.pf-m-display-summary-on-xl {
18625
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18626
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18627
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18628
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18629
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18630
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18377
18631
  }
18378
18632
 
18379
- .pf-c-page__main-section.pf-m-no-padding-on-xl, .pf-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-c-page__main-body {
18380
- padding: 0;
18633
+ .pf-c-pagination.pf-m-display-full-on-xl {
18634
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18635
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18636
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18637
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18638
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18639
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18381
18640
  }
18382
18641
  }
18383
18642
  @media (min-width: 1450px) {
18384
- .pf-c-page__main-section.pf-m-padding-on-2xl {
18385
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18386
- }
18387
-
18388
- .pf-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
18389
- padding: 0;
18390
- }
18391
-
18392
- .pf-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-c-page__main-body {
18393
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18643
+ .pf-c-pagination.pf-m-display-summary-on-2xl {
18644
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
18645
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-summary__nav--Visibility);
18646
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-summary--c-options-menu--Display);
18647
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-summary--c-options-menu--Visibility);
18648
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-summary__total-items--Display);
18649
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-summary__total-items--Visibility);
18394
18650
  }
18395
18651
 
18396
- .pf-c-page__main-section.pf-m-no-padding-on-2xl, .pf-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-c-page__main-body {
18397
- padding: 0;
18652
+ .pf-c-pagination.pf-m-display-full-on-2xl {
18653
+ --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-full__nav--Display);
18654
+ --pf-c-pagination__nav--Visibility: var(--pf-c-pagination--m-display-full__nav--Visibility);
18655
+ --pf-c-pagination--c-options-menu--Display: var(--pf-c-pagination--m-display-full--c-options-menu--Display);
18656
+ --pf-c-pagination--c-options-menu--Visibility: var(--pf-c-pagination--m-display-full--c-options-menu--Visibility);
18657
+ --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
18658
+ --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
18398
18659
  }
18399
18660
  }
18400
- .pf-c-page__main-wizard {
18401
- flex: 1 1;
18402
- min-height: 0;
18403
- background-color: var(--pf-c-page__main-wizard--BackgroundColor);
18404
- border-top: var(--pf-c-page__main-wizard--BorderTopWidth) solid var(--pf-c-page__main-wizard--BorderTopColor);
18405
- }
18406
-
18407
- .pf-c-page__main-wizard:first-child {
18408
- --pf-c-page__main-wizard--BorderTopWidth: 0;
18409
- }
18410
-
18411
- .pf-c-page__main-wizard .pf-c-page__main-body {
18412
- min-height: 0;
18413
- }
18414
-
18415
- .pf-c-page__main-group {
18416
- flex-shrink: 0;
18417
- }
18418
-
18419
- .pf-c-page__main-nav .pf-c-page__main-body {
18420
- padding-top: var(--pf-c-page__main-nav--PaddingTop);
18421
- padding-right: var(--pf-c-page__main-nav--PaddingRight);
18422
- padding-left: var(--pf-c-page__main-nav--PaddingLeft);
18423
- }
18424
-
18425
- .pf-c-page__main-breadcrumb .pf-c-page__main-body {
18426
- padding: var(--pf-c-page__main-breadcrumb--PaddingTop) var(--pf-c-page__main-breadcrumb--PaddingRight) var(--pf-c-page__main-breadcrumb--PaddingBottom) var(--pf-c-page__main-breadcrumb--PaddingLeft);
18427
- }
18428
-
18429
- .pf-c-page__main-section .pf-c-page__main-body {
18430
- padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
18431
- }
18432
-
18433
- .pf-c-page__main-tabs .pf-c-page__main-body {
18434
- padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);
18435
- }
18436
-
18437
- .pf-c-page__drawer {
18438
- grid-area: main;
18439
- }
18440
-
18441
- .pf-c-page__drawer > .pf-c-drawer {
18442
- flex: 1 0 auto;
18443
- }
18444
-
18445
18661
  .pf-c-popover {
18446
18662
  --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
18447
18663
  --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
@@ -19076,6 +19292,78 @@ ul.pf-c-list {
19076
19292
  text-align: var(--pf-c-progress-stepper__step-description--TextAlign);
19077
19293
  }
19078
19294
 
19295
+ .pf-c-radio {
19296
+ --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
19297
+ --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);
19298
+ --pf-c-radio__label--Color: var(--pf-global--Color--100);
19299
+ --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
19300
+ --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
19301
+ --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
19302
+ --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
19303
+ --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
19304
+ --pf-c-radio__input--first-child--MarginLeft: 0.0625rem;
19305
+ --pf-c-radio__input--last-child--MarginRight: 0.0625rem;
19306
+ --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);
19307
+ --pf-c-radio__description--Color: var(--pf-global--Color--200);
19308
+ --pf-c-radio__body--MarginTop: var(--pf-global--spacer--sm);
19309
+ display: grid;
19310
+ grid-template-columns: auto 1fr;
19311
+ grid-gap: var(--pf-c-radio--GridGap);
19312
+ align-items: start;
19313
+ justify-items: start;
19314
+ }
19315
+
19316
+ .pf-c-radio.pf-m-standalone {
19317
+ --pf-c-radio--GridGap: 0;
19318
+ --pf-c-radio__input--Height: auto;
19319
+ --pf-c-radio__input--MarginTop: 0;
19320
+ display: inline-grid;
19321
+ line-height: 1;
19322
+ }
19323
+
19324
+ .pf-c-radio__label {
19325
+ font-size: var(--pf-c-radio__label--FontSize);
19326
+ font-weight: var(--pf-c-radio__label--FontWeight);
19327
+ line-height: var(--pf-c-radio__label--LineHeight);
19328
+ color: var(--pf-c-radio__label--Color);
19329
+ }
19330
+
19331
+ .pf-c-radio__input {
19332
+ height: var(--pf-c-radio__input--Height);
19333
+ margin-top: var(--pf-c-radio__input--MarginTop);
19334
+ }
19335
+
19336
+ .pf-c-radio__input:first-child {
19337
+ margin-left: var(--pf-c-radio__input--first-child--MarginLeft);
19338
+ }
19339
+
19340
+ .pf-c-radio__input:last-child {
19341
+ margin-right: var(--pf-c-radio__input--last-child--MarginRight);
19342
+ }
19343
+
19344
+ .pf-c-radio__description {
19345
+ grid-column: 2;
19346
+ font-size: var(--pf-c-radio__description--FontSize);
19347
+ color: var(--pf-c-radio__description--Color);
19348
+ }
19349
+
19350
+ .pf-c-radio__body {
19351
+ grid-column: 2;
19352
+ margin-top: var(--pf-c-radio__body--MarginTop);
19353
+ }
19354
+
19355
+ label.pf-c-radio, .pf-c-radio__label,
19356
+ .pf-c-radio__input {
19357
+ cursor: pointer;
19358
+ }
19359
+
19360
+ .pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
19361
+ .pf-c-radio__input:disabled,
19362
+ .pf-c-radio__input.pf-m-disabled {
19363
+ --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
19364
+ cursor: not-allowed;
19365
+ }
19366
+
19079
19367
  .pf-c-search-input {
19080
19368
  --pf-c-search-input__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
19081
19369
  --pf-c-search-input__text--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -19229,114 +19517,42 @@ ul.pf-c-list {
19229
19517
 
19230
19518
  .pf-c-search-input.pf-m-top .pf-c-search-input__menu {
19231
19519
  --pf-c-search-input__menu--Top: var(--pf-c-search-input--m-top__menu--Top);
19232
- transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
19233
- }
19234
-
19235
- .pf-c-search-input__menu-body {
19236
- padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
19237
- }
19238
-
19239
- .pf-c-search-input__menu-list {
19240
- padding-top: var(--pf-c-search-input__menu-list--PaddingTop);
19241
- padding-bottom: var(--pf-c-search-input__menu-list--PaddingBottom);
19242
- }
19243
-
19244
- .pf-c-search-input__menu-item {
19245
- display: flex;
19246
- width: 100%;
19247
- min-width: 0;
19248
- padding-top: var(--pf-c-search-input__menu-item--PaddingTop);
19249
- padding-right: var(--pf-c-search-input__menu-item--PaddingRight);
19250
- padding-bottom: var(--pf-c-search-input__menu-item--PaddingBottom);
19251
- padding-left: var(--pf-c-search-input__menu-item--PaddingLeft);
19252
- color: var(--pf-c-search-input__menu-item--Color);
19253
- text-align: left;
19254
- background-color: var(--pf-c-search-input__menu-item--BackgroundColor);
19255
- border: none;
19256
- }
19257
-
19258
- .pf-c-search-input__menu-item:hover {
19259
- --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--hover--BackgroundColor);
19260
- }
19261
-
19262
- .pf-c-search-input__menu-item:focus {
19263
- --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--focus--BackgroundColor);
19264
- }
19265
-
19266
- .pf-c-search-input__menu-item-text {
19267
- flex-grow: 1;
19268
- }
19269
-
19270
- .pf-c-radio {
19271
- --pf-c-radio--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
19272
- --pf-c-radio__label--disabled--Color: var(--pf-global--disabled-color--100);
19273
- --pf-c-radio__label--Color: var(--pf-global--Color--100);
19274
- --pf-c-radio__label--FontWeight: var(--pf-global--FontWeight--normal);
19275
- --pf-c-radio__label--FontSize: var(--pf-global--FontSize--md);
19276
- --pf-c-radio__label--LineHeight: var(--pf-global--LineHeight--sm);
19277
- --pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
19278
- --pf-c-radio__input--MarginTop: calc(((var(--pf-c-radio__label--FontSize) * var(--pf-c-radio__label--LineHeight)) - var(--pf-c-radio__input--Height)) / 2);
19279
- --pf-c-radio__input--first-child--MarginLeft: 0.0625rem;
19280
- --pf-c-radio__input--last-child--MarginRight: 0.0625rem;
19281
- --pf-c-radio__description--FontSize: var(--pf-global--FontSize--sm);
19282
- --pf-c-radio__description--Color: var(--pf-global--Color--200);
19283
- --pf-c-radio__body--MarginTop: var(--pf-global--spacer--sm);
19284
- display: grid;
19285
- grid-template-columns: auto 1fr;
19286
- grid-gap: var(--pf-c-radio--GridGap);
19287
- align-items: start;
19288
- justify-items: start;
19289
- }
19290
-
19291
- .pf-c-radio.pf-m-standalone {
19292
- --pf-c-radio--GridGap: 0;
19293
- --pf-c-radio__input--Height: auto;
19294
- --pf-c-radio__input--MarginTop: 0;
19295
- display: inline-grid;
19296
- line-height: 1;
19297
- }
19298
-
19299
- .pf-c-radio__label {
19300
- font-size: var(--pf-c-radio__label--FontSize);
19301
- font-weight: var(--pf-c-radio__label--FontWeight);
19302
- line-height: var(--pf-c-radio__label--LineHeight);
19303
- color: var(--pf-c-radio__label--Color);
19304
- }
19305
-
19306
- .pf-c-radio__input {
19307
- height: var(--pf-c-radio__input--Height);
19308
- margin-top: var(--pf-c-radio__input--MarginTop);
19520
+ transform: translateY(var(--pf-c-search-input--m-top__menu--TranslateY));
19309
19521
  }
19310
19522
 
19311
- .pf-c-radio__input:first-child {
19312
- margin-left: var(--pf-c-radio__input--first-child--MarginLeft);
19523
+ .pf-c-search-input__menu-body {
19524
+ padding: var(--pf-c-search-input__menu-body--PaddingTop) var(--pf-c-search-input__menu-body--PaddingRight) var(--pf-c-search-input__menu-body--PaddingBottom) var(--pf-c-search-input__menu-body--PaddingLeft);
19313
19525
  }
19314
19526
 
19315
- .pf-c-radio__input:last-child {
19316
- margin-right: var(--pf-c-radio__input--last-child--MarginRight);
19527
+ .pf-c-search-input__menu-list {
19528
+ padding-top: var(--pf-c-search-input__menu-list--PaddingTop);
19529
+ padding-bottom: var(--pf-c-search-input__menu-list--PaddingBottom);
19317
19530
  }
19318
19531
 
19319
- .pf-c-radio__description {
19320
- grid-column: 2;
19321
- font-size: var(--pf-c-radio__description--FontSize);
19322
- color: var(--pf-c-radio__description--Color);
19532
+ .pf-c-search-input__menu-item {
19533
+ display: flex;
19534
+ width: 100%;
19535
+ min-width: 0;
19536
+ padding-top: var(--pf-c-search-input__menu-item--PaddingTop);
19537
+ padding-right: var(--pf-c-search-input__menu-item--PaddingRight);
19538
+ padding-bottom: var(--pf-c-search-input__menu-item--PaddingBottom);
19539
+ padding-left: var(--pf-c-search-input__menu-item--PaddingLeft);
19540
+ color: var(--pf-c-search-input__menu-item--Color);
19541
+ text-align: left;
19542
+ background-color: var(--pf-c-search-input__menu-item--BackgroundColor);
19543
+ border: none;
19323
19544
  }
19324
19545
 
19325
- .pf-c-radio__body {
19326
- grid-column: 2;
19327
- margin-top: var(--pf-c-radio__body--MarginTop);
19546
+ .pf-c-search-input__menu-item:hover {
19547
+ --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--hover--BackgroundColor);
19328
19548
  }
19329
19549
 
19330
- label.pf-c-radio, .pf-c-radio__label,
19331
- .pf-c-radio__input {
19332
- cursor: pointer;
19550
+ .pf-c-search-input__menu-item:focus {
19551
+ --pf-c-search-input__menu-item--BackgroundColor: var(--pf-c-search-input__menu-item--focus--BackgroundColor);
19333
19552
  }
19334
19553
 
19335
- .pf-c-radio__label:disabled, .pf-c-radio__label.pf-m-disabled,
19336
- .pf-c-radio__input:disabled,
19337
- .pf-c-radio__input.pf-m-disabled {
19338
- --pf-c-radio__label--Color: var(--pf-c-radio__label--disabled--Color);
19339
- cursor: not-allowed;
19554
+ .pf-c-search-input__menu-item-text {
19555
+ flex-grow: 1;
19340
19556
  }
19341
19557
 
19342
19558
  .pf-c-select {
@@ -24557,6 +24773,7 @@ label.pf-c-radio, .pf-c-radio__label,
24557
24773
  }
24558
24774
 
24559
24775
  .pf-c-text-input-group {
24776
+ --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
24560
24777
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
24561
24778
  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
24562
24779
  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -24581,14 +24798,27 @@ label.pf-c-radio, .pf-c-radio__label,
24581
24798
  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
24582
24799
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
24583
24800
  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
24801
+ --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
24802
+ --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
24584
24803
  position: relative;
24585
24804
  display: flex;
24805
+ color: var(--pf-c-text-input-group--Color, inherit);
24806
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
24586
24807
  }
24587
24808
 
24588
24809
  .pf-c-text-input-group:hover {
24589
24810
  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
24590
24811
  }
24591
24812
 
24813
+ .pf-c-text-input-group.pf-m-disabled {
24814
+ --pf-c-text-input-group__text--before--BorderWidth: 0;
24815
+ --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
24816
+ --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
24817
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
24818
+ --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
24819
+ pointer-events: none;
24820
+ }
24821
+
24592
24822
  .pf-c-text-input-group__main {
24593
24823
  display: flex;
24594
24824
  flex: 1;
@@ -24696,216 +24926,6 @@ label.pf-c-radio, .pf-c-radio__label,
24696
24926
  --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
24697
24927
  }
24698
24928
 
24699
- .pf-c-modal-box {
24700
- --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
24701
- --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
24702
- --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
24703
- --pf-c-modal-box--Width: 100%;
24704
- --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl));
24705
- --pf-c-modal-box--m-sm--sm--MaxWidth: 35rem;
24706
- --pf-c-modal-box--m-md--Width: 52.5rem;
24707
- --pf-c-modal-box--m-lg--lg--MaxWidth: 70rem;
24708
- --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl));
24709
- --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
24710
- --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
24711
- --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer);
24712
- --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));
24713
- --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)));
24714
- --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
24715
- --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
24716
- --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
24717
- --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
24718
- --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
24719
- --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
24720
- --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
24721
- --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
24722
- --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);
24723
- --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
24724
- --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
24725
- --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);
24726
- --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
24727
- --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);
24728
- --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);
24729
- --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md));
24730
- --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
24731
- --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
24732
- --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
24733
- --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
24734
- --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
24735
- --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
24736
- --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
24737
- --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
24738
- --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
24739
- --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
24740
- --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
24741
- --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);
24742
- --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md);
24743
- --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);
24744
- position: relative;
24745
- z-index: var(--pf-c-modal-box--ZIndex);
24746
- display: flex;
24747
- flex-direction: column;
24748
- width: var(--pf-c-modal-box--Width);
24749
- max-width: var(--pf-c-modal-box--MaxWidth);
24750
- max-height: var(--pf-c-modal-box--MaxHeight);
24751
- background-color: var(--pf-c-modal-box--BackgroundColor);
24752
- box-shadow: var(--pf-c-modal-box--BoxShadow);
24753
- }
24754
-
24755
- @media (min-width: 1200px) {
24756
- .pf-c-modal-box {
24757
- --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
24758
- }
24759
- }
24760
- .pf-c-modal-box.pf-m-sm {
24761
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
24762
- }
24763
-
24764
- .pf-c-modal-box.pf-m-md {
24765
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
24766
- }
24767
-
24768
- .pf-c-modal-box.pf-m-lg {
24769
- --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
24770
- }
24771
-
24772
- .pf-c-modal-box.pf-m-align-top {
24773
- top: var(--pf-c-modal-box--m-align-top--MarginTop);
24774
- align-self: flex-start;
24775
- max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
24776
- max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
24777
- }
24778
-
24779
- .pf-c-modal-box.pf-m-danger {
24780
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
24781
- }
24782
-
24783
- .pf-c-modal-box.pf-m-warning {
24784
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
24785
- }
24786
-
24787
- .pf-c-modal-box.pf-m-success {
24788
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
24789
- }
24790
-
24791
- .pf-c-modal-box.pf-m-default {
24792
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
24793
- }
24794
-
24795
- .pf-c-modal-box.pf-m-info {
24796
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
24797
- }
24798
-
24799
- .pf-c-modal-box > .pf-c-button {
24800
- position: absolute;
24801
- top: var(--pf-c-modal-box--c-button--Top);
24802
- right: var(--pf-c-modal-box--c-button--Right);
24803
- }
24804
-
24805
- .pf-c-modal-box > .pf-c-button + * {
24806
- margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
24807
- }
24808
-
24809
- .pf-c-modal-box__header {
24810
- display: flex;
24811
- flex-direction: column;
24812
- flex-shrink: 0;
24813
- padding-top: var(--pf-c-modal-box__header--PaddingTop);
24814
- padding-right: var(--pf-c-modal-box__header--PaddingRight);
24815
- padding-left: var(--pf-c-modal-box__header--PaddingLeft);
24816
- }
24817
-
24818
- .pf-c-modal-box__header.pf-m-help {
24819
- display: flex;
24820
- flex-direction: row;
24821
- }
24822
-
24823
- .pf-c-modal-box__header:last-child {
24824
- padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
24825
- }
24826
-
24827
- .pf-c-modal-box__header + .pf-c-modal-box__body {
24828
- --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
24829
- }
24830
-
24831
- .pf-c-modal-box__header-main {
24832
- flex-grow: 1;
24833
- min-width: 0;
24834
- }
24835
-
24836
- .pf-c-modal-box__title,
24837
- .pf-c-modal-box__title-text {
24838
- overflow: hidden;
24839
- text-overflow: ellipsis;
24840
- white-space: nowrap;
24841
- }
24842
-
24843
- .pf-c-modal-box__title {
24844
- flex: 0 0 auto;
24845
- font-family: var(--pf-c-modal-box__title--FontFamily);
24846
- font-size: var(--pf-c-modal-box__title--FontSize);
24847
- line-height: var(--pf-c-modal-box__title--LineHeight);
24848
- }
24849
-
24850
- .pf-c-modal-box__title.pf-m-icon {
24851
- display: flex;
24852
- }
24853
-
24854
- .pf-c-modal-box__title-icon {
24855
- margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
24856
- color: var(--pf-c-modal-box__title-icon--Color);
24857
- }
24858
-
24859
- .pf-c-modal-box__description {
24860
- padding-top: var(--pf-c-modal-box__description--PaddingTop);
24861
- }
24862
-
24863
- .pf-c-modal-box__body {
24864
- flex: 1 1 auto;
24865
- min-height: var(--pf-c-modal-box__body--MinHeight);
24866
- padding-top: var(--pf-c-modal-box__body--PaddingTop);
24867
- padding-right: var(--pf-c-modal-box__body--PaddingRight);
24868
- padding-left: var(--pf-c-modal-box__body--PaddingLeft);
24869
- overflow-x: hidden;
24870
- overflow-y: auto;
24871
- overscroll-behavior: contain;
24872
- word-break: break-word;
24873
- -webkit-overflow-scrolling: touch;
24874
- }
24875
-
24876
- .pf-c-modal-box__body:last-child {
24877
- padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
24878
- }
24879
-
24880
- .pf-c-modal-box__footer {
24881
- display: flex;
24882
- flex: 0 0 auto;
24883
- align-items: center;
24884
- padding-top: var(--pf-c-modal-box__footer--PaddingTop);
24885
- padding-right: var(--pf-c-modal-box__footer--PaddingRight);
24886
- padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
24887
- padding-left: var(--pf-c-modal-box__footer--PaddingLeft);
24888
- }
24889
-
24890
- .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
24891
- margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);
24892
- }
24893
-
24894
- @media screen and (min-width: 576px) {
24895
- .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
24896
- --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
24897
- }
24898
- }
24899
- .pf-l-bullseye {
24900
- --pf-l-bullseye--Padding: 0;
24901
- display: flex;
24902
- align-items: center;
24903
- justify-content: center;
24904
- height: 100%;
24905
- padding: var(--pf-l-bullseye--Padding);
24906
- margin: 0;
24907
- }
24908
-
24909
24929
  .pf-l-flex {
24910
24930
  --pf-l-flex--Display: flex;
24911
24931
  --pf-l-flex--FlexWrap: wrap;