@patternfly/react-core 4.199.5 → 4.200.0

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 (47) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/Avatar/Avatar.d.ts +2 -0
  3. package/dist/esm/components/Avatar/Avatar.d.ts.map +1 -1
  4. package/dist/esm/components/Avatar/Avatar.js +2 -2
  5. package/dist/esm/components/Avatar/Avatar.js.map +1 -1
  6. package/dist/esm/components/FormSelect/FormSelect.d.ts +2 -0
  7. package/dist/esm/components/FormSelect/FormSelect.d.ts.map +1 -1
  8. package/dist/esm/components/FormSelect/FormSelect.js +3 -2
  9. package/dist/esm/components/FormSelect/FormSelect.js.map +1 -1
  10. package/dist/esm/components/TextArea/TextArea.d.ts +2 -0
  11. package/dist/esm/components/TextArea/TextArea.d.ts.map +1 -1
  12. package/dist/esm/components/TextArea/TextArea.js +4 -3
  13. package/dist/esm/components/TextArea/TextArea.js.map +1 -1
  14. package/dist/esm/components/TextInput/TextInput.d.ts +2 -0
  15. package/dist/esm/components/TextInput/TextInput.d.ts.map +1 -1
  16. package/dist/esm/components/TextInput/TextInput.js +3 -2
  17. package/dist/esm/components/TextInput/TextInput.js.map +1 -1
  18. package/dist/js/components/Avatar/Avatar.d.ts +2 -0
  19. package/dist/js/components/Avatar/Avatar.d.ts.map +1 -1
  20. package/dist/js/components/Avatar/Avatar.js +2 -2
  21. package/dist/js/components/Avatar/Avatar.js.map +1 -1
  22. package/dist/js/components/FormSelect/FormSelect.d.ts +2 -0
  23. package/dist/js/components/FormSelect/FormSelect.d.ts.map +1 -1
  24. package/dist/js/components/FormSelect/FormSelect.js +3 -2
  25. package/dist/js/components/FormSelect/FormSelect.js.map +1 -1
  26. package/dist/js/components/TextArea/TextArea.d.ts +2 -0
  27. package/dist/js/components/TextArea/TextArea.d.ts.map +1 -1
  28. package/dist/js/components/TextArea/TextArea.js +4 -3
  29. package/dist/js/components/TextArea/TextArea.js.map +1 -1
  30. package/dist/js/components/TextInput/TextInput.d.ts +2 -0
  31. package/dist/js/components/TextInput/TextInput.d.ts.map +1 -1
  32. package/dist/js/components/TextInput/TextInput.js +3 -2
  33. package/dist/js/components/TextInput/TextInput.js.map +1 -1
  34. package/dist/umd/react-core.css +767 -767
  35. package/dist/umd/react-core.js +12 -9
  36. package/dist/umd/react-core.min.js +2 -2
  37. package/package.json +5 -5
  38. package/src/components/Avatar/Avatar.tsx +4 -0
  39. package/src/components/Avatar/examples/Avatar.md +33 -4
  40. package/src/components/FormSelect/FormSelect.tsx +16 -1
  41. package/src/components/FormSelect/examples/FormSelect.md +58 -0
  42. package/src/components/TextArea/TextArea.tsx +5 -0
  43. package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap +2 -0
  44. package/src/components/TextArea/examples/TextArea.md +43 -0
  45. package/src/components/TextInput/TextInput.tsx +5 -0
  46. package/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +2 -0
  47. package/src/components/TextInput/examples/TextInput.md +104 -27
package/dist/umd/react-core.css CHANGED
@@ -3631,86 +3631,6 @@ label.pf-c-check, .pf-c-check__label,
3631
3631
  pointer-events: none;
3632
3632
  }
3633
3633
 
3634
- .pf-c-data-list {
3635
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3636
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
3637
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
3638
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
3639
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
3640
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
3641
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
3642
- }
3643
-
3644
- .pf-c-data-list__item-action {
3645
- --pf-hidden-visible--visible--Visibility: visible;
3646
- --pf-hidden-visible--hidden--Display: none;
3647
- --pf-hidden-visible--hidden--Visibility: hidden;
3648
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3649
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3650
- display: var(--pf-hidden-visible--Display);
3651
- visibility: var(--pf-hidden-visible--Visibility);
3652
- }
3653
-
3654
- .pf-m-hidden.pf-c-data-list__item-action {
3655
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3656
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3657
- }
3658
-
3659
- @media screen and (min-width: 576px) {
3660
- .pf-m-hidden-on-sm.pf-c-data-list__item-action {
3661
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3662
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3663
- }
3664
-
3665
- .pf-m-visible-on-sm.pf-c-data-list__item-action {
3666
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3667
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3668
- }
3669
- }
3670
- @media screen and (min-width: 768px) {
3671
- .pf-m-hidden-on-md.pf-c-data-list__item-action {
3672
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3673
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3674
- }
3675
-
3676
- .pf-m-visible-on-md.pf-c-data-list__item-action {
3677
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3678
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3679
- }
3680
- }
3681
- @media screen and (min-width: 992px) {
3682
- .pf-m-hidden-on-lg.pf-c-data-list__item-action {
3683
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3684
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3685
- }
3686
-
3687
- .pf-m-visible-on-lg.pf-c-data-list__item-action {
3688
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3689
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3690
- }
3691
- }
3692
- @media screen and (min-width: 1200px) {
3693
- .pf-m-hidden-on-xl.pf-c-data-list__item-action {
3694
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3695
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3696
- }
3697
-
3698
- .pf-m-visible-on-xl.pf-c-data-list__item-action {
3699
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3700
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3701
- }
3702
- }
3703
- @media screen and (min-width: 1450px) {
3704
- .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
3705
- --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
3706
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
3707
- }
3708
-
3709
- .pf-m-visible-on-2xl.pf-c-data-list__item-action {
3710
- --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
3711
- --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
3712
- }
3713
- }
3714
3634
  @media screen and (min-width: 768px) {
3715
3635
  .pf-c-data-list:not([class*=pf-m-grid]) {
3716
3636
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4188,440 +4108,85 @@ label.pf-c-check, .pf-c-check__label,
4188
4108
  }
4189
4109
  }
