@patternfly/react-table 4.61.16 → 4.61.17

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.
@@ -9451,86 +9451,6 @@ 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
- }
9534
9454
  @media screen and (min-width: 768px) {
9535
9455
  .pf-c-data-list:not([class*=pf-m-grid]) {
9536
9456
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -10008,561 +9928,206 @@ button.pf-c-breadcrumb__link {
10008
9928
  }
10009
9929
  }
10010
9930
  .pf-c-data-list {
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);
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);
10138
9938
  }
10139
9939
 
10140
- @media screen and (min-width: 576px) {
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);
10144
- }
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);
10145
9953
  }
9954
+
10146
9955
  @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);
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);
10150
9964
  }
10151
9965
  }
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);
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);
9970
+ }
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);
10155
9975
  }
10156
9976
  }
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);
10176
- }
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
+ }
10177
9982
 
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);
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
+ }
10183
9987
  }
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
+ }
10184
9993
 
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);
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
+ }
10187
9998
  }
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
+ }
10188
10004
 
10189
- .pf-c-data-list.pf-m-drag-over {
10190
- overflow-anchor: none;
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
+ }
10191
10009
  }
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;
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
+ }
10201
10021
  }
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;
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
+ }
10208
10029
  }
10209
-
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;
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
+ }
10215
10037
  }
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
+ }
10216
10042
 
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
- }
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
+ }
10224
10047
 
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
- }
10048
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10049
+ margin-left: auto;
10050
+ }
10235
10051
 
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
- }
10052
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10053
+ flex: none;
10054
+ }
10240
10055
 
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
- }
10056
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10057
+ flex-grow: 2;
10058
+ }
10245
10059
 
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
- }
10060
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10061
+ flex-grow: 3;
10062
+ }
10249
10063
 
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);
10252
- }
10064
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10065
+ flex-grow: 4;
10066
+ }
10253
10067
 
10254
- .pf-c-data-list__item.pf-m-selectable:hover {
10255
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10068
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10069
+ flex-grow: 5;
10070
+ }
10256
10071
  }
10257
-
10258
- .pf-c-data-list__item.pf-m-selectable:focus {
10259
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
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
+ }
10260
10077
  }
10261
-
10262
- .pf-c-data-list__item.pf-m-selectable:active {
10263
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
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
+ }
10264
10089
  }
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);
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
+ }
10271
10097
  }
