@patternfly/react-table 4.50.0 → 4.50.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-table.min.css +880 -880
  3. package/package.json +6 -6
package/dist/umd/react-table.min.css CHANGED
@@ -9408,86 +9408,6 @@ button.pf-c-breadcrumb__link {
9408
9408
  pointer-events: none;
9409
9409
  }
9410
9410
 
9411
- .pf-c-data-list {
9412
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
9413
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
9414
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9415
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9416
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
9417
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9418
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9419
- }
9420
-
9421
- .pf-c-data-list__item-action {
9422
- --pf-hidden-visible--visible--Visibility: visible;
9423
- --pf-hidden-visible--hidden--Display: none;
9424
- --pf-hidden-visible--hidden--Visibility: hidden;
9425
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9426
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9427
- display: var(--pf-hidden-visible--Display);
9428
- visibility: var(--pf-hidden-visible--Visibility);
9429
- }
9430
-
9431
- .pf-m-hidden.pf-c-data-list__item-action {
9432
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9433
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9434
- }
9435
-
9436
- @media screen and (min-width: 576px) {
9437
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
9438
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9439
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9440
- }
9441
-
9442
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
9443
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9444
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9445
- }
9446
- }
9447
- @media screen and (min-width: 768px) {
9448
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
9449
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9450
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9451
- }
9452
-
9453
- .pf-m-visible-on-md.pf-c-data-list__item-action {
9454
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9455
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9456
- }
9457
- }
9458
- @media screen and (min-width: 992px) {
9459
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
9460
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9461
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9462
- }
9463
-
9464
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
9465
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9466
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9467
- }
9468
- }
9469
- @media screen and (min-width: 1200px) {
9470
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
9471
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9472
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9473
- }
9474
-
9475
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
9476
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9477
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9478
- }
9479
- }
9480
- @media screen and (min-width: 1450px) {
9481
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
9482
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9483
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9484
- }
9485
-
9486
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
9487
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9488
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9489
- }
9490
- }
9491
9411
  @media screen and (min-width: 768px) {
9492
9412
  .pf-c-data-list:not([class*=pf-m-grid]) {
9493
9413
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -9965,442 +9885,359 @@ button.pf-c-breadcrumb__link {
9965
9885
  }
9966
9886
  }
9967
9887
  .pf-c-data-list {
9968
- --pf-c-data-list--FontSize: 1em;
9969
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
9970
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
9971
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
9972
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9973
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
9974
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
9975
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
9976
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
9977
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
9978
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9979
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
9980
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
9981
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9982
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9983
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
9984
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
9985
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
9986
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
9987
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
9988
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
9989
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
9990
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
9991
- --pf-c-data-list__item--before--BackgroundColor: transparent;
9992
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
9993
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
9994
- --pf-c-data-list__item--before--Top: 0;
9995
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
9996
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
9997
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
9998
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
9999
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
10000
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
10001
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
10002
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
10003
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
10004
- --pf-c-data-list__cell--md--PaddingBottom: 0;
10005
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
10006
- --pf-c-data-list__cell--cell--PaddingTop: 0;
10007
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
10008
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
10009
- --pf-c-data-list--cell--MinWidth: initial;
10010
- --pf-c-data-list--cell--Overflow: visible;
10011
- --pf-c-data-list--cell--TextOverflow: clip;
10012
- --pf-c-data-list--cell--WhiteSpace: normal;
10013
- --pf-c-data-list--cell--WordBreak: normal;
10014
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
10015
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
10016
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10017
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10018
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10019
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10020
- --pf-c-data-list__toggle-icon--Rotate: 0;
10021
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
10022
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
10023
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
10024
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
10025
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
10026
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
10027
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
10028
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
10029
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
10030
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
10031
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10032
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10033
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
10034
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
10035
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
10036
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
10037
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
10038
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
10039
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
10040
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10041
- --pf-c-data-list__check--MarginTop: -0.0625rem;
10042
- --pf-c-data-list__item-action--Display: flex;
10043
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
10044
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
10045
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
10046
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
10047
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
10048
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10049
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
10050
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10051
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10052
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
10053
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
10054
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
10055
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
10056
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10057
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
10058
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
10059
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
10060
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
10061
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
10062
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
10063
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
10064
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
10065
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
10066
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
10067
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
10068
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
10069
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
10070
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
10071
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
10072
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
10073
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
10074
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
10075
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
10076
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
10077
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
10078
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
10079
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
10080
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
10081
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
10082
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10083
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
10084
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10085
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
10086
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
10087
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
10088
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
10089
- color: var(--pf-global--Color--100);
10090
- font-size: var(--pf-c-data-list--FontSize);
10091
- line-height: var(--pf-c-data-list--LineHeight);
10092
- overflow-wrap: break-word;
10093
- list-style-type: disc;
10094
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
9888
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
9889
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
9890
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
9891
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
9892
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
9893
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
9894
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
10095
9895
  }
10096
9896
 
10097
- @media screen and (min-width: 576px) {
10098
- .pf-c-data-list {
10099
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
10100
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
10101
- }
9897
+ .pf-c-data-list__item-action {
9898
+ --pf-hidden-visible--visible--Visibility: visible;
9899
+ --pf-hidden-visible--hidden--Display: none;
9900
+ --pf-hidden-visible--hidden--Visibility: hidden;
9901
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9902
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9903
+ display: var(--pf-hidden-visible--Display);
9904
+ visibility: var(--pf-hidden-visible--Visibility);
9905
+ }
9906
+
9907
+ .pf-m-hidden.pf-c-data-list__item-action {
9908
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9909
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
10102
9910
  }
9911
+
10103
9912
  @media screen and (min-width: 576px) {
10104
- .pf-c-data-list {
10105
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
10106
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
9913
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
9914
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9915
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9916
+ }
9917
+
9918
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
9919
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9920
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10107
9921
  }
10108
9922
  }
10109
- @media (min-width: 576px) {
10110
- .pf-c-data-list {
10111
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
9923
+ @media screen and (min-width: 768px) {
9924
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
9925
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9926
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9927
+ }
9928
+
9929
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
9930
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9931
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
10112
9932
  }
10113
9933
  }
10114
- .pf-c-data-list.pf-m-compact {
10115
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
10116
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
10117
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
10118
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
10119
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
10120
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
10121
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10122
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
10123
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
10124
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
10125
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
10126
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
10127
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
10128
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
10129
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
10130
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
10131
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
10132
- font-size: var(--pf-c-data-list--m-compact--FontSize);
10133
- }
9934
+ @media screen and (min-width: 992px) {
9935
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
9936
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9937
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9938
+ }
10134
9939
 
10135
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
10136
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
10137
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
10138
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
10139
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
9940
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
9941
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9942
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9943
+ }
10140
9944
  }