4190
4110
  .pf-c-data-list {
4191
- --pf-c-data-list--FontSize: 1em;
4192
- --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4193
- --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4194
- --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4195
- --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4196
- --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4197
- --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4198
- --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4199
- --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4200
- --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4201
- --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4202
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4203
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4204
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4205
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4206
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4207
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4208
- --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4209
- --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4210
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4211
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4212
- --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4213
- --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4214
- --pf-c-data-list__item--before--BackgroundColor: transparent;
4215
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4216
- --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4217
- --pf-c-data-list__item--before--Top: 0;
4218
- --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4219
- --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4220
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4221
- --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4222
- --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4223
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4224
- --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4225
- --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4226
- --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4227
- --pf-c-data-list__cell--md--PaddingBottom: 0;
4228
- --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4229
- --pf-c-data-list__cell--cell--PaddingTop: 0;
4230
- --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4231
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4232
- --pf-c-data-list--cell--MinWidth: initial;
4233
- --pf-c-data-list--cell--Overflow: visible;
4234
- --pf-c-data-list--cell--TextOverflow: clip;
4235
- --pf-c-data-list--cell--WhiteSpace: normal;
4236
- --pf-c-data-list--cell--WordBreak: normal;
4237
- --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4238
- --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4239
- --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4240
- --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4241
- --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4242
- --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4243
- --pf-c-data-list__toggle-icon--Rotate: 0;
4244
- --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4245
- --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4246
- --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4247
- --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4248
- --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4249
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4250
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4251
- --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4252
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4253
- --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4254
- --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4255
- --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4256
- --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4257
- --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4258
- --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4259
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4260
- --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4261
- --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4262
- --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4263
- --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4264
- --pf-c-data-list__check--MarginTop: -0.0625rem;
4265
- --pf-c-data-list__item-action--Display: flex;
4266
- --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4267
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4268
- --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4269
- --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4270
- --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4271
- --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4272
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4273
- --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4274
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4275
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4276
- --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4277
- --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4278
- --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4279
- --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4280
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4281
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4282
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4283
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4284
- --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4285
- --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4286
- --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4287
- --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4288
- --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4289
- --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4290
- --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4291
- --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4292
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4293
- --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4294
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4295
- --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4296
- --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4297
- --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4298
- --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4299
- --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4300
- --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4301
- --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4302
- --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4303
- --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4304
- --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4305
- --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4306
- --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4307
- --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4308
- --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4309
- --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4310
- --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4311
- --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4312
- color: var(--pf-global--Color--100);
4313
- font-size: var(--pf-c-data-list--FontSize);
4314
- line-height: var(--pf-c-data-list--LineHeight);
4315
- overflow-wrap: break-word;
4316
- list-style-type: disc;
4317
- border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4111
+ --pf-global--Color--100: var(--pf-global--Color--dark-100);
4112
+ --pf-global--Color--200: var(--pf-global--Color--dark-200);
4113
+ --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
4114
+ --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
4115
+ --pf-global--link--Color: var(--pf-global--link--Color--dark);
4116
+ --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
4117
+ --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
4318
4118
  }
4319
4119
 
