@patternfly/react-table 4.61.17 → 4.61.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/umd/react-table.min.css +754 -754
  3. package/package.json +6 -6
package/dist/umd/react-table.min.css CHANGED
@@ -9451,6 +9451,86 @@ button.pf-c-breadcrumb__link {
9451
9451
  pointer-events: none;
9452
9452
  }
9453
9453
 
9454
+ .pf-c-data-list {
9455
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9456
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9457
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9458
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9459
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9460
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9461
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9462
+ }
9463
+
9464
+ .pf-c-data-list__item-action {
9465
+ --pf-hidden-visible--visible--Visibility: visible;
9466
+ --pf-hidden-visible--hidden--Display: none;
9467
+ --pf-hidden-visible--hidden--Visibility: hidden;
9468
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9469
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9470
+ display: var(--pf-hidden-visible--Display);
9471
+ visibility: var(--pf-hidden-visible--Visibility);
9472
+ }
9473
+
9474
+ .pf-m-hidden.pf-c-data-list__item-action {
9475
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9476
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9477
+ }
9478
+
9479
+ @media screen and (min-width: 576px) {
9480
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
9481
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9482
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9483
+ }
9484
+
9485
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
9486
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9487
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9488
+ }
9489
+ }
9490
+ @media screen and (min-width: 768px) {
9491
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
9492
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9493
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9494
+ }
9495
+
9496
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
9497
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9498
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9499
+ }
9500
+ }
9501
+ @media screen and (min-width: 992px) {
9502
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
9503
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9504
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9505
+ }
9506
+
9507
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
9508
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9509
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9510
+ }
9511
+ }
9512
+ @media screen and (min-width: 1200px) {
9513
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
9514
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9515
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9516
+ }
9517
+
9518
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
9519
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9520
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9521
+ }
9522
+ }
9523
+ @media screen and (min-width: 1450px) {
9524
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
9525
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9526
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9527
+ }
9528
+
9529
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
9530
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9531
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9532
+ }
9533
+ }
9454
9534
  @media screen and (min-width: 768px) {
9455
9535
  .pf-c-data-list:not([class*=pf-m-grid]) {
9456
9536
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -9928,359 +10008,442 @@ button.pf-c-breadcrumb__link {
9928
10008
  }
9929
10009
  }
9930
10010
  .pf-c-data-list {
9931
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9932
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9933
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9934
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9935
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9936
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9937
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9938
- }
9939
-
9940
- .pf-c-data-list__item-action {
9941
- --pf-hidden-visible--visible--Visibility: visible;
9942
- --pf-hidden-visible--hidden--Display: none;
9943
- --pf-hidden-visible--hidden--Visibility: hidden;
9944
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9945
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9946
- display: var(--pf-hidden-visible--Display);
9947
- visibility: var(--pf-hidden-visible--Visibility);
9948
- }
9949
-
9950
- .pf-m-hidden.pf-c-data-list__item-action {
9951
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9952
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
10011
+ --pf-c-data-list--FontSize: 1em;
10012
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
10013
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
10014
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
10015
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10016
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
10017
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
10018
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
10019
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
10020
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
10021
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10022
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
10023
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
10024
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10025
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10026
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10027
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
10028
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
10029
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
10030
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
10031
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
10032
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10033
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
10034
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
10035
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
10036
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
10037
+ --pf-c-data-list__item--before--Top: 0;
10038
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10039
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
10040
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
10041
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
10042
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
10043
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
10044
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
10045
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
10046
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
10047
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
10048
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
10049
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
10050
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
10051
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
10052
+ --pf-c-data-list--cell--MinWidth: initial;
10053
+ --pf-c-data-list--cell--Overflow: visible;
10054
+ --pf-c-data-list--cell--TextOverflow: clip;
10055
+ --pf-c-data-list--cell--WhiteSpace: normal;
10056
+ --pf-c-data-list--cell--WordBreak: normal;
10057
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
10058
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
10059
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10060
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10061
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10062
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10063
+ --pf-c-data-list__toggle-icon--Rotate: 0;
10064
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
10065
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
10066
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
10067
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
10068
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
10069
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
10070
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
10071
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
10072
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
10073
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
10074
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10075
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10076
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
10077
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
10078
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
10079
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
10080
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
10081
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
10082
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
10083
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10084
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
10085
+ --pf-c-data-list__item-action--Display: flex;
10086
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
10087
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
10088
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
10089
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
10090
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
10091
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10092
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
10093
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10094
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10095
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
10096
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
10097
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
10098
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
10099
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10100
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
10101
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
10102
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
10103
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
10104
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
10105
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
10106
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
10107
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
10108
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
10109
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
10110
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
10111
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
10112
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
10113
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
10114
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
10115
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
10116
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
10117
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
10118
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
10119
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
10120
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
10121
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
10122
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
10123
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
10124
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
10125
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10126
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
10127
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10128
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
10129
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
10130
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
10131
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
10132
+ color: var(--pf-global--Color--100);
10133
+ font-size: var(--pf-c-data-list--FontSize);
10134
+ line-height: var(--pf-c-data-list--LineHeight);
10135
+ overflow-wrap: break-word;
10136
+ list-style-type: disc;
10137
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
9953
10138
  }
9954
10139
 
9955
10140
  @media screen and (min-width: 576px) {
9956
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
9957
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9958
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9959
- }
9960
-
9961
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
9962
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9963
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10141
+ .pf-c-data-list {
10142
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
10143
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
9964
10144
  }
9965
10145
  }
