@patternfly/react-table 4.51.2 → 4.51.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/umd/react-table.css +754 -754
  3. package/package.json +6 -6
package/dist/umd/react-table.css CHANGED
@@ -9408,6 +9408,86 @@ 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
+ }
9411
9491
  @media screen and (min-width: 768px) {
9412
9492
  .pf-c-data-list:not([class*=pf-m-grid]) {
9413
9493
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -9885,359 +9965,442 @@ button.pf-c-breadcrumb__link {
9885
9965
  }
9886
9966
  }
9887
9967
  .pf-c-data-list {
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);
9895
- }
9896
-
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);
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);
9910
10095
  }
9911
10096
 
9912
10097
  @media screen and (min-width: 576px) {
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);
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);
9921
10101
  }
9922
10102
  }
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);
10103
+ @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);
9927
10107
  }
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);
10108
+ }
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);
9932
10112
  }
9933
10113
  }
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
- }
9939
-
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
- }
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);
9944
10133
  }
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
- }
9950
10134
 
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
- }
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);
9955
10140
  }
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
- }
9961
10141
 
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
- }
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);
9966
10144
  }
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
- }
10145
+
10146
+ .pf-c-data-list.pf-m-drag-over {
10147
+ overflow-anchor: none;
9978
10148
  }
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
- }
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;
9986
10158
  }
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
- }
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;
9994
10165
  }
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
- }
9999
10166
 
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
- }
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;
10172
+ }
10004
10173
 
10005
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10006
- margin-left: auto;
10007
- }
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
+ }
10008
10181
 
10009
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10010
- flex: none;
10011
- }
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
+ }
10012
10192
 
10013
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10014
- flex-grow: 2;
10015
- }
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
+ }
10016
10197
 
10017
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10018
- flex-grow: 3;
10019
- }
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
+ }
10020
10202
 
10021
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10022
- flex-grow: 4;
10023
- }
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
+ }
10024
10206
 
10025
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10026
- flex-grow: 5;
10027
- }
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);
10028
10209
  }
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
- }
10210
+
10211
+ .pf-c-data-list__item.pf-m-selectable:hover {
10212
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10034
10213
  }
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
- }
10214
+
10215
+ .pf-c-data-list__item.pf-m-selectable:focus {
10216
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10046
10217
  }
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
- }
10218
+
10219
+ .pf-c-data-list__item.pf-m-selectable:active {
10220
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10054
10221
  }
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
- }
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);
10062
10228
  }
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
- }
10067
10229
 
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
- }
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);
10239
+ }
10072
10240
 
10073
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10074
- margin-left: auto;
10075
- }
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
+ }
10076
10245
 
10077
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10078
- flex: none;
10079
- }
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
+ }
10080
10249
 
10081
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10082
- flex-grow: 2;
10083
- }
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
+ }
10084
10256
 
10085
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10086
- flex-grow: 3;
10087
- }
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
+ }
10088
10264
 
10089
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10090
- flex-grow: 4;
10091
- }
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
+ }
10092
10268
 
10093
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
10094
- flex-grow: 5;
10095
- }
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);
10096
10275
  }
10097
- @media screen and (min-width: 0) {
10098
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
10099
- max-height: initial;
10100
- overflow-y: visible;
10101
- }
10276
+
10277
+ .pf-c-data-list__check > input {
10278
+ cursor: pointer;
10102
10279
  }
10103
- @media screen and (min-width: 576px) {
10104
- .pf-c-data-list.pf-m-grid-sm {
10105
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10106
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10107
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10108
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10109
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10110
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10111
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10112
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10113
- }
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;
10114
10287
  }
10115
- @media screen and (min-width: 576px) and (min-width: 1200px) {
10116
- .pf-c-data-list.pf-m-grid-sm {
10117
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10118
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10119
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10120
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10121
- }
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;
10122
10292
  }