4320
- @media screen and (min-width: 576px) {
4321
- .pf-c-data-list {
4322
- --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4323
- --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4324
- }
4120
+ .pf-c-data-list__item-action {
4121
+ --pf-hidden-visible--visible--Visibility: visible;
4122
+ --pf-hidden-visible--hidden--Display: none;
4123
+ --pf-hidden-visible--hidden--Visibility: hidden;
4124
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4125
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4126
+ display: var(--pf-hidden-visible--Display);
4127
+ visibility: var(--pf-hidden-visible--Visibility);
4128
+ }
4129
+
4130
+ .pf-m-hidden.pf-c-data-list__item-action {
4131
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4132
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4325
4133
  }
4134
+
4326
4135
  @media screen and (min-width: 576px) {
4327
- .pf-c-data-list {
4328
- --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4329
- --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4136
+ .pf-m-hidden-on-sm.pf-c-data-list__item-action {
4137
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4138
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4139
+ }
4140
+
4141
+ .pf-m-visible-on-sm.pf-c-data-list__item-action {
4142
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4143
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4330
4144
  }
4331
4145
  }
4332
- @media (min-width: 576px) {
4333
- .pf-c-data-list {
4334
- --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4146
+ @media screen and (min-width: 768px) {
4147
+ .pf-m-hidden-on-md.pf-c-data-list__item-action {
4148
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4149
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4150
+ }
4151
+
4152
+ .pf-m-visible-on-md.pf-c-data-list__item-action {
4153
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4154
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4335
4155
  }
4336
4156
  }
4337
- .pf-c-data-list.pf-m-compact {
4338
- --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4339
- --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4340
- --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4341
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4342
- --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4343
- --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4344
- --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4345
- --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4346
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4347
- --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4348
- --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4349
- --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4350
- --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4351
- --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4352
- --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4353
- --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4354
- --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4355
- font-size: var(--pf-c-data-list--m-compact--FontSize);
4356
- }
4357
-
4358
- .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4359
- --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4360
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4361
- --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4362
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4363
- }
4364
-
4365
- .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4366
- font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4367
- }
4368
-
4369
- .pf-c-data-list.pf-m-drag-over {
4370
- overflow-anchor: none;
4371
- }
4372
-
4373
- .pf-c-data-list.pf-m-truncate,
4374
- .pf-c-data-list__item-row.pf-m-truncate,
4375
- .pf-c-data-list__cell.pf-m-truncate,
4376
- .pf-c-data-list__text.pf-m-truncate {
4377
- --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4378
- --pf-c-data-list--cell--Overflow: hidden;
4379
- --pf-c-data-list--cell--TextOverflow: ellipsis;
4380
- --pf-c-data-list--cell--WhiteSpace: nowrap;
4381
- }
4382
-
4383
- .pf-c-data-list.pf-m-break-word,
4384
- .pf-c-data-list__item-row.pf-m-break-word,
4385
- .pf-c-data-list__cell.pf-m-break-word,
4386
- .pf-c-data-list__text.pf-m-break-word {
4387
- --pf-c-data-list--cell--WordBreak: break-word;
4388
- }
4389
-
4390
- .pf-c-data-list.pf-m-nowrap,
4391
- .pf-c-data-list__item-row.pf-m-nowrap,
4392
- .pf-c-data-list__cell.pf-m-nowrap,
4393
- .pf-c-data-list__text.pf-m-nowrap {
4394
- --pf-c-data-list--cell--WhiteSpace: nowrap;
4395
- }
4396
-
4397
- .pf-c-data-list__item {
4398
- position: relative;
4399
- display: flex;
4400
- flex-direction: column;
4401
- background-color: var(--pf-c-data-list__item--BackgroundColor);
4402
- border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4403
- }
4404
-
4405
- .pf-c-data-list__item::before {
4406
- position: absolute;
4407
- top: var(--pf-c-data-list__item--before--Top);
4408
- bottom: 0;
4409
- left: 0;
4410
- width: var(--pf-c-data-list__item--before--Width);
4411
- content: "";
4412
- background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4413
- transition: var(--pf-c-data-list__item--before--Transition);
4414
- }
4415
-
4416
- .pf-c-data-list__item.pf-m-selectable {
4417
- cursor: pointer;
4418
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4419
- }
4420
-
4421
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4422
- position: relative;
4423
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4424
- }
4425
-
4426
- .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) {
4427
- --pf-c-data-list__item--BorderBottomWidth: 0;
4428
- }
4429
-
4430
- .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 {
4431
- 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);
4432
- }
4433
-
4434
- .pf-c-data-list__item.pf-m-selectable:hover {
4435
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4436
- }
4437
-
4438
- .pf-c-data-list__item.pf-m-selectable:focus {
4439
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4440
- }
4441
-
4442
- .pf-c-data-list__item.pf-m-selectable:active {
4443
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4444
- }
4445
-
4446
- .pf-c-data-list__item.pf-m-selected {
4447
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4448
- position: relative;
4449
- z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4450
- box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4451
- }
4452
-
4453
- .pf-c-data-list__item.pf-m-ghost-row::after {
4454
- position: absolute;
4455
- top: 0;
4456
- right: 0;
4457
- bottom: 0;
4458
- left: 0;
4459
- content: "";
4460
- background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4461
- opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4462
- }
4463
-
4464
- .pf-c-data-list__item.pf-m-expanded {
4465
- --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4466
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4467
- }
4468
-
4469
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4470
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4471
- }
4472
-
4473
- .pf-c-data-list__item-row {
4474
- display: flex;
4475
- flex-wrap: nowrap;
4476
- padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4477
- padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4478
- }
4479
-
4480
- .pf-c-data-list__item-control {
4481
- display: flex;
4482
- flex-wrap: nowrap;
4483
- padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4484
- padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4485
- margin-right: var(--pf-c-data-list__item-control--MarginRight);
4486
- }
4487
-
4488
- .pf-c-data-list__item-control > *:not(:last-child) {
4489
- margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4490
- }
4491
-
4492
- .pf-c-data-list__check {
4493
- display: flex;
4494
- align-items: center;
4495
- align-self: flex-start;
4496
- height: var(--pf-c-data-list__check--Height);
4497
- margin-top: var(--pf-c-data-list__check--MarginTop);
4498
- }
4499
-
4500
- .pf-c-data-list__check > input {
4501
- cursor: pointer;
4502
- }
4503
-
4504
- .pf-c-data-list__item-draggable-button {
4505
- display: flex;
4506
- flex-direction: column;
4507
- 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);
4508
- 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);
4509
- border: 0;
4510
- }
4511
-
4512
- .pf-c-data-list__item-draggable-button:hover {
4513
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4514
- cursor: grab;
4515
- }
4516
-
4517
- .pf-c-data-list__item-draggable-button:focus {
4518
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4519
- }
4520
-
4521
- .pf-c-data-list__item-draggable-button:active {
4522
- cursor: grabbing;
4523
- }
4524
-
4525
- .pf-c-data-list__item-draggable-button.pf-m-disabled {
4526
- --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
4527
- pointer-events: none;
4528
- }
4529
-
4530
- .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
4531
- color: var(--pf-c-data-list__item-draggable-button-icon--Color);
4532
- }
4533
-
4534
- .pf-c-data-list__item-action {
4535
- --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
4536
- align-items: flex-start;
4537
- align-content: flex-start;
4538
- padding-top: var(--pf-c-data-list__item-action--PaddingTop);
4539
- padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
4540
- margin-left: var(--pf-c-data-list__item-action--MarginLeft);
4541
- }
4542
-
4543
- .pf-c-data-list__item-action > *:not(:last-child) {
4544
- margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
4545
- }
4546
-
4547
- .pf-c-data-list__item-action .pf-c-data-list__action {
4548
- margin-top: var(--pf-c-data-list__action--MarginTop);
4549
- margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
4550
- }
4551
-
4552
- .pf-c-data-list__toggle {
4553
- margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
4554
- }
4555
-
4556
- .pf-c-data-list__toggle-icon {
4557
- height: var(--pf-c-data-list__toggle-icon--Height);
4558
- pointer-events: none;
4559
- transition: var(--pf-c-data-list__toggle-icon--Transition);
4560
- transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
4561
- }
4562
-
4563
- .pf-c-data-list__item-content {
4564
- display: grid;
4565
- width: 100%;
4566
- grid-template-columns: auto 1fr;
4567
- }
4568
-
4569
- .pf-c-data-list__cell {
4570
- flex: 1;
4571
- grid-column: 1/-1;
4572
- padding-top: var(--pf-c-data-list__cell--PaddingTop);
4573
- padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
4574
- }
4575
-
4576
- .pf-c-data-list__cell + .pf-c-data-list__cell {
4577
- flex: 1 0 100%;
4578
- order: 1;
4579
- padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
4580
- }
4581
-
4582
- .pf-c-data-list__cell.pf-m-icon {
4583
- flex-grow: 0;
4584
- margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
4585
- grid-column: 1/2;
4586
- }
4587
-
4588
- .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
4589
- grid-column: 2/3;
4590
- padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
4591
- }
4592
-
4593
- .pf-c-data-list__cell.pf-m-align-right {
4594
- margin-left: 0;
4595
- }
4596
-
4597
- .pf-c-data-list__text {
4598
- display: inline-block;
4599
- }
4600
-
4601
- .pf-c-data-list__text,
4602
- .pf-c-data-list__cell {
4603
- min-width: var(--pf-c-data-list--cell--MinWidth);
4604
- max-width: 100%;
4605
- overflow: var(--pf-c-data-list--cell--Overflow);
4606
- text-overflow: var(--pf-c-data-list--cell--TextOverflow);
4607
- word-break: var(--pf-c-data-list--cell--WordBreak);
4608
- white-space: var(--pf-c-data-list--cell--WhiteSpace);
4609
- }
4157
+ @media screen and (min-width: 992px) {
4158
+ .pf-m-hidden-on-lg.pf-c-data-list__item-action {
4159
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4160
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4161
+ }
4610
4162
 
4611
- .pf-c-data-list__expandable-content {
4612
- max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
4613
- overflow-y: auto;
4614
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
4163
+ .pf-m-visible-on-lg.pf-c-data-list__item-action {
4164
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4165
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4166
+ }
4615
4167
  }
4168
+ @media screen and (min-width: 1200px) {
4169
+ .pf-m-hidden-on-xl.pf-c-data-list__item-action {
4170
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4171
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4172
+ }
4616
4173
 
4617
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
4618
- 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);
4174
+ .pf-m-visible-on-xl.pf-c-data-list__item-action {
4175
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4176
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4177
+ }
4619
4178
  }
4179
+ @media screen and (min-width: 1450px) {
4180
+ .pf-m-hidden-on-2xl.pf-c-data-list__item-action {
4181
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
4182
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
4183
+ }
4620
4184
 
4621
- .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
4622
- padding: 0;
4185
+ .pf-m-visible-on-2xl.pf-c-data-list__item-action {
4186
+ --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
4187
+ --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
4188
+ }
4623
4189
  }
4624
-
4625
4190
  @media screen and (min-width: 768px) {
4626
4191
  .pf-c-data-list:not([class*=pf-m-grid]) {
4627
4192
  --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
@@ -4846,258 +4411,693 @@ label.pf-c-check, .pf-c-check__label,
4846
4411
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4847
4412
  }
4848
4413
  }