9966
- @media screen and (min-width: 768px) {
9967
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
9968
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9969
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
10146
+ @media screen and (min-width: 576px) {
10147
+ .pf-c-data-list {
10148
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
10149
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
9970
10150
  }
9971
-
9972
- .pf-m-visible-on-md.pf-c-data-list__item-action {
9973
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9974
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10151
+ }
10152
+ @media (min-width: 576px) {
10153
+ .pf-c-data-list {
10154
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
9975
10155
  }
9976
10156
  }
9977
- @media screen and (min-width: 992px) {
9978
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
9979
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9980
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9981
- }
9982
-
9983
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
9984
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9985
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9986
- }
10157
+ .pf-c-data-list.pf-m-compact {
10158
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
10159
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
10160
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
10161
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
10162
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
10163
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
10164
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10165
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
10166
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
10167
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
10168
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
10169
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
10170
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
10171
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
10172
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
10173
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
10174
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
10175
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
9987
10176
  }
9988
- @media screen and (min-width: 1200px) {
9989
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
9990
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9991
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9992
- }
9993
10177
 
9994
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
9995
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9996
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9997
- }
10178
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
10179
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
10180
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
10181
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
10182
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
9998
10183
  }
9999
- @media screen and (min-width: 1450px) {
10000
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
10001
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
10002
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
10003
- }
10004
10184
 
10005
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
10006
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
10007
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10008
- }
10185
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
10186
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
10009
10187
  }
10010
- @media screen and (min-width: 768px) {
10011
- .pf-c-data-list:not([class*=pf-m-grid]) {
10012
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10013
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10014
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10015
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10016
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10017
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10018
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10019
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10020
- }
10188
+
10189
+ .pf-c-data-list.pf-m-drag-over {
10190
+ overflow-anchor: none;
10021
10191
  }
10022
- @media screen and (min-width: 768px) and (min-width: 1200px) {
10023
- .pf-c-data-list:not([class*=pf-m-grid]) {
10024
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10025
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10026
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10027
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10028
- }
10192
+
10193
+ .pf-c-data-list.pf-m-truncate,
10194
+ .pf-c-data-list__item-row.pf-m-truncate,
10195
+ .pf-c-data-list__cell.pf-m-truncate,
10196
+ .pf-c-data-list__text.pf-m-truncate {
10197
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
10198
+ --pf-c-data-list--cell--Overflow: hidden;
10199
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
10200
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
10029
10201
  }
10030
- @media screen and (min-width: 768px) {
10031
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
10032
- display: flex;
10033
- flex-wrap: wrap;
10034
- flex-grow: 1;
10035
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10036
- }
10202
+
10203
+ .pf-c-data-list.pf-m-break-word,
10204
+ .pf-c-data-list__item-row.pf-m-break-word,
10205
+ .pf-c-data-list__cell.pf-m-break-word,
10206
+ .pf-c-data-list__text.pf-m-break-word {
10207
+ --pf-c-data-list--cell--WordBreak: break-word;
10037
10208
  }
10038
- @media screen and (min-width: 768px) {
10039
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10040
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10041
- }
10042
10209
 
10043
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
10044
- flex: 1;
10045
- order: initial;
10046
- }
10210
+ .pf-c-data-list.pf-m-nowrap,
10211
+ .pf-c-data-list__item-row.pf-m-nowrap,
10212
+ .pf-c-data-list__cell.pf-m-nowrap,
10213
+ .pf-c-data-list__text.pf-m-nowrap {
10214
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
10215
+ }
10047
10216
 
10048
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10049
- margin-left: auto;
10050
- }
10217
+ .pf-c-data-list__item {
10218
+ position: relative;
10219
+ display: flex;
10220
+ flex-direction: column;
10221
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
10222
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
10223
+ }
10051
10224
 
10052
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10053
- flex: none;
10054
- }
10225
+ .pf-c-data-list__item::before {
10226
+ position: absolute;
10227
+ top: var(--pf-c-data-list__item--before--Top);
10228
+ bottom: 0;
10229
+ left: 0;
10230
+ width: var(--pf-c-data-list__item--before--Width);
10231
+ content: "";
10232
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
10233
+ transition: var(--pf-c-data-list__item--before--Transition);
10234
+ }
10055
10235
 
10056
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10057
- flex-grow: 2;
10058
- }
10236
+ .pf-c-data-list__item.pf-m-selectable {
10237
+ cursor: pointer;
10238
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
10239
+ }
10059
10240
 
10060
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10061
- flex-grow: 3;
10062
- }
10241
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
10242
+ position: relative;
10243
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
10244
+ }
10063
10245
 
10064
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10065
- flex-grow: 4;
10066
- }
10246
+ .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) {
10247
+ --pf-c-data-list__item--BorderBottomWidth: 0;
10248
+ }
10067
10249
 
10068
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10069
- flex-grow: 5;
10070
- }
10250
+ .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 {
10251
+ 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);
10071
10252
  }
10072
- @media screen and (min-width: 768px) {
10073
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
10074
- max-height: initial;
10075
- overflow-y: visible;
10076
- }
10253
+
10254
+ .pf-c-data-list__item.pf-m-selectable:hover {
10255
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10077
10256
  }