9945
+ @media screen and (min-width: 1200px) {
9946
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
9947
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9948
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9949
+ }
10141
9950
 
10142
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
10143
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
9951
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
9952
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9953
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9954
+ }
10144
9955
  }
9956
+ @media screen and (min-width: 1450px) {
9957
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
9958
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
9959
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
9960
+ }
10145
9961
 
10146
- .pf-c-data-list.pf-m-drag-over {
10147
- overflow-anchor: none;
9962
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
9963
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
9964
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
9965
+ }
10148
9966
  }
10149
-
10150
- .pf-c-data-list.pf-m-truncate,
10151
- .pf-c-data-list__item-row.pf-m-truncate,
10152
- .pf-c-data-list__cell.pf-m-truncate,
10153
- .pf-c-data-list__text.pf-m-truncate {
10154
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
10155
- --pf-c-data-list--cell--Overflow: hidden;
10156
- --pf-c-data-list--cell--TextOverflow: ellipsis;
10157
- --pf-c-data-list--cell--WhiteSpace: nowrap;
9967
+ @media screen and (min-width: 768px) {
9968
+ .pf-c-data-list:not([class*=pf-m-grid]) {
9969
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
9970
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
9971
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
9972
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
9973
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
9974
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
9975
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
9976
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
9977
+ }
10158
9978
  }
10159
-
10160
- .pf-c-data-list.pf-m-break-word,
10161
- .pf-c-data-list__item-row.pf-m-break-word,
10162
- .pf-c-data-list__cell.pf-m-break-word,
10163
- .pf-c-data-list__text.pf-m-break-word {
10164
- --pf-c-data-list--cell--WordBreak: break-word;
9979
+ @media screen and (min-width: 768px) and (min-width: 1200px) {
9980
+ .pf-c-data-list:not([class*=pf-m-grid]) {
9981
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
9982
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
9983
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
9984
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
9985
+ }
10165
9986
  }
10166
-
10167
- .pf-c-data-list.pf-m-nowrap,
10168
- .pf-c-data-list__item-row.pf-m-nowrap,
10169
- .pf-c-data-list__cell.pf-m-nowrap,
10170
- .pf-c-data-list__text.pf-m-nowrap {
10171
- --pf-c-data-list--cell--WhiteSpace: nowrap;
9987
+ @media screen and (min-width: 768px) {
9988
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
9989
+ display: flex;
9990
+ flex-wrap: wrap;
9991
+ flex-grow: 1;
9992
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
9993
+ }
10172
9994
  }
9995
+ @media screen and (min-width: 768px) {
9996
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9997
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
9998
+ }
10173
9999
 
10174
- .pf-c-data-list__item {
10175
- position: relative;
10176
- display: flex;
10177
- flex-direction: column;
10178
- background-color: var(--pf-c-data-list__item--BackgroundColor);
10179
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
10180
- }
10000
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
10001
+ flex: 1;
10002
+ order: initial;
10003
+ }
10181
10004
 
10182
- .pf-c-data-list__item::before {
10183
- position: absolute;
10184
- top: var(--pf-c-data-list__item--before--Top);
10185
- bottom: 0;
10186
- left: 0;
10187
- width: var(--pf-c-data-list__item--before--Width);
10188
- content: "";
10189
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
10190
- transition: var(--pf-c-data-list__item--before--Transition);
10191
- }
10005
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10006
+ margin-left: auto;
10007
+ }
10192
10008
 
10193
- .pf-c-data-list__item.pf-m-selectable {
10194
- cursor: pointer;
10195
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
10196
- }
10009
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10010
+ flex: none;
10011
+ }
10197
10012
 
10198
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
10199
- position: relative;
10200
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
10201
- }
10013
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10014
+ flex-grow: 2;
10015
+ }
10202
10016
 
10203
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
10204
- --pf-c-data-list__item--BorderBottomWidth: 0;
10205
- }
10017
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10018
+ flex-grow: 3;
10019
+ }
10206
10020
 
10207
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
10208
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
10209
- }
10021
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10022
+ flex-grow: 4;
10023
+ }
10210
10024
 
10211
- .pf-c-data-list__item.pf-m-selectable:hover {
10212
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10025
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10026
+ flex-grow: 5;
10027
+ }
10213
10028
  }
10214
-
10215
- .pf-c-data-list__item.pf-m-selectable:focus {
10216
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10029
+ @media screen and (min-width: 768px) {
10030
+ .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
10031
+ max-height: initial;
10032
+ overflow-y: visible;
10033
+ }
10217
10034
  }