4849
- @media screen and (min-width: 768px) {
4850
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
4414
+ @media screen and (min-width: 768px) {
4415
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
4416
+ display: flex;
4417
+ flex-wrap: wrap;
4418
+ flex-grow: 1;
4419
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4420
+ }
4421
+ }
4422
+ @media screen and (min-width: 768px) {
4423
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4424
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4425
+ }
4426
+
4427
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
4428
+ flex: 1;
4429
+ order: initial;
4430
+ }
4431
+
4432
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4433
+ margin-left: auto;
4434
+ }
4435
+
4436
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4437
+ flex: none;
4438
+ }
4439
+
4440
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4441
+ flex-grow: 2;
4442
+ }
4443
+
4444
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4445
+ flex-grow: 3;
4446
+ }
4447
+
4448
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4449
+ flex-grow: 4;
4450
+ }
4451
+
4452
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4453
+ flex-grow: 5;
4454
+ }
4455
+ }
4456
+ @media screen and (min-width: 768px) {
4457
+ .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4458
+ max-height: initial;
4459
+ overflow-y: visible;
4460
+ }
4461
+ }
4462
+ @media screen and (min-width: 992px) {
4463
+ .pf-c-data-list.pf-m-grid-lg {
4464
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4465
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4466
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4467
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4468
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4469
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4470
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4471
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4472
+ }
4473
+ }
4474
+ @media screen and (min-width: 992px) and (min-width: 1200px) {
4475
+ .pf-c-data-list.pf-m-grid-lg {
4476
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4477
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4478
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4479
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4480
+ }
4481
+ }
4482
+ @media screen and (min-width: 992px) {
4483
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
4484
+ display: flex;
4485
+ flex-wrap: wrap;
4486
+ flex-grow: 1;
4487
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4488
+ }
4489
+ }
4490
+ @media screen and (min-width: 992px) {
4491
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4492
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4493
+ }
4494
+
4495
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
4496
+ flex: 1;
4497
+ order: initial;
4498
+ }
4499
+
4500
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
4501
+ margin-left: auto;
4502
+ }
4503
+
4504
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
4505
+ flex: none;
4506
+ }
4507
+
4508
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
4509
+ flex-grow: 2;
4510
+ }
4511
+
4512
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
4513
+ flex-grow: 3;
4514
+ }
4515
+
4516
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
4517
+ flex-grow: 4;
4518
+ }
4519
+
4520
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
4521
+ flex-grow: 5;
4522
+ }
4523
+ }
4524
+ @media screen and (min-width: 992px) {
4525
+ .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
4526
+ max-height: initial;
4527
+ overflow-y: visible;
4528
+ }
4529
+ }
4530
+ @media screen and (min-width: 1200px) {
4531
+ .pf-c-data-list.pf-m-grid-xl {
4532
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4533
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4534
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4535
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4536
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4537
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4538
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4539
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4540
+ }
4541
+ }
4542
+ @media screen and (min-width: 1200px) and (min-width: 1200px) {
4543
+ .pf-c-data-list.pf-m-grid-xl {
4544
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4545
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4546
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4547
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4548
+ }
4549
+ }
4550
+ @media screen and (min-width: 1200px) {
4551
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
4552
+ display: flex;
4553
+ flex-wrap: wrap;
4554
+ flex-grow: 1;
4555
+ padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4556
+ }
4557
+ }
4558
+ @media screen and (min-width: 1200px) {
4559
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4560
+ margin-right: var(--pf-c-data-list__cell--MarginRight);
4561
+ }
4562
+
4563
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
4564
+ flex: 1;
4565
+ order: initial;
4566
+ }
4567
+
4568
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
4569
+ margin-left: auto;
4570
+ }
4571
+
4572
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
4573
+ flex: none;
4574
+ }
4575
+
4576
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
4577
+ flex-grow: 2;
4578
+ }
4579
+
4580
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
4581
+ flex-grow: 3;
4582
+ }
4583
+
4584
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
4585
+ flex-grow: 4;
4586
+ }
4587
+
4588
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
4589
+ flex-grow: 5;
4590
+ }
4591
+ }
4592
+ @media screen and (min-width: 1200px) {
4593
+ .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
4594
+ max-height: initial;
4595
+ overflow-y: visible;
4596
+ }
4597
+ }
4598
+ @media screen and (min-width: 1450px) {
4599
+ .pf-c-data-list.pf-m-grid-2xl {
4600
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4601
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4602
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4603
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4604
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4605
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4606
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4607
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4608
+ }
4609
+ }
4610
+ @media screen and (min-width: 1450px) and (min-width: 1200px) {
4611
+ .pf-c-data-list.pf-m-grid-2xl {
4612
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4613
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4614
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4615
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4616
+ }
4617
+ }
4618
+ @media screen and (min-width: 1450px) {
4619
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
4851
4620
  display: flex;
4852
4621
  flex-wrap: wrap;
4853
4622
  flex-grow: 1;
4854
4623
  padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4855
4624
  }
4856
4625
  }
