@patternfly/react-table 4.33.1 → 4.37.4

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.
@@ -200,17 +200,19 @@
200
200
  --pf-c-table--tbody--cell--PaddingTop: var(--pf-global--spacer--lg);
201
201
  --pf-c-table--tbody--cell--PaddingBottom: var(--pf-global--spacer--lg);
202
202
  --pf-c-table--tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
203
+ --pf-c-table--cell--Padding--base: var(--pf-global--spacer--md);
203
204
  --pf-c-table--cell--FontSize: var(--pf-global--FontSize--md);
204
205
  --pf-c-table--cell--FontWeight: var(--pf-global--FontWeight--normal);
205
206
  --pf-c-table--cell--Color: var(--pf-global--Color--100);
206
- --pf-c-table--cell--PaddingTop: var(--pf-global--spacer--md);
207
- --pf-c-table--cell--PaddingRight: var(--pf-global--spacer--md);
208
- --pf-c-table--cell--PaddingBottom: var(--pf-global--spacer--md);
209
- --pf-c-table--cell--PaddingLeft: var(--pf-global--spacer--md);
207
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--cell--Padding--base);
208
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--cell--Padding--base);
209
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--cell--Padding--base);
210
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);
210
211
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md);
211
212
  --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md);
212
213
  --pf-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg);
213
214
  --pf-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg);
215
+ --pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--pf-c-table--cell--Padding--base);
214
216
  --pf-c-table--cell--MinWidth: 0;
215
217
  --pf-c-table--cell--MaxWidth: none;
216
218
  --pf-c-table--cell--Width: auto;
@@ -218,6 +220,10 @@
218
220
  --pf-c-table--cell--TextOverflow: clip;
219
221
  --pf-c-table--cell--WhiteSpace: normal;
220
222
  --pf-c-table--cell--WordBreak: normal;
223
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
224
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
225
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
226
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
221
227
  --pf-c-table--cell--m-help--MinWidth: 11ch;
222
228
  --pf-c-table--m-truncate--cell--MaxWidth: 1px;
223
229
  --pf-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft));
@@ -376,6 +382,10 @@
376
382
  --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
377
383
  --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
378
384
  --pf-c-table--tbody--m-selected--tbody--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
385
+ --pf-c-table--thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
386
+ --pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs);
387
+ --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
388
+ --pf-c-table__subhead--Color: var(--pf-global--Color--200);
379
389
  color: var(--pf-global--Color--100);
380
390
  width: 100%;
381
391
  background-color: var(--pf-c-table--BackgroundColor);
@@ -477,6 +487,24 @@
477
487
  --pf-c-table--cell--Overflow: visible;
478
488
  }
479
489
 
490
+ .pf-c-table tr > *.pf-m-border-right::before, .pf-c-table tr > *.pf-m-border-left::before {
491
+ position: absolute;
492
+ top: 0;
493
+ right: 0;
494
+ bottom: 0;
495
+ left: 0;
496
+ pointer-events: none;
497
+ content: "";
498
+ }
499
+
500
+ .pf-c-table tr > *.pf-m-border-right::before {
501
+ border-right: var(--pf-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-c-table--cell--m-border-right--before--BorderRightColor);
502
+ }
503
+
504
+ .pf-c-table tr > *.pf-m-border-left::before {
505
+ border-left: var(--pf-c-table--cell--m-border-right--before--BorderLeftWidth) solid var(--pf-c-table--cell--m-border-left--before--BorderLeftColor);
506
+ }
507
+
480
508
  .pf-c-table caption {
481
509
  padding-top: var(--pf-c-table-caption--PaddingTop);
482
510
  padding-bottom: var(--pf-c-table-caption--PaddingBottom);
@@ -493,6 +521,34 @@
493
521
  vertical-align: bottom;
494
522
  }
495
523
 
524
+ .pf-c-table thead.pf-m-nested-column-header button {
525
+ outline-offset: var(--pf-c-table--thead--m-nested-column-header--button--OutlineOffset);
526
+ }
527
+
528
+ .pf-c-table thead.pf-m-nested-column-header th,
529
+ .pf-c-table thead.pf-m-nested-column-header td {
530
+ vertical-align: middle;
531
+ }
532
+
533
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
534
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
535
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
536
+ }
537
+
538
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
539
+ --pf-c-table--border-width--base: 0;
540
+ }
541
+
542
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
543
+ .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
544
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
545
+ }
546
+
547
+ .pf-c-table thead .pf-c-table__subhead {
548
+ --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
549
+ color: var(--pf-c-table__subhead--Color);
550
+ }
551
+
496
552
  .pf-c-table tbody {
497
553
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--tbody--cell--PaddingTop);
498
554
  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--tbody--cell--PaddingBottom);
@@ -637,6 +693,10 @@
637
693
  box-shadow: var(--pf-c-table--tr--m-selected--hover--m-selected--BoxShadow);
638
694
  }
639
695
 
696
+ .pf-c-table tr.pf-m-first-cell-offset-reset {
697
+ --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
698
+ }
699
+
640
700
  .pf-c-table tbody.pf-m-hoverable {
641
701
  cursor: pointer;
642
702
  background-color: var(--pf-c-table--tbody--m-hoverable--BackgroundColor);
@@ -5109,14 +5169,14 @@ label.pf-c-check, .pf-c-check__label,
5109
5169
  --pf-c-tooltip--MaxWidth: 18.75rem;
5110
5170
  --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
5111
5171
  --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
5112
- --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
5172
+ --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
5113
5173
  --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
5114
- --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
5174
+ --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
5115
5175
  --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
5116
5176
  --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
5117
5177
  --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
5118
- --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
5119
- --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
5178
+ --pf-c-tooltip__arrow--Width: 0.5rem;
5179
+ --pf-c-tooltip__arrow--Height: 0.5rem;
5120
5180
  --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
5121
5181
  --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
5122
5182
  --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -5332,7 +5392,7 @@ label.pf-c-check, .pf-c-check__label,
5332
5392
  }
5333
5393
 
5334
5394
  .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
5335
- border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--before--BorderBottomWidth);
5395
+ border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
5336
5396
  }
5337
5397
 
5338
5398
  .pf-c-dropdown__toggle {
@@ -8714,6 +8774,7 @@ button.pf-c-breadcrumb__link {
8714
8774
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
8715
8775
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
8716
8776
  --pf-c-context-selector__toggle--Color: var(--pf-global--Color--100);
8777
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector__toggle--BorderWidth);
8717
8778
  --pf-c-context-selector__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
8718
8779
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
8719
8780
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
@@ -8766,12 +8827,57 @@ button.pf-c-breadcrumb__link {
8766
8827
  --pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8767
8828
  --pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8768
8829
  --pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8830
+ --pf-c-context-selector--m-large__toggle--PaddingTop: var(--pf-global--spacer--md);
8831
+ --pf-c-context-selector--m-large__toggle--PaddingBottom: var(--pf-global--spacer--md);
8832
+ --pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8833
+ --pf-c-context-selector--m-large__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8834
+ --pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
8835
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-global--spacer--md);
8836
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-global--spacer--md);
8837
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight: var(--pf-global--spacer--lg);
8838
+ --pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft: var(--pf-global--spacer--lg);
8839
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-global--spacer--md);
8840
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-global--spacer--md);
8841
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight: var(--pf-global--spacer--lg);
8842
+ --pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft: var(--pf-global--spacer--lg);
8843
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-global--spacer--md);
8844
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-global--spacer--md);
8845
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight: var(--pf-global--spacer--lg);
8846
+ --pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft: var(--pf-global--spacer--lg);
8847
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-global--spacer--md);
8848
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-global--spacer--md);
8849
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight: var(--pf-global--spacer--lg);
8850
+ --pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft: var(--pf-global--spacer--lg);
8851
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
8852
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
8853
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight: var(--pf-global--spacer--lg);
8854
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft: var(--pf-global--spacer--lg);
8855
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-global--spacer--md);
8856
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-global--spacer--md);
8857
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--pf-global--spacer--lg);
8858
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--pf-global--spacer--lg);
8769
8859
  position: relative;
8770
8860
  display: inline-block;
8771
8861
  width: var(--pf-c-context-selector--Width);
8772
8862
  max-width: 100%;
8773
8863
  }
8774
8864
 
8865
+ @media screen and (min-width: 1200px) {
8866
+ .pf-c-context-selector {
8867
+ --pf-c-context-selector--m-page-insets__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight);
8868
+ --pf-c-context-selector--m-page-insets__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft);
8869
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight);
8870
+ --pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft);
8871
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight);
8872
+ --pf-c-context-selector--m-page-insets__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft);
8873
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight);
8874
+ --pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft);
8875
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight);
8876
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft);
8877
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight);
8878
+ --pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft);
8879
+ }
8880
+ }
8775
8881
  .pf-c-context-selector.pf-m-full-height {
8776
8882
  --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth);
8777
8883
  --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth);
@@ -8794,6 +8900,29 @@ button.pf-c-breadcrumb__link {
8794
8900
  border-bottom-width: var(--pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth);
8795
8901
  }