10078
- @media screen and (min-width: 0) {
10079
- .pf-c-data-list.pf-m-grid-none {
10080
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10081
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10082
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10083
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10084
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10085
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10086
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10087
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10088
- }
10257
+
10258
+ .pf-c-data-list__item.pf-m-selectable:focus {
10259
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10089
10260
  }
10090
- @media screen and (min-width: 0) and (min-width: 1200px) {
10091
- .pf-c-data-list.pf-m-grid-none {
10092
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10093
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10094
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10095
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10096
- }
10261
+
10262
+ .pf-c-data-list__item.pf-m-selectable:active {
10263
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10097
10264
  }
10098
- @media screen and (min-width: 0) {
10099
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
10100
- display: flex;
10101
- flex-wrap: wrap;
10102
- flex-grow: 1;
10103
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10104
- }
10265
+
10266
+ .pf-c-data-list__item.pf-m-selected {
10267
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
10268
+ position: relative;
10269
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
10270
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
10105
10271
  }
10106
- @media screen and (min-width: 0) {
10107
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10108
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10109
- }
10110
10272
 
10111
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
10112
- flex: 1;
10113
- order: initial;
10114
- }
10273
+ .pf-c-data-list__item.pf-m-ghost-row::after {
10274
+ position: absolute;
10275
+ top: 0;
10276
+ right: 0;
10277
+ bottom: 0;
10278
+ left: 0;
10279
+ content: "";
10280
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
10281
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
10282
+ }
10115
10283
 
10116
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10117
- margin-left: auto;
10118
- }
10284
+ .pf-c-data-list__item.pf-m-expanded {
10285
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
10286
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
10287
+ }
10119
10288
 
10120
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10121
- flex: none;
10122
- }
10289
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
10290
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
10291
+ }
10123
10292
 
10124
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10125
- flex-grow: 2;
10126
- }
10293
+ .pf-c-data-list__item-row {
10294
+ display: flex;
10295
+ flex-wrap: nowrap;
10296
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
10297
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
10298
+ }
10127
10299
 
10128
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10129
- flex-grow: 3;
10130
- }
10300
+ .pf-c-data-list__item-control {
10301
+ display: flex;
10302
+ flex-wrap: nowrap;
10303
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
10304
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
10305
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
10306
+ }
10131
10307
 
10132
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10133
- flex-grow: 4;
10134
- }
10308
+ .pf-c-data-list__item-control > *:not(:last-child) {
10309
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
10310
+ }
10135
10311
 
10136
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
10137
- flex-grow: 5;
10138
- }
10312
+ .pf-c-data-list__check {
10313
+ display: flex;
10314
+ align-items: center;
10315
+ align-self: flex-start;
10316
+ height: var(--pf-c-data-list__check--Height);
10317
+ margin-top: var(--pf-c-data-list__check--MarginTop);
10139
10318
  }
10140
- @media screen and (min-width: 0) {
10141
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
10142
- max-height: initial;
10143
- overflow-y: visible;
10144
- }
10319
+
10320
+ .pf-c-data-list__check > input {
10321
+ cursor: pointer;
10145
10322
  }
10146
- @media screen and (min-width: 576px) {
10147
- .pf-c-data-list.pf-m-grid-sm {
10148
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10149
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10150
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10151
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10152
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10153
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10154
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10155
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10156
- }
10323
+
10324
+ .pf-c-data-list__item-draggable-button {
10325
+ display: flex;
10326
+ flex-direction: column;
10327
+ 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);
10328
+ 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);
10329
+ border: 0;
10157
10330
  }
10158
- @media screen and (min-width: 576px) and (min-width: 1200px) {
10159
- .pf-c-data-list.pf-m-grid-sm {
10160
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10161
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10162
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10163
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10164
- }
10331
+
10332
+ .pf-c-data-list__item-draggable-button:hover {
10333
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
10334
+ cursor: grab;
10165
10335
  }
10166
- @media screen and (min-width: 576px) {
10167
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
10168
- display: flex;
10169
- flex-wrap: wrap;
10170
- flex-grow: 1;
10171
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10172
- }
10336
+
10337
+ .pf-c-data-list__item-draggable-button:focus {
10338
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
10173
10339
  }
10174
- @media screen and (min-width: 576px) {
10175
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10176
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10177
- }
10178
10340
 
10179
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
10180
- flex: 1;
10181
- order: initial;
10182
- }
10341
+ .pf-c-data-list__item-draggable-button:active {
10342
+ cursor: grabbing;
10343
+ }
10183
10344
 
10184
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
10185
- margin-left: auto;
10186
- }
10345
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
10346
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
10347
+ pointer-events: none;
10348
+ }
10187
10349
 
10188
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
10189
- flex: none;
10190
- }
10350
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
10351
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
10352
+ }
10191
10353
 
10192
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
10193
- flex-grow: 2;
10194
- }
10354
+ .pf-c-data-list__item-action {
10355
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
10356
+ align-items: flex-start;
10357
+ align-content: flex-start;
10358
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
10359
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
10360
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
10361
+ }
10195
10362
 
10196
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
10197
- flex-grow: 3;
10198
- }
10363
+ .pf-c-data-list__item-action > *:not(:last-child) {
10364
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
10365
+ }
10199
10366
 
10200
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
10201
- flex-grow: 4;
10202
- }
10367
+ .pf-c-data-list__item-action .pf-c-data-list__action {
10368
+ margin-top: var(--pf-c-data-list__action--MarginTop);
10369
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
10370
+ }
10203
10371
 
10204
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
10205
- flex-grow: 5;
10206
- }
10372
+ .pf-c-data-list__toggle {
10373
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
10207
10374
  }