10123
- @media screen and (min-width: 576px) {
10124
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
10125
- display: flex;
10126
- flex-wrap: wrap;
10127
- flex-grow: 1;
10128
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10129
- }
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);
10130
10296
  }
10131
- @media screen and (min-width: 576px) {
10132
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10133
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10134
- }
10135
10297
 
10136
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
10137
- flex: 1;
10138
- order: initial;
10139
- }
10298
+ .pf-c-data-list__item-draggable-button:active {
10299
+ cursor: grabbing;
10300
+ }
10140
10301
 
10141
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
10142
- margin-left: auto;
10143
- }
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
+ }
10144
10306
 
10145
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
10146
- flex: none;
10147
- }
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
+ }
10148
10310
 
10149
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
10150
- flex-grow: 2;
10151
- }
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
+ }
10152
10319
 
10153
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
10154
- flex-grow: 3;
10155
- }
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
+ }
10156
10323
 
10157
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
10158
- flex-grow: 4;
10159
- }
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
+ }
10160
10328
 
10161
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
10162
- flex-grow: 5;
10163
- }
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);
10164
10331
  }
10165
- @media screen and (min-width: 576px) {
10166
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
10167
- max-height: initial;
10168
- overflow-y: visible;
10169
- }
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));
10170
10338
  }
10171
- @media screen and (min-width: 768px) {
10172
- .pf-c-data-list.pf-m-grid-md {
10173
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10174
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10175
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10176
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10177
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10178
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10179
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10180
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10181
- }
10339
+
10340
+ .pf-c-data-list__item-content {
10341
+ display: grid;
10342
+ width: 100%;
10343
+ grid-template-columns: auto 1fr;
10182
10344
  }
10183
- @media screen and (min-width: 768px) and (min-width: 1200px) {
10184
- .pf-c-data-list.pf-m-grid-md {
10185
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10186
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10187
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10188
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10189
- }
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);
10190
10351
  }
10191
- @media screen and (min-width: 768px) {
10192
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
10193
- display: flex;
10194
- flex-wrap: wrap;
10195
- flex-grow: 1;
10196
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10197
- }
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);
10198
10357
  }
10199
- @media screen and (min-width: 768px) {
10200
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10201
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10202
- }
10203
10358
 
10204
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
10205
- flex: 1;
10206
- order: initial;
10207
- }
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
+ }
10208
10364
 
10209
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10210
- margin-left: auto;
10211
- }
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
+ }
10212
10369
 
10213
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10214
- flex: none;
10215
- }
10370
+ .pf-c-data-list__cell.pf-m-align-right {
10371
+ margin-left: 0;
10372
+ }
10216
10373
 
10217
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10218
- flex-grow: 2;
10219
- }
10374
+ .pf-c-data-list__text {
10375
+ display: inline-block;
10376
+ }
10220
10377
 
10221
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10222
- flex-grow: 3;
10223
- }
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
+ }
10224
10387
 
10225
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10226
- flex-grow: 4;
10227
- }
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
+ }
10228
10393
 
10229
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10230
- flex-grow: 5;
10231
- }
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);
10232
10396
  }
10233
- @media screen and (min-width: 768px) {
10234
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
10235
- max-height: initial;
10236
- overflow-y: visible;
10237
- }
10397
+
10398
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10399
+ padding: 0;
10238
10400
  }