8796
8902
 
8903
+ .pf-c-context-selector.pf-m-large {
8904
+ --pf-c-context-selector__toggle--PaddingTop: var(--pf-c-context-selector--m-large__toggle--PaddingTop);
8905
+ --pf-c-context-selector__toggle--PaddingBottom: var(--pf-c-context-selector--m-large__toggle--PaddingBottom);
8906
+ --pf-c-context-selector__toggle--hover--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth);
8907
+ --pf-c-context-selector__toggle--active--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth);
8908
+ --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth);
8909
+ }
8910
+
8911
+ .pf-c-context-selector.pf-m-page-insets {
8912
+ --pf-c-context-selector__toggle--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--PaddingRight);
8913
+ --pf-c-context-selector__toggle--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--PaddingLeft);
8914
+ --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight);
8915
+ --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft);
8916
+ --pf-c-context-selector__menu-search--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingRight);
8917
+ --pf-c-context-selector__menu-search--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft);
8918
+ --pf-c-context-selector__menu-footer--PaddingRight: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight);
8919
+ --pf-c-context-selector__menu-footer--PaddingLeft: var(--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft);
8920
+ --pf-c-context-selector__toggle--m-plain--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight);
8921
+ --pf-c-context-selector__toggle--m-plain--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft);
8922
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingRight: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight);
8923
+ --pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft: var(--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft);
8924
+ }
8925
+
8797
8926
  .pf-c-context-selector__toggle {
8798
8927
  position: relative;
8799
8928
  display: flex;
@@ -8820,6 +8949,7 @@ button.pf-c-breadcrumb__link {
8820
8949
 
8821
8950
  .pf-c-context-selector__toggle:hover::before {
8822
8951
  --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-context-selector__toggle--hover--BorderBottomColor);
8952
+ border-bottom-width: var(--pf-c-context-selector__toggle--hover--BorderBottomWidth);
8823
8953
  }
8824
8954
 
8825
8955
  .pf-c-context-selector__toggle:active::before, .pf-c-context-selector__toggle.pf-m-active::before, .pf-c-context-selector__toggle:focus-within::before {
@@ -8923,6 +9053,86 @@ button.pf-c-breadcrumb__link {
8923
9053
  pointer-events: none;
8924
9054
  }
8925
9055
 
9056
+ .pf-c-data-list {
9057
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9058
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9059
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9060
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9061
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9062
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9063
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9064
+ }
9065
+
9066
+ .pf-c-data-list__item-action {
9067
+ --pf-hidden-visible--visible--Visibility: visible;
9068
+ --pf-hidden-visible--hidden--Display: none;
9069
+ --pf-hidden-visible--hidden--Visibility: hidden;
9070
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9071
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9072
+ display: var(--pf-hidden-visible--Display);
9073
+ visibility: var(--pf-hidden-visible--Visibility);
9074
+ }
9075
+
9076
+ .pf-m-hidden.pf-c-data-list__item-action {
9077
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9078
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9079
+ }
9080
+
9081
+ @media screen and (min-width: 576px) {
9082
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
9083
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9084
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9085
+ }
9086
+
9087
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
9088
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9089
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9090
+ }
9091
+ }
9092
+ @media screen and (min-width: 768px) {
9093
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
9094
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9095
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9096
+ }
9097
+
9098
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
9099
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9100
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9101
+ }
9102
+ }
9103
+ @media screen and (min-width: 992px) {
9104
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
9105
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9106
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9107
+ }
9108
+
9109
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
9110
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9111
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9112
+ }
9113
+ }
9114
+ @media screen and (min-width: 1200px) {
9115
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
9116
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9117
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9118
+ }
9119
+
9120
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
9121
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9122
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9123
+ }
9124
+ }
9125
+ @media screen and (min-width: 1450px) {
9126
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
9127
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9128
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9129
+ }
9130
+
9131
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
9132
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9133
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9134
+ }
9135
+ }
8926
9136
  @media screen and (min-width: 768px) {
8927
9137
  .pf-c-data-list:not([class*=pf-m-grid]) {
8928
9138
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -9400,359 +9610,442 @@ button.pf-c-breadcrumb__link {
9400
9610
  }
9401
9611
  }
9402
9612
  .pf-c-data-list {
9403
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9404
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9405
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9406
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9407
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9408
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9409
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9410
- }
9411
-
9412
- .pf-c-data-list__item-action {
9413
- --pf-hidden-visible--visible--Visibility: visible;
9414
- --pf-hidden-visible--hidden--Display: none;
9415
- --pf-hidden-visible--hidden--Visibility: hidden;
9416
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9417
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9418
- display: var(--pf-hidden-visible--Display);
9419
- visibility: var(--pf-hidden-visible--Visibility);
9420
- }
9421
-
9422
- .pf-m-hidden.pf-c-data-list__item-action {
9423
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9424
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9613
+ --pf-c-data-list--FontSize: 1em;
9614
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
9615
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
9616
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
9617
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9618
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
9619
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
9620
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
9621
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
9622
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
9623
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9624
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
9625
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
9626
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9627
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9628
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9629
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
9630
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
9631
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
9632
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
9633
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
9634
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
9635
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
9636
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
9637
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
9638
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
9639
+ --pf-c-data-list__item--before--Top: 0;
9640
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
9641
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
9642
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
9643
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
9644
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
9645
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
9646
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
9647
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
9648
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
9649
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
9650
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
9651
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
9652
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
9653
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
9654
+ --pf-c-data-list--cell--MinWidth: initial;
9655
+ --pf-c-data-list--cell--Overflow: visible;
9656
+ --pf-c-data-list--cell--TextOverflow: clip;
9657
+ --pf-c-data-list--cell--WhiteSpace: normal;
9658
+ --pf-c-data-list--cell--WordBreak: normal;
9659
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
9660
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
9661
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9662
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
9663
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
9664
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
9665
+ --pf-c-data-list__toggle-icon--Rotate: 0;
9666
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
9667
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
9668
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
9669
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
9670
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
9671
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
9672
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
9673
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
9674
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
9675
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
9676
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
9677
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
9678
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
9679
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
9680
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
9681
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
9682
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
9683
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
9684
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
9685
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
9686
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
9687
+ --pf-c-data-list__item-action--Display: flex;
9688
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
9689
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
9690
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
9691
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
9692
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
9693
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
9694
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
9695
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
9696
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9697
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
9698
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
9699
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
9700
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
9701
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
9702
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
9703
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
9704
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
9705
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
9706
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
9707
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
9708
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
9709
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
9710
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
9711
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
9712
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
9713
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
9714
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
9715
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
9716
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
9717
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
9718
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
9719
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
9720
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
9721
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
9722
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
9723
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
9724
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
9725
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
9726
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
9727
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
9728
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
9729
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
9730
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
9731
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
9732
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
9733
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
9734
+ color: var(--pf-global--Color--100);
9735
+ font-size: var(--pf-c-data-list--FontSize);
9736
+ line-height: var(--pf-c-data-list--LineHeight);
9737
+ overflow-wrap: break-word;
9738
+ list-style-type: disc;
9739
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
9425
9740
  }
9426
9741
 
9427
9742
  @media screen and (min-width: 576px) {
9428
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
9429
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9430
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9431
- }
9432
-
9433
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
9434
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9435
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9743
+ .pf-c-data-list {
9744
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
9745
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
9436
9746
  }
9437
9747
  }
9438
- @media screen and (min-width: 768px) {
9439
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
9440
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9441
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9442
- }
9443
-
9444
- .pf-m-visible-on-md.pf-c-data-list__item-action {
9445
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9446
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9748
+ @media screen and (min-width: 576px) {
9749
+ .pf-c-data-list {
9750
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
9751
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
9447
9752
  }
9448
9753
  }
9449
- @media screen and (min-width: 992px) {
9450
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
9451
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9452
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9453
- }
9454
-
9455
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
9456
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9457
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9754
+ @media (min-width: 576px) {
9755
+ .pf-c-data-list {
9756
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
9458
9757
  }
9459
9758
  }
9460
- @media screen and (min-width: 1200px) {
9461
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
9462
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9463
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9464
- }
9759
+ .pf-c-data-list.pf-m-compact {
9760
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
9761
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
9762
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
9763
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
9764
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
9765
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
9766
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
9767
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
9768
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
9769
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
9770
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
9771
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
9772
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
9773
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
9774
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
9775
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
9776
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
9777
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
9778
+ }
9465
9779
 
9466
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
9467
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9468
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9469
- }
9780
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
9781
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
9782
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
9783
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
9784
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
9470
9785
  }
9471
- @media screen and (min-width: 1450px) {
9472
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
9473
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9474
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9475
- }
9476
9786
 
9477
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
9478
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9479
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9480
- }
9787
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
9788
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
9481
9789
  }