10272
-
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);
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
+ }
10282
10105
  }
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
+ }
10283
10110
 
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
- }
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
+ }
10288
10115
 
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
- }
10116
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10117
+ margin-left: auto;
10118
+ }
10292
10119
 
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
- }
10120
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10121
+ flex: none;
10122
+ }
10299
10123
 
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
- }
10124
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10125
+ flex-grow: 2;
10126
+ }
10307
10127
 
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
- }
10311
-
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);
10318
- }
10319
-
10320
- .pf-c-data-list__check > input {
10321
- cursor: pointer;
10322
- }
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;
10330
- }
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;
10335
- }
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);
10339
- }
10340
-
10341
- .pf-c-data-list__item-draggable-button:active {
10342
- cursor: grabbing;
10343
- }
10344
-
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
- }
10349
-
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
- }
10353
-
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
- }
10362
-
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
- }
10366
-
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
- }
10371
-
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);
10374
- }
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));
10381
- }
10382
-
10383
- .pf-c-data-list__item-content {
10384
- display: grid;
10385
- width: 100%;
10386
- grid-template-columns: auto 1fr;
10387
- }
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);
10394
- }
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);
10400
- }
10401
-
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
- }
10407
-
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
- }
10412
-
10413
- .pf-c-data-list__cell.pf-m-align-right {
10414
- margin-left: 0;
10415
- }
10416
-
10417
- .pf-c-data-list__text {
10418
- display: inline-block;
10419
- }
10420
-
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
- }
10430
-
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
- }
10436
-
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);
10439
- }
10440
-
10441
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10442
- padding: 0;
10443
- }
10444
-
10445
- @media screen and (min-width: 768px) {
10446
- .pf-c-data-list:not([class*=pf-m-grid]) {
10447
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10448
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10449
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10450
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10451
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10452
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10453
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10454
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10455
- }
10456
- }
10457
- @media screen and (min-width: 768px) and (min-width: 1200px) {
10458
- .pf-c-data-list:not([class*=pf-m-grid]) {
10459
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10460
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10461
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10462
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10463
- }
10464
- }
10465
- @media screen and (min-width: 768px) {
10466
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
10467
- display: flex;
10468
- flex-wrap: wrap;
10469
- flex-grow: 1;
10470
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10471
- }
10472
- }
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) {
10475
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10476
- }
10477
-
10478
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
10479
- flex: 1;
10480
- order: initial;
10481
- }
10482
-
10483
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10484
- margin-left: auto;
10485
- }
10486
-
10487
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10488
- flex: none;
10489
- }
10490
-
10491
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10492
- flex-grow: 2;
10493
- }
10494
-
10495
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10496
- flex-grow: 3;
10497
- }
10498
-
10499
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10500
- flex-grow: 4;
10501
- }
10502
-
10503
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10504
- flex-grow: 5;
10505
- }
10506
- }
10507
- @media screen and (min-width: 768px) {
10508
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
10509
- max-height: initial;
10510
- overflow-y: visible;
10511
- }
10512
- }
10513
- @media screen and (min-width: 0) {
10514
- .pf-c-data-list.pf-m-grid-none {
10515
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10516
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10517
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10518
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10519
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10520
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10521
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10522
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10523
- }
10524
- }
10525
- @media screen and (min-width: 0) and (min-width: 1200px) {
10526
- .pf-c-data-list.pf-m-grid-none {
10527
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10528
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10529
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10530
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10531
- }
10532
- }
10533
- @media screen and (min-width: 0) {
10534
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
10535
- display: flex;
10536
- flex-wrap: wrap;
10537
- flex-grow: 1;
10538
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10539
- }
10540
- }
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) {
10543
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10544
- }
10545
-
10546
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
10547
- flex: 1;
10548
- order: initial;
10549
- }
10550
-
10551
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10552
- margin-left: auto;
10553
- }
10554
-
10555
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10556
- flex: none;
10557
- }
10558
-
10559
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10560
- flex-grow: 2;
10561
- }
10562
-
10563
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10564
- flex-grow: 3;
10565
- }
10128
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10129
+ flex-grow: 3;
10130
+ }
10566
10131
 
10567
10132
  .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10568
10133
  flex-grow: 4;
@@ -10760,164 +10325,599 @@ button.pf-c-breadcrumb__link {
10760
10325
  flex: none;
10761
10326
  }
10762
10327
 
10763
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10764
- flex-grow: 2;
10765
- }
10328
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10329
+ flex-grow: 2;
10330
+ }
10331
+
10332
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10333
+ flex-grow: 3;
10334
+ }
10335
+
10336
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10337
+ flex-grow: 4;
10338
+ }
10339
+
10340
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10341
+ flex-grow: 5;
10342
+ }
10343
+ }
10344
+ @media screen and (min-width: 992px) {
10345
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10346
+ max-height: initial;
10347
+ overflow-y: visible;
10348
+ }
10349
+ }
10350
+ @media screen and (min-width: 1200px) {
10351
+ .pf-c-data-list.pf-m-grid-xl {
10352
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10353
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10354
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10355
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10356
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10357
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10358
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10359
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10360
+ }
10361
+ }
10362
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
10363
+ .pf-c-data-list.pf-m-grid-xl {
10364
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10365
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10366
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10367
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10368
+ }
10369
+ }
10370
+ @media screen and (min-width: 1200px) {
10371
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10372
+ display: flex;
10373
+ flex-wrap: wrap;
10374
+ flex-grow: 1;
10375
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10376
+ }
10377
+ }
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) {
10380
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10381
+ }
10382
+
10383
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10384
+ flex: 1;
10385
+ order: initial;
10386
+ }
10387
+
10388
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10389
+ margin-left: auto;
10390
+ }
10391
+
10392
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10393
+ flex: none;
10394
+ }
10395
+
10396
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10397
+ flex-grow: 2;
10398
+ }
10399
+
10400
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10401
+ flex-grow: 3;
10402
+ }
10403
+
10404
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10405
+ flex-grow: 4;
10406
+ }
10407
+
10408
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10409
+ flex-grow: 5;
10410
+ }
10411
+ }
10412
+ @media screen and (min-width: 1200px) {
10413
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10414
+ max-height: initial;
10415
+ overflow-y: visible;
10416
+ }
10417
+ }
10418
+ @media screen and (min-width: 1450px) {
10419
+ .pf-c-data-list.pf-m-grid-2xl {
10420
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10421
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10422
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10423
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10424
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10425
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10426
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10427
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10428
+ }
10429
+ }
10430
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
10431
+ .pf-c-data-list.pf-m-grid-2xl {
10432
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10433
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10434
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10435
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10436
+ }
10437
+ }
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
+ @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);
10620
+ }
10621
+ }
10622
+ @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);
10626
+ }
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);
10631
+ }
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
+
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
+ }
10660
+
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
+ }
10664
+
10665
+ .pf-c-data-list.pf-m-drag-over {
10666
+ overflow-anchor: none;
10667
+ }
10668
+
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
+ }
10678
+
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
+ }
10685
+
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;
10691
+ }
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);
10699
+ }
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);
10710
+ }
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);
10715
+ }
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);
10720
+ }
10721
+
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
+ }
10725
+
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
+ }
10729
+
10730
+ .pf-c-data-list__item.pf-m-selectable:hover {
10731
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10732
+ }
10733
+
10734
+ .pf-c-data-list__item.pf-m-selectable:focus {
10735
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10736
+ }
10737
+
10738
+ .pf-c-data-list__item.pf-m-selectable:active {
10739
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10740
+ }
10741
+
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
+ }
10748
+
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);
10758
+ }
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);
10763
+ }
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);
10767
+ }
10766
10768
 