10239
- @media screen and (min-width: 992px) {
10240
- .pf-c-data-list.pf-m-grid-lg {
10401
+
10402
+ @media screen and (min-width: 768px) {
10403
+ .pf-c-data-list:not([class*=pf-m-grid]) {
10241
10404
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10242
10405
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10243
10406
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10248,64 +10411,64 @@ button.pf-c-breadcrumb__link {
10248
10411
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10249
10412
  }
10250
10413
  }
10251
- @media screen and (min-width: 992px) and (min-width: 1200px) {
10252
- .pf-c-data-list.pf-m-grid-lg {
10414
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
10415
+ .pf-c-data-list:not([class*=pf-m-grid]) {
10253
10416
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10254
10417
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10255
10418
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10256
10419
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10257
10420
  }
10258
10421
  }
10259
- @media screen and (min-width: 992px) {
10260
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10422
+ @media screen and (min-width: 768px) {
10423
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
10261
10424
  display: flex;
10262
10425
  flex-wrap: wrap;
10263
10426
  flex-grow: 1;
10264
10427
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10265
10428
  }
10266
10429
  }
10267
- @media screen and (min-width: 992px) {
10268
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
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) {
10269
10432
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10270
10433
  }
10271
10434
 
10272
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10435
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
10273
10436
  flex: 1;
10274
10437
  order: initial;
10275
10438
  }
10276
10439
 
10277
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10440
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10278
10441
  margin-left: auto;
10279
10442
  }
10280
10443
 
10281
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10444
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10282
10445
  flex: none;
10283
10446
  }
10284
10447
 
10285
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10448
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10286
10449
  flex-grow: 2;
10287
10450
  }
10288
10451
 
10289
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10452
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10290
10453
  flex-grow: 3;
10291
10454
  }
10292
10455
 
10293
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10456
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10294
10457
  flex-grow: 4;
10295
10458
  }
10296
10459
 
10297
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10460
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10298
10461
  flex-grow: 5;
10299
10462
  }
10300
10463
  }
10301
- @media screen and (min-width: 992px) {
10302
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10464
+ @media screen and (min-width: 768px) {
10465
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
10303
10466
  max-height: initial;
10304
10467
  overflow-y: visible;
10305
10468
  }
10306
10469
  }
10307
- @media screen and (min-width: 1200px) {
10308
- .pf-c-data-list.pf-m-grid-xl {
10470
+ @media screen and (min-width: 0) {
10471
+ .pf-c-data-list.pf-m-grid-none {
10309
10472
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10310
10473
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10311
10474
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10316,64 +10479,64 @@ button.pf-c-breadcrumb__link {
10316
10479
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10317
10480
  }
10318
10481
  }
10319
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
10320
- .pf-c-data-list.pf-m-grid-xl {
10482
+ @media screen and (min-width: 0) and (min-width: 1200px) {
10483
+ .pf-c-data-list.pf-m-grid-none {
10321
10484
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10322
10485
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10323
10486
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10324
10487
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10325
10488
  }
10326
10489
  }
10327
- @media screen and (min-width: 1200px) {
10328
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10490
+ @media screen and (min-width: 0) {
10491
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
10329
10492
  display: flex;
10330
10493
  flex-wrap: wrap;
10331
10494
  flex-grow: 1;
10332
10495
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10333
10496
  }
10334
10497
  }
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) {
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) {
10337
10500
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10338
10501
  }
10339
10502
 
10340
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10503
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
10341
10504
  flex: 1;
10342
10505
  order: initial;
10343
10506
  }
10344
10507
 
10345
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10508
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10346
10509
  margin-left: auto;
10347
10510
  }
10348
10511
 
10349
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10512
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10350
10513
  flex: none;
10351
10514
  }
10352
10515
 
10353
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10516
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10354
10517
  flex-grow: 2;
10355
10518
  }
10356
10519
 
10357
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10520
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10358
10521
  flex-grow: 3;
10359
10522
  }
10360
10523
 
10361
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10524
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10362
10525
  flex-grow: 4;
10363
10526
  }
10364
10527
 
10365
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10528
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
10366
10529
  flex-grow: 5;
10367
10530
  }
10368
10531
  }
10369
- @media screen and (min-width: 1200px) {
10370
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10532
+ @media screen and (min-width: 0) {
10533
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
10371
10534
  max-height: initial;
10372
10535
  overflow-y: visible;
10373
10536
  }
10374
10537
  }