9482
- @media screen and (min-width: 768px) {
9483
- .pf-c-data-list:not([class*=pf-m-grid]) {
9484
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
9485
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
9486
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
9487
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
9488
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
9489
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
9490
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
9491
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
9492
- }
9790
+
9791
+ .pf-c-data-list.pf-m-drag-over {
9792
+ overflow-anchor: none;
9493
9793
  }
9494
- @media screen and (min-width: 768px) and (min-width: 1200px) {
9495
- .pf-c-data-list:not([class*=pf-m-grid]) {
9496
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
9497
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
9498
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
9499
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
9500
- }
9794
+
9795
+ .pf-c-data-list.pf-m-truncate,
9796
+ .pf-c-data-list__item-row.pf-m-truncate,
9797
+ .pf-c-data-list__cell.pf-m-truncate,
9798
+ .pf-c-data-list__text.pf-m-truncate {
9799
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
9800
+ --pf-c-data-list--cell--Overflow: hidden;
9801
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
9802
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
9501
9803
  }
9502
- @media screen and (min-width: 768px) {
9503
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
9504
- display: flex;
9505
- flex-wrap: wrap;
9506
- flex-grow: 1;
9507
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9508
- }
9804
+
9805
+ .pf-c-data-list.pf-m-break-word,
9806
+ .pf-c-data-list__item-row.pf-m-break-word,
9807
+ .pf-c-data-list__cell.pf-m-break-word,
9808
+ .pf-c-data-list__text.pf-m-break-word {
9809
+ --pf-c-data-list--cell--WordBreak: break-word;
9509
9810
  }
9510
- @media screen and (min-width: 768px) {
9511
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9512
- margin-right: var(--pf-c-data-list__cell--MarginRight);
9513
- }
9514
9811
 
9515
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
9516
- flex: 1;
9517
- order: initial;
9518
- }
9812
+ .pf-c-data-list.pf-m-nowrap,
9813
+ .pf-c-data-list__item-row.pf-m-nowrap,
9814
+ .pf-c-data-list__cell.pf-m-nowrap,
9815
+ .pf-c-data-list__text.pf-m-nowrap {
9816
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
9817
+ }
9519
9818
 
9520
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
9521
- margin-left: auto;
9522
- }
9819
+ .pf-c-data-list__item {
9820
+ position: relative;
9821
+ display: flex;
9822
+ flex-direction: column;
9823
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
9824
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
9825
+ }
9523
9826
 
9524
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
9525
- flex: none;
9526
- }
9827
+ .pf-c-data-list__item::before {
9828
+ position: absolute;
9829
+ top: var(--pf-c-data-list__item--before--Top);
9830
+ bottom: 0;
9831
+ left: 0;
9832
+ width: var(--pf-c-data-list__item--before--Width);
9833
+ content: "";
9834
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
9835
+ transition: var(--pf-c-data-list__item--before--Transition);
9836
+ }
9527
9837
 
9528
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
9529
- flex-grow: 2;
9530
- }
9838
+ .pf-c-data-list__item.pf-m-selectable {
9839
+ cursor: pointer;
9840
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
9841
+ }
9531
9842
 
9532
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
9533
- flex-grow: 3;
9534
- }
9843
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
9844
+ position: relative;
9845
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
9846
+ }
9535
9847
 
9536
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
9537
- flex-grow: 4;
9538
- }
9848
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
9849
+ --pf-c-data-list__item--BorderBottomWidth: 0;
9850
+ }
9539
9851
 
9540
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
9541
- flex-grow: 5;
9542
- }
9852
+ .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
9853
+ border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
9543
9854
  }
9544
- @media screen and (min-width: 768px) {
9545
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
9546
- max-height: initial;
9547
- overflow-y: visible;
9548
- }
9855
+
9856
+ .pf-c-data-list__item.pf-m-selectable:hover {
9857
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
9549
9858
  }
9550
- @media screen and (min-width: 0) {
9551
- .pf-c-data-list.pf-m-grid-none {
9552
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
9553
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
9554
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
9555
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
9556
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
9557
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
9558
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
9559
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
9560
- }
9859
+
9860
+ .pf-c-data-list__item.pf-m-selectable:focus {
9861
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
9561
9862
  }
9562
- @media screen and (min-width: 0) and (min-width: 1200px) {
9563
- .pf-c-data-list.pf-m-grid-none {
9564
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
9565
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
9566
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
9567
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
9568
- }
9863
+
9864
+ .pf-c-data-list__item.pf-m-selectable:active {
9865
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
9569
9866
  }
9570
- @media screen and (min-width: 0) {
9571
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
9572
- display: flex;
9573
- flex-wrap: wrap;
9574
- flex-grow: 1;
9575
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9576
- }
9867
+
9868
+ .pf-c-data-list__item.pf-m-selected {
9869
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
9870
+ position: relative;
9871
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
9872
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
9577
9873
  }
9578
- @media screen and (min-width: 0) {
9579
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9580
- margin-right: var(--pf-c-data-list__cell--MarginRight);
9581
- }
9582
9874
 
9583
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
9584
- flex: 1;
9585
- order: initial;
9586
- }
9875
+ .pf-c-data-list__item.pf-m-ghost-row::after {
9876
+ position: absolute;
9877
+ top: 0;
9878
+ right: 0;
9879
+ bottom: 0;
9880
+ left: 0;
9881
+ content: "";
9882
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
9883
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
9884
+ }
9587
9885
 
9588
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
9589
- margin-left: auto;
9590
- }
9886
+ .pf-c-data-list__item.pf-m-expanded {
9887
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
9888
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
9889
+ }
9591
9890
 
9592
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
9593
- flex: none;
9594
- }
9891
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
9892
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
9893
+ }
9595
9894
 
9596
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
9597
- flex-grow: 2;
9598
- }
9895
+ .pf-c-data-list__item-row {
9896
+ display: flex;
9897
+ flex-wrap: nowrap;
9898
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
9899
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
9900
+ }
9599
9901
 
9600
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
9601
- flex-grow: 3;
9602
- }
9902
+ .pf-c-data-list__item-control {
9903
+ display: flex;
9904
+ flex-wrap: nowrap;
9905
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
9906
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
9907
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
9908
+ }
9603
9909
 
9604
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
9605
- flex-grow: 4;
9606
- }
9910
+ .pf-c-data-list__item-control > *:not(:last-child) {
9911
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
9912
+ }
9607
9913
 
9608
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
9609
- flex-grow: 5;
9610
- }
9914
+ .pf-c-data-list__check {
9915
+ display: flex;
9916
+ align-items: center;
9917
+ align-self: flex-start;
9918
+ height: var(--pf-c-data-list__check--Height);
9919
+ margin-top: var(--pf-c-data-list__check--MarginTop);
9611
9920
  }
9612
- @media screen and (min-width: 0) {
9613
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
9614
- max-height: initial;
9615
- overflow-y: visible;
9616
- }
9921
+
9922
+ .pf-c-data-list__check > input {
9923
+ cursor: pointer;
9617
9924
  }
9618
- @media screen and (min-width: 576px) {
9619
- .pf-c-data-list.pf-m-grid-sm {
9620
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
9621
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
9622
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
9623
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
9624
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
9625
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
9626
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
9627
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
9628
- }
9925
+
9926
+ .pf-c-data-list__item-draggable-button {
9927
+ display: flex;
9928
+ flex-direction: column;
9929
+ padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
9930
+ margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
9931
+ border: 0;
9629
9932
  }
9630
- @media screen and (min-width: 576px) and (min-width: 1200px) {
9631
- .pf-c-data-list.pf-m-grid-sm {
9632
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
9633
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
9634
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
9635
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
9636
- }
9933
+
9934
+ .pf-c-data-list__item-draggable-button:hover {
9935
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
9936
+ cursor: grab;
9637
9937
  }
9638
- @media screen and (min-width: 576px) {
9639
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
9640
- display: flex;
9641
- flex-wrap: wrap;
9642
- flex-grow: 1;
9643
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9644
- }
9938
+
9939
+ .pf-c-data-list__item-draggable-button:focus {
9940
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
9645
9941
  }
9646
- @media screen and (min-width: 576px) {
9647
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9648
- margin-right: var(--pf-c-data-list__cell--MarginRight);
9649
- }
9650
9942
 
9651
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
9652
- flex: 1;
9653
- order: initial;
9654
- }
9943
+ .pf-c-data-list__item-draggable-button:active {
9944
+ cursor: grabbing;
9945
+ }
9655
9946
 
9656
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
9657
- margin-left: auto;
9658
- }
9947
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
9948
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
9949
+ pointer-events: none;
9950
+ }
9659
9951
 
9660
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
9661
- flex: none;
9662
- }
9952
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
9953
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
9954
+ }
9663
9955
 
9664
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
9665
- flex-grow: 2;
9666
- }
9956
+ .pf-c-data-list__item-action {
9957
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
9958
+ align-items: flex-start;
9959
+ align-content: flex-start;
9960
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
9961
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
9962
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
9963
+ }
9667
9964
 
9668
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
9669
- flex-grow: 3;
9670
- }
9965
+ .pf-c-data-list__item-action > *:not(:last-child) {
9966
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
9967
+ }
9671
9968
 
9672
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
9673
- flex-grow: 4;
9674
- }
9969
+ .pf-c-data-list__item-action .pf-c-data-list__action {
9970
+ margin-top: var(--pf-c-data-list__action--MarginTop);
9971
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
9972
+ }
9675
9973
 