4857
- @media screen and (min-width: 768px) {
4858
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4626
+ @media screen and (min-width: 1450px) {
4627
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4859
4628
  margin-right: var(--pf-c-data-list__cell--MarginRight);
4860
4629
  }
4861
4630
 
4862
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell + .pf-c-data-list__cell {
4631
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
4863
4632
  flex: 1;
4864
4633
  order: initial;
4865
4634
  }
4866
4635
 
4867
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-align-right {
4636
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
4868
4637
  margin-left: auto;
4869
4638
  }
4870
4639
 
4871
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-no-fill {
4640
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
4872
4641
  flex: none;
4873
4642
  }
4874
4643
 
4875
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-2 {
4644
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
4876
4645
  flex-grow: 2;
4877
4646
  }
4878
4647
 
4879
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-3 {
4880
- flex-grow: 3;
4881
- }
4648
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
4649
+ flex-grow: 3;
4650
+ }
4651
+
4652
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
4653
+ flex-grow: 4;
4654
+ }
4655
+
4656
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
4657
+ flex-grow: 5;
4658
+ }
4659
+ }
4660
+ @media screen and (min-width: 1450px) {
4661
+ .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
4662
+ max-height: initial;
4663
+ overflow-y: visible;
4664
+ }
4665
+ }
4666
+ .pf-c-data-list {
4667
+ --pf-c-data-list--FontSize: 1em;
4668
+ --pf-c-data-list--LineHeight: var(--pf-global--LineHeight--md);
4669
+ --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--300);
4670
+ --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
4671
+ --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4672
+ --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
4673
+ --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
4674
+ --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
4675
+ --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
4676
+ --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
4677
+ --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4678
+ --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4679
+ --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
4680
+ --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4681
+ --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4682
+ --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
4683
+ --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
4684
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
4685
+ --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
4686
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
4687
+ --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
4688
+ --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
4689
+ --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
4690
+ --pf-c-data-list__item--before--BackgroundColor: transparent;
4691
+ --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
4692
+ --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
4693
+ --pf-c-data-list__item--before--Top: 0;
4694
+ --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4695
+ --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
4696
+ --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--md);
4697
+ --pf-c-data-list__item-row--xl--PaddingRight: var(--pf-global--spacer--lg);
4698
+ --pf-c-data-list__item-row--xl--PaddingLeft: var(--pf-global--spacer--lg);
4699
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-global--spacer--lg);
4700
+ --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
4701
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
4702
+ --pf-c-data-list__cell--MarginRight: var(--pf-global--spacer--xl);
4703
+ --pf-c-data-list__cell--md--PaddingBottom: 0;
4704
+ --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
4705
+ --pf-c-data-list__cell--cell--PaddingTop: 0;
4706
+ --pf-c-data-list__cell--cell--md--PaddingTop: var(--pf-global--spacer--lg);
4707
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--lg);
4708
+ --pf-c-data-list--cell--MinWidth: initial;
4709
+ --pf-c-data-list--cell--Overflow: visible;
4710
+ --pf-c-data-list--cell--TextOverflow: clip;
4711
+ --pf-c-data-list--cell--WhiteSpace: normal;
4712
+ --pf-c-data-list--cell--WordBreak: normal;
4713
+ --pf-c-data-list--cell--m-truncate--MinWidth: 5ch;
4714
+ --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
4715
+ --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4716
+ --pf-c-data-list__toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4717
+ --pf-c-data-list__toggle-icon--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4718
+ --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
4719
+ --pf-c-data-list__toggle-icon--Rotate: 0;
4720
+ --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
4721
+ --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
4722
+ --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
4723
+ --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
4724
+ --pf-c-data-list__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--lg) * -1);
4725
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-global--spacer--lg);
4726
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-global--spacer--lg);
4727
+ --pf-c-data-list__item-draggable-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
4728
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-global--icon--Color--light);
4729
+ --pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color: var(--pf-global--disabled-color--200);
4730
+ --pf-c-data-list__item-draggable-button--hover__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4731
+ --pf-c-data-list__item-draggable-button--focus__draggable-icon--Color: var(--pf-global--icon--Color--dark);
4732
+ --pf-c-data-list__item--m-ghost-row--after--BackgroundColor: var(--pf-global--BackgroundColor--100);
4733
+ --pf-c-data-list__item--m-ghost-row--after--Opacity: .6;
4734
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
4735
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
4736
+ --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--md);
4737
+ --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--xl);
4738
+ --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);
4739
+ --pf-c-data-list__check--Height: calc(var(--pf-c-data-list--FontSize) * var(--pf-c-data-list--LineHeight));
4740
+ --pf-c-data-list__check--MarginTop: -0.0625rem;
4741
+ --pf-c-data-list__item-action--Display: flex;
4742
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
4743
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
4744
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--md);
4745
+ --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--xl);
4746
+ --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
4747
+ --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
4748
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
4749
+ --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
4750
+ --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
4751
+ --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
4752
+ --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
4753
+ --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
4754
+ --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
4755
+ --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
4756
+ --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--md);
4757
+ --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
4758
+ --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
4759
+ --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
4760
+ --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--lg);
4761
+ --pf-c-data-list__expandable-content-body--xl--PaddingRight: var(--pf-global--spacer--lg);
4762
+ --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--lg);
4763
+ --pf-c-data-list__expandable-content-body--xl--PaddingLeft: var(--pf-global--spacer--lg);
4764
+ --pf-c-data-list--m-compact--FontSize: var(--pf-global--FontSize--sm);
4765
+ --pf-c-data-list--m-compact--LineHeight: var(--pf-global--LineHeight--sm);
4766
+ --pf-c-data-list--m-compact__check--FontSize: var(--pf-global--FontSize--md);
4767
+ --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
4768
+ --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
4769
+ --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
4770
+ --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
4771
+ --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
4772
+ --pf-c-data-list--m-compact__cell--cell--MarginRight: var(--pf-global--spacer--md);
4773
+ --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
4774
+ --pf-c-data-list--m-compact__item-control--PaddingBottom: var(--pf-global--spacer--sm);
4775
+ --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
4776
+ --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
4777
+ --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
4778
+ --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
4779
+ --pf-c-data-list--m-compact__item-action__action--MarginTop: calc(var(--pf-c-data-list--m-compact__item-action--PaddingTop) * -1);
4780
+ --pf-c-data-list--m-compact__item-action__action--MarginBottom: calc(var(--pf-c-data-list--m-compact__item-action--PaddingBottom) * -1);
4781
+ --pf-c-data-list--m-compact__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4782
+ --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);
4783
+ --pf-c-data-list--m-compact__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--sm) * -1);
4784
+ --pf-c-data-list--m-compact__item-draggable-button--MarginBottom: calc(var(--pf-global--spacer--sm) * -1);
4785
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingTop: var(--pf-global--spacer--sm);
4786
+ --pf-c-data-list--m-compact__item-draggable-button--PaddingBottom: var(--pf-global--spacer--sm);
4787
+ --pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-global--spacer--sm);
4788
+ color: var(--pf-global--Color--100);
4789
+ font-size: var(--pf-c-data-list--FontSize);
4790
+ line-height: var(--pf-c-data-list--LineHeight);
4791
+ overflow-wrap: break-word;
4792
+ list-style-type: disc;
4793
+ border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
4794
+ }
4795
+
4796
+ @media screen and (min-width: 576px) {
4797
+ .pf-c-data-list {
4798
+ --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
4799
+ --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
4800
+ }
4801
+ }
4802
+ @media screen and (min-width: 576px) {
4803
+ .pf-c-data-list {
4804
+ --pf-c-data-list__item--BorderBottomWidth: var(--pf-c-data-list__item--sm--BorderBottomWidth);
4805
+ --pf-c-data-list__item--BorderBottomColor: var(--pf-c-data-list__item--sm--BorderBottomColor);
4806
+ }
4807
+ }
4808
+ @media (min-width: 576px) {
4809
+ .pf-c-data-list {
4810
+ --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item--before--sm--Top);
4811
+ }
4812
+ }
4813
+ .pf-c-data-list.pf-m-compact {
4814
+ --pf-c-data-list__check--FontSize: var(--pf-c-data-list--m-compact__check--FontSize);
4815
+ --pf-c-data-list__action--MarginTop: var(--pf-c-data-list--m-compact__action--MarginTop);
4816
+ --pf-c-data-list--FontSize: var(--pf-c-data-list--m-compact--FontSize);
4817
+ --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
4818
+ --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
4819
+ --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
4820
+ --pf-c-data-list__item-action__action--MarginTop: var(--pf-c-data-list--m-compact__item-action__action--MarginTop);
4821
+ --pf-c-data-list__item-action__action--MarginBottom: var(--pf-c-data-list--m-compact__item-action__action--MarginBottom);
4822
+ --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
4823
+ --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
4824
+ --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
4825
+ --pf-c-data-list__item-content--md--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
4826
+ --pf-c-data-list__item-draggable-button--MarginTop: var(--pf-c-data-list--m-compact__item-draggable-button--MarginTop);
4827
+ --pf-c-data-list__item-draggable-button--MarginBottom: var(--pf-c-data-list--m-compact__item-draggable-button--MarginBottom);
4828
+ --pf-c-data-list__item-draggable-button--PaddingTop: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingTop);
4829
+ --pf-c-data-list__item-draggable-button--PaddingBottom: var(--pf-c-data-list--m-compact__item-draggable-button--PaddingBottom);
4830
+ --pf-c-data-list__cell--m-icon--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--m-icon--cell--PaddingTop);
4831
+ font-size: var(--pf-c-data-list--m-compact--FontSize);
4832
+ }
4833
+
4834
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__cell {
4835
+ --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
4836
+ --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
4837
+ --pf-c-data-list__cell--MarginRight: var(--pf-c-data-list--m-compact__cell--cell--MarginRight);
4838
+ --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
4839
+ }
4840
+
4841
+ .pf-c-data-list.pf-m-compact .pf-c-data-list__check {
4842
+ font-size: var(--pf-c-data-list--m-compact__check--FontSize);
4843
+ }
4844
+
4845
+ .pf-c-data-list.pf-m-drag-over {
4846
+ overflow-anchor: none;
4847
+ }
4848
+
4849
+ .pf-c-data-list.pf-m-truncate,
4850
+ .pf-c-data-list__item-row.pf-m-truncate,
4851
+ .pf-c-data-list__cell.pf-m-truncate,
4852
+ .pf-c-data-list__text.pf-m-truncate {
4853
+ --pf-c-data-list--cell--MinWidth: var(--pf-c-data-list--cell--m-truncate--MinWidth);
4854
+ --pf-c-data-list--cell--Overflow: hidden;
4855
+ --pf-c-data-list--cell--TextOverflow: ellipsis;
4856
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4857
+ }
4858
+
4859
+ .pf-c-data-list.pf-m-break-word,
4860
+ .pf-c-data-list__item-row.pf-m-break-word,
4861
+ .pf-c-data-list__cell.pf-m-break-word,
4862
+ .pf-c-data-list__text.pf-m-break-word {
4863
+ --pf-c-data-list--cell--WordBreak: break-word;
4864
+ }
4865
+
4866
+ .pf-c-data-list.pf-m-nowrap,
4867
+ .pf-c-data-list__item-row.pf-m-nowrap,
4868
+ .pf-c-data-list__cell.pf-m-nowrap,
4869
+ .pf-c-data-list__text.pf-m-nowrap {
4870
+ --pf-c-data-list--cell--WhiteSpace: nowrap;
4871
+ }
4872
+
4873
+ .pf-c-data-list__item {
4874
+ position: relative;
4875
+ display: flex;
4876
+ flex-direction: column;
4877
+ background-color: var(--pf-c-data-list__item--BackgroundColor);
4878
+ border-bottom: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
4879
+ }
4880
+
4881
+ .pf-c-data-list__item::before {
4882
+ position: absolute;
4883
+ top: var(--pf-c-data-list__item--before--Top);
4884
+ bottom: 0;
4885
+ left: 0;
4886
+ width: var(--pf-c-data-list__item--before--Width);
4887
+ content: "";
4888
+ background-color: var(--pf-c-data-list__item--before--BackgroundColor);
4889
+ transition: var(--pf-c-data-list__item--before--Transition);
4890
+ }
4891
+
4892
+ .pf-c-data-list__item.pf-m-selectable {
4893
+ cursor: pointer;
4894
+ outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
4895
+ }
4882
4896
 