10218
-
10219
- .pf-c-data-list__item.pf-m-selectable:active {
10220
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10035
+ @media screen and (min-width: 0) {
10036
+ .pf-c-data-list.pf-m-grid-none {
10037
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10038
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10039
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
10040
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
10041
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
10042
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
10043
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
10044
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10045
+ }
10221
10046
  }
10222
-
10223
- .pf-c-data-list__item.pf-m-selected {
10224
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
10225
- position: relative;
10226
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
10227
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
10047
+ @media screen and (min-width: 0) and (min-width: 1200px) {
10048
+ .pf-c-data-list.pf-m-grid-none {
10049
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10050
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10051
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10052
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10053
+ }
10228
10054
  }
10229
-
10230
- .pf-c-data-list__item.pf-m-ghost-row::after {
10231
- position: absolute;
10232
- top: 0;
10233
- right: 0;
10234
- bottom: 0;
10235
- left: 0;
10236
- content: "";
10237
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
10238
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
10055
+ @media screen and (min-width: 0) {
10056
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
10057
+ display: flex;
10058
+ flex-wrap: wrap;
10059
+ flex-grow: 1;
10060
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10061
+ }
10239
10062
  }
10063
+ @media screen and (min-width: 0) {
10064
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10065
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10066
+ }
10240
10067
 
10241
- .pf-c-data-list__item.pf-m-expanded {
10242
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
10243
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
10244
- }
10068
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
10069
+ flex: 1;
10070
+ order: initial;
10071
+ }
10245
10072
 
10246
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
10247
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
10248
- }
10073
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10074
+ margin-left: auto;
10075
+ }
10249
10076
 
10250
- .pf-c-data-list__item-row {
10251
- display: flex;
10252
- flex-wrap: nowrap;
10253
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
10254
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
10255
- }
10077
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10078
+ flex: none;
10079
+ }
10256
10080
 
10257
- .pf-c-data-list__item-control {
10258
- display: flex;
10259
- flex-wrap: nowrap;
10260
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
10261
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
10262
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
10263
- }
10081
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10082
+ flex-grow: 2;
10083
+ }
10264
10084
 
10265
- .pf-c-data-list__item-control > *:not(:last-child) {
10266
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
10267
- }
10085
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10086
+ flex-grow: 3;
10087
+ }
10268
10088
 
10269
- .pf-c-data-list__check {
10270
- display: flex;
10271
- align-items: center;
10272
- align-self: flex-start;
10273
- height: var(--pf-c-data-list__check--Height);
10274
- margin-top: var(--pf-c-data-list__check--MarginTop);
10275
- }
10089
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10090
+ flex-grow: 4;
10091
+ }
10276
10092
 
10277
- .pf-c-data-list__check > input {
10278
- cursor: pointer;
10093
+ .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
10094
+ flex-grow: 5;
10095
+ }
10279
10096
  }
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;
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
+ }
10287
10102
  }
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;
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
+ }
10292
10114
  }
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);
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
+ }
10296
10122
  }
10297
-
10298
- .pf-c-data-list__item-draggable-button:active {
10299
- cursor: grabbing;
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
+ }
10300
10130
  }
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
+ }
10301
10135
 
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
- }
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
+ }
10306
10140
 
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
- }
10141
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
10142
+ margin-left: auto;
10143
+ }
10310
10144
 
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
- }
10145
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
10146
+ flex: none;
10147
+ }
10319
10148
 
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
- }
10149
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
10150
+ flex-grow: 2;
10151
+ }
10323
10152
 
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
- }
10153
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
10154
+ flex-grow: 3;
10155
+ }
10328
10156
 
10329
- .pf-c-data-list__toggle {
10330
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
10331
- }
10157
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
10158
+ flex-grow: 4;
10159
+ }
10332
10160
 
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));
10161
+ .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
10162
+ flex-grow: 5;
10163
+ }
10338
10164
  }
10339
-
10340
- .pf-c-data-list__item-content {
10341
- display: grid;
10342
- width: 100%;
10343
- grid-template-columns: auto 1fr;
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
+ }
10344
10170
  }
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);
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
+ }
10351
10182
  }
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);
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
+ }
10357
10190
  }
10358
-
10359
- .pf-c-data-list__cell.pf-m-icon {
10360
- flex-grow: 0;
10361
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10362
- grid-column: 1/2;
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
+ }
10363
10198
  }
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
+ }
10364
10203
 
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
- }
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
+ }
10369
10208
 
10370
- .pf-c-data-list__cell.pf-m-align-right {
10371
- margin-left: 0;
10372
- }
10209
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10210
+ margin-left: auto;
10211
+ }
10373
10212
 
10374
- .pf-c-data-list__text {
10375
- display: inline-block;
10376
- }
10213
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10214
+ flex: none;
10215
+ }
10377
10216
 
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
- }
10217
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10218
+ flex-grow: 2;
10219
+ }
10387
10220
 
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
- }
10221
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10222
+ flex-grow: 3;
10223
+ }
10393
10224
 
10394
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
10395
- padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
10396
- }
10225
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10226
+ flex-grow: 4;
10227
+ }
10397
10228
 
10398
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10399
- padding: 0;
10229
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10230
+ flex-grow: 5;
10231
+ }
10400
10232
  }