9676
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
9677
- flex-grow: 5;
9678
- }
9974
+ .pf-c-data-list__toggle {
9975
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
9679
9976
  }
9680
- @media screen and (min-width: 576px) {
9681
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
9682
- max-height: initial;
9683
- overflow-y: visible;
9684
- }
9977
+
9978
+ .pf-c-data-list__toggle-icon {
9979
+ height: var(--pf-c-data-list__toggle-icon--Height);
9980
+ pointer-events: none;
9981
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
9982
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
9685
9983
  }
9686
- @media screen and (min-width: 768px) {
9687
- .pf-c-data-list.pf-m-grid-md {
9688
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
9689
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
9690
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
9691
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
9692
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
9693
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
9694
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
9695
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
9696
- }
9984
+
9985
+ .pf-c-data-list__item-content {
9986
+ display: grid;
9987
+ width: 100%;
9988
+ grid-template-columns: auto 1fr;
9697
9989
  }
9698
- @media screen and (min-width: 768px) and (min-width: 1200px) {
9699
- .pf-c-data-list.pf-m-grid-md {
9700
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
9701
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
9702
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
9703
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
9704
- }
9990
+
9991
+ .pf-c-data-list__cell {
9992
+ flex: 1;
9993
+ grid-column: 1/-1;
9994
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
9995
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
9705
9996
  }
9706
- @media screen and (min-width: 768px) {
9707
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
9708
- display: flex;
9709
- flex-wrap: wrap;
9710
- flex-grow: 1;
9711
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9712
- }
9997
+
9998
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
9999
+ flex: 1 0 100%;
10000
+ order: 1;
10001
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
9713
10002
  }
9714
- @media screen and (min-width: 768px) {
9715
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9716
- margin-right: var(--pf-c-data-list__cell--MarginRight);
9717
- }
9718
10003
 
9719
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
9720
- flex: 1;
9721
- order: initial;
9722
- }
10004
+ .pf-c-data-list__cell.pf-m-icon {
10005
+ flex-grow: 0;
10006
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10007
+ grid-column: 1/2;
10008
+ }
9723
10009
 
9724
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
9725
- margin-left: auto;
9726
- }
10010
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
10011
+ grid-column: 2/3;
10012
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
10013
+ }
9727
10014
 
9728
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
9729
- flex: none;
9730
- }
10015
+ .pf-c-data-list__cell.pf-m-align-right {
10016
+ margin-left: 0;
10017
+ }
9731
10018
 
9732
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
9733
- flex-grow: 2;
9734
- }
10019
+ .pf-c-data-list__text {
10020
+ display: inline-block;
10021
+ }
9735
10022
 
9736
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
9737
- flex-grow: 3;
9738
- }
10023
+ .pf-c-data-list__text,
10024
+ .pf-c-data-list__cell {
10025
+ min-width: var(--pf-c-data-list--cell--MinWidth);
10026
+ max-width: 100%;
10027
+ overflow: var(--pf-c-data-list--cell--Overflow);
10028
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
10029
+ word-break: var(--pf-c-data-list--cell--WordBreak);
10030
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
10031
+ }
9739
10032
 
9740
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
9741
- flex-grow: 4;
9742
- }
10033
+ .pf-c-data-list__expandable-content {
10034
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
10035
+ overflow-y: auto;
10036
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
10037
+ }
9743
10038
 
9744
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
9745
- flex-grow: 5;
9746
- }
10039
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
10040
+ padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
9747
10041
  }
9748
- @media screen and (min-width: 768px) {
9749
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
9750
- max-height: initial;
9751
- overflow-y: visible;
9752
- }
10042
+
10043
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10044
+ padding: 0;
9753
10045
  }
9754
- @media screen and (min-width: 992px) {
9755
- .pf-c-data-list.pf-m-grid-lg {
10046
+
10047
+ @media screen and (min-width: 768px) {
10048
+ .pf-c-data-list:not([class*=pf-m-grid]) {
9756
10049
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
9757
10050
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
9758
10051
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -9763,64 +10056,64 @@ button.pf-c-breadcrumb__link {
9763
10056
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
9764
10057
  }
9765
10058
  }
9766
- @media screen and (min-width: 992px) and (min-width: 1200px) {
9767
- .pf-c-data-list.pf-m-grid-lg {
10059
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
10060
+ .pf-c-data-list:not([class*=pf-m-grid]) {
9768
10061
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
9769
10062
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
9770
10063
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
9771
10064
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
9772
10065
  }
9773
10066
  }
9774
- @media screen and (min-width: 992px) {
9775
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10067
+ @media screen and (min-width: 768px) {
10068
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
9776
10069
  display: flex;
9777
10070
  flex-wrap: wrap;
9778
10071
  flex-grow: 1;
9779
10072
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9780
10073
  }
9781
10074
  }
9782
- @media screen and (min-width: 992px) {
9783
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10075
+ @media screen and (min-width: 768px) {
10076
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9784
10077
  margin-right: var(--pf-c-data-list__cell--MarginRight);
9785
10078
  }
9786
10079
 
9787
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10080
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
9788
10081
  flex: 1;
9789
10082
  order: initial;
9790
10083
  }
9791
10084
 
9792
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10085
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
9793
10086
  margin-left: auto;
9794
10087
  }
9795
10088
 
9796
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10089
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
9797
10090
  flex: none;
9798
10091
  }
9799
10092
 
9800
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10093
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
9801
10094
  flex-grow: 2;
9802
10095
  }
9803
10096
 
9804
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10097
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
9805
10098
  flex-grow: 3;
9806
10099
  }
9807
10100
 
9808
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10101
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
9809
10102
  flex-grow: 4;
9810
10103
  }
9811
10104
 
9812
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10105
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
9813
10106
  flex-grow: 5;
9814
10107
  }
9815
10108
  }
9816
- @media screen and (min-width: 992px) {
9817
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10109
+ @media screen and (min-width: 768px) {
10110
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
9818
10111
  max-height: initial;
9819
10112
  overflow-y: visible;
9820
10113
  }
9821
10114
  }
9822
- @media screen and (min-width: 1200px) {
9823
- .pf-c-data-list.pf-m-grid-xl {
10115
+ @media screen and (min-width: 0) {
10116
+ .pf-c-data-list.pf-m-grid-none {
9824
10117
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
9825
10118
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
9826
10119
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -9831,64 +10124,64 @@ button.pf-c-breadcrumb__link {
9831
10124
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
9832
10125
  }
9833
10126
  }
9834
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
9835
- .pf-c-data-list.pf-m-grid-xl {
10127
+ @media screen and (min-width: 0) and (min-width: 1200px) {
10128
+ .pf-c-data-list.pf-m-grid-none {
9836
10129
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
9837
10130
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
9838
10131
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
9839
10132
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
9840
10133
  }
9841
10134
  }
9842
- @media screen and (min-width: 1200px) {
9843
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10135
+ @media screen and (min-width: 0) {
10136
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
9844
10137
  display: flex;
9845
10138
  flex-wrap: wrap;
9846
10139
  flex-grow: 1;
9847
10140
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9848
10141
  }
9849
10142
  }
9850
- @media screen and (min-width: 1200px) {
9851
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10143
+ @media screen and (min-width: 0) {
10144
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9852
10145
  margin-right: var(--pf-c-data-list__cell--MarginRight);
9853
10146
  }
9854
10147
 
9855
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10148
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
9856
10149
  flex: 1;
9857
10150
  order: initial;
9858
10151
  }
9859
10152
 
9860
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10153
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
9861
10154
  margin-left: auto;
9862
10155
  }
9863
10156
 
9864
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10157
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
9865
10158
  flex: none;
9866
10159
  }
9867
10160
 
9868
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10161
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
9869
10162
  flex-grow: 2;
9870
10163
  }
9871
10164
 
9872
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10165
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
9873
10166
  flex-grow: 3;
9874
10167
  }
9875
10168
 
9876
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10169
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
9877
10170
  flex-grow: 4;
9878
10171
  }
9879
10172
 
9880
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10173
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
9881
10174
  flex-grow: 5;
9882
10175
  }
9883
10176
  }
9884
- @media screen and (min-width: 1200px) {
9885
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10177
+ @media screen and (min-width: 0) {
10178
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
9886
10179
  max-height: initial;
9887
10180
  overflow-y: visible;
9888
10181
  }
9889
10182
  }