4883
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-4 {
4884
- flex-grow: 4;
4885
- }
4897
+ .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
4898
+ position: relative;
4899
+ z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
4900
+ }
4886
4901
 
4887
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__cell.pf-m-flex-5 {
4888
- flex-grow: 5;
4889
- }
4902
+ .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) {
4903
+ --pf-c-data-list__item--BorderBottomWidth: 0;
4890
4904
  }
4891
- @media screen and (min-width: 768px) {
4892
- .pf-c-data-list.pf-m-grid-md .pf-c-data-list__expandable-content {
4893
- max-height: initial;
4894
- overflow-y: visible;
4895
- }
4905
+
4906
+ .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 {
4907
+ 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);
4896
4908
  }
4897
- @media screen and (min-width: 992px) {
4898
- .pf-c-data-list.pf-m-grid-lg {
4899
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4900
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4901
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4902
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4903
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4904
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4905
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4906
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4907
- }
4909
+
4910
+ .pf-c-data-list__item.pf-m-selectable:hover {
4911
+ box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
4908
4912
  }
4909
- @media screen and (min-width: 992px) and (min-width: 1200px) {
4910
- .pf-c-data-list.pf-m-grid-lg {
4911
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4912
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4913
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4914
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4915
- }
4913
+
4914
+ .pf-c-data-list__item.pf-m-selectable:focus {
4915
+ box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
4916
4916
  }
4917
- @media screen and (min-width: 992px) {
4918
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
4919
- display: flex;
4920
- flex-wrap: wrap;
4921
- flex-grow: 1;
4922
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4923
- }
4917
+
4918
+ .pf-c-data-list__item.pf-m-selectable:active {
4919
+ box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
4924
4920
  }
4925
- @media screen and (min-width: 992px) {
4926
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4927
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4928
- }
4929
4921
 
4930
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell + .pf-c-data-list__cell {
4931
- flex: 1;
4932
- order: initial;
4933
- }
4922
+ .pf-c-data-list__item.pf-m-selected {
4923
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
4924
+ position: relative;
4925
+ z-index: var(--pf-c-data-list__item--m-selected--ZIndex);
4926
+ box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
4927
+ }
4934
4928
 
4935
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-align-right {
4936
- margin-left: auto;
4937
- }
4929
+ .pf-c-data-list__item.pf-m-ghost-row::after {
4930
+ position: absolute;
4931
+ top: 0;
4932
+ right: 0;
4933
+ bottom: 0;
4934
+ left: 0;
4935
+ content: "";
4936
+ background-color: var(--pf-c-data-list__item--m-ghost-row--after--BackgroundColor);
4937
+ opacity: var(--pf-c-data-list__item--m-ghost-row--after--Opacity);
4938
+ }
4938
4939
 
4939
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-no-fill {
4940
- flex: none;
4941
- }
4940
+ .pf-c-data-list__item.pf-m-expanded {
4941
+ --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
4942
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
4943
+ }
4942
4944
 
4943
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-2 {
4944
- flex-grow: 2;
4945
- }
4945
+ .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
4946
+ --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
4947
+ }
4946
4948
 
4947
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-3 {
4948
- flex-grow: 3;
4949
- }
4949
+ .pf-c-data-list__item-row {
4950
+ display: flex;
4951
+ flex-wrap: nowrap;
4952
+ padding-right: var(--pf-c-data-list__item-row--PaddingRight);
4953
+ padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
4954
+ }
4950
4955
 
4951
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-4 {
4952
- flex-grow: 4;
4953
- }
4956
+ .pf-c-data-list__item-control {
4957
+ display: flex;
4958
+ flex-wrap: nowrap;
4959
+ padding-top: var(--pf-c-data-list__item-control--PaddingTop);
4960
+ padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
4961
+ margin-right: var(--pf-c-data-list__item-control--MarginRight);
4962
+ }
4954
4963
 
4955
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__cell.pf-m-flex-5 {
4956
- flex-grow: 5;
4957
- }
4964
+ .pf-c-data-list__item-control > *:not(:last-child) {
4965
+ margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
4958
4966
  }
4959
- @media screen and (min-width: 992px) {
4960
- .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__expandable-content {
4961
- max-height: initial;
4962
- overflow-y: visible;
4963
- }
4967
+
4968
+ .pf-c-data-list__check {
4969
+ display: flex;
4970
+ align-items: center;
4971
+ align-self: flex-start;
4972
+ height: var(--pf-c-data-list__check--Height);
4973
+ margin-top: var(--pf-c-data-list__check--MarginTop);
4964
4974
  }
4965
- @media screen and (min-width: 1200px) {
4966
- .pf-c-data-list.pf-m-grid-xl {
4967
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
4968
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
4969
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
4970
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
4971
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
4972
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
4973
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
4974
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
4975
- }
4975
+
4976
+ .pf-c-data-list__check > input {
4977
+ cursor: pointer;
4976
4978
  }
4977
- @media screen and (min-width: 1200px) and (min-width: 1200px) {
4978
- .pf-c-data-list.pf-m-grid-xl {
4979
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
4980
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
4981
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
4982
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
4983
- }
4979
+
4980
+ .pf-c-data-list__item-draggable-button {
4981
+ display: flex;
4982
+ flex-direction: column;
4983
+ 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);
4984
+ 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);
4985
+ border: 0;
4984
4986
  }
4985
- @media screen and (min-width: 1200px) {
4986
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
4987
- display: flex;
4988
- flex-wrap: wrap;
4989
- flex-grow: 1;
4990
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
4991
- }
4987
+
4988
+ .pf-c-data-list__item-draggable-button:hover {
4989
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--hover__draggable-icon--Color);
4990
+ cursor: grab;
4992
4991
  }
4993
- @media screen and (min-width: 1200px) {
4994
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
4995
- margin-right: var(--pf-c-data-list__cell--MarginRight);
4996
- }
4997
4992
 
4998
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell + .pf-c-data-list__cell {
4999
- flex: 1;
5000
- order: initial;
5001
- }
4993
+ .pf-c-data-list__item-draggable-button:focus {
4994
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--focus__draggable-icon--Color);
4995
+ }
5002
4996
 