10375
- @media screen and (min-width: 1450px) {
10376
- .pf-c-data-list.pf-m-grid-2xl {
10538
+ @media screen and (min-width: 576px) {
10539
+ .pf-c-data-list.pf-m-grid-sm {
10377
10540
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10378
10541
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10379
10542
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10384,497 +10547,334 @@ button.pf-c-breadcrumb__link {
10384
10547
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10385
10548
  }
10386
10549
  }
10387
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
10388
- .pf-c-data-list.pf-m-grid-2xl {
10550
+ @media screen and (min-width: 576px) and (min-width: 1200px) {
10551
+ .pf-c-data-list.pf-m-grid-sm {
10389
10552
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10390
10553
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10391
10554
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10392
10555
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10393
10556
  }
10394
10557
  }
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
10558
  @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);
10559
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
10560
+ display: flex;
10561
+ flex-wrap: wrap;
10562
+ flex-grow: 1;
10563
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10577
10564
  }
10578
10565
  }
10579
10566
  @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);
10567
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10568
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10583
10569
  }
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);
10570
+
10571
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell + .pf-c-data-list__cell {
10572
+ flex: 1;
10573
+ order: initial;
10588
10574
  }
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
10575
 
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
- }
10576
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
10577
+ margin-left: auto;
10578
+ }
10617
10579
 
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
- }
10580
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
10581
+ flex: none;
10582
+ }
10621
10583
 
10622
- .pf-c-data-list.pf-m-drag-over {
10623
- overflow-anchor: none;
10624
- }
10584
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
10585
+ flex-grow: 2;
10586
+ }
10625
10587
 
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
- }
10588
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
10589
+ flex-grow: 3;
10590
+ }
10635
10591
 
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
- }
10592
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
10593
+ flex-grow: 4;
10594
+ }
10642
10595
 
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;
10596
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
10597
+ flex-grow: 5;
10598
+ }
10648
10599
  }
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);
10600
+ @media screen and (min-width: 576px) {
10601
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__expandable-content {
10602
+ max-height: initial;
10603
+ overflow-y: visible;
10604
+ }
10656
10605
  }
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);
10606
+ @media screen and (min-width: 768px) {
10607
+ .pf-c-data-list.pf-m-grid-md {
10608
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10609
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10610
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10611
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10612
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10613
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10614
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10615
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10616
+ }
10667
10617
  }
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);
10618
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
10619
+ .pf-c-data-list.pf-m-grid-md {
10620
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10621
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10622
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10623
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10624
+ }
10672
10625
  }
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);
10626
+ @media screen and (min-width: 768px) {
10627
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
10628
+ display: flex;
10629
+ flex-wrap: wrap;
10630
+ flex-grow: 1;
10631
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10632
+ }
10677
10633
  }
10634
+ @media screen and (min-width: 768px) {
10635
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10636
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10637
+ }
10678
10638
 
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
- }
10639
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
10640
+ flex: 1;
10641
+ order: initial;
10642
+ }
10682
10643
 
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
- }
10644
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10645
+ margin-left: auto;
10646
+ }
10686
10647
 
10687
- .pf-c-data-list__item.pf-m-selectable:hover {
10688
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10689
- }
10648
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10649
+ flex: none;
10650
+ }
10690
10651
 
10691
- .pf-c-data-list__item.pf-m-selectable:focus {
10692
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10693
- }
10652
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10653
+ flex-grow: 2;
10654
+ }
10694
10655
 