9890
- @media screen and (min-width: 1450px) {
9891
- .pf-c-data-list.pf-m-grid-2xl {
10183
+ @media screen and (min-width: 576px) {
10184
+ .pf-c-data-list.pf-m-grid-sm {
9892
10185
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
9893
10186
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
9894
10187
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -9899,497 +10192,334 @@ button.pf-c-breadcrumb__link {
9899
10192
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
9900
10193
  }
9901
10194
  }
9902
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
9903
- .pf-c-data-list.pf-m-grid-2xl {
10195
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
10196
+ .pf-c-data-list.pf-m-grid-sm {
9904
10197
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
9905
10198
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
9906
10199
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
9907
10200
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
9908
10201
  }
9909
10202
  }
9910
- @media screen and (min-width: 1450px) {
9911
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10203
+ @media screen and (min-width: 576px) {
10204
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
9912
10205
  display: flex;
9913
10206
  flex-wrap: wrap;
9914
10207
  flex-grow: 1;
9915
10208
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9916
10209
  }
9917
10210
  }
9918
- @media screen and (min-width: 1450px) {
9919
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10211
+ @media screen and (min-width: 576px) {
10212
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9920
10213
  margin-right: var(--pf-c-data-list__cell--MarginRight);
9921
10214
  }
9922
10215
 
9923
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10216
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
9924
10217
  flex: 1;
9925
10218
  order: initial;
9926
10219
  }
9927
10220
 
9928
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10221
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
9929
10222
  margin-left: auto;
9930
10223
  }
9931
10224
 
9932
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10225
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
9933
10226
  flex: none;
9934
10227
  }
9935
10228
 
9936
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10229
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
9937
10230
  flex-grow: 2;
9938
10231
  }
9939
10232
 
9940
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10233
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
9941
10234
  flex-grow: 3;
9942
10235
  }
9943
10236
 
9944
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10237
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
9945
10238
  flex-grow: 4;
9946
10239
  }
9947
10240
 
9948
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10241
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
9949
10242
  flex-grow: 5;
9950
10243
  }
9951
10244
  }
9952
- @media screen and (min-width: 1450px) {
9953
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
10245
+ @media screen and (min-width: 576px) {
10246
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
9954
10247
  max-height: initial;
9955
10248
  overflow-y: visible;
9956
10249
  }
9957
10250
  }
9958
- .pf-c-data-list {
9959
- --pf-c-data-list--FontSize: 1em;
9960
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
9961
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
9962
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
9963
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9964
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
9965
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
9966
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
9967
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
9968
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
9969
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9970
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
9971
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
9972
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9973
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9974
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9975
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
9976
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
9977
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
9978
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
9979
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
9980
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
9981
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
9982
- --pf-c-data-list__item--before--BackgroundColor: transparent;
9983
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
9984
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
9985
- --pf-c-data-list__item--before--Top: 0;
9986
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
9987
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
9988
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
9989
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
9990
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
9991
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
9992
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
9993
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
9994
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
9995
- --pf-c-data-list__cell--md--PaddingBottom: 0;
9996
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
9997
- --pf-c-data-list__cell--cell--PaddingTop: 0;
9998
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
9999
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
10000
- --pf-c-data-list--cell--MinWidth: initial;
10001
- --pf-c-data-list--cell--Overflow: visible;
10002
- --pf-c-data-list--cell--TextOverflow: clip;
10003
- --pf-c-data-list--cell--WhiteSpace: normal;
10004
- --pf-c-data-list--cell--WordBreak: normal;
10005
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
10006
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
10007
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10008
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10009
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10010
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10011
- --pf-c-data-list__toggle-icon--Rotate: 0;
10012
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
10013
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
10014
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
10015
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
10016
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
10017
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
10018
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
10019
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
10020
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
10021
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
10022
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10023
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10024
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
10025
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
10026
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
10027
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
10028
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
10029
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
10030
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
10031
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10032
- --pf-c-data-list__check--MarginTop: -0.0625rem;
10033
- --pf-c-data-list__item-action--Display: flex;
10034
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
10035
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
10036
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
10037
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
10038
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
10039
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10040
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
10041
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10042
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10043
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
10044
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
10045
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
10046
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
10047
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10048
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
10049
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
10050
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
10051
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
10052
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
10053
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
10054
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
10055
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
10056
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
10057
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
10058
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
10059
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
10060
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
10061
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
10062
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
10063
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
10064
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
10065
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
10066
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
10067
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
10068
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
10069
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
10070
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
10071
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
10072
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
10073
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10074
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
10075
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10076
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
10077
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
10078
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
10079
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
10080
- color: var(--pf-global--Color--100);
10081
- font-size: var(--pf-c-data-list--FontSize);
10082
- line-height: var(--pf-c-data-list--LineHeight);
10083
- overflow-wrap: break-word;
10084
- list-style-type: disc;
10085
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
10086
- }
10087
-
10088
- @media screen and (min-width: 576px) {
10089
- .pf-c-data-list {
10090
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
10091
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
10251
+ @media screen and (min-width: 768px) {
10252
+ .pf-c-data-list.pf-m-grid-md {
10253
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10254
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10255
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10256
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10257
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10258
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10259
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10260
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10092
10261
  }
10093
10262
  }
10094
- @media screen and (min-width: 576px) {
10095
- .pf-c-data-list {
10096
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
10097
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
10263
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
10264
+ .pf-c-data-list.pf-m-grid-md {
10265
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10266
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10267
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10268
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10098
10269
  }
10099
10270
  }
10100
- @media (min-width: 576px) {
10101
- .pf-c-data-list {
10102
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
10271
+ @media screen and (min-width: 768px) {
10272
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
10273
+ display: flex;
10274
+ flex-wrap: wrap;
10275
+ flex-grow: 1;
10276
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10103
10277
  }
10104
10278
  }
10105
- .pf-c-data-list.pf-m-compact {
10106
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
10107
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
10108
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
10109
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
10110
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
10111
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
10112
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10113
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
10114
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
10115
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
10116
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
10117
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
10118
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
10119
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
10120
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
10121
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
10122
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
10123
- font-size: var(--pf-c-data-list--m-compact--FontSize);
10124
- }
10125
-
10126
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
10127
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
10128
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
10129
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
10130
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
10131
- }
10132
-
10133
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
10134
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
10135
- }
10136
-
10137
- .pf-c-data-list.pf-m-drag-over {
10138
- overflow-anchor: none;
10139
- }
10140
-
10141
- .pf-c-data-list.pf-m-truncate,
10142
- .pf-c-data-list__item-row.pf-m-truncate,
10143
- .pf-c-data-list__cell.pf-m-truncate,
10144
- .pf-c-data-list__text.pf-m-truncate {
10145
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
10146
- --pf-c-data-list--cell--Overflow: hidden;
10147
- --pf-c-data-list--cell--TextOverflow: ellipsis;
10148
- --pf-c-data-list--cell--WhiteSpace: nowrap;
10149
- }
10150
-
10151
- .pf-c-data-list.pf-m-break-word,
10152
- .pf-c-data-list__item-row.pf-m-break-word,
10153
- .pf-c-data-list__cell.pf-m-break-word,
10154
- .pf-c-data-list__text.pf-m-break-word {
10155
- --pf-c-data-list--cell--WordBreak: break-word;
10156
- }
10279
+ @media screen and (min-width: 768px) {
10280
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10281
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10282
+ }
10157
10283
 
10158
- .pf-c-data-list.pf-m-nowrap,
10159
- .pf-c-data-list__item-row.pf-m-nowrap,
10160
- .pf-c-data-list__cell.pf-m-nowrap,
10161
- .pf-c-data-list__text.pf-m-nowrap {
10162
- --pf-c-data-list--cell--WhiteSpace: nowrap;
10163
- }
10284
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
10285
+ flex: 1;
10286
+ order: initial;
10287
+ }
10164
10288
 
10165
- .pf-c-data-list__item {
10166
- position: relative;
10167
- display: flex;
10168
- flex-direction: column;
10169
- background-color: var(--pf-c-data-list__item--BackgroundColor);
10170
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
10171
- }
10289
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10290
+ margin-left: auto;
10291
+ }
10172
10292
 
10173
- .pf-c-data-list__item::before {
10174
- position: absolute;
10175
- top: var(--pf-c-data-list__item--before--Top);
10176
- bottom: 0;
10177
- left: 0;
10178
- width: var(--pf-c-data-list__item--before--Width);
10179
- content: "";
10180
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
10181
- transition: var(--pf-c-data-list__item--before--Transition);
10182
- }
10293
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10294
+ flex: none;
10295
+ }
10183
10296
 
10184
- .pf-c-data-list__item.pf-m-selectable {
10185
- cursor: pointer;
10186
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
10187
- }
10297
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10298
+ flex-grow: 2;
10299
+ }
10188
10300
 
10189
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
10190
- position: relative;
10191
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
10192
- }
10301
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10302
+ flex-grow: 3;
10303
+ }
10193
10304
 
10194
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
10195
- --pf-c-data-list__item--BorderBottomWidth: 0;
10196
- }
10305
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10306
+ flex-grow: 4;
10307
+ }
10197
10308
 
10198
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
10199
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
10309
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10310
+ flex-grow: 5;
10311
+ }
10200
10312
  }
10201
-
10202
- .pf-c-data-list__item.pf-m-selectable:hover {
10203
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10313
+ @media screen and (min-width: 768px) {
10314
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
10315
+ max-height: initial;
10316
+ overflow-y: visible;
10317
+ }
10204
10318
  }
