@patternfly/react-table 4.53.0 → 4.53.1

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