5003
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-align-right {
5004
- margin-left: auto;
5005
- }
4997
+ .pf-c-data-list__item-draggable-button:active {
4998
+ cursor: grabbing;
4999
+ }
5006
5000
 
5007
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-no-fill {
5008
- flex: none;
5009
- }
5001
+ .pf-c-data-list__item-draggable-button.pf-m-disabled {
5002
+ --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
5003
+ pointer-events: none;
5004
+ }
5010
5005
 
5011
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-2 {
5012
- flex-grow: 2;
5013
- }
5006
+ .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
5007
+ color: var(--pf-c-data-list__item-draggable-button-icon--Color);
5008
+ }
5014
5009
 
5015
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-3 {
5016
- flex-grow: 3;
5017
- }
5010
+ .pf-c-data-list__item-action {
5011
+ --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
5012
+ align-items: flex-start;
5013
+ align-content: flex-start;
5014
+ padding-top: var(--pf-c-data-list__item-action--PaddingTop);
5015
+ padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
5016
+ margin-left: var(--pf-c-data-list__item-action--MarginLeft);
5017
+ }
5018
5018
 
5019
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-4 {
5020
- flex-grow: 4;
5021
- }
5019
+ .pf-c-data-list__item-action > *:not(:last-child) {
5020
+ margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);
5021
+ }
5022
5022
 
5023
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__cell.pf-m-flex-5 {
5024
- flex-grow: 5;
5025
- }
5023
+ .pf-c-data-list__item-action .pf-c-data-list__action {
5024
+ margin-top: var(--pf-c-data-list__action--MarginTop);
5025
+ margin-bottom: var(--pf-c-data-list__item-action__action--MarginBottom);
5026
5026
  }
5027
- @media screen and (min-width: 1200px) {
5028
- .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__expandable-content {
5029
- max-height: initial;
5030
- overflow-y: visible;
5031
- }
5027
+
5028
+ .pf-c-data-list__toggle {
5029
+ margin: var(--pf-c-data-list__toggle--MarginTop) 0 var(--pf-c-data-list__toggle--MarginBottom) var(--pf-c-data-list__toggle--MarginLeft);
5032
5030
  }
5033
- @media screen and (min-width: 1450px) {
5034
- .pf-c-data-list.pf-m-grid-2xl {
5035
- --pf-c-data-list__cell--cell--PaddingTop: var(--pf-c-data-list__cell--cell--md--PaddingTop);
5036
- --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
5037
- --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
5038
- --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
5039
- --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
5040
- --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
5041
- --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
5042
- --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
5043
- }
5031
+
5032
+ .pf-c-data-list__toggle-icon {
5033
+ height: var(--pf-c-data-list__toggle-icon--Height);
5034
+ pointer-events: none;
5035
+ transition: var(--pf-c-data-list__toggle-icon--Transition);
5036
+ transform: rotate(var(--pf-c-data-list__toggle-icon--Rotate));
5044
5037
  }
5045
- @media screen and (min-width: 1450px) and (min-width: 1200px) {
5046
- .pf-c-data-list.pf-m-grid-2xl {
5047
- --pf-c-data-list__item-row--PaddingRight: var(--pf-c-data-list__item-row--xl--PaddingRight);
5048
- --pf-c-data-list__item-row--PaddingLeft: var(--pf-c-data-list__item-row--xl--PaddingLeft);
5049
- --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--xl--PaddingRight);
5050
- --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--xl--PaddingLeft);
5051
- }
5038
+
5039
+ .pf-c-data-list__item-content {
5040
+ display: grid;
5041
+ width: 100%;
5042
+ grid-template-columns: auto 1fr;
5052
5043
  }
5053
- @media screen and (min-width: 1450px) {
5054
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
5055
- display: flex;
5056
- flex-wrap: wrap;
5057
- flex-grow: 1;
5058
- padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
5059
- }
5044
+
5045
+ .pf-c-data-list__cell {
5046
+ flex: 1;
5047
+ grid-column: 1/-1;
5048
+ padding-top: var(--pf-c-data-list__cell--PaddingTop);
5049
+ padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);
5060
5050
  }
5061
- @media screen and (min-width: 1450px) {
5062
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
5063
- margin-right: var(--pf-c-data-list__cell--MarginRight);
5064
- }
5065
5051
 
5066
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell + .pf-c-data-list__cell {
5067
- flex: 1;
5068
- order: initial;
5069
- }
5052
+ .pf-c-data-list__cell + .pf-c-data-list__cell {
5053
+ flex: 1 0 100%;
5054
+ order: 1;
5055
+ padding-top: var(--pf-c-data-list__cell--cell--PaddingTop);
5056
+ }
5070
5057
 
5071
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-align-right {
5072
- margin-left: auto;
5073
- }
5058
+ .pf-c-data-list__cell.pf-m-icon {
5059
+ flex-grow: 0;
5060
+ margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
5061
+ grid-column: 1/2;
5062
+ }
5074
5063
 
5075
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-no-fill {
5076
- flex: none;
5077
- }
5064
+ .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
5065
+ grid-column: 2/3;
5066
+ padding-top: var(--pf-c-data-list__cell--m-icon--cell--PaddingTop);
5067
+ }
5078
5068
 
5079
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-2 {
5080
- flex-grow: 2;
5081
- }
5069
+ .pf-c-data-list__cell.pf-m-align-right {
5070
+ margin-left: 0;
5071
+ }
5082
5072
 
5083
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-3 {
5084
- flex-grow: 3;
5085
- }
5073
+ .pf-c-data-list__text {
5074
+ display: inline-block;
5075
+ }
5086
5076
 