10208
- @media screen and (min-width: 576px) {
10209
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
10210
- max-height: initial;
10211
- overflow-y: visible;
10212
- }
10375
+
10376
+ .pf-c-data-list__toggle-icon {
10377
+ height: var(--pf-c-data-list__toggle-icon--Height);
10378
+ pointer-events: none;
10379
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
10380
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
10213
10381
  }
10214
- @media screen and (min-width: 768px) {
10215
- .pf-c-data-list.pf-m-grid-md {
10216
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10217
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10218
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10219
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10220
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10221
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10222
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10223
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10224
- }
10382
+
10383
+ .pf-c-data-list__item-content {
10384
+ display: grid;
10385
+ width: 100%;
10386
+ grid-template-columns: auto 1fr;
10225
10387
  }
10226
- @media screen and (min-width: 768px) and (min-width: 1200px) {
10227
- .pf-c-data-list.pf-m-grid-md {
10228
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10229
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10230
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10231
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10232
- }
10388
+
10389
+ .pf-c-data-list__cell {
10390
+ flex: 1;
10391
+ grid-column: 1/-1;
10392
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
10393
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
10233
10394
  }
10234
- @media screen and (min-width: 768px) {
10235
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
10236
- display: flex;
10237
- flex-wrap: wrap;
10238
- flex-grow: 1;
10239
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10240
- }
10395
+
10396
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
10397
+ flex: 1 0 100%;
10398
+ order: 1;
10399
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
10241
10400
  }
10242
- @media screen and (min-width: 768px) {
10243
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10244
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10245
- }
10246
10401
 
10247
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
10248
- flex: 1;
10249
- order: initial;
10250
- }
10402
+ .pf-c-data-list__cell.pf-m-icon {
10403
+ flex-grow: 0;
10404
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10405
+ grid-column: 1/2;
10406
+ }
10251
10407
 
10252
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10253
- margin-left: auto;
10254
- }
10408
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
10409
+ grid-column: 2/3;
10410
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
10411
+ }
10255
10412
 
10256
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10257
- flex: none;
10258
- }
10413
+ .pf-c-data-list__cell.pf-m-align-right {
10414
+ margin-left: 0;
10415
+ }
10259
10416
 
10260
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10261
- flex-grow: 2;
10262
- }
10417
+ .pf-c-data-list__text {
10418
+ display: inline-block;
10419
+ }
10263
10420
 
10264
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10265
- flex-grow: 3;
10266
- }
10421
+ .pf-c-data-list__text,
10422
+ .pf-c-data-list__cell {
10423
+ min-width: var(--pf-c-data-list--cell--MinWidth);
10424
+ max-width: 100%;
10425
+ overflow: var(--pf-c-data-list--cell--Overflow);
10426
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
10427
+ word-break: var(--pf-c-data-list--cell--WordBreak);
10428
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
10429
+ }
10267
10430
 
10268
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10269
- flex-grow: 4;
10270
- }
10431
+ .pf-c-data-list__expandable-content {
10432
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
10433
+ overflow-y: auto;
10434
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
10435
+ }
10271
10436
 
10272
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10273
- flex-grow: 5;
10274
- }
10437
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
10438
+ 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);
10275
10439
  }
10276
- @media screen and (min-width: 768px) {
10277
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
10278
- max-height: initial;
10279
- overflow-y: visible;
10280
- }
10440
+
10441
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10442
+ padding: 0;
10281
10443
  }
10282
- @media screen and (min-width: 992px) {
10283
- .pf-c-data-list.pf-m-grid-lg {
10444
+
10445
+ @media screen and (min-width: 768px) {
10446
+ .pf-c-data-list:not([class*=pf-m-grid]) {
10284
10447
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10285
10448
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10286
10449
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10291,64 +10454,64 @@ button.pf-c-breadcrumb__link {
10291
10454
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10292
10455
  }
10293
10456
  }
10294
- @media screen and (min-width: 992px) and (min-width: 1200px) {
10295
- .pf-c-data-list.pf-m-grid-lg {
10457
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
10458
+ .pf-c-data-list:not([class*=pf-m-grid]) {
10296
10459
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10297
10460
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10298
10461
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10299
10462
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10300
10463
  }
10301
10464
  }
10302
- @media screen and (min-width: 992px) {
10303
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10465
+ @media screen and (min-width: 768px) {
10466
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
10304
10467
  display: flex;
10305
10468
  flex-wrap: wrap;
10306
10469
  flex-grow: 1;
10307
10470
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10308
10471
  }
10309
10472
  }
10310
- @media screen and (min-width: 992px) {
10311
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10473
+ @media screen and (min-width: 768px) {
10474
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10312
10475
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10313
10476
  }
10314
10477
 
10315
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10478
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
10316
10479
  flex: 1;
10317
10480
  order: initial;
10318
10481
  }
10319
10482
 
10320
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10483
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10321
10484
  margin-left: auto;
10322
10485
  }
10323
10486
 
10324
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10487
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10325
10488
  flex: none;
10326
10489
  }
10327
10490
 
10328
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10491
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10329
10492
  flex-grow: 2;
10330
10493
  }
10331
10494
 
10332
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10495
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10333
10496
  flex-grow: 3;
10334
10497
  }
10335
10498
 
10336
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10499
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10337
10500
  flex-grow: 4;
10338
10501
  }
10339
10502
 
10340
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10503
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10341
10504
  flex-grow: 5;