10401
-
10402
10233
  @media screen and (min-width: 768px) {
10403
- .pf-c-data-list:not([class*=pf-m-grid]) {
10234
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
10235
+ max-height: initial;
10236
+ overflow-y: visible;
10237
+ }
10238
+ }
10239
+ @media screen and (min-width: 992px) {
10240
+ .pf-c-data-list.pf-m-grid-lg {
10404
10241
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10405
10242
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10406
10243
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10411,64 +10248,64 @@ button.pf-c-breadcrumb__link {
10411
10248
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10412
10249
  }
10413
10250
  }
10414
- @media screen and (min-width: 768px) and (min-width: 1200px) {
10415
- .pf-c-data-list:not([class*=pf-m-grid]) {
10251
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
10252
+ .pf-c-data-list.pf-m-grid-lg {
10416
10253
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10417
10254
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10418
10255
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10419
10256
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10420
10257
  }
10421
10258
  }
10422
- @media screen and (min-width: 768px) {
10423
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
10259
+ @media screen and (min-width: 992px) {
10260
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
10424
10261
  display: flex;
10425
10262
  flex-wrap: wrap;
10426
10263
  flex-grow: 1;
10427
10264
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10428
10265
  }
10429
10266
  }
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) {
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) {
10432
10269
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10433
10270
  }
10434
10271
 
10435
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell + .pf-c-data-list__cell {
10272
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
10436
10273
  flex: 1;
10437
10274
  order: initial;
10438
10275
  }
10439
10276
 
10440
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-align-right {
10277
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10441
10278
  margin-left: auto;
10442
10279
  }
10443
10280
 
10444
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-no-fill {
10281
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10445
10282
  flex: none;
10446
10283
  }
10447
10284
 
10448
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-2 {
10285
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10449
10286
  flex-grow: 2;
10450
10287
  }
10451
10288
 
10452
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-3 {
10289
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10453
10290
  flex-grow: 3;
10454
10291
  }
10455
10292
 
10456
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-4 {
10293
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10457
10294
  flex-grow: 4;
10458
10295
  }
10459
10296
 
10460
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__cell.pf-m-flex-5 {
10297
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10461
10298
  flex-grow: 5;
10462
10299
  }
10463
10300
  }
10464
- @media screen and (min-width: 768px) {
10465
- .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__expandable-content {
10301
+ @media screen and (min-width: 992px) {
10302
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
10466
10303
  max-height: initial;
10467
10304
  overflow-y: visible;
10468
10305
  }
10469
10306
  }
10470
- @media screen and (min-width: 0) {
10471
- .pf-c-data-list.pf-m-grid-none {
10307
+ @media screen and (min-width: 1200px) {
10308
+ .pf-c-data-list.pf-m-grid-xl {
10472
10309
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10473
10310
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10474
10311
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10479,64 +10316,64 @@ button.pf-c-breadcrumb__link {
10479
10316
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10480
10317
  }
10481
10318
  }
10482
- @media screen and (min-width: 0) and (min-width: 1200px) {
10483
- .pf-c-data-list.pf-m-grid-none {
10319
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
10320
+ .pf-c-data-list.pf-m-grid-xl {
10484
10321
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10485
10322
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10486
10323
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10487
10324
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10488
10325
  }
10489
10326
  }
10490
- @media screen and (min-width: 0) {
10491
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
10327
+ @media screen and (min-width: 1200px) {
10328
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
10492
10329
  display: flex;
10493
10330
  flex-wrap: wrap;
10494
10331
  flex-grow: 1;
10495
10332
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10496
10333
  }
10497
10334
  }
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) {
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) {
10500
10337
  margin-right: var(--pf-c-data-list__cell--MarginRight);
10501
10338
  }
10502
10339
 
10503
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell + .pf-c-data-list__cell {
10340
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10504
10341
  flex: 1;
10505
10342
  order: initial;
10506
10343
  }
10507
10344
 
10508
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-align-right {
10345
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10509
10346
  margin-left: auto;
10510
10347
  }
10511
10348
 
10512
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-no-fill {
10349
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10513
10350
  flex: none;
10514
10351
  }
10515
10352
 
10516
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-2 {
10353
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10517
10354
  flex-grow: 2;
10518
10355
  }
10519
10356
 
10520
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-3 {
10357
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10521
10358
  flex-grow: 3;
10522
10359
  }
10523
10360
 
10524
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-4 {
10361
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10525
10362
  flex-grow: 4;
10526
10363
  }
10527
10364
 
10528
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__cell.pf-m-flex-5 {
10365
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10529
10366
  flex-grow: 5;
10530
10367
  }
10531
10368
  }
10532
- @media screen and (min-width: 0) {
10533
- .pf-c-data-list.pf-m-grid-none .pf-c-data-list__expandable-content {
10369
+ @media screen and (min-width: 1200px) {
10370
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
10534
10371
  max-height: initial;
10535
10372
  overflow-y: visible;
10536
10373
  }
10537
10374
  }
10538
- @media screen and (min-width: 576px) {
10539
- .pf-c-data-list.pf-m-grid-sm {
10375
+ @media screen and (min-width: 1450px) {
10376
+ .pf-c-data-list.pf-m-grid-2xl {
10540
10377
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
10541
10378
  --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
10542
10379
  --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
@@ -10547,334 +10384,497 @@ button.pf-c-breadcrumb__link {
10547
10384
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
10548
10385
  }
10549
10386
  }
10550
- @media screen and (min-width: 576px) and (min-width: 1200px) {
10551
- .pf-c-data-list.pf-m-grid-sm {
10387
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
10388
+ .pf-c-data-list.pf-m-grid-2xl {
10552
10389
  --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
10553
10390
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
10554
10391
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
10555
10392
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
10556
10393
  }
10557
10394
  }
10395
+ @media screen and (min-width: 1450px) {
10396
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
10397
+ display: flex;
10398
+ flex-wrap: wrap;
10399
+ flex-grow: 1;
10400
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
10401
+ }
10402
+ }
10403
+ @media screen and (min-width: 1450px) {
10404
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10405
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
10406
+ }
10407
+
10408
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
10409
+ flex: 1;
10410
+ order: initial;
10411
+ }
10412
+
10413
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10414
+ margin-left: auto;
10415
+ }
10416
+
10417
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10418
+ flex: none;
10419
+ }
10420
+
10421
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10422
+ flex-grow: 2;
10423
+ }
10424
+
10425
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10426
+ flex-grow: 3;
10427
+ }
10428
+
10429
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10430
+ flex-grow: 4;
10431
+ }
10432
+
10433
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10434
+ flex-grow: 5;
10435
+ }
10436
+ }
10437
+ @media screen and (min-width: 1450px) {
10438
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
10439
+ max-height: initial;
10440
+ overflow-y: visible;
10441
+ }
10442
+ }
10443
+ .pf-c-data-list {
10444
+ --pf-c-data-list--FontSize: 1em;
10445
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
10446
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
10447
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
10448
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10449
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
10450
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
10451
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
10452
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
10453
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
10454
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10455
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
10456
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
10457
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10458
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10459
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
10460
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
10461
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
10462
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
10463
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
10464
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
10465
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
10466
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
10467
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
10468
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
10469
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
10470
+ --pf-c-data-list__item--before--Top: 0;
10471
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10472
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
10473
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
10474
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
10475
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
10476
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
10477
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
10478
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
10479
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
10480
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
10481
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
10482
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
10483
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
10484
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
10485
+ --pf-c-data-list--cell--MinWidth: initial;
10486
+ --pf-c-data-list--cell--Overflow: visible;
10487
+ --pf-c-data-list--cell--TextOverflow: clip;
10488
+ --pf-c-data-list--cell--WhiteSpace: normal;
10489
+ --pf-c-data-list--cell--WordBreak: normal;
10490
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
10491
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
10492
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10493
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10494
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10495
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10496
+ --pf-c-data-list__toggle-icon--Rotate: 0;
10497
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
10498
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
10499
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
10500
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
10501
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
10502
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
10503
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
10504
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
10505
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
10506
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
10507
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10508
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
10509
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
10510
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
10511
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
10512
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
10513
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
10514
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
10515
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
10516
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
10517
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
10518
+ --pf-c-data-list__item-action--Display: flex;
10519
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
10520
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
10521
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
10522
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
10523
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
10524
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
10525
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
10526
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
10527
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
10528
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
10529
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
10530
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
10531
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
10532
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
10533
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
10534
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
10535
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
10536
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
10537
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
10538
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
10539
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
10540
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
10541
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
10542
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
10543
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
10544
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
10545
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
10546
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
10547
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
10548
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
10549
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
10550
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
10551
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
10552
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
10553
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
10554
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
10555
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
10556
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
10557
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
10558
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10559
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
10560
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
10561
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
10562
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
10563
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
10564
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
10565
+ color: var(--pf-global--Color--100);
10566
+ font-size: var(--pf-c-data-list--FontSize);
10567
+ line-height: var(--pf-c-data-list--LineHeight);
10568
+ overflow-wrap: break-word;
10569
+ list-style-type: disc;
10570
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
10571
+ }
10572
+
10558
10573
  @media screen and (min-width: 576px) {
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);
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);
10564
10577
  }