10695
- .pf-c-data-list__item.pf-m-selectable:active {
10696
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10697
- }
10656
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10657
+ flex-grow: 3;
10658
+ }
10698
10659
 
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
- }
10660
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10661
+ flex-grow: 4;
10662
+ }
10705
10663
 
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);
10664
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10665
+ flex-grow: 5;
10666
+ }
10715
10667
  }
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);
10668
+ @media screen and (min-width: 768px) {
10669
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
10670
+ max-height: initial;
10671
+ overflow-y: visible;
10672
+ }
10720
10673
  }
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);
10674
+ @media screen and (min-width: 992px) {
10675
+ .pf-c-data-list.pf-m-grid-lg {
10676
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10677
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10678
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10679
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10680
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10681
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10682
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10683
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10684
+ }
10685
+ }
10686
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
10687
+ .pf-c-data-list.pf-m-grid-lg {
10688
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10689
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10690
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10691
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10692
+ }
10693
+ }
10694
+ @media screen and (min-width: 992px) {
10695
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10696
+ display: flex;
10697
+ flex-wrap: wrap;
10698
+ flex-grow: 1;
10699
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10700
+ }
10724
10701
  }
10702
+ @media screen and (min-width: 992px) {
10703
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10704
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10705
+ }
10706
+
10707
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10708
+ flex: 1;
10709
+ order: initial;
10710
+ }
10711
+
10712
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10713
+ margin-left: auto;
10714
+ }
10725
10715
 
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
- }
10716
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10717
+ flex: none;
10718
+ }
10732
10719
 
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
- }
10720
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10721
+ flex-grow: 2;
10722
+ }
10740
10723
 
10741
- .pf-c-data-list__item-control > *:not(:last-child) {
10742
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
10743
- }
10724
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10725
+ flex-grow: 3;
10726
+ }
10744
10727
 
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);
10751
- }
10728
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10729
+ flex-grow: 4;
10730
+ }
10752
10731
 
10753
- .pf-c-data-list__check > input {
10754
- cursor: pointer;
10732
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10733
+ flex-grow: 5;
10734
+ }
10755
10735
  }
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;
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
+ }
10763
10741
  }
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;
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
+ }
10768
10753
  }
10769
-
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);
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
+ }
10772
10761
  }
10773
-
10774
- .pf-c-data-list__item-draggable-button:active {
10775
- cursor: grabbing;
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
+ }
10776
10769
  }
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
+ }
10777
10774
 
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
- }
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
+ }
10782
10779
 
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
- }
10780
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10781
+ margin-left: auto;
10782
+ }
10786
10783
 
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
- }
10784
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10785
+ flex: none;
10786
+ }
10795
10787
 
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
- }
10788
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10789
+ flex-grow: 2;
10790
+ }
10799
10791
 
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
- }
10792
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10793
+ flex-grow: 3;
10794
+ }
10804
10795
 
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);
10807
- }
10796
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10797
+ flex-grow: 4;
10798
+ }
10808
10799
 
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));
10800
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10801
+ flex-grow: 5;
10802
+ }
10814
10803
  }
10815
-
10816
- .pf-c-data-list__item-content {
10817
- display: grid;
10818
- width: 100%;
10819
- grid-template-columns: auto 1fr;
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
+ }
10820
10809
  }
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);
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
+ }
10827
10821
  }
10828
-
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);
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
+ }
10833
10829
  }
10834
-
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;
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
+ }
10839
10837
  }
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
+ }
10840
10842
 
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
- }
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
+ }
10845
10847
 
10846
- .pf-c-data-list__cell.pf-m-align-right {
10847
- margin-left: 0;
10848
- }
10848
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10849
+ margin-left: auto;
10850
+ }
10849
10851
 
10850
- .pf-c-data-list__text {
10851
- display: inline-block;
10852
- }
10852
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10853
+ flex: none;
10854
+ }
10853
10855
 
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
- }
10856
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10857
+ flex-grow: 2;
10858
+ }
10863
10859
 
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);
10868
- }
10860
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10861
+ flex-grow: 3;
10862
+ }
10869
10863
 
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
- }
10864
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10865
+ flex-grow: 4;
10866
+ }
10873
10867
 
10874
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10875
- padding: 0;
10868
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10869
+ flex-grow: 5;
10870
+ }
10871
+ }
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
+ }
10876
10877
  }
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));