10205
-
10206
- .pf-c-data-list__item.pf-m-selectable:focus {
10207
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10319
+ @media screen and (min-width: 992px) {
10320
+ .pf-c-data-list.pf-m-grid-lg {
10321
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10322
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10323
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10324
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10325
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10326
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10327
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10328
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10329
+ }
10208
10330
  }
10209
-
10210
- .pf-c-data-list__item.pf-m-selectable:active {
10211
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10331
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
10332
+ .pf-c-data-list.pf-m-grid-lg {
10333
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10334
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10335
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10336
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10337
+ }
10212
10338
  }
10213
-
10214
- .pf-c-data-list__item.pf-m-selected {
10215
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
10216
- position: relative;
10217
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
10218
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
10339
+ @media screen and (min-width: 992px) {
10340
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10341
+ display: flex;
10342
+ flex-wrap: wrap;
10343
+ flex-grow: 1;
10344
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10345
+ }
10219
10346
  }
10347
+ @media screen and (min-width: 992px) {
10348
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10349
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10350
+ }
10220
10351
 
10221
- .pf-c-data-list__item.pf-m-ghost-row::after {
10222
- position: absolute;
10223
- top: 0;
10224
- right: 0;
10225
- bottom: 0;
10226
- left: 0;
10227
- content: "";
10228
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
10229
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
10230
- }
10352
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10353
+ flex: 1;
10354
+ order: initial;
10355
+ }
10231
10356
 
10232
- .pf-c-data-list__item.pf-m-expanded {
10233
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
10234
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
10235
- }
10357
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10358
+ margin-left: auto;
10359
+ }
10236
10360
 
10237
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
10238
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
10239
- }
10361
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10362
+ flex: none;
10363
+ }
10240
10364
 
10241
- .pf-c-data-list__item-row {
10242
- display: flex;
10243
- flex-wrap: nowrap;
10244
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
10245
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
10246
- }
10365
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10366
+ flex-grow: 2;
10367
+ }
10247
10368
 
10248
- .pf-c-data-list__item-control {
10249
- display: flex;
10250
- flex-wrap: nowrap;
10251
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
10252
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
10253
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
10254
- }
10369
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10370
+ flex-grow: 3;
10371
+ }
10255
10372
 
10256
- .pf-c-data-list__item-control > *:not(:last-child) {
10257
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
10258
- }
10373
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10374
+ flex-grow: 4;
10375
+ }
10259
10376
 
10260
- .pf-c-data-list__check {
10261
- display: flex;
10262
- align-items: center;
10263
- align-self: flex-start;
10264
- height: var(--pf-c-data-list__check--Height);
10265
- margin-top: var(--pf-c-data-list__check--MarginTop);
10377
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10378
+ flex-grow: 5;
10379
+ }
10266
10380
  }
10267
-
10268
- .pf-c-data-list__check > input {
10269
- cursor: pointer;
10381
+ @media screen and (min-width: 992px) {
10382
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10383
+ max-height: initial;
10384
+ overflow-y: visible;
10385
+ }
10270
10386
  }
10271
-
10272
- .pf-c-data-list__item-draggable-button {
10273
- display: flex;
10274
- flex-direction: column;
10275
- padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
10276
- margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
10277
- border: 0;
10387
+ @media screen and (min-width: 1200px) {
10388
+ .pf-c-data-list.pf-m-grid-xl {
10389
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10390
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10391
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10392
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10393
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10394
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10395
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10396
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10397
+ }
10278
10398
  }
10279
-
10280
- .pf-c-data-list__item-draggable-button:hover {
10281
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
10282
- cursor: grab;
10399
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
10400
+ .pf-c-data-list.pf-m-grid-xl {
10401
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10402
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10403
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10404
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10405
+ }
10283
10406
  }
10284
-
10285
- .pf-c-data-list__item-draggable-button:focus {
10286
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
10407
+ @media screen and (min-width: 1200px) {
10408
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10409
+ display: flex;
10410
+ flex-wrap: wrap;
10411
+ flex-grow: 1;
10412
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10413
+ }
10287
10414
  }
10415
+ @media screen and (min-width: 1200px) {
10416
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10417
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10418
+ }
10288
10419
 
10289
- .pf-c-data-list__item-draggable-button:active {
10290
- cursor: grabbing;
10291
- }
10420
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10421
+ flex: 1;
10422
+ order: initial;
10423
+ }
10292
10424
 
10293
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
10294
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
10295
- pointer-events: none;
10296
- }
10425
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10426
+ margin-left: auto;
10427
+ }
10297
10428
 
10298
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
10299
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
10300
- }
10429
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10430
+ flex: none;
10431
+ }
10301
10432
 
10302
- .pf-c-data-list__item-action {
10303
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
10304
- align-items: flex-start;
10305
- align-content: flex-start;
10306
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
10307
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
10308
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
10309
- }
10433
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10434
+ flex-grow: 2;
10435
+ }
10310
10436
 
10311
- .pf-c-data-list__item-action > *:not(:last-child) {
10312
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
10313
- }
10437
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10438
+ flex-grow: 3;
10439
+ }
10314
10440
 
10315
- .pf-c-data-list__item-action .pf-c-data-list__action {
10316
- margin-top: var(--pf-c-data-list__action--MarginTop);
10317
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
10318
- }
10441
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10442
+ flex-grow: 4;
10443
+ }
10319
10444
 
10320
- .pf-c-data-list__toggle {
10321
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
10445
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10446
+ flex-grow: 5;
10447
+ }
10322
10448
  }
10323
-
10324
- .pf-c-data-list__toggle-icon {
10325
- height: var(--pf-c-data-list__toggle-icon--Height);
10326
- pointer-events: none;
10327
- transition: var(--pf-c-data-list__toggle-icon--Transition);
10328
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
10449
+ @media screen and (min-width: 1200px) {
10450
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10451
+ max-height: initial;
10452
+ overflow-y: visible;
10453
+ }
10329
10454
  }
10330
-
10331
- .pf-c-data-list__item-content {
10332
- display: grid;
10333
- width: 100%;
10334
- grid-template-columns: auto 1fr;
10455
+ @media screen and (min-width: 1450px) {
10456
+ .pf-c-data-list.pf-m-grid-2xl {
10457
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10458
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10459
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10460
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10461
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10462
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10463
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10464
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10465
+ }
10335
10466
  }
10336
-
10337
- .pf-c-data-list__cell {
10338
- flex: 1;
10339
- grid-column: 1/-1;
10340
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
10341
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
10467
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
10468
+ .pf-c-data-list.pf-m-grid-2xl {
10469
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10470
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10471
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10472
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10473
+ }
10342
10474
  }
10343
-
10344
- .pf-c-data-list__cell + .pf-c-data-list__cell {
10345
- flex: 1 0 100%;
10346
- order: 1;
10347
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
10475
+ @media screen and (min-width: 1450px) {
10476
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10477
+ display: flex;
10478
+ flex-wrap: wrap;
10479
+ flex-grow: 1;
10480
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10481
+ }
10348
10482
  }
10483
+ @media screen and (min-width: 1450px) {
10484
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10485
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10486
+ }
10349
10487
 
10350
- .pf-c-data-list__cell.pf-m-icon {
10351
- flex-grow: 0;
10352
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10353
- grid-column: 1/2;
10354
- }
10488
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10489
+ flex: 1;
10490
+ order: initial;
10491
+ }
10355
10492
 
10356
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
10357
- grid-column: 2/3;
10358
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
10359
- }
10493
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10494
+ margin-left: auto;
10495
+ }
10360
10496
 
10361
- .pf-c-data-list__cell.pf-m-align-right {
10362
- margin-left: 0;
10363
- }
10497
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10498
+ flex: none;
10499
+ }
10364
10500
 
10365
- .pf-c-data-list__text {
10366
- display: inline-block;
10367
- }
10501
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10502
+ flex-grow: 2;
10503
+ }
10368
10504
 
10369
- .pf-c-data-list__text,
10370
- .pf-c-data-list__cell {
10371
- min-width: var(--pf-c-data-list--cell--MinWidth);
10372
- max-width: 100%;
10373
- overflow: var(--pf-c-data-list--cell--Overflow);
10374
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
10375
- word-break: var(--pf-c-data-list--cell--WordBreak);
10376
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
10377
- }
10505
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10506
+ flex-grow: 3;
10507
+ }
10378
10508
 
10379
- .pf-c-data-list__expandable-content {
10380
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
10381
- overflow-y: auto;
10382
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
10383
- }
10509
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10510
+ flex-grow: 4;
10511
+ }
10384
10512
 
10385
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
10386
- padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
10513
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10514
+ flex-grow: 5;
10515
+ }
10387
10516
  }
10388
-
10389
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10390
- padding: 0;
10517
+ @media screen and (min-width: 1450px) {
10518
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
10519
+ max-height: initial;
10520
+ overflow-y: visible;
10521
+ }
10391
10522
  }
10392
-
10393
10523
  .pf-c-date-picker {
10394
10524
  --pf-c-date-picker--m-top__calendar--Top: 0;
10395
10525
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -14234,6 +14364,7 @@ ul.pf-c-list {
14234
14364
  --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
14235
14365
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-c-masthead--c-context-selector__toggle--BorderTopColor);
14236
14366
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-c-masthead--c-context-selector__toggle--BorderRightColor);
14367
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-masthead--c-context-selector__toggle--BorderBottomColor);
14237
14368
  --pf-c-context-selector__toggle--BorderLeftColor: var(--pf-c-masthead--c-context-selector__toggle--BorderLeftColor);