10767
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10768
- flex-grow: 3;
10769
- }
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
+ }
10770
10775
 
10771
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10772
- flex-grow: 4;
10773
- }
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
+ }
10774
10783
 
10775
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10776
- flex-grow: 5;
10777
- }
10784
+ .pf-c-data-list__item-control > *:not(:last-child) {
10785
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
10778
10786
  }
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
- }
10787
+
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);
10784
10794
  }
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
- }
10795
+
10796
+ .pf-c-data-list__check > input {
10797
+ cursor: pointer;
10796
10798
  }
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
- }
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;
10804
10806
  }
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
- }
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;
10812
10811
  }
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
- }
10817
10812
 
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
- }
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);
10815
+ }
10822
10816
 
10823
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10824
- margin-left: auto;
10825
- }
10817
+ .pf-c-data-list__item-draggable-button:active {
10818
+ cursor: grabbing;
10819
+ }
10826
10820
 
10827
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10828
- flex: none;
10829
- }
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
+ }
10830
10825
 
10831
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10832
- flex-grow: 2;
10833
- }
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
+ }
10834
10829
 
10835
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10836
- flex-grow: 3;
10837
- }
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
+ }
10838
10838
 
10839
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10840
- flex-grow: 4;
10841
- }
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
+ }
10842
10842
 
10843
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10844
- flex-grow: 5;
10845
- }
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
10846
  }
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
- }
10847
+
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);
10852
10850
  }
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
- }
10851
+
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));
10864
10857
  }
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
- }
10858
+
10859
+ .pf-c-data-list__item-content {
10860
+ display: grid;
10861
+ width: 100%;
10862
+ grid-template-columns: auto 1fr;
10872
10863
  }
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
- }
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);
10880
10870
  }
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
- }
10885
10871
 
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
- }
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);
10876
+ }
10890
10877
 
10891
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10892
- margin-left: auto;
10893
- }
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;
10882
+ }
10894
10883
 
10895
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10896
- flex: none;
10897
- }
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
+ }
10898
10888
 
10899
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10900
- flex-grow: 2;
10901
- }
10889
+ .pf-c-data-list__cell.pf-m-align-right {
10890
+ margin-left: 0;
10891
+ }
10902
10892
 
10903
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10904
- flex-grow: 3;
10905
- }
10893
+ .pf-c-data-list__text {
10894
+ display: inline-block;
10895
+ }
10906
10896
 
10907
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10908
- flex-grow: 4;
10909
- }
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
+ }
10910
10906
 
10911
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10912
- flex-grow: 5;
10913
- }
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);
10914
10911
  }
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
- }
10912
+
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
+ }
10916
+
10917
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10918
+ padding: 0;
10920
10919
  }
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));