10342
10505
  }
10343
10506
  }
10344
- @media screen and (min-width: 992px) {
10345
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10507
+ @media screen and (min-width: 768px) {
10508
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
10346
10509
  max-height: initial;
10347
10510
  overflow-y: visible;
10348
10511
  }
10349
10512
  }
10350
- @media screen and (min-width: 1200px) {
10351
- .pf-c-data-list.pf-m-grid-xl {
10513
+ @media screen and (min-width: 0) {
10514
+ .pf-c-data-list.pf-m-grid-none {
10352
10515
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10353
10516
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10354
10517
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10359,64 +10522,64 @@ button.pf-c-breadcrumb__link {
10359
10522
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10360
10523
  }
10361
10524
  }
10362
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
10363
- .pf-c-data-list.pf-m-grid-xl {
10525
+ @media screen and (min-width: 0) and (min-width: 1200px) {
10526
+ .pf-c-data-list.pf-m-grid-none {
10364
10527
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10365
10528
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10366
10529
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10367
10530
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10368
10531
  }
10369
10532
  }
10370
- @media screen and (min-width: 1200px) {
10371
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10533
+ @media screen and (min-width: 0) {
10534
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
10372
10535
  display: flex;
10373
10536
  flex-wrap: wrap;
10374
10537
  flex-grow: 1;
10375
10538
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10376
10539
  }
10377
10540
  }
10378
- @media screen and (min-width: 1200px) {
10379
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10541
+ @media screen and (min-width: 0) {
10542
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10380
10543
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10381
10544
  }
10382
10545
 
10383
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10546
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
10384
10547
  flex: 1;
10385
10548
  order: initial;
10386
10549
  }
10387
10550
 
10388
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10551
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10389
10552
  margin-left: auto;
10390
10553
  }
10391
10554
 
10392
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10555
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10393
10556
  flex: none;
10394
10557
  }
10395
10558
 
10396
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10559
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10397
10560
  flex-grow: 2;
10398
10561
  }
10399
10562
 
10400
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10563
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10401
10564
  flex-grow: 3;
10402
10565
  }
10403
10566
 
10404
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10567
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10405
10568
  flex-grow: 4;
10406
10569
  }
10407
10570
 
10408
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10571
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
10409
10572
  flex-grow: 5;
10410
10573
  }
10411
10574
  }
10412
- @media screen and (min-width: 1200px) {
10413
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10575
+ @media screen and (min-width: 0) {
10576
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
10414
10577
  max-height: initial;
10415
10578
  overflow-y: visible;
10416
10579
  }
10417
10580
  }
10418
- @media screen and (min-width: 1450px) {
10419
- .pf-c-data-list.pf-m-grid-2xl {
10581
+ @media screen and (min-width: 576px) {
10582
+ .pf-c-data-list.pf-m-grid-sm {
10420
10583
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10421
10584
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10422
10585
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10427,497 +10590,334 @@ button.pf-c-breadcrumb__link {
10427
10590
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10428
10591
  }
10429
10592
  }
10430
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
10431
- .pf-c-data-list.pf-m-grid-2xl {
10593
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
10594
+ .pf-c-data-list.pf-m-grid-sm {
10432
10595
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10433
10596
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10434
10597
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10435
10598
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10436
10599
  }
10437
10600
  }
10438
- @media screen and (min-width: 1450px) {
10439
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10440
- display: flex;
10441
- flex-wrap: wrap;
10442
- flex-grow: 1;
10443
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10444
- }
10445
- }
10446
- @media screen and (min-width: 1450px) {
10447
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10448
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10449
- }
10450
-
10451
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10452
- flex: 1;
10453
- order: initial;
10454
- }
10455
-
10456
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10457
- margin-left: auto;
10458
- }
10459
-
10460
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10461
- flex: none;
10462
- }
10463
-
10464
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10465
- flex-grow: 2;
10466
- }
10467
-
10468
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10469
- flex-grow: 3;
10470
- }
10471
-
10472
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10473
- flex-grow: 4;
10474
- }
10475
-
10476
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10477
- flex-grow: 5;
10478
- }
10479
- }
10480
- @media screen and (min-width: 1450px) {
10481
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
10482
- max-height: initial;
10483
- overflow-y: visible;
10484
- }
10485
- }
10486
- .pf-c-data-list {
10487
- --pf-c-data-list--FontSize: 1em;
10488
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
10489
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
10490
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
10491
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10492
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
10493
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
10494
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
10495
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
10496
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
10497
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10498
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
10499
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
10500
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10501
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10502
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10503
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
10504
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
10505
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
10506
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
10507
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
10508
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10509
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
10510
- --pf-c-data-list__item--before--BackgroundColor: transparent;
10511
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
10512
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
10513
- --pf-c-data-list__item--before--Top: 0;
10514
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10515
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
10516
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
10517
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
10518
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
10519
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
10520
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
10521
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
10522
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
10523
- --pf-c-data-list__cell--md--PaddingBottom: 0;
10524
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
10525
- --pf-c-data-list__cell--cell--PaddingTop: 0;
10526
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
10527
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
10528
- --pf-c-data-list--cell--MinWidth: initial;
10529
- --pf-c-data-list--cell--Overflow: visible;
10530
- --pf-c-data-list--cell--TextOverflow: clip;
10531
- --pf-c-data-list--cell--WhiteSpace: normal;
10532
- --pf-c-data-list--cell--WordBreak: normal;
10533
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
10534
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
10535
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10536
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10537
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10538
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10539
- --pf-c-data-list__toggle-icon--Rotate: 0;
10540
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
10541
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
10542
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
10543
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
10544
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
10545
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
10546
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
10547
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
10548
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
10549
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
10550
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10551
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10552
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
10553
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
10554
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
10555
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
10556
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
10557
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
10558
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
10559
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10560
- --pf-c-data-list__check--MarginTop: -0.0625rem;
10561
- --pf-c-data-list__item-action--Display: flex;
10562
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
10563
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
10564
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
10565
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
10566
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
10567
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10568
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
10569
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10570
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10571
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
10572
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
10573
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
10574
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
10575
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10576
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
10577
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
10578
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
10579
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
10580
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
10581
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
10582
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
10583
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
10584
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
10585
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
10586
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
10587
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
10588
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
10589
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
10590
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
10591
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
10592
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
10593
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
10594
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
10595
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
10596
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
10597
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
10598
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
10599
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
10600
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
10601
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10602
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
10603
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10604
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
10605
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
10606
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
10607
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
10608
- color: var(--pf-global--Color--100);
10609
- font-size: var(--pf-c-data-list--FontSize);
10610
- line-height: var(--pf-c-data-list--LineHeight);
10611
- overflow-wrap: break-word;
10612
- list-style-type: disc;
10613
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
10614
- }
10615
-
10616
10601
  @media screen and (min-width: 576px) {
10617
- .pf-c-data-list {
10618
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
10619
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
10602
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
10603
+ display: flex;
10604
+ flex-wrap: wrap;
10605
+ flex-grow: 1;
10606
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10620
10607
  }
10621
10608
  }