14238
14369
  }
14239
14370
 
@@ -15699,19 +15830,8 @@ ul.pf-c-list {
15699
15830
  --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
15700
15831
  }
15701
15832
  }
15702
- .pf-l-bullseye {
15703
- --pf-l-bullseye--Padding: 0;
15704
- display: flex;
15705
- align-items: center;
15706
- justify-content: center;
15707
- height: 100%;
15708
- padding: var(--pf-l-bullseye--Padding);
15709
- margin: 0;
15710
- }
15711
-
15712
15833
  .pf-c-nav {
15713
15834
  --pf-c-nav--Transition: var(--pf-global--Transition);
15714
- --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
15715
15835
  --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
15716
15836
  --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
15717
15837
  --pf-c-nav--m-light__link--Color: var(--pf-global--Color--dark-100);
@@ -15736,6 +15856,10 @@ ul.pf-c-list {
15736
15856
  --pf-c-nav__item--MarginTop: 0;
15737
15857
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
15738
15858
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
15859
+ --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
15860
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
15861
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
15862
+ --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
15739
15863
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
15740
15864
  --pf-c-nav__item--before--BorderWidth: var(--pf-global--BorderWidth--sm);
15741
15865
  --pf-c-nav__link--FontSize: var(--pf-global--FontSize--md);
@@ -15871,6 +15995,9 @@ ul.pf-c-list {
15871
15995
  --pf-c-nav__subnav__link--active--after--BorderWidth: var(--pf-global--BorderWidth--sm);
15872
15996
  --pf-c-nav__subnav__link--m-current--after--BorderWidth: var(--pf-global--BorderWidth--xl);
15873
15997
  --pf-c-nav__subnav--MaxHeight: 0;
15998
+ --pf-c-nav__subnav__subnav--PaddingLeft: var(--pf-global--spacer--lg);
15999
+ --pf-c-nav__subnav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
16000
+ --pf-c-nav__subnav__subnav__link--FontSize: var(--pf-global--FontSize--xs);
15874
16001
  --pf-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
15875
16002
  --pf-c-nav__subnav--c-divider--PaddingRight: var(--pf-global--spacer--lg);
15876
16003
  --pf-c-nav__subnav--c-divider--PaddingLeft: var(--pf-global--spacer--lg);
@@ -16198,16 +16325,19 @@ ul.pf-c-list {
16198
16325
  }
16199
16326
 
16200
16327
  .pf-c-nav__list {
16328
+ position: relative;
16201
16329
  display: block;
16202
16330
  }
16203
16331
 
16204
16332
  .pf-c-nav__item {
16333
+ --pf-c-nav__item__toggle-icon--Rotate: 0;
16205
16334
  position: relative;
16206
16335
  margin-top: var(--pf-c-nav__item--MarginTop);
16207
16336
  }
16208
16337
 
16209
16338
  .pf-c-nav__item.pf-m-expandable {
16210
16339
  --pf-c-nav__link--before--BorderBottomWidth: 0;
16340
+ --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
16211
16341
  }
16212
16342
 
16213
16343
  .pf-c-nav__item.pf-m-expandable::before {
@@ -16219,6 +16349,31 @@ ul.pf-c-list {
16219
16349
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
16220
16350
  }
16221
16351
 
16352
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
16353
+ --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
16354
+ --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
16355
+ }
16356
+
16357
+ @media screen and (min-width: 1200px) {
16358
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable::before {
16359
+ border-bottom: none;
16360
+ }
16361
+ }
16362
+ .pf-c-nav__item .pf-c-nav__item.pf-m-expandable .pf-c-nav__list::before {
16363
+ position: absolute;
16364
+ top: 0;
16365
+ right: 0;
16366
+ bottom: 0;
16367
+ left: 0;
16368
+ pointer-events: none;
16369
+ content: "";
16370
+ border-left: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
16371
+ }
16372
+
16373
+ .pf-c-nav__item .pf-c-nav__toggle-icon {
16374
+ transform: rotate(var(--pf-c-nav__item__toggle-icon--Rotate));
16375
+ }
16376
+
16222
16377
  .pf-c-nav__item.pf-m-flyout:hover {
16223
16378
  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
16224
16379
  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
@@ -16442,6 +16597,12 @@ ul.pf-c-list {
16442
16597
  -ms-overflow-style: -ms-autohiding-scrollbar;
16443
16598
  }
16444
16599
 
16600
+ .pf-c-nav__subnav .pf-c-nav__subnav {
16601
+ --pf-c-nav__link--FontSize: var(--pf-c-nav__subnav__subnav__link--FontSize);
16602
+ --pf-c-nav__link--PaddingLeft: var(--pf-c-nav__subnav__subnav__link--PaddingLeft);
16603
+ --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__subnav__subnav--PaddingLeft);
16604
+ }
16605
+
16445
16606
  .pf-c-nav__subnav.pf-m-flyout {
16446
16607
  width: 100%;
16447
16608
  }
@@ -16475,7 +16636,11 @@ ul.pf-c-list {
16475
16636
  transition: var(--pf-c-nav__toggle-icon--Transition);
16476
16637
  }
16477
16638
 
16478
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
16639
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
16640
+ transform: rotate(0deg);
16641
+ }
16642
+
16643
+ .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 {
16479
16644
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
16480
16645
  }
16481
16646
 
@@ -16567,6 +16732,16 @@ ul.pf-c-list {
16567
16732
  left: 0;
16568
16733
  }
16569
16734
 
16735
+ .pf-l-bullseye {
16736
+ --pf-l-bullseye--Padding: 0;
16737
+ display: flex;
16738
+ align-items: center;
16739
+ justify-content: center;
16740
+ height: 100%;
16741
+ padding: var(--pf-l-bullseye--Padding);
16742
+ margin: 0;
16743
+ }
16744
+
16570
16745
  .pf-c-notification-badge {
16571
16746
  --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
16572
16747
  --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
@@ -17291,7 +17466,7 @@ ul.pf-c-list {
17291
17466
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
17292
17467
  }
17293
17468
 
17294
- .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__header {
17469
+ .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 {
17295
17470
  --pf-global--Color--100: var(--pf-global--Color--light-100);
17296
17471
  --pf-global--Color--200: var(--pf-global--Color--light-200);
17297
17472
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -17301,11 +17476,11 @@ ul.pf-c-list {
17301
17476
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
17302
17477
  }
17303
17478
 
17304
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__header .pf-c-card {
17479
+ .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 {
17305
17480
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
17306
17481
  }
17307
17482
 
17308
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__header .pf-c-button {
17483
+ .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 {
17309
17484
  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
17310
17485
  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
17311
17486
  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -17442,6 +17617,11 @@ ul.pf-c-list {
17442
17617
  --pf-c-page__sidebar--xl--TranslateX: 0;
17443
17618
  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
17444
17619
  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
17620
+ --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
17621
+ --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
17622
+ --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
17623
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
17624
+ --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
17445
17625
  --pf-c-page__main--ZIndex: var(--pf-global--ZIndex--xs);
17446
17626
  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--md);
17447
17627
  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--md);
@@ -17739,6 +17919,27 @@ ul.pf-c-list {
17739
17919
  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
17740
17920
  }
17741
17921
 
17922
+ .pf-c-page__sidebar-body.pf-m-menu {
17923
+ --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
17924
+ --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
17925
+ background-color: var(--pf-global--palette--black-900);
17926
+ border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
17927
+ }
17928
+
17929
+ .pf-c-page__sidebar-body.pf-m-menu + .pf-c-page__sidebar-body.pf-m-menu {
17930
+ --pf-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
17931
+ }
17932
+
17933
+ .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector {
17934
+ --pf-c-context-selector__toggle--BorderTopColor: transparent;
17935
+ --pf-c-context-selector__toggle--BorderRightColor: transparent;
17936
+ --pf-c-context-selector__toggle--BorderBottomColor: var(--pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor);
17937
+ --pf-c-context-selector__toggle--BorderLeftColor: transparent;
17938
+ --pf-c-context-selector__menu--Top: 100%;
17939
+ color: var(--pf-global--Color--100);
17940
+ width: 100%;
17941
+ }
17942
+
17742
17943
  .pf-c-page__main-nav.pf-m-limit-width,
17743
17944
  .pf-c-page__main-breadcrumb.pf-m-limit-width,
17744
17945
  .pf-c-page__main-tabs.pf-m-limit-width,
@@ -18455,7 +18656,17 @@ ul.pf-c-list {
18455
18656
  --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
18456
18657
  --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
18457
18658
  --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
18458
- --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--md);
18659
+ --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
18660
+ --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
18661
+ --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
18662
+ --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
18663
+ --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
18664
+ --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
18665
+ --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
18666
+ --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
18667
+ --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
18668
+ --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
18669
+ --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
18459
18670
  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
18460
18671
  --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
18461
18672
  --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
@@ -18463,7 +18674,7 @@ ul.pf-c-list {
18463
18674
  --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
18464
18675
  --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
18465
18676
  --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
18466
- --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
18677
+ --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
18467
18678
  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
18468
18679
  --pf-c-popover__arrow--m-top--TranslateX: -50%;
18469
18680
  --pf-c-popover__arrow--m-top--TranslateY: 50%;
@@ -18482,6 +18693,12 @@ ul.pf-c-list {
18482
18693
  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
18483
18694
  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
18484
18695
  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
18696
+ --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
18697
+ --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
18698
+ --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
18699
+ --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
18700
+ --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
18701
+ --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
18485
18702
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
18486
18703
  position: relative;
18487
18704
  min-width: var(--pf-c-popover--MinWidth);
@@ -18544,6 +18761,31 @@ ul.pf-c-list {
18544
18761
  left: auto;
18545
18762
  }
18546
18763
 
18764
+ .pf-c-popover.pf-m-danger {
18765
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
18766
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
18767
+ }
18768
+
18769
+ .pf-c-popover.pf-m-warning {
18770
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
18771
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
18772
+ }
18773
+
18774
+ .pf-c-popover.pf-m-success {
18775
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
18776
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
18777
+ }
18778
+
18779
+ .pf-c-popover.pf-m-default {
18780
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
18781
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
18782
+ }
18783
+
18784
+ .pf-c-popover.pf-m-info {
18785
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
18786
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
18787
+ }
18788
+
18547
18789
  .pf-c-popover__content {
18548
18790
  position: relative;
18549
18791
  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
@@ -18573,6 +18815,27 @@ ul.pf-c-list {
18573
18815
  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
18574
18816
  }
18575
18817
 
18818
+ .pf-c-popover__title {
18819
+ flex: 0 0 auto;
18820
+ margin-bottom: var(--pf-c-popover__title--MarginBottom);
18821
+ font-family: var(--pf-c-popover__title--FontFamily);
18822
+ font-size: var(--pf-c-popover__title--FontSize);
18823
+ line-height: var(--pf-c-popover__title--LineHeight);
18824
+ }
18825
+
18826
+ .pf-c-popover__title.pf-m-icon {
18827
+ display: flex;
18828
+ }
18829
+
18830
+ .pf-c-popover__title-icon {
18831
+ margin-right: var(--pf-c-popover__title-icon--MarginRight);
18832
+ color: var(--pf-c-popover__title-icon--Color);
18833
+ }
18834
+
18835
+ .pf-c-popover__title-text {
18836
+ color: var(--pf-c-popover__title-text--Color, inherit);
18837
+ }
18838
+
18576
18839
  .pf-c-popover__body {
18577
18840
  word-wrap: break-word;
18578
18841
  }
@@ -22103,8 +22366,8 @@ label.pf-c-radio, .pf-c-radio__label,
22103
22366
  --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
22104
22367
  --pf-c-toolbar__item--Display: block;
22105
22368
  --pf-c-toolbar__group--Display: flex;
22106
- --pf-c-toolbar--m-sticky-top--ZIndex: var(--pf-global--ZIndex--xs);
22107
- --pf-c-toolbar--m-sticky-top--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
22369
+ --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
22370
+ --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
22108
22371
  --pf-c-toolbar__content--Display: flex;
22109
22372
  --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
22110
22373
  --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
@@ -22177,11 +22440,11 @@ label.pf-c-radio, .pf-c-radio__label,
22177
22440
  --pf-c-toolbar__content--PaddingLeft: var(--pf-c-toolbar--m-page-insets--inset);
22178
22441
  }
22179
22442
 
22180
- .pf-c-toolbar.pf-m-sticky-top {
22443
+ .pf-c-toolbar.pf-m-sticky {
22181
22444
  position: sticky;
22182
22445
  top: 0;
22183
- z-index: var(--pf-c-toolbar--m-sticky-top--ZIndex);
22184
- box-shadow: var(--pf-c-toolbar--m-sticky-top--BoxShadow);
22446
+ z-index: var(--pf-c-toolbar--m-sticky--ZIndex);
22447
+ box-shadow: var(--pf-c-toolbar--m-sticky--BoxShadow);
22185
22448
  }
22186
22449
 
22187
22450
  .pf-c-toolbar.pf-m-full-height {
@@ -24503,6 +24766,146 @@ label.pf-c-radio, .pf-c-radio__label,
24503
24766
  --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
24504
24767
  }
24505
24768
 
24769
+ .pf-c-text-input-group {
24770
+ --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
24771
+ --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
24772
+ --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
24773
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
24774
+ --pf-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
24775
+ --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
24776
+ --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
24777
+ --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
24778
+ --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
24779
+ --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
24780
+ --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
24781
+ --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
24782
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
24783
+ --pf-c-text-input-group__text-input--MinWidth: 12ch;
24784
+ --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
24785
+ --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
24786
+ --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
24787
+ --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
24788
+ --pf-c-text-input-group__icon--TranslateY: -50%;
24789
+ --pf-c-text-input-group__utilities--MarginRight: var(--pf-global--spacer--sm);
24790
+ --pf-c-text-input-group__utilities--MarginLeft: var(--pf-global--spacer--xs);
24791
+ --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
24792
+ --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
24793
+ --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
24794
+ position: relative;
24795
+ display: flex;
24796
+ }
24797
+
24798
+ .pf-c-text-input-group:hover {
24799
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
24800
+ }
24801
+
24802
+ .pf-c-text-input-group__main {
24803
+ display: flex;
24804
+ flex: 1;
24805
+ gap: var(--pf-global--spacer--sm);
24806
+ min-width: 0;
24807
+ }
24808
+
24809
+ .pf-c-text-input-group__main.pf-m-icon {
24810
+ --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group__main--m-icon__text-input--PaddingLeft);
24811
+ }
24812
+
24813
+ .pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
24814
+ margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
24815
+ }
24816
+
24817
+ .pf-c-text-input-group__main .pf-c-chip-group {
24818
+ overflow: auto;
24819
+ -ms-overflow-style: none;
24820
+ scrollbar-width: none;
24821
+ }
24822
+
24823
+ .pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
24824
+ display: none;
24825
+ }
24826
+
24827
+ .pf-c-text-input-group__main .pf-c-chip-group,
24828
+ .pf-c-text-input-group__main .pf-c-chip-group__list {
24829
+ flex-wrap: nowrap;
24830
+ }
24831
+
24832
+ .pf-c-text-input-group__text {
24833
+ display: inline-grid;
24834
+ grid-template-columns: 1fr;
24835
+ grid-template-areas: "text-input";
24836
+ flex: 1;
24837
+ }
24838
+
24839
+ .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
24840
+ position: absolute;
24841
+ top: 0;
24842
+ right: 0;
24843
+ bottom: 0;
24844
+ left: 0;
24845
+ pointer-events: none;
24846
+ content: "";
24847
+ }
24848
+
24849
+ .pf-c-text-input-group__text::before {
24850
+ border: var(--pf-c-text-input-group__text--before--BorderWidth) solid var(--pf-c-text-input-group__text--before--BorderColor);
24851
+ }
24852
+
24853
+ .pf-c-text-input-group__text::after {
24854
+ border-bottom: var(--pf-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-c-text-input-group__text--after--BorderBottomColor);
24855
+ }
24856
+
24857
+ .pf-c-text-input-group__text:hover, .pf-c-text-input-group__text:focus-within {
24858
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group__text--hover__icon--Color);
24859
+ }
24860
+
24861
+ .pf-c-text-input-group__text:focus-within {
24862
+ --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth);
24863
+ --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomColor);
24864
+ }
24865
+
24866
+ .pf-c-text-input-group__icon {
24867
+ position: absolute;
24868
+ top: 50%;
24869
+ left: var(--pf-c-text-input-group__icon--Left);
24870
+ color: var(--pf-c-text-input-group__icon--Color);
24871
+ transform: translateY(var(--pf-c-text-input-group__icon--TranslateY));
24872
+ }
24873
+
24874
+ .pf-c-text-input-group__text-input {
24875
+ overflow: hidden;
24876
+ text-overflow: ellipsis;
24877
+ white-space: nowrap;
24878
+ position: relative;
24879
+ width: 100%;
24880
+ min-width: var(--pf-c-text-input-group__text-input--MinWidth);
24881
+ padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
24882
+ border: 0;
24883
+ }
24884
+
24885
+ .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
24886
+ grid-area: text-input;
24887
+ }
24888
+
24889
+ .pf-c-text-input-group__text-input.pf-m-hint {
24890
+ color: var(--pf-c-text-input-group__text-input--m-hint--Color);
24891
+ }
24892
+
24893
+ .pf-c-text-input-group__utilities {
24894
+ display: flex;
24895
+ align-items: center;
24896
+ margin-right: var(--pf-c-text-input-group__utilities--MarginRight);
24897
+ margin-left: var(--pf-c-text-input-group__utilities--MarginLeft);
24898
+ }
24899
+
24900
+ .pf-c-text-input-group__utilities > * + * {
24901
+ margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
24902
+ }
24903
+
24904
+ .pf-c-text-input-group__utilities .pf-c-button {
24905
+ --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
24906
+ --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
24907
+ }
24908
+
24506
24909
  .pf-l-flex {
24507
24910
  --pf-l-flex--Display: flex;
24508
24911
  --pf-l-flex--FlexWrap: wrap;