5087
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-4 {
5088
- flex-grow: 4;
5089
- }
5077
+ .pf-c-data-list__text,
5078
+ .pf-c-data-list__cell {
5079
+ min-width: var(--pf-c-data-list--cell--MinWidth);
5080
+ max-width: 100%;
5081
+ overflow: var(--pf-c-data-list--cell--Overflow);
5082
+ text-overflow: var(--pf-c-data-list--cell--TextOverflow);
5083
+ word-break: var(--pf-c-data-list--cell--WordBreak);
5084
+ white-space: var(--pf-c-data-list--cell--WhiteSpace);
5085
+ }
5090
5086
 
5091
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__cell.pf-m-flex-5 {
5092
- flex-grow: 5;
5093
- }
5087
+ .pf-c-data-list__expandable-content {
5088
+ max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
5089
+ overflow-y: auto;
5090
+ border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
5094
5091
  }
5095
- @media screen and (min-width: 1450px) {
5096
- .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__expandable-content {
5097
- max-height: initial;
5098
- overflow-y: visible;
5099
- }
5092
+
5093
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
5094
+ 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);
5095
+ }
5096
+
5097
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
5098
+ padding: 0;
5100
5099
  }
5100
+
5101
5101
  .pf-c-date-picker {
5102
5102
  --pf-c-date-picker--m-top__calendar--Top: 0;
5103
5103
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
@@ -17030,83 +17030,6 @@ label.pf-c-radio, .pf-c-radio__label,
17030
17030
  box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
17031
17031
  }
17032
17032
 
17033
- .pf-c-simple-list {
17034
- --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
17035
- --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
17036
- --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
17037
- --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
17038
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
17039
- --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
17040
- --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
17041
- --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
17042
- --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
17043
- --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
17044
- --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
17045
- --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
17046
- --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
17047
- --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
17048
- --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
17049
- --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
17050
- --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
17051
- --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
17052
- --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
17053
- --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
17054
- --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
17055
- --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
17056
- --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
17057
- --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
17058
- --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
17059
- --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
17060
- --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
17061
- }
17062
-
17063
- .pf-c-simple-list__item-link {
17064
- display: block;
17065
- width: 100%;
17066
- padding: var(--pf-c-simple-list__item-link--PaddingTop) var(--pf-c-simple-list__item-link--PaddingRight) var(--pf-c-simple-list__item-link--PaddingBottom) var(--pf-c-simple-list__item-link--PaddingLeft);
17067
- font-size: var(--pf-c-simple-list__item-link--FontSize);
17068
- font-weight: var(--pf-c-simple-list__item-link--FontWeight);
17069
- color: var(--pf-c-simple-list__item-link--Color);
17070
- text-align: left;
17071
- background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
17072
- border: none;
17073
- }
17074
-
17075
- .pf-c-simple-list__item-link:hover {
17076
- text-decoration: none;
17077
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
17078
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
17079
- }
17080
-
17081
- .pf-c-simple-list__item-link:focus {
17082
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
17083
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
17084
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
17085
- }
17086
-
17087
- .pf-c-simple-list__item-link:active {
17088
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
17089
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
17090
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
17091
- }
17092
-
17093
- .pf-c-simple-list__item-link.pf-m-current {
17094
- --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
17095
- --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
17096
- --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
17097
- }
17098
-
17099
- .pf-c-simple-list__title {
17100
- padding: var(--pf-c-simple-list__title--PaddingTop) var(--pf-c-simple-list__title--PaddingRight) var(--pf-c-simple-list__title--PaddingBottom) var(--pf-c-simple-list__title--PaddingLeft);
17101
- font-size: var(--pf-c-simple-list__title--FontSize);
17102
- font-weight: var(--pf-c-simple-list__title--FontWeight);
17103
- color: var(--pf-c-simple-list__title--Color);
17104
- }
17105
-
17106
- .pf-c-simple-list__section + .pf-c-simple-list__section {
17107
- margin-top: var(--pf-c-simple-list__section--section--MarginTop);
17108
- }
17109
-
17110
17033
  .pf-c-skeleton {
17111
17034
  --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-150);
17112
17035
  --pf-c-skeleton--Width: auto;
@@ -17296,6 +17219,83 @@ label.pf-c-radio, .pf-c-radio__label,
17296
17219
  transform: translateX(100%);
17297
17220
  }
17298
17221
  }
17222
+ .pf-c-simple-list {
17223
+ --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
17224
+ --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
17225
+ --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
17226
+ --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
17227
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
17228
+ --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
17229
+ --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
17230
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
17231
+ --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
17232
+ --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
17233
+ --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
17234
+ --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
17235
+ --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
17236
+ --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
17237
+ --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
17238
+ --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
17239
+ --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
17240
+ --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
17241
+ --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
17242
+ --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
17243
+ --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
17244
+ --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
17245
+ --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
17246
+ --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
17247
+ --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
17248
+ --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
17249
+ --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
17250
+ }
17251
+
17252
+ .pf-c-simple-list__item-link {
17253
+ display: block;
17254
+ width: 100%;
17255
+ padding: var(--pf-c-simple-list__item-link--PaddingTop) var(--pf-c-simple-list__item-link--PaddingRight) var(--pf-c-simple-list__item-link--PaddingBottom) var(--pf-c-simple-list__item-link--PaddingLeft);
17256
+ font-size: var(--pf-c-simple-list__item-link--FontSize);
17257
+ font-weight: var(--pf-c-simple-list__item-link--FontWeight);
17258
+ color: var(--pf-c-simple-list__item-link--Color);
17259
+ text-align: left;
17260
+ background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
17261
+ border: none;
17262
+ }
17263
+
17264
+ .pf-c-simple-list__item-link:hover {
17265
+ text-decoration: none;
17266
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
17267
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
17268
+ }
17269
+
17270
+ .pf-c-simple-list__item-link:focus {
17271
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
17272
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
17273
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
17274
+ }
17275
+
17276
+ .pf-c-simple-list__item-link:active {
17277
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
17278
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
17279
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
17280
+ }
17281
+
17282
+ .pf-c-simple-list__item-link.pf-m-current {
17283
+ --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
17284
+ --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
17285
+ --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
17286
+ }
17287
+
17288
+ .pf-c-simple-list__title {
17289
+ padding: var(--pf-c-simple-list__title--PaddingTop) var(--pf-c-simple-list__title--PaddingRight) var(--pf-c-simple-list__title--PaddingBottom) var(--pf-c-simple-list__title--PaddingLeft);
17290
+ font-size: var(--pf-c-simple-list__title--FontSize);
17291
+ font-weight: var(--pf-c-simple-list__title--FontWeight);
17292
+ color: var(--pf-c-simple-list__title--Color);
17293
+ }
17294
+
17295
+ .pf-c-simple-list__section + .pf-c-simple-list__section {
17296
+ margin-top: var(--pf-c-simple-list__section--section--MarginTop);
17297
+ }
17298
+
17299
17299
  .pf-c-skip-to-content {
17300
17300
  --pf-c-skip-to-content--Top: var(--pf-global--spacer--md);
17301
17301
  --pf-c-skip-to-content--ZIndex: var(--pf-global--ZIndex--2xl);