10565
10578
  }
10566
10579
  @media screen and (min-width: 576px) {
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);
10569
- }
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;
10574
- }
10575
-
10576
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-align-right {
10577
- margin-left: auto;
10578
- }
10579
-
10580
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-no-fill {
10581
- flex: none;
10582
- }
10583
-
10584
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-2 {
10585
- flex-grow: 2;
10586
- }
10587
-
10588
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-3 {
10589
- flex-grow: 3;
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);
10590
10583
  }
10591
-
10592
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-4 {
10593
- flex-grow: 4;
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);
10594
10588
  }
10589
+ }
10590
+ .pf-c-data-list.pf-m-compact {
10591
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
10592
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
10593
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
10594
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
10595
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
10596
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
10597
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
10598
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
10599
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
10600
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
10601
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
10602
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
10603
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
10604
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
10605
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
10606
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
10607
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
10608
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
10609
+ }
10595
10610
 
10596
- .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__cell.pf-m-flex-5 {
10597
- flex-grow: 5;
10598
- }
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);
10599
10616
  }
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
- }
10617
+
10618
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
10619
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
10605
10620
  }
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
- }
10621
+
10622
+ .pf-c-data-list.pf-m-drag-over {
10623
+ overflow-anchor: none;
10617
10624
  }
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
- }
10625
+
10626
+ .pf-c-data-list.pf-m-truncate,
10627
+ .pf-c-data-list__item-row.pf-m-truncate,
10628
+ .pf-c-data-list__cell.pf-m-truncate,
10629
+ .pf-c-data-list__text.pf-m-truncate {
10630
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
10631
+ --pf-c-data-list--cell--Overflow: hidden;
10632
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
10633
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
10625
10634
  }
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
- }
10635
+
10636
+ .pf-c-data-list.pf-m-break-word,
10637
+ .pf-c-data-list__item-row.pf-m-break-word,
10638
+ .pf-c-data-list__cell.pf-m-break-word,
10639
+ .pf-c-data-list__text.pf-m-break-word {
10640
+ --pf-c-data-list--cell--WordBreak: break-word;
10633
10641
  }
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
- }
10638
10642
 
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
- }
10643
+ .pf-c-data-list.pf-m-nowrap,
10644
+ .pf-c-data-list__item-row.pf-m-nowrap,
10645
+ .pf-c-data-list__cell.pf-m-nowrap,
10646
+ .pf-c-data-list__text.pf-m-nowrap {
10647
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
10648
+ }
10643
10649
 