10622
10609
  @media screen and (min-width: 576px) {
10623
- .pf-c-data-list {
10624
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
10625
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
10610
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10611
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10626
10612
  }
10627
- }
10628
- @media (min-width: 576px) {
10629
- .pf-c-data-list {
10630
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
10613
+
10614
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
10615
+ flex: 1;
10616
+ order: initial;
10631
10617
  }
10632
- }
10633
- .pf-c-data-list.pf-m-compact {
10634
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
10635
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
10636
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
10637
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
10638
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
10639
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
10640
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10641
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
10642
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
10643
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
10644
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
10645
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
10646
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
10647
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
10648
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
10649
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
10650
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
10651
- font-size: var(--pf-c-data-list--m-compact--FontSize);
10652
- }
10653
10618
 
10654
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
10655
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
10656
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
10657
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
10658
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
10659
- }
10619
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
10620
+ margin-left: auto;
10621
+ }
10660
10622
 
10661
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
10662
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
10663
- }
10623
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
10624
+ flex: none;
10625
+ }
10664
10626
 
10665
- .pf-c-data-list.pf-m-drag-over {
10666
- overflow-anchor: none;
10667
- }
10627
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
10628
+ flex-grow: 2;
10629
+ }
10668
10630
 
10669
- .pf-c-data-list.pf-m-truncate,
10670
- .pf-c-data-list__item-row.pf-m-truncate,
10671
- .pf-c-data-list__cell.pf-m-truncate,
10672
- .pf-c-data-list__text.pf-m-truncate {
10673
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
10674
- --pf-c-data-list--cell--Overflow: hidden;
10675
- --pf-c-data-list--cell--TextOverflow: ellipsis;
10676
- --pf-c-data-list--cell--WhiteSpace: nowrap;
10677
- }
10631
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
10632
+ flex-grow: 3;
10633
+ }
10678
10634
 
10679
- .pf-c-data-list.pf-m-break-word,
10680
- .pf-c-data-list__item-row.pf-m-break-word,
10681
- .pf-c-data-list__cell.pf-m-break-word,
10682
- .pf-c-data-list__text.pf-m-break-word {
10683
- --pf-c-data-list--cell--WordBreak: break-word;
10684
- }
10635
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
10636
+ flex-grow: 4;
10637
+ }
10685
10638
 
10686
- .pf-c-data-list.pf-m-nowrap,
10687
- .pf-c-data-list__item-row.pf-m-nowrap,
10688
- .pf-c-data-list__cell.pf-m-nowrap,
10689
- .pf-c-data-list__text.pf-m-nowrap {
10690
- --pf-c-data-list--cell--WhiteSpace: nowrap;
10639
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
10640
+ flex-grow: 5;
10641
+ }
10691
10642
  }
10692
-
10693
- .pf-c-data-list__item {
10694
- position: relative;
10695
- display: flex;
10696
- flex-direction: column;
10697
- background-color: var(--pf-c-data-list__item--BackgroundColor);
10698
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
10643
+ @media screen and (min-width: 576px) {
10644
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
10645
+ max-height: initial;
10646
+ overflow-y: visible;
10647
+ }
10699
10648
  }
10700
-
10701
- .pf-c-data-list__item::before {
10702
- position: absolute;
10703
- top: var(--pf-c-data-list__item--before--Top);
10704
- bottom: 0;
10705
- left: 0;
10706
- width: var(--pf-c-data-list__item--before--Width);
10707
- content: "";
10708
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
10709
- transition: var(--pf-c-data-list__item--before--Transition);
10649
+ @media screen and (min-width: 768px) {
10650
+ .pf-c-data-list.pf-m-grid-md {
10651
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10652
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10653
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10654
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10655
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10656
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10657
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10658
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10659
+ }
10710
10660
  }
10711
-
10712
- .pf-c-data-list__item.pf-m-selectable {
10713
- cursor: pointer;
10714
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
10661
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
10662
+ .pf-c-data-list.pf-m-grid-md {
10663
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10664
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10665
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10666
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10667
+ }
10715
10668
  }
10716
-
10717
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
10718
- position: relative;
10719
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
10669
+ @media screen and (min-width: 768px) {
10670
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
10671
+ display: flex;
10672
+ flex-wrap: wrap;
10673
+ flex-grow: 1;
10674
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10675
+ }
10720
10676
  }
10677
+ @media screen and (min-width: 768px) {
10678
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10679
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10680
+ }
10721
10681
 
10722
- .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) {
10723
- --pf-c-data-list__item--BorderBottomWidth: 0;
10724
- }
10682
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
10683
+ flex: 1;
10684
+ order: initial;
10685
+ }
10725
10686
 
10726
- .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 {
10727
- 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);
10728
- }
10687
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10688
+ margin-left: auto;
10689
+ }
10729
10690
 
10730
- .pf-c-data-list__item.pf-m-selectable:hover {
10731
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10732
- }
10691
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10692
+ flex: none;
10693
+ }
10733
10694
 
10734
- .pf-c-data-list__item.pf-m-selectable:focus {
10735
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10736
- }
10695
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10696
+ flex-grow: 2;
10697
+ }
10737
10698
 
10738
- .pf-c-data-list__item.pf-m-selectable:active {
10739
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10740
- }
10699
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10700
+ flex-grow: 3;
10701
+ }
10741
10702
 
10742
- .pf-c-data-list__item.pf-m-selected {
10743
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
10744
- position: relative;
10745
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
10746
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
10747
- }
10703
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10704
+ flex-grow: 4;
10705
+ }
10748
10706
 
10749
- .pf-c-data-list__item.pf-m-ghost-row::after {
10750
- position: absolute;
10751
- top: 0;
10752
- right: 0;
10753
- bottom: 0;
10754
- left: 0;
10755
- content: "";
10756
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
10757
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
10707
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10708
+ flex-grow: 5;
10709
+ }
10758
10710
  }
10759
-
10760
- .pf-c-data-list__item.pf-m-expanded {
10761
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
10762
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
10711
+ @media screen and (min-width: 768px) {
10712
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
10713
+ max-height: initial;
10714
+ overflow-y: visible;
10715
+ }
10763
10716
  }
10764
-
10765
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
10766
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
10717
+ @media screen and (min-width: 992px) {
10718
+ .pf-c-data-list.pf-m-grid-lg {
10719
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10720
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10721
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10722
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10723
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10724
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10725
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10726
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10727
+ }
10728
+ }
10729
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
10730
+ .pf-c-data-list.pf-m-grid-lg {
10731
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10732
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10733
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10734
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10735
+ }
10736
+ }
10737
+ @media screen and (min-width: 992px) {
10738
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10739
+ display: flex;
10740
+ flex-wrap: wrap;
10741
+ flex-grow: 1;
10742
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10743
+ }
10767
10744
  }
10745
+ @media screen and (min-width: 992px) {
10746
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10747
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10748
+ }
10749
+
10750
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10751
+ flex: 1;
10752
+ order: initial;
10753
+ }
10754
+
10755
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10756
+ margin-left: auto;
10757
+ }
10768
10758
 
10769
- .pf-c-data-list__item-row {
10770
- display: flex;
10771
- flex-wrap: nowrap;
10772
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
10773
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
10774
- }
10759
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10760
+ flex: none;
10761
+ }
10775
10762
 
10776
- .pf-c-data-list__item-control {
10777
- display: flex;
10778
- flex-wrap: nowrap;
10779
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
10780
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
10781
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
10782
- }
10763
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10764
+ flex-grow: 2;
10765
+ }
10783
10766
 
10784
- .pf-c-data-list__item-control > *:not(:last-child) {
10785
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
10786
- }
10767
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10768
+ flex-grow: 3;
10769
+ }
10787
10770
 
10788
- .pf-c-data-list__check {
10789
- display: flex;
10790
- align-items: center;
10791
- align-self: flex-start;
10792
- height: var(--pf-c-data-list__check--Height);
10793
- margin-top: var(--pf-c-data-list__check--MarginTop);
10794
- }
10771
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10772
+ flex-grow: 4;
10773
+ }
10795
10774
 
10796
- .pf-c-data-list__check > input {
10797
- cursor: pointer;
10775
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10776
+ flex-grow: 5;
10777
+ }
10798
10778
  }
10799
-
10800
- .pf-c-data-list__item-draggable-button {
10801
- display: flex;
10802
- flex-direction: column;
10803
- 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);
10804
- 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);
10805
- border: 0;
10779
+ @media screen and (min-width: 992px) {
10780
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10781
+ max-height: initial;
10782
+ overflow-y: visible;
10783
+ }
10806
10784
  }