10644
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
10645
- margin-left: auto;
10646
- }
10650
+ .pf-c-data-list__item {
10651
+ position: relative;
10652
+ display: flex;
10653
+ flex-direction: column;
10654
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
10655
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
10656
+ }
10647
10657
 
10648
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
10649
- flex: none;
10650
- }
10658
+ .pf-c-data-list__item::before {
10659
+ position: absolute;
10660
+ top: var(--pf-c-data-list__item--before--Top);
10661
+ bottom: 0;
10662
+ left: 0;
10663
+ width: var(--pf-c-data-list__item--before--Width);
10664
+ content: "";
10665
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
10666
+ transition: var(--pf-c-data-list__item--before--Transition);
10667
+ }
10651
10668
 
10652
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
10653
- flex-grow: 2;
10654
- }
10669
+ .pf-c-data-list__item.pf-m-selectable {
10670
+ cursor: pointer;
10671
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
10672
+ }
10655
10673
 
10656
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
10657
- flex-grow: 3;
10658
- }
10674
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
10675
+ position: relative;
10676
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
10677
+ }
10659
10678
 
10660
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
10661
- flex-grow: 4;
10662
- }
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
+ }
10663
10682
 
10664
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
10665
- flex-grow: 5;
10666
- }
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);
10667
10685
  }
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
- }
10686
+
10687
+ .pf-c-data-list__item.pf-m-selectable:hover {
10688
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
10673
10689
  }
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
- }
10690
+
10691
+ .pf-c-data-list__item.pf-m-selectable:focus {
10692
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
10685
10693
  }
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
- }
10694
+
10695
+ .pf-c-data-list__item.pf-m-selectable:active {
10696
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
10693
10697
  }
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
- }
10698
+
10699
+ .pf-c-data-list__item.pf-m-selected {
10700
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
10701
+ position: relative;
10702
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
10703
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
10701
10704
  }
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
10705
 
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
- }
10706
+ .pf-c-data-list__item.pf-m-ghost-row::after {
10707
+ position: absolute;
10708
+ top: 0;
10709
+ right: 0;
10710
+ bottom: 0;
10711
+ left: 0;
10712
+ content: "";
10713
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
10714
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
10715
+ }
10711
10716
 
10712
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
10713
- margin-left: auto;
10714
- }
10717
+ .pf-c-data-list__item.pf-m-expanded {
10718
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
10719
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
10720
+ }
10715
10721
 
10716
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
10717
- flex: none;
10718
- }
10722
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
10723
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
10724
+ }
10719
10725
 
10720
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
10721
- flex-grow: 2;
10722
- }
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
+ }
10723
10732
 
10724
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
10725
- flex-grow: 3;
10726
- }
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
+ }
10727
10740
 
10728
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
10729
- flex-grow: 4;
10730
- }
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
+ }
10731
10744
 
10732
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
10733
- flex-grow: 5;
10734
- }
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);
10735
10751
  }
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
- }
10752
+
10753
+ .pf-c-data-list__check > input {
10754
+ cursor: pointer;
10741
10755
  }
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
- }
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;
10753
10763
  }
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
- }
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;
10761
10768
  }
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
- }
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);
10769
10772
  }
10770
- @media screen and (min-width: 1200px) {
10771
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10772
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10773
- }
10774
10773
 
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
- }
10774
+ .pf-c-data-list__item-draggable-button:active {
10775
+ cursor: grabbing;
10776
+ }
10779
10777
 
10780
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
10781
- margin-left: auto;
10782
- }
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
+ }
10783
10782
 
10784
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
10785
- flex: none;
10786
- }
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
+ }
10787
10786
 
10788
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
10789
- flex-grow: 2;
10790
- }
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
+ }
10791
10795
 
10792
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
10793
- flex-grow: 3;
10794
- }
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
+ }
10795
10799
 
10796
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
10797
- flex-grow: 4;
10798
- }
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
+ }
10799
10804
 
10800
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
10801
- flex-grow: 5;
10802
- }
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);
10803
10807
  }
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
- }
10808
+
10809
+ .pf-c-data-list__toggle-icon {
10810
+ height: var(--pf-c-data-list__toggle-icon--Height);
10811
+ pointer-events: none;
10812
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
10813
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
10809
10814
  }
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
- }
10815
+
10816
+ .pf-c-data-list__item-content {
10817
+ display: grid;
10818
+ width: 100%;
10819
+ grid-template-columns: auto 1fr;
10821
10820
  }
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
- }
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);
10829
10827
  }
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
- }
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);
10837
10833
  }
10838
- @media screen and (min-width: 1450px) {
10839
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
10840
- margin-right: var(--pf-c-data-list__cell--MarginRight);
10841
- }
10842
10834
 
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
- }
10835
+ .pf-c-data-list__cell.pf-m-icon {
10836
+ flex-grow: 0;
10837
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
10838
+ grid-column: 1/2;
10839
+ }
10847
10840
 
10848
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
10849
- margin-left: auto;
10850
- }
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
+ }
10851
10845
 
10852
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
10853
- flex: none;
10854
- }
10846
+ .pf-c-data-list__cell.pf-m-align-right {
10847
+ margin-left: 0;
10848
+ }
10855
10849
 
10856
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
10857
- flex-grow: 2;
10858
- }
10850
+ .pf-c-data-list__text {
10851
+ display: inline-block;
10852
+ }
10859
10853
 
10860
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
10861
- flex-grow: 3;
10862
- }
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
+ }
10863
10863
 
10864
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
10865
- flex-grow: 4;
10866
- }
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
+ }
10867
10869
 
10868
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
10869
- flex-grow: 5;
10870
- }
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);
10871
10872
  }
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
- }
10873
+
10874
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
10875
+ padding: 0;
10877
10876
  }
10877
+
10878
10878
  .pf-c-date-picker {
10879
10879
  --pf-c-date-picker--m-top__calendar--Top: 0;
10880
10880
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -12606,6 +12606,123 @@ button.pf-c-breadcrumb__link {
12606
12606
  font-size: var(--pf-global--FontSize--lg);
12607
12607
  }
12608
12608
 
12609
+ .pf-c-expandable-section {
12610
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
12611
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
12612
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
12613
+ --pf-c-expandable-section__toggle--PaddingLeft: 0;
12614
+ --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
12615
+ --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
12616
+ --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
12617
+ --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
12618
+ --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
12619
+ --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
12620
+ --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
12621
+ --pf-c-expandable-section__toggle-icon--Rotate: 0;
12622
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
12623
+ --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
12624
+ --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
12625
+ --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
12626
+ --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
12627
+ --pf-c-expandable-section__content--MaxWidth: auto;
12628
+ --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
12629
+ --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
12630
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
12631
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
12632
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
12633
+ --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
12634
+ --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
12635
+ --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
12636
+ --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
12637
+ --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
12638
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
12639
+ --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
12640
+ --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
12641
+ }
12642
+
12643
+ .pf-c-expandable-section.pf-m-expanded {
12644
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
12645
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
12646
+ --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
12647
+ --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
12648
+ }
12649
+
12650
+ .pf-c-expandable-section.pf-m-detached {
12651
+ --pf-c-expandable-section__content--MarginTop: 0;
12652
+ }
12653
+
12654
+ .pf-c-expandable-section.pf-m-limit-width {
12655
+ --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
12656
+ }
12657
+
12658
+ .pf-c-expandable-section.pf-m-display-lg {
12659
+ --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
12660
+ --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
12661
+ --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
12662
+ --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
12663
+ --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
12664
+ --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
12665
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
12666
+ --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
12667
+ position: relative;
12668
+ box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
12669
+ }
12670
+
12671
+ .pf-c-expandable-section.pf-m-display-lg::after {
12672
+ position: absolute;
12673
+ top: 0;
12674
+ bottom: 0;
12675
+ left: 0;
12676
+ width: var(--pf-c-expandable-section--m-display-lg--after--Width);
12677
+ content: "";
12678
+ background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
12679
+ }
12680
+
12681
+ .pf-c-expandable-section__toggle {
12682
+ display: flex;
12683
+ padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
12684
+ color: var(--pf-c-expandable-section__toggle--Color);
12685
+ border: none;
12686
+ }
12687
+
12688
+ .pf-c-expandable-section__toggle:hover {
12689
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
12690
+ }
12691
+
12692
+ .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
12693
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
12694
+ }
12695
+
12696
+ .pf-c-expandable-section__toggle:focus {
12697
+ --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
12698
+ }
12699
+
12700
+ .pf-c-expandable-section__toggle-icon {
12701
+ color: var(--pf-c-expandable-section__toggle-icon--Color);
12702
+ transition: var(--pf-c-expandable-section__toggle-icon--Transition);
12703
+ transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
12704
+ }
12705
+
12706
+ .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
12707
+ --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
12708
+ }
12709
+
12710
+ .pf-c-expandable-section__toggle-text {
12711
+ margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
12712
+ }
12713
+
12714
+ .pf-c-expandable-section__content {
12715
+ max-width: var(--pf-c-expandable-section__content--MaxWidth);
12716
+ padding-right: var(--pf-c-expandable-section__content--PaddingRight);
12717
+ padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
12718
+ padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
12719
+ margin-top: var(--pf-c-expandable-section__content--MarginTop);
12720
+ }
12721
+
12722
+ .pf-m-overpass-font .pf-c-expandable-section__toggle {
12723
+ font-weight: var(--pf-global--FontWeight--semi-bold);
12724
+ }
12725
+
12609
12726
  .pf-c-file-upload {
12610
12727
  --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
12611
12728
  --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
@@ -17233,6 +17350,16 @@ ul.pf-c-list {
17233
17350
  left: 0;
17234
17351
  }
17235
17352
 
17353
+ .pf-l-bullseye {
17354
+ --pf-l-bullseye--Padding: 0;
17355
+ display: flex;
17356
+ align-items: center;
17357
+ justify-content: center;
17358
+ height: 100%;
17359
+ padding: var(--pf-l-bullseye--Padding);
17360
+ margin: 0;
17361
+ }
17362
+
17236
17363
  .pf-c-notification-badge {
17237
17364
  --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
17238
17365
  --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
@@ -17333,16 +17460,6 @@ ul.pf-c-list {
17333
17460
  margin-left: var(--pf-c-notification-badge__count--MarginLeft);
17334
17461
  }
17335
17462
 
17336
- .pf-l-bullseye {
17337
- --pf-l-bullseye--Padding: 0;
17338
- display: flex;
17339
- align-items: center;
17340
- justify-content: center;
17341
- height: 100%;
17342
- padding: var(--pf-l-bullseye--Padding);
17343
- margin: 0;
17344
- }
17345
-
17346
17463
  .pf-c-notification-drawer {
17347
17464
  --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--200);
17348
17465
  --pf-c-notification-drawer__header--PaddingTop: var(--pf-global--spacer--md);
@@ -22168,123 +22285,6 @@ label.pf-c-radio, .pf-c-radio__label,
22168
22285
  --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
22169
22286
  }
22170
22287
 
22171
- .pf-c-expandable-section {
22172
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-global--spacer--form-element);
22173
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-global--spacer--md);
22174
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
22175
- --pf-c-expandable-section__toggle--PaddingLeft: 0;
22176
- --pf-c-expandable-section__toggle--Color: var(--pf-global--link--Color);
22177
- --pf-c-expandable-section__toggle--hover--Color: var(--pf-global--link--Color--hover);
22178
- --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
22179
- --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
22180
- --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
22181
- --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
22182
- --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
22183
- --pf-c-expandable-section__toggle-icon--Rotate: 0;
22184
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
22185
- --pf-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
22186
- --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
22187
- --pf-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-global--spacer--xs) + var(--pf-global--spacer--sm));
22188
- --pf-c-expandable-section__content--MarginTop: var(--pf-global--spacer--md);
22189
- --pf-c-expandable-section__content--MaxWidth: auto;
22190
- --pf-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
22191
- --pf-c-expandable-section--m-display-lg--BoxShadow: var(--pf-global--BoxShadow--md);
22192
- --pf-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
22193
- --pf-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
22194
- --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
22195
- --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--md);
22196
- --pf-c-expandable-section--m-display-lg__content--MarginTop: 0;
22197
- --pf-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-global--spacer--lg);
22198
- --pf-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-global--spacer--lg);
22199
- --pf-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-global--spacer--lg);
22200
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
22201
- --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
22202
- --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
22203
- }
22204
-
22205
- .pf-c-expandable-section.pf-m-expanded {
22206
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
22207
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--Rotate);
22208
- --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
22209
- --pf-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
22210
- }
22211
-
22212
- .pf-c-expandable-section.pf-m-detached {
22213
- --pf-c-expandable-section__content--MarginTop: 0;
22214
- }
22215
-
22216
- .pf-c-expandable-section.pf-m-limit-width {
22217
- --pf-c-expandable-section__content--MaxWidth: var(--pf-c-expandable-section--m-limit-width__content--MaxWidth);
22218
- }
22219
-
22220
- .pf-c-expandable-section.pf-m-display-lg {
22221
- --pf-c-expandable-section__toggle--PaddingTop: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingTop);
22222
- --pf-c-expandable-section__toggle--PaddingRight: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingRight);
22223
- --pf-c-expandable-section__toggle--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom);
22224
- --pf-c-expandable-section__toggle--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft);
22225
- --pf-c-expandable-section__content--PaddingRight: var(--pf-c-expandable-section--m-display-lg__content--PaddingRight);
22226
- --pf-c-expandable-section__content--PaddingBottom: var(--pf-c-expandable-section--m-display-lg__content--PaddingBottom);
22227
- --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-display-lg__content--PaddingLeft);
22228
- --pf-c-expandable-section__content--MarginTop: var(--pf-c-expandable-section--m-display-lg__content--MarginTop);
22229
- position: relative;
22230
- box-shadow: var(--pf-c-expandable-section--m-display-lg--BoxShadow);
22231
- }
22232
-
22233
- .pf-c-expandable-section.pf-m-display-lg::after {
22234
- position: absolute;
22235
- top: 0;
22236
- bottom: 0;
22237
- left: 0;
22238
- width: var(--pf-c-expandable-section--m-display-lg--after--Width);
22239
- content: "";
22240
- background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
22241
- }
22242
-
22243
- .pf-c-expandable-section__toggle {
22244
- display: flex;
22245
- padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
22246
- color: var(--pf-c-expandable-section__toggle--Color);
22247
- border: none;
22248
- }
22249
-
22250
- .pf-c-expandable-section__toggle:hover {
22251
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--hover--Color);
22252
- }
22253
-
22254
- .pf-c-expandable-section__toggle:active, .pf-c-expandable-section__toggle.pf-m-active {
22255
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--active--Color);
22256
- }
22257
-
22258
- .pf-c-expandable-section__toggle:focus {
22259
- --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--focus--Color);
22260
- }
22261
-
22262
- .pf-c-expandable-section__toggle-icon {
22263
- color: var(--pf-c-expandable-section__toggle-icon--Color);
22264
- transition: var(--pf-c-expandable-section__toggle-icon--Transition);
22265
- transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
22266
- }
22267
-
22268
- .pf-c-expandable-section__toggle-icon.pf-m-expand-top {
22269
- --pf-c-expandable-section__toggle-icon--Rotate: var(--pf-c-expandable-section__toggle-icon--m-expand-top--Rotate);
22270
- }
22271
-
22272
- .pf-c-expandable-section__toggle-text {
22273
- margin-left: var(--pf-c-expandable-section__toggle-text--MarginLeft);
22274
- }
22275
-
22276
- .pf-c-expandable-section__content {
22277
- max-width: var(--pf-c-expandable-section__content--MaxWidth);
22278
- padding-right: var(--pf-c-expandable-section__content--PaddingRight);
22279
- padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
22280
- padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
22281
- margin-top: var(--pf-c-expandable-section__content--MarginTop);
22282
- }
22283
-
22284
- .pf-m-overpass-font .pf-c-expandable-section__toggle {
22285
- font-weight: var(--pf-global--FontWeight--semi-bold);
22286
- }
22287
-
22288
22288
  .pf-c-content {
22289
22289
  --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
22290
22290
  --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);