10807
-
10808
- .pf-c-data-list__item-draggable-button:hover {
10809
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
10810
- cursor: grab;
10785
+ @media screen and (min-width: 1200px) {
10786
+ .pf-c-data-list.pf-m-grid-xl {
10787
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10788
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10789
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10790
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10791
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10792
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10793
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10794
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10795
+ }
10811
10796
  }
10812
-
10813
- .pf-c-data-list__item-draggable-button:focus {
10814
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
10797
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
10798
+ .pf-c-data-list.pf-m-grid-xl {
10799
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10800
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10801
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10802
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10803
+ }
10815
10804
  }
10816
-
10817
- .pf-c-data-list__item-draggable-button:active {
10818
- cursor: grabbing;
10805
+ @media screen and (min-width: 1200px) {
10806
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10807
+ display: flex;
10808
+ flex-wrap: wrap;
10809
+ flex-grow: 1;
10810
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10811
+ }
10819
10812
  }
10813
+ @media screen and (min-width: 1200px) {
10814
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10815
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10816
+ }
10820
10817
 
10821
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
10822
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
10823
- pointer-events: none;
10824
- }
10818
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10819
+ flex: 1;
10820
+ order: initial;
10821
+ }
10825
10822
 
10826
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
10827
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
10828
- }
10823
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10824
+ margin-left: auto;
10825
+ }
10829
10826
 
10830
- .pf-c-data-list__item-action {
10831
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
10832
- align-items: flex-start;
10833
- align-content: flex-start;
10834
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
10835
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
10836
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
10837
- }
10827
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10828
+ flex: none;
10829
+ }
10838
10830
 
10839
- .pf-c-data-list__item-action > *:not(:last-child) {
10840
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
10841
- }
10831
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10832
+ flex-grow: 2;
10833
+ }
10842
10834
 
10843
- .pf-c-data-list__item-action .pf-c-data-list__action {
10844
- margin-top: var(--pf-c-data-list__action--MarginTop);
10845
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
10846
- }
10835
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10836
+ flex-grow: 3;
10837
+ }
10847
10838
 
10848
- .pf-c-data-list__toggle {
10849
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
10850
- }
10839
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10840
+ flex-grow: 4;
10841
+ }
10851
10842
 
10852
- .pf-c-data-list__toggle-icon {
10853
- height: var(--pf-c-data-list__toggle-icon--Height);
10854
- pointer-events: none;
10855
- transition: var(--pf-c-data-list__toggle-icon--Transition);
10856
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
10843
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10844
+ flex-grow: 5;
10845
+ }
10857
10846
  }
10858
-
10859
- .pf-c-data-list__item-content {
10860
- display: grid;
10861
- width: 100%;
10862
- grid-template-columns: auto 1fr;
10847
+ @media screen and (min-width: 1200px) {
10848
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10849
+ max-height: initial;
10850
+ overflow-y: visible;
10851
+ }
10863
10852
  }
10864
-
10865
- .pf-c-data-list__cell {
10866
- flex: 1;
10867
- grid-column: 1/-1;
10868
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
10869
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
10853
+ @media screen and (min-width: 1450px) {
10854
+ .pf-c-data-list.pf-m-grid-2xl {
10855
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10856
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10857
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10858
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10859
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10860
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10861
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10862
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10863
+ }
10870
10864
  }
10871
-
10872
- .pf-c-data-list__cell + .pf-c-data-list__cell {
10873
- flex: 1 0 100%;
10874
- order: 1;
10875
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
10865
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
10866
+ .pf-c-data-list.pf-m-grid-2xl {
10867
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10868
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10869
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10870
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10871
+ }
10876
10872
  }
10877
-
10878
- .pf-c-data-list__cell.pf-m-icon {
10879
- flex-grow: 0;
10880
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10881
- grid-column: 1/2;
10873
+ @media screen and (min-width: 1450px) {
10874
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10875
+ display: flex;
10876
+ flex-wrap: wrap;
10877
+ flex-grow: 1;
10878
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10879
+ }
10882
10880
  }
10881
+ @media screen and (min-width: 1450px) {
10882
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10883
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10884
+ }
10883
10885
 
10884
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
10885
- grid-column: 2/3;
10886
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
10887
- }
10886
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10887
+ flex: 1;
10888
+ order: initial;
10889
+ }
10888
10890
 
10889
- .pf-c-data-list__cell.pf-m-align-right {
10890
- margin-left: 0;
10891
- }
10891
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10892
+ margin-left: auto;
10893
+ }
10892
10894
 
10893
- .pf-c-data-list__text {
10894
- display: inline-block;
10895
- }
10895
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10896
+ flex: none;
10897
+ }
10896
10898
 
10897
- .pf-c-data-list__text,
10898
- .pf-c-data-list__cell {
10899
- min-width: var(--pf-c-data-list--cell--MinWidth);
10900
- max-width: 100%;
10901
- overflow: var(--pf-c-data-list--cell--Overflow);
10902
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
10903
- word-break: var(--pf-c-data-list--cell--WordBreak);
10904
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
10905
- }
10899
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10900
+ flex-grow: 2;
10901
+ }
10906
10902
 
10907
- .pf-c-data-list__expandable-content {
10908
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
10909
- overflow-y: auto;
10910
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
10911
- }
10903
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10904
+ flex-grow: 3;
10905
+ }
10912
10906
 
10913
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
10914
- 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);
10915
- }
10907
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10908
+ flex-grow: 4;
10909
+ }
10916
10910
 
10917
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10918
- padding: 0;
10911
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10912
+ flex-grow: 5;
10913
+ }
10914
+ }
10915
+ @media screen and (min-width: 1450px) {
10916
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
10917
+ max-height: initial;
10918
+ overflow-y: visible;
10919
+ }
10919
10920
  }
10920
-
10921
10921
  .pf-c-date-picker {
10922
10922
  --pf-c-date-picker--m-top__calendar--Top: 0;
10923
10923
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));