@patternfly/react-table 4.61.0 → 4.61.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/umd/react-table.min.css +1808 -1808
  3. package/package.json +6 -6
package/dist/umd/react-table.min.css CHANGED
@@ -1292,1492 +1292,1288 @@
1292
1292
  --pf-c-table--cell--Width: 100%;
1293
1293
  }
1294
1294
 
1295
- .pf-c-table {
1296
- --pf-c-table__tree-view-main--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-table__tree-view-icon--MinWidth));
1297
- --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
1298
- --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
1299
- --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
1300
- --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
1301
- --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
1302
- --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
1303
- --pf-c-table--m-tree-view__toggle--Position: absolute;
1304
- --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
1305
- --pf-c-table--m-tree-view__toggle--TranslateX: -100%;
1306
- --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
1295
+ .pf-c-table[class*=pf-m-grid] {
1296
+ --pf-c-table--responsive--BorderColor: var(--pf-global--BorderColor--300);
1297
+ --pf-c-table--tbody--responsive--border-width--base: var(--pf-global--spacer--sm);
1298
+ --pf-c-table--tbody--after--border-width--base: var(--pf-global--BorderWidth--lg);
1299
+ --pf-c-table--tbody--after--BorderLeftWidth: 0;
1300
+ --pf-c-table--tbody--after--BorderColor: var(--pf-global--active-color--100);
1301
+ --pf-c-table-tr--responsive--border-width--base: var(--pf-global--spacer--sm);
1302
+ --pf-c-table-tr--responsive--last-child--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
1303
+ --pf-c-table-tr--responsive--GridColumnGap: var(--pf-global--spacer--md);
1304
+ --pf-c-table-tr--responsive--MarginTop: var(--pf-global--spacer--sm);
1305
+ --pf-c-table-tr--responsive--PaddingTop: var(--pf-global--spacer--md);
1306
+ --pf-c-table-tr--responsive--PaddingRight: var(--pf-global--spacer--lg);
1307
+ --pf-c-table-tr--responsive--xl--PaddingRight: var(--pf-global--spacer--md);
1308
+ --pf-c-table-tr--responsive--PaddingBottom: var(--pf-global--spacer--md);
1309
+ --pf-c-table-tr--responsive--PaddingLeft: var(--pf-global--spacer--lg);
1310
+ --pf-c-table-tr--responsive--xl--PaddingLeft: var(--pf-global--spacer--md);
1311
+ --pf-c-table-tr--responsive--nested-table--PaddingTop: var(--pf-global--spacer--xl);
1312
+ --pf-c-table-tr--responsive--nested-table--PaddingRight: var(--pf-global--spacer--lg);
1313
+ --pf-c-table-tr--responsive--nested-table--PaddingBottom: var(--pf-global--spacer--xl);
1314
+ --pf-c-table-tr--responsive--nested-table--PaddingLeft: var(--pf-global--spacer--lg);
1315
+ --pf-c-table--tbody--after--tr--BorderLeftWidth: 0;
1316
+ --pf-c-table--tbody--after--tr--BorderLeftColor: transparent;
1317
+ --pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
1318
+ --pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor: var(--pf-global--active-color--400);
1319
+ --pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
1320
+ --pf-c-table--tbody--m-selected--after--tr--BorderLeftColor: var(--pf-global--active-color--100);
1321
+ --pf-c-table--m-grid--cell--hidden-visible--Display: grid;
1322
+ --pf-c-table--m-grid--cell--PaddingTop: 0;
1323
+ --pf-c-table--m-grid--cell--PaddingRight: 0;
1324
+ --pf-c-table--m-grid--cell--PaddingBottom: 0;
1325
+ --pf-c-table--m-grid--cell--PaddingLeft: 0;
1326
+ --pf-c-table-td--responsive--GridColumnGap: var(--pf-global--spacer--md);
1327
+ --pf-c-table--cell--responsive--PaddingTop: var(--pf-global--spacer--md);
1328
+ --pf-c-table--cell--responsive--PaddingBottom: var(--pf-global--spacer--sm);
1329
+ --pf-c-table--cell--first-child--responsive--PaddingTop: var(--pf-global--spacer--sm);
1330
+ --pf-c-table--cell--responsive--PaddingRight: 0;
1331
+ --pf-c-table--cell--responsive--PaddingLeft: 0;
1332
+ --pf-c-table--m-compact-tr--responsive--PaddingTop: var(--pf-global--spacer--sm);
1333
+ --pf-c-table--m-compact-tr--responsive--PaddingBottom: var(--pf-global--spacer--sm);
1334
+ --pf-c-table--m-compact-tr-td--responsive--PaddingTop: var(--pf-global--spacer--xs);
1335
+ --pf-c-table--m-compact-tr-td--responsive--PaddingBottom: var(--pf-global--spacer--xs);
1336
+ --pf-c-table--m-compact__action--responsive--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
1337
+ --pf-c-table--m-compact__action--responsive--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
1338
+ --pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom: calc(0.375rem * -1);
1339
+ --pf-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-global--spacer--lg);
1340
+ --pf-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-global--spacer--lg);
1341
+ --pf-c-table__expandable-row-content--responsive--xl--PaddingRight: var(--pf-global--spacer--md);
1342
+ --pf-c-table__expandable-row-content--responsive--xl--PaddingLeft: var(--pf-global--spacer--md);
1343
+ --pf-c-table__expandable-row-content--BackgroundColor: var(--pf-global--BackgroundColor--100);
1344
+ --pf-c-table__check--responsive--MarginLeft: var(--pf-global--spacer--sm);
1345
+ --pf-c-table__check--responsive--MarginTop: 0.875rem;
1346
+ --pf-c-table--m-grid__favorite--MarginTop: 0.5rem;
1347
+ --pf-c-table--m-grid__check--favorite--MarginLeft: var(--pf-global--spacer--xl);
1348
+ --pf-c-table--m-grid__action--MarginTop: 0.375rem;
1349
+ --pf-c-table__action--responsive--MarginLeft: var(--pf-global--spacer--xl);
1350
+ --pf-c-table--m-grid__favorite--action--MarginLeft: var(--pf-global--spacer--2xl);
1351
+ --pf-c-table--m-grid__check--favorite--action--MarginLeft: calc(var(--pf-c-table--m-grid__check--favorite--MarginLeft) + var(--pf-c-table--m-grid__favorite--action--MarginLeft));
1352
+ --pf-c-table__toggle__icon--Transition: .2s ease-in 0s;
1353
+ --pf-c-table__toggle--m-expanded__icon--Rotate: 180deg;
1307
1354
  }
1308
1355
 
1309
- .pf-c-table.pf-m-tree-view > tbody > tr {
1310
- --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
1356
+ @media screen and (max-width: 1200px) {
1357
+ .pf-c-table[class*=pf-m-grid] {
1358
+ --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--xl--PaddingRight);
1359
+ --pf-c-table-tr--responsive--PaddingLeft: var(--pf-c-table-tr--responsive--xl--PaddingLeft);
1360
+ }
1311
1361
  }
1312
-
1313
- .pf-c-table.pf-m-tree-view tr[aria-level="2"] {
1314
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
1362
+ @media screen and (max-width: 1200px) {
1363
+ .pf-c-table[class*=pf-m-grid] {
1364
+ --pf-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-c-table__expandable-row-content--responsive--xl--PaddingRight);
1365
+ --pf-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-c-table__expandable-row-content--responsive--xl--PaddingLeft);
1366
+ }
1315
1367
  }
1316
-
1317
- .pf-c-table.pf-m-tree-view tr[aria-level="3"] {
1318
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
1368
+ .pf-m-grid.pf-c-table {
1369
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
1370
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
1371
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
1372
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
1373
+ --pf-c-table__favorite--c-button--MarginTop: auto;
1374
+ --pf-c-table__favorite--c-button--MarginRight: auto;
1375
+ --pf-c-table__favorite--c-button--MarginBottom: auto;
1376
+ --pf-c-table__favorite--c-button--MarginLeft: auto;
1377
+ display: grid;
1378
+ border: none;
1319
1379
  }
1320
1380
 
1321
- .pf-c-table.pf-m-tree-view tr[aria-level="4"] {
1322
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
1381
+ .pf-m-grid.pf-c-table tr > * {
1382
+ width: auto;
1383
+ min-width: 0;
1384
+ max-width: none;
1385
+ overflow: visible;
1386
+ text-overflow: clip;
1387
+ white-space: normal;
1323
1388
  }
1324
1389
 
1325
- .pf-c-table.pf-m-tree-view tr[aria-level="5"] {
1326
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
1390
+ .pf-m-grid.pf-c-table .pf-c-table__text {
1391
+ position: relative;
1392
+ width: auto;
1393
+ min-width: 0;
1394
+ max-width: none;
1395
+ overflow: var(--pf-c-table--cell--Overflow);
1396
+ text-overflow: var(--pf-c-table--cell--TextOverflow);
1397
+ white-space: var(--pf-c-table--cell--WhiteSpace);
1327
1398
  }
1328
1399
 
1329
- .pf-c-table.pf-m-tree-view tr[aria-level="6"] {
1330
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
1400
+ .pf-m-grid.pf-c-table thead {
1401
+ display: none;
1402
+ visibility: hidden;
1331
1403
  }
1332
1404
 
1333
- .pf-c-table.pf-m-tree-view tr[aria-level="7"] {
1334
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
1405
+ .pf-m-grid.pf-c-table tbody {
1406
+ display: block;
1335
1407
  }
1336
1408
 
1337
- .pf-c-table.pf-m-tree-view tr[aria-level="8"] {
1338
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
1409
+ .pf-m-grid.pf-c-table tbody:first-of-type {
1410
+ border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
1339
1411
  }
1340
1412
 
1341
- .pf-c-table.pf-m-tree-view tr[aria-level="9"] {
1342
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
1413
+ .pf-m-grid.pf-c-table table.pf-m-compact > tbody {
1414
+ border-top: 0;
1343
1415
  }
1344
1416
 
1345
- .pf-c-table.pf-m-tree-view tr[aria-level="10"] {
1346
- --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
1417
+ .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) {
1418
+ border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
1347
1419
  }
1348
1420
 
1349
- .pf-c-table__tree-view-main {
1350
- position: relative;
1351
- display: flex;
1352
- align-items: baseline;
1353
- min-width: 0;
1354
- padding-left: var(--pf-c-table__tree-view-main--PaddingLeft);
1355
- margin-left: var(--pf-c-table__tree-view-main--MarginLeft);
1356
- text-align: left;
1357
- cursor: pointer;
1421
+ .pf-m-grid.pf-c-table tr:last-child,
1422
+ .pf-m-grid.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
1423
+ border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
1358
1424
  }
1359
1425
 
1360
- .pf-c-table__tree-view-main > .pf-c-table__toggle {
1361
- position: var(--pf-c-table--m-tree-view__toggle--Position);
1362
- left: var(--pf-c-table--m-tree-view__toggle--Left);
1363
- transform: translateX(var(--pf-c-table--m-tree-view__toggle--TranslateX));
1426
+ .pf-m-grid.pf-c-table tbody.pf-m-expanded {
1427
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
1364
1428
  }
1365
1429
 
1366
- .pf-c-table__tree-view-main > .pf-c-table__toggle .pf-c-table__toggle-icon {
1367
- min-width: var(--pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
1430
+ .pf-m-grid.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
1431
+ border-bottom: 0;
1368
1432
  }
1369
1433
 
1370
- .pf-c-table__tree-view-main > .pf-c-table__check {
1371
- margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
1434
+ .pf-m-grid.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
1435
+ border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
1372
1436
  }
1373
1437
 
1374
- .pf-c-table__tree-view-text {
1375
- display: flex;
1438
+ .pf-m-grid.pf-c-table tr.pf-m-selected {
1439
+ --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
1440
+ --pf-c-table__expandable-row--after--BorderColor: transparent;
1376
1441
  }
1377
1442
 
1378
- .pf-c-table__tree-view-icon {
1379
- min-width: var(--pf-c-table__tree-view-icon--MinWidth);
1380
- margin-right: var(--pf-c-table__tree-view-icon--MarginRight);
1443
+ .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) {
1444
+ display: grid;
1445
+ grid-template-columns: 1fr;
1446
+ height: auto;
1447
+ grid-auto-columns: max-content;
1448
+ grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
1449
+ padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
1381
1450
  }
1382
1451
 
1383
- .pf-c-table__tree-view-details-toggle {
1384
- display: none;
1385
- visibility: hidden;
1452
+ .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
1453
+ padding: var(--pf-c-table--cell--responsive--PaddingTop) var(--pf-c-table--cell--responsive--PaddingRight) var(--pf-c-table--cell--responsive--PaddingBottom) var(--pf-c-table--cell--responsive--PaddingLeft);
1386
1454
  }
1387
1455
 
1388
- .pf-m-tree-view-grid.pf-c-table {
1389
- --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
1390
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
1391
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
1392
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
1393
- --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
1394
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
1395
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
1396
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
1397
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
1398
- --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
1399
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
1400
- --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
1401
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
1402
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
1403
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
1404
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
1405
- --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
1406
- --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
1407
- --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
1408
- --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
1409
- --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
1410
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
1411
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
1456
+ .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
1457
+ --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--cell--first-child--responsive--PaddingTop);
1412
1458
  }
1413
1459
 
1414
- .pf-m-tree-view-grid.pf-c-table tbody tr {
1415
- position: relative;
1416
- outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
1417
- border: none;
1460
+ .pf-m-grid.pf-c-table.pf-m-compact {
1461
+ --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table--m-compact-tr--responsive--PaddingTop);
1462
+ --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr--responsive--PaddingBottom);
1463
+ --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--m-compact-tr-td--responsive--PaddingTop);
1464
+ --pf-c-table--cell--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr-td--responsive--PaddingBottom);
1465
+ --pf-c-table__check--input--MarginTop: 0;
1418
1466
  }
1419
1467
 
1420
- .pf-m-tree-view-grid.pf-c-table tbody tr::before {
1421
- position: absolute;
1422
- top: 0;
1423
- right: 0;
1424
- bottom: 0;
1425
- left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
1426
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
1427
- content: "";
1468
+ .pf-m-grid.pf-c-table.pf-m-compact .pf-c-table__action {
1469
+ margin-top: var(--pf-c-table--m-compact__action--responsive--MarginTop);
1470
+ margin-bottom: var(--pf-c-table--m-compact__action--responsive--MarginTop);
1428
1471
  }
1429
1472
 
1430
- .pf-m-tree-view-grid.pf-c-table tr:not([hidden]) {
1431
- display: grid;
1432
- grid-template-columns: 1fr max-content;
1473
+ .pf-m-grid.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
1474
+ margin-bottom: var(--pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1433
1475
  }
1434
1476
 
1435
- .pf-m-tree-view-grid.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
1436
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
1477
+ .pf-m-grid.pf-c-table .pf-c-table__icon > * {
1478
+ text-align: left;
1437
1479
  }
1438
1480
 
1439
- .pf-m-tree-view-grid.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
1440
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
1481
+ .pf-m-grid.pf-c-table [data-label] {
1482
+ --pf-c-table--cell--hidden-visible--Display: var(--pf-c-table--m-grid--cell--hidden-visible--Display);
1483
+ grid-column: 1;
1484
+ grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);
1485
+ grid-template-columns: 1fr minmax(0, 1.5fr);
1486
+ align-items: start;
1441
1487
  }
1442
1488
 
1443
- .pf-m-tree-view-grid.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
1444
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
1445
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
1446
- padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
1489
+ .pf-m-grid.pf-c-table [data-label] > * {
1490
+ grid-column: 2;
1447
1491
  }
1448
1492
 
1449
- .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-text {
1450
- padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
1493
+ .pf-m-grid.pf-c-table [data-label]::before {
1494
+ font-weight: bold;
1495
+ text-align: left;
1496
+ content: attr(data-label);
1451
1497
  }
1452
1498
 
1453
- .pf-m-tree-view-grid.pf-c-table thead th {
1454
- display: none;
1455
- visibility: none;
1499
+ .pf-m-grid.pf-c-table tr > *:first-child {
1500
+ --pf-c-table--cell--PaddingLeft: 0;
1456
1501
  }
1457
1502
 
1458
- .pf-m-tree-view-grid.pf-c-table td {
1459
- display: none;
1503
+ .pf-m-grid.pf-c-table tr > *:last-child {
1504
+ --pf-c-table--cell--PaddingRight: 0;
1460
1505
  }
1461
1506
 
1462
- .pf-m-tree-view-grid.pf-c-table td[data-label] {
1463
- grid-column: 1;
1464
- grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
1465
- grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
1466
- align-items: start;
1507
+ .pf-m-grid.pf-c-table .pf-c-table {
1508
+ --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
1509
+ --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--nested-table--PaddingRight);
1510
+ --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table-tr--responsive--nested-table--PaddingBottom);
1511
+ --pf-c-table-tr--responsive--PaddingLeft: var(--pf-c-table-tr--responsive--nested-table--PaddingLeft);
1512
+ border: 0;
1467
1513
  }
1468
1514
 
1469
- .pf-m-tree-view-grid.pf-c-table td[data-label] > * {
1470
- grid-column: 2;
1515
+ .pf-m-grid.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
1516
+ --pf-c-table-tr--responsive--PaddingTop: 0;
1471
1517
  }
1472
1518
 
1473
- .pf-m-tree-view-grid.pf-c-table td[data-label]::before {
1474
- font-weight: bold;
1475
- text-align: left;
1476
- content: attr(data-label);
1519
+ .pf-m-grid.pf-c-table .pf-c-table__compound-expansion-toggle {
1520
+ --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
1521
+ --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
1522
+ --pf-c-table__compound-expansion-toggle__button--after--Top: 100%;
1477
1523
  }
1478
1524
 
1479
- .pf-m-tree-view-grid.pf-c-table tr.pf-m-tree-view-details-expanded {
1480
- padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
1525
+ .pf-m-grid.pf-c-table tbody {
1526
+ position: relative;
1481
1527
  }
1482
1528
 
1483
- .pf-m-tree-view-grid.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
1484
- display: grid;
1529
+ .pf-m-grid.pf-c-table tbody::after {
1530
+ position: absolute;
1531
+ top: 0;
1532
+ bottom: 0;
1533
+ left: 0;
1534
+ content: "";
1535
+ border: 0;
1536
+ border-left: var(--pf-c-table--tbody--after--BorderLeftWidth) solid var(--pf-c-table--tbody--after--BorderColor);
1485
1537
  }
1486
1538
 
1487
- .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-title-header-cell {
1488
- display: block;
1489
- visibility: visible;
1539
+ .pf-m-grid.pf-c-table tbody.pf-m-expanded {
1540
+ --pf-c-table--tbody--after--BorderLeftWidth: var(--pf-c-table--tbody--after--border-width--base);
1490
1541
  }
1491
1542
 
1492
- .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-details-toggle,
1493
- .pf-m-tree-view-grid.pf-c-table .pf-c-table__action {
1494
- display: inline-block;
1495
- visibility: visible;
1543
+ .pf-m-grid.pf-c-table tbody.pf-m-expanded tbody {
1544
+ --pf-c-table--tbody--after--BorderLeftWidth: 0;
1496
1545
  }
1497
1546
 
1498
- .pf-m-tree-view-grid.pf-c-table .pf-c-table__action {
1499
- --pf-c-table--cell--Width: auto;
1500
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
1501
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
1502
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
1503
- grid-column: 2;
1504
- grid-row: 1;
1547
+ .pf-m-grid.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
1548
+ --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
1549
+ position: static;
1550
+ width: auto;
1551
+ background-color: transparent;
1505
1552
  }
1506
1553
 
1507
- .pf-m-tree-view-grid.pf-c-table .pf-c-table__action > .pf-c-dropdown {
1508
- margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
1509
- margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
1554
+ .pf-m-grid.pf-c-table .pf-c-table__expandable-row {
1555
+ --pf-c-table--cell--responsive--PaddingTop: 0;
1556
+ --pf-c-table--cell--responsive--PaddingRight: 0;
1557
+ --pf-c-table--cell--responsive--PaddingBottom: 0;
1558
+ --pf-c-table--cell--responsive--PaddingLeft: 0;
1559
+ --pf-c-table--cell--PaddingRight: 0;
1560
+ --pf-c-table--cell--PaddingLeft: 0;
1561
+ display: block;
1562
+ max-height: var(--pf-c-table__expandable-row--MaxHeight);
1563
+ overflow-y: auto;
1564
+ border-bottom: none;
1565
+ box-shadow: none;
1510
1566
  }
1511
1567
 
1512
- .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
1513
- margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
1514
- margin-left: auto;
1515
- order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
1568
+ .pf-m-grid.pf-c-table .pf-c-table__expandable-row > * {
1569
+ position: static;
1570
+ display: block;
1516
1571
  }
1517
1572
 
1518
- .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-details-toggle {
1519
- margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
1520
- margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
1573
+ .pf-m-grid.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
1574
+ border-top-color: var(--pf-c-table--BorderColor);
1521
1575
  }
1522
1576
 
1523
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="2"] {
1524
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
1577
+ .pf-m-grid.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
1578
+ content: none;
1525
1579
  }
1526
1580
 
1527
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="3"] {
1528
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
1581
+ .pf-m-grid.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
1582
+ padding: 0;
1529
1583
  }
1530
1584
 
1531
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="4"] {
1532
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
1585
+ .pf-m-grid.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
1586
+ display: none;
1587
+ visibility: hidden;
1533
1588
  }
1534
1589
 
1535
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="5"] {
1536
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
1590
+ .pf-m-grid.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
1591
+ padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
1592
+ padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
1537
1593
  }
1538
1594
 
1539
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="6"] {
1540
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
1595
+ .pf-m-grid.pf-c-table tbody.pf-m-hoverable {
1596
+ --pf-c-table--tbody--after--BorderLeftWidth: 0;
1597
+ --pf-c-table--tbody--after--BorderLeftColor: transparent;
1541
1598
  }
1542
1599
 
1543
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="7"] {
1544
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
1600
+ .pf-m-grid.pf-c-table tbody.pf-m-hoverable,
1601
+ .pf-m-grid.pf-c-table tbody.pf-m-hoverable > tr {
1602
+ position: relative;
1545
1603
  }
1546
1604
 
1547
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="8"] {
1548
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
1605
+ .pf-m-grid.pf-c-table tbody.pf-m-hoverable > tr::after {
1606
+ content: "";
1607
+ position: absolute;
1608
+ top: 0;
1609
+ bottom: 0;
1610
+ left: 0;
1611
+ width: var(--pf-c-table--tbody--after--tr--BorderLeftWidth);
1612
+ background-color: var(--pf-c-table--tbody--after--tr--BorderLeftColor);
1549
1613
  }
1550
1614
 
1551
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="9"] {
1552
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
1615
+ .pf-m-grid.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
1616
+ --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth);
1617
+ --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor);
1553
1618
  }
1554
1619
 
1555
- .pf-m-tree-view-grid.pf-c-table tr[aria-level="10"] {
1556
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
1620
+ .pf-m-grid.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
1621
+ --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth);
1622
+ --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftColor);
1557
1623
  }
1558
1624
 
1559
- @media screen and (max-width: 768px) {
1560
- .pf-m-tree-view-grid-md.pf-c-table {
1561
- --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
1562
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
1563
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
1564
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
1565
- --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
1566
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
1567
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
1568
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
1569
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
1570
- --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
1571
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
1572
- --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
1573
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
1574
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
1575
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
1576
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
1577
- --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
1578
- --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
1579
- --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
1580
- --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
1581
- --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
1582
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
1583
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
1584
- }
1625
+ .pf-m-grid.pf-c-table tr.pf-m-selected::after {
1626
+ content: "";
1627
+ position: absolute;
1628
+ top: 0;
1629
+ bottom: 0;
1630
+ left: 0;
1631
+ width: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
1632
+ background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
1633
+ }
1585
1634
 
1586
- .pf-m-tree-view-grid-md.pf-c-table tbody tr {
1587
- position: relative;
1588
- outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
1589
- border: none;
1590
- }
1635
+ .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
1636
+ .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
1637
+ .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
1638
+ .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
1639
+ width: auto;
1640
+ padding: 0;
1641
+ }
1591
1642
 
1592
- .pf-m-tree-view-grid-md.pf-c-table tbody tr::before {
1593
- position: absolute;
1594
- top: 0;
1595
- right: 0;
1596
- bottom: 0;
1597
- left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
1598
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
1599
- content: "";
1600
- }
1643
+ .pf-m-grid.pf-c-table .pf-c-table__toggle {
1644
+ grid-row-start: 20;
1645
+ grid-column: -1;
1646
+ justify-self: end;
1647
+ padding-right: 0;
1648
+ }
1601
1649
 
1602
- .pf-m-tree-view-grid-md.pf-c-table tr:not([hidden]) {
1603
- display: grid;
1604
- grid-template-columns: 1fr max-content;
1605
- }
1650
+ .pf-m-grid.pf-c-table .pf-c-table__toggle::after {
1651
+ content: none;
1652
+ }
1606
1653
 
1607
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
1608
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
1609
- }
1654
+ .pf-m-grid.pf-c-table .pf-c-table__button {
1655
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
1656
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
1657
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
1658
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
1659
+ }
1610
1660
 
1611
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
1612
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
1613
- }
1661
+ .pf-m-grid.pf-c-table .pf-c-table__check,
1662
+ .pf-m-grid.pf-c-table .pf-c-table__favorite,
1663
+ .pf-m-grid.pf-c-table .pf-c-table__action {
1664
+ grid-row-start: 1;
1665
+ grid-column-start: 2;
1666
+ }
1614
1667
 
1615
- .pf-m-tree-view-grid-md.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
1616
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
1617
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
1618
- padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
1619
- }
1668
+ .pf-m-grid.pf-c-table .pf-c-table__check {
1669
+ margin-top: var(--pf-c-table__check--responsive--MarginTop);
1670
+ margin-left: var(--pf-c-table__check--responsive--MarginLeft);
1671
+ }
1620
1672
 
1621
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-text {
1622
- padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
1623
- }
1673
+ .pf-m-grid.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
1674
+ margin-left: var(--pf-c-table--m-grid__check--favorite--MarginLeft);
1675
+ }
1624
1676
 
1625
- .pf-m-tree-view-grid-md.pf-c-table thead th {
1626
- display: none;
1627
- visibility: none;
1628
- }
1677
+ .pf-m-grid.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
1678
+ margin-left: var(--pf-c-table--m-grid__check--favorite--action--MarginLeft);
1679
+ }
1629
1680
 
1630
- .pf-m-tree-view-grid-md.pf-c-table td {
1631
- display: none;
1632
- }
1681
+ .pf-m-grid.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
1682
+ margin-left: var(--pf-c-table__action--responsive--MarginLeft);
1683
+ }
1633
1684
 
1634
- .pf-m-tree-view-grid-md.pf-c-table td[data-label] {
1635
- grid-column: 1;
1636
- grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
1637
- grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
1638
- align-items: start;
1639
- }
1685
+ .pf-m-grid.pf-c-table .pf-c-table__favorite {
1686
+ margin-top: var(--pf-c-table--m-grid__favorite--MarginTop);
1687
+ }
1640
1688
 
1641
- .pf-m-tree-view-grid-md.pf-c-table td[data-label] > * {
1642
- grid-column: 2;
1643
- }
1689
+ .pf-m-grid.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
1690
+ margin-left: var(--pf-c-table--m-grid__favorite--action--MarginLeft);
1691
+ }
1644
1692
 
1645
- .pf-m-tree-view-grid-md.pf-c-table td[data-label]::before {
1646
- font-weight: bold;
1647
- text-align: left;
1648
- content: attr(data-label);
1649
- }
1693
+ .pf-m-grid.pf-c-table .pf-c-table__action {
1694
+ margin-top: var(--pf-c-table--m-grid__action--MarginTop);
1695
+ text-align: right;
1696
+ }
1650
1697
 
1651
- .pf-m-tree-view-grid-md.pf-c-table tr.pf-m-tree-view-details-expanded {
1652
- padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
1698
+ @media screen and (max-width: 576px) {
1699
+ .pf-m-grid.pf-c-table .pf-c-table__action {
1700
+ grid-row-start: 1;
1701
+ grid-column-start: 2;
1702
+ margin-left: 0;
1653
1703
  }
1704
+ }
1705
+ .pf-m-grid.pf-c-table .pf-c-table__inline-edit-action {
1706
+ grid-column: 2;
1707
+ grid-row: 2;
1708
+ }
1654
1709
 
1655
- .pf-m-tree-view-grid-md.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
1656
- display: grid;
1657
- }
1710
+ .pf-m-grid.pf-c-table .pf-c-table__toggle-icon {
1711
+ transition: var(--pf-c-table__toggle__icon--Transition);
1712
+ }
1658
1713
 
1659
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-title-header-cell {
1660
- display: block;
1661
- visibility: visible;
1662
- }
1714
+ .pf-c-button.pf-m-expanded > .pf-m-grid.pf-c-table .pf-c-table__toggle-icon {
1715
+ transform: rotate(var(--pf-c-table__toggle--m-expanded__icon--Rotate));
1716
+ }
1663
1717
 
1664
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-details-toggle,
1665
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
1666
- display: inline-block;
1667
- visibility: visible;
1668
- }
1718
+ .pf-m-grid.pf-c-table .pf-m-nowrap {
1719
+ --pf-c-table--cell--Overflow: auto;
1720
+ }
1669
1721
 
1670
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
1671
- --pf-c-table--cell--Width: auto;
1672
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
1673
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
1674
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
1675
- grid-column: 2;
1676
- grid-row: 1;
1677
- }
1722
+ .pf-m-grid.pf-c-table .pf-m-fit-content {
1723
+ width: auto;
1724
+ white-space: normal;
1725
+ }
1678
1726
 
1679
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action > .pf-c-dropdown {
1680
- margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
1681
- margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
1682
- }
1727
+ .pf-m-grid.pf-c-table .pf-m-truncate {
1728
+ --pf-c-table--cell--MaxWidth: 100%;
1729
+ }
1683
1730
 
1684
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
1685
- margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
1686
- margin-left: auto;
1687
- order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
1688
- }
1731
+ .pf-m-grid.pf-c-table [class*=pf-m-width] {
1732
+ --pf-c-table--cell--Width: auto;
1733
+ }
1689
1734
 
1690
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-details-toggle {
1691
- margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
1692
- margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
1735
+ @media screen and (max-width: 768px) {
1736
+ .pf-m-grid-md.pf-c-table {
1737
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
1738
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
1739
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
1740
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
1741
+ --pf-c-table__favorite--c-button--MarginTop: auto;
1742
+ --pf-c-table__favorite--c-button--MarginRight: auto;
1743
+ --pf-c-table__favorite--c-button--MarginBottom: auto;
1744
+ --pf-c-table__favorite--c-button--MarginLeft: auto;
1745
+ display: grid;
1746
+ border: none;
1693
1747
  }
1694
1748
 
1695
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="2"] {
1696
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
1749
+ .pf-m-grid-md.pf-c-table tr > * {
1750
+ width: auto;
1751
+ min-width: 0;
1752
+ max-width: none;
1753
+ overflow: visible;
1754
+ text-overflow: clip;
1755
+ white-space: normal;
1697
1756
  }
1698
1757
 
1699
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="3"] {
1700
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
1758
+ .pf-m-grid-md.pf-c-table .pf-c-table__text {
1759
+ position: relative;
1760
+ width: auto;
1761
+ min-width: 0;
1762
+ max-width: none;
1763
+ overflow: var(--pf-c-table--cell--Overflow);
1764
+ text-overflow: var(--pf-c-table--cell--TextOverflow);
1765
+ white-space: var(--pf-c-table--cell--WhiteSpace);
1701
1766
  }
1702
1767
 
1703
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="4"] {
1704
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
1768
+ .pf-m-grid-md.pf-c-table thead {
1769
+ display: none;
1770
+ visibility: hidden;
1705
1771
  }
1706
1772
 
1707
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="5"] {
1708
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
1773
+ .pf-m-grid-md.pf-c-table tbody {
1774
+ display: block;
1709
1775
  }
1710
1776
 
1711
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="6"] {
1712
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
1777
+ .pf-m-grid-md.pf-c-table tbody:first-of-type {
1778
+ border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
1713
1779
  }
1714
1780
 
1715
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="7"] {
1716
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
1781
+ .pf-m-grid-md.pf-c-table table.pf-m-compact > tbody {
1782
+ border-top: 0;
1717
1783
  }
1718
1784
 
1719
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="8"] {
1720
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
1785
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) {
1786
+ border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
1721
1787
  }
1722
1788
 
1723
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="9"] {
1724
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
1789
+ .pf-m-grid-md.pf-c-table tr:last-child,
1790
+ .pf-m-grid-md.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
1791
+ border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
1725
1792
  }
1726
1793
 
1727
- .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="10"] {
1728
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
1794
+ .pf-m-grid-md.pf-c-table tbody.pf-m-expanded {
1795
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
1729
1796
  }
1730
- }
1731
- @media screen and (max-width: 992px) {
1732
- .pf-m-tree-view-grid-lg.pf-c-table {
1733
- --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
1734
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
1735
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
1736
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
1737
- --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
1738
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
1739
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
1740
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
1741
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
1742
- --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
1743
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
1744
- --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
1745
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
1746
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
1747
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
1748
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
1749
- --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
1750
- --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
1751
- --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
1752
- --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
1753
- --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
1754
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
1755
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
1797
+
1798
+ .pf-m-grid-md.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
1799
+ border-bottom: 0;
1756
1800
  }
1757
1801
 
1758
- .pf-m-tree-view-grid-lg.pf-c-table tbody tr {
1759
- position: relative;
1760
- outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
1761
- border: none;
1802
+ .pf-m-grid-md.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
1803
+ border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
1762
1804
  }
1763
1805
 
1764
- .pf-m-tree-view-grid-lg.pf-c-table tbody tr::before {
1765
- position: absolute;
1766
- top: 0;
1767
- right: 0;
1768
- bottom: 0;
1769
- left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
1770
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
1771
- content: "";
1806
+ .pf-m-grid-md.pf-c-table tr.pf-m-selected {
1807
+ --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
1808
+ --pf-c-table__expandable-row--after--BorderColor: transparent;
1772
1809
  }
1773
1810
 
1774
- .pf-m-tree-view-grid-lg.pf-c-table tr:not([hidden]) {
1811
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) {
1775
1812
  display: grid;
1776
- grid-template-columns: 1fr max-content;
1813
+ grid-template-columns: 1fr;
1814
+ height: auto;
1815
+ grid-auto-columns: max-content;
1816
+ grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
1817
+ padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
1777
1818
  }
1778
1819
 
1779
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
1780
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
1820
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
1821
+ padding: var(--pf-c-table--cell--responsive--PaddingTop) var(--pf-c-table--cell--responsive--PaddingRight) var(--pf-c-table--cell--responsive--PaddingBottom) var(--pf-c-table--cell--responsive--PaddingLeft);
1781
1822
  }
1782
1823
 
1783
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
1784
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
1824
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
1825
+ --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--cell--first-child--responsive--PaddingTop);
1785
1826
  }
1786
1827
 
1787
- .pf-m-tree-view-grid-lg.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
1788
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
1789
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
1790
- padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
1828
+ .pf-m-grid-md.pf-c-table.pf-m-compact {
1829
+ --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table--m-compact-tr--responsive--PaddingTop);
1830
+ --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr--responsive--PaddingBottom);
1831
+ --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--m-compact-tr-td--responsive--PaddingTop);
1832
+ --pf-c-table--cell--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr-td--responsive--PaddingBottom);
1833
+ --pf-c-table__check--input--MarginTop: 0;
1791
1834
  }
1792
1835
 
1793
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-text {
1794
- padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
1836
+ .pf-m-grid-md.pf-c-table.pf-m-compact .pf-c-table__action {
1837
+ margin-top: var(--pf-c-table--m-compact__action--responsive--MarginTop);
1838
+ margin-bottom: var(--pf-c-table--m-compact__action--responsive--MarginTop);
1795
1839
  }
1796
1840
 
1797
- .pf-m-tree-view-grid-lg.pf-c-table thead th {
1798
- display: none;
1799
- visibility: none;
1841
+ .pf-m-grid-md.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
1842
+ margin-bottom: var(--pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
1800
1843
  }
1801
1844
 
1802
- .pf-m-tree-view-grid-lg.pf-c-table td {
1803
- display: none;
1845
+ .pf-m-grid-md.pf-c-table .pf-c-table__icon > * {
1846
+ text-align: left;
1804
1847
  }
1805
1848
 
1806
- .pf-m-tree-view-grid-lg.pf-c-table td[data-label] {
1849
+ .pf-m-grid-md.pf-c-table [data-label] {
1850
+ --pf-c-table--cell--hidden-visible--Display: var(--pf-c-table--m-grid--cell--hidden-visible--Display);
1807
1851
  grid-column: 1;
1808
- grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
1809
- grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
1852
+ grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);
1853
+ grid-template-columns: 1fr minmax(0, 1.5fr);
1810
1854
  align-items: start;
1811
1855
  }
1812
1856
 
1813
- .pf-m-tree-view-grid-lg.pf-c-table td[data-label] > * {
1857
+ .pf-m-grid-md.pf-c-table [data-label] > * {
1814
1858
  grid-column: 2;
1815
1859
  }
1816
1860
 
1817
- .pf-m-tree-view-grid-lg.pf-c-table td[data-label]::before {
1861
+ .pf-m-grid-md.pf-c-table [data-label]::before {
1818
1862
  font-weight: bold;
1819
1863
  text-align: left;
1820
1864
  content: attr(data-label);
1821
1865
  }
1822
1866
 
1823
- .pf-m-tree-view-grid-lg.pf-c-table tr.pf-m-tree-view-details-expanded {
1824
- padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
1867
+ .pf-m-grid-md.pf-c-table tr > *:first-child {
1868
+ --pf-c-table--cell--PaddingLeft: 0;
1825
1869
  }
1826
1870
 
1827
- .pf-m-tree-view-grid-lg.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
1828
- display: grid;
1871
+ .pf-m-grid-md.pf-c-table tr > *:last-child {
1872
+ --pf-c-table--cell--PaddingRight: 0;
1829
1873
  }
1830
1874
 
1831
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-title-header-cell {
1832
- display: block;
1833
- visibility: visible;
1875
+ .pf-m-grid-md.pf-c-table .pf-c-table {
1876
+ --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
1877
+ --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--nested-table--PaddingRight);
1878
+ --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table-tr--responsive--nested-table--PaddingBottom);
1879
+ --pf-c-table-tr--responsive--PaddingLeft: var(--pf-c-table-tr--responsive--nested-table--PaddingLeft);
1880
+ border: 0;
1834
1881
  }
1835
1882
 
1836
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-details-toggle,
1837
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
1838
- display: inline-block;
1839
- visibility: visible;
1883
+ .pf-m-grid-md.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
1884
+ --pf-c-table-tr--responsive--PaddingTop: 0;
1840
1885
  }
1841
1886
 
1842
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
1843
- --pf-c-table--cell--Width: auto;
1844
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
1845
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
1846
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
1847
- grid-column: 2;
1848
- grid-row: 1;
1887
+ .pf-m-grid-md.pf-c-table .pf-c-table__compound-expansion-toggle {
1888
+ --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
1889
+ --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
1890
+ --pf-c-table__compound-expansion-toggle__button--after--Top: 100%;
1849
1891
  }
1850
1892
 
1851
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action > .pf-c-dropdown {
1852
- margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
1853
- margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
1893
+ .pf-m-grid-md.pf-c-table tbody {
1894
+ position: relative;
1854
1895
  }
1855
1896
 
1856
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
1857
- margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
1858
- margin-left: auto;
1859
- order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
1897
+ .pf-m-grid-md.pf-c-table tbody::after {
1898
+ position: absolute;
1899
+ top: 0;
1900
+ bottom: 0;
1901
+ left: 0;
1902
+ content: "";
1903
+ border: 0;
1904
+ border-left: var(--pf-c-table--tbody--after--BorderLeftWidth) solid var(--pf-c-table--tbody--after--BorderColor);
1860
1905
  }
1861
1906
 
1862
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-details-toggle {
1863
- margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
1864
- margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
1907
+ .pf-m-grid-md.pf-c-table tbody.pf-m-expanded {
1908
+ --pf-c-table--tbody--after--BorderLeftWidth: var(--pf-c-table--tbody--after--border-width--base);
1865
1909
  }
1866
1910
 
1867
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="2"] {
1868
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
1911
+ .pf-m-grid-md.pf-c-table tbody.pf-m-expanded tbody {
1912
+ --pf-c-table--tbody--after--BorderLeftWidth: 0;
1869
1913
  }
1870
1914
 
1871
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="3"] {
1872
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
1915
+ .pf-m-grid-md.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
1916
+ --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
1917
+ position: static;
1918
+ width: auto;
1919
+ background-color: transparent;
1873
1920
  }
1874
1921
 
1875
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="4"] {
1876
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
1922
+ .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row {
1923
+ --pf-c-table--cell--responsive--PaddingTop: 0;
1924
+ --pf-c-table--cell--responsive--PaddingRight: 0;
1925
+ --pf-c-table--cell--responsive--PaddingBottom: 0;
1926
+ --pf-c-table--cell--responsive--PaddingLeft: 0;
1927
+ --pf-c-table--cell--PaddingRight: 0;
1928
+ --pf-c-table--cell--PaddingLeft: 0;
1929
+ display: block;
1930
+ max-height: var(--pf-c-table__expandable-row--MaxHeight);
1931
+ overflow-y: auto;
1932
+ border-bottom: none;
1933
+ box-shadow: none;
1877
1934
  }
1878
1935
 
1879
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="5"] {
1880
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
1936
+ .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row > * {
1937
+ position: static;
1938
+ display: block;
1881
1939
  }
1882
1940
 
1883
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="6"] {
1884
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
1941
+ .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
1942
+ border-top-color: var(--pf-c-table--BorderColor);
1885
1943
  }
1886
1944
 
1887
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="7"] {
1888
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
1945
+ .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
1946
+ content: none;
1889
1947
  }
1890
1948
 
1891
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="8"] {
1892
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
1949
+ .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
1950
+ padding: 0;
1893
1951
  }
1894
1952
 
1895
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="9"] {
1896
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
1953
+ .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
1954
+ display: none;
1955
+ visibility: hidden;
1897
1956
  }
1898
1957
 
1899
- .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="10"] {
1900
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
1958
+ .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
1959
+ padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
1960
+ padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
1901
1961
  }
1902
- }
1903
- @media screen and (max-width: 1200px) {
1904
- .pf-m-tree-view-grid-xl.pf-c-table {
1905
- --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
1906
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
1907
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
1908
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
1909
- --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
1910
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
1911
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
1912
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
1913
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
1914
- --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
1915
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
1916
- --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
1917
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
1918
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
1919
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
1920
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
1921
- --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
1922
- --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
1923
- --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
1924
- --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
1925
- --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
1926
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
1927
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
1962
+
1963
+ .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable {
1964
+ --pf-c-table--tbody--after--BorderLeftWidth: 0;
1965
+ --pf-c-table--tbody--after--BorderLeftColor: transparent;
1928
1966
  }
1929
1967
 
1930
- .pf-m-tree-view-grid-xl.pf-c-table tbody tr {
1968
+ .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable,
1969
+ .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr {
1931
1970
  position: relative;
1932
- outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
1933
- border: none;
1934
1971
  }
1935
1972
 
1936
- .pf-m-tree-view-grid-xl.pf-c-table tbody tr::before {
1973
+ .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr::after {
1974
+ content: "";
1937
1975
  position: absolute;
1938
1976
  top: 0;
1939
- right: 0;
1940
1977
  bottom: 0;
1941
- left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
1942
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
1943
- content: "";
1944
- }
1945
-
1946
- .pf-m-tree-view-grid-xl.pf-c-table tr:not([hidden]) {
1947
- display: grid;
1948
- grid-template-columns: 1fr max-content;
1978
+ left: 0;
1979
+ width: var(--pf-c-table--tbody--after--tr--BorderLeftWidth);
1980
+ background-color: var(--pf-c-table--tbody--after--tr--BorderLeftColor);
1949
1981
  }
1950
1982
 
1951
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
1952
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
1983
+ .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
1984
+ --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth);
1985
+ --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor);
1953
1986
  }
1954
1987
 
1955
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
1956
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
1988
+ .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
1989
+ --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth);
1990
+ --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftColor);
1957
1991
  }
1958
1992
 
1959
- .pf-m-tree-view-grid-xl.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
1960
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
1961
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
1962
- padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
1993
+ .pf-m-grid-md.pf-c-table tr.pf-m-selected::after {
1994
+ content: "";
1995
+ position: absolute;
1996
+ top: 0;
1997
+ bottom: 0;
1998
+ left: 0;
1999
+ width: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
2000
+ background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
1963
2001
  }
1964
2002
 
1965
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-text {
1966
- padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
2003
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
2004
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
2005
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
2006
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
2007
+ width: auto;
2008
+ padding: 0;
1967
2009
  }
1968
2010
 
1969
- .pf-m-tree-view-grid-xl.pf-c-table thead th {
1970
- display: none;
1971
- visibility: none;
2011
+ .pf-m-grid-md.pf-c-table .pf-c-table__toggle {
2012
+ grid-row-start: 20;
2013
+ grid-column: -1;
2014
+ justify-self: end;
2015
+ padding-right: 0;
1972
2016
  }
1973
2017
 
1974
- .pf-m-tree-view-grid-xl.pf-c-table td {
1975
- display: none;
2018
+ .pf-m-grid-md.pf-c-table .pf-c-table__toggle::after {
2019
+ content: none;
1976
2020
  }
1977
2021
 
1978
- .pf-m-tree-view-grid-xl.pf-c-table td[data-label] {
1979
- grid-column: 1;
1980
- grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
1981
- grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
1982
- align-items: start;
2022
+ .pf-m-grid-md.pf-c-table .pf-c-table__button {
2023
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
2024
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
2025
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
2026
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
1983
2027
  }
1984
2028
 
1985
- .pf-m-tree-view-grid-xl.pf-c-table td[data-label] > * {
1986
- grid-column: 2;
2029
+ .pf-m-grid-md.pf-c-table .pf-c-table__check,
2030
+ .pf-m-grid-md.pf-c-table .pf-c-table__favorite,
2031
+ .pf-m-grid-md.pf-c-table .pf-c-table__action {
2032
+ grid-row-start: 1;
2033
+ grid-column-start: 2;
1987
2034
  }
1988
2035
 
1989
- .pf-m-tree-view-grid-xl.pf-c-table td[data-label]::before {
1990
- font-weight: bold;
1991
- text-align: left;
1992
- content: attr(data-label);
2036
+ .pf-m-grid-md.pf-c-table .pf-c-table__check {
2037
+ margin-top: var(--pf-c-table__check--responsive--MarginTop);
2038
+ margin-left: var(--pf-c-table__check--responsive--MarginLeft);
1993
2039
  }
1994
2040
 
1995
- .pf-m-tree-view-grid-xl.pf-c-table tr.pf-m-tree-view-details-expanded {
1996
- padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
2041
+ .pf-m-grid-md.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
2042
+ margin-left: var(--pf-c-table--m-grid__check--favorite--MarginLeft);
1997
2043
  }
1998
2044
 
1999
- .pf-m-tree-view-grid-xl.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
2000
- display: grid;
2045
+ .pf-m-grid-md.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
2046
+ margin-left: var(--pf-c-table--m-grid__check--favorite--action--MarginLeft);
2001
2047
  }
2002
2048
 
2003
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-title-header-cell {
2004
- display: block;
2005
- visibility: visible;
2049
+ .pf-m-grid-md.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
2050
+ margin-left: var(--pf-c-table__action--responsive--MarginLeft);
2006
2051
  }
2007
2052
 
2008
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-details-toggle,
2009
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
2010
- display: inline-block;
2011
- visibility: visible;
2053
+ .pf-m-grid-md.pf-c-table .pf-c-table__favorite {
2054
+ margin-top: var(--pf-c-table--m-grid__favorite--MarginTop);
2012
2055
  }
2013
2056
 
2014
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
2015
- --pf-c-table--cell--Width: auto;
2016
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
2017
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
2018
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
2019
- grid-column: 2;
2020
- grid-row: 1;
2057
+ .pf-m-grid-md.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
2058
+ margin-left: var(--pf-c-table--m-grid__favorite--action--MarginLeft);
2021
2059
  }
2022
2060
 
2023
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action > .pf-c-dropdown {
2024
- margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
2025
- margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
2061
+ .pf-m-grid-md.pf-c-table .pf-c-table__action {
2062
+ margin-top: var(--pf-c-table--m-grid__action--MarginTop);
2063
+ text-align: right;
2026
2064
  }
2027
-
2028
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
2029
- margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
2030
- margin-left: auto;
2031
- order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
2065
+ }
2066
+ @media screen and (max-width: 768px) and (max-width: 576px) {
2067
+ .pf-m-grid-md.pf-c-table .pf-c-table__action {
2068
+ grid-row-start: 1;
2069
+ grid-column-start: 2;
2070
+ margin-left: 0;
2071
+ }
2072
+ }
2073
+ @media screen and (max-width: 768px) {
2074
+ .pf-m-grid-md.pf-c-table .pf-c-table__inline-edit-action {
2075
+ grid-column: 2;
2076
+ grid-row: 2;
2077
+ }
2078
+ }
2079
+ @media screen and (max-width: 768px) {
2080
+ .pf-m-grid-md.pf-c-table .pf-c-table__toggle-icon {
2081
+ transition: var(--pf-c-table__toggle__icon--Transition);
2032
2082
  }
2033
2083
 
2034
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-details-toggle {
2035
- margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
2036
- margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
2084
+ .pf-c-button.pf-m-expanded > .pf-m-grid-md.pf-c-table .pf-c-table__toggle-icon {
2085
+ transform: rotate(var(--pf-c-table__toggle--m-expanded__icon--Rotate));
2086
+ }
2087
+ }
2088
+ @media screen and (max-width: 768px) {
2089
+ .pf-m-grid-md.pf-c-table .pf-m-nowrap {
2090
+ --pf-c-table--cell--Overflow: auto;
2091
+ }
2092
+ }
2093
+ @media screen and (max-width: 768px) {
2094
+ .pf-m-grid-md.pf-c-table .pf-m-fit-content {
2095
+ width: auto;
2096
+ white-space: normal;
2097
+ }
2098
+ }
2099
+ @media screen and (max-width: 768px) {
2100
+ .pf-m-grid-md.pf-c-table .pf-m-truncate {
2101
+ --pf-c-table--cell--MaxWidth: 100%;
2102
+ }
2103
+ }
2104
+ @media screen and (max-width: 768px) {
2105
+ .pf-m-grid-md.pf-c-table [class*=pf-m-width] {
2106
+ --pf-c-table--cell--Width: auto;
2107
+ }
2108
+ }
2109
+ @media screen and (max-width: 992px) {
2110
+ .pf-m-grid-lg.pf-c-table {
2111
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
2112
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
2113
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
2114
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
2115
+ --pf-c-table__favorite--c-button--MarginTop: auto;
2116
+ --pf-c-table__favorite--c-button--MarginRight: auto;
2117
+ --pf-c-table__favorite--c-button--MarginBottom: auto;
2118
+ --pf-c-table__favorite--c-button--MarginLeft: auto;
2119
+ display: grid;
2120
+ border: none;
2037
2121
  }
2038
2122
 
2039
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="2"] {
2040
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
2123
+ .pf-m-grid-lg.pf-c-table tr > * {
2124
+ width: auto;
2125
+ min-width: 0;
2126
+ max-width: none;
2127
+ overflow: visible;
2128
+ text-overflow: clip;
2129
+ white-space: normal;
2041
2130
  }
2042
2131
 
2043
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="3"] {
2044
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
2132
+ .pf-m-grid-lg.pf-c-table .pf-c-table__text {
2133
+ position: relative;
2134
+ width: auto;
2135
+ min-width: 0;
2136
+ max-width: none;
2137
+ overflow: var(--pf-c-table--cell--Overflow);
2138
+ text-overflow: var(--pf-c-table--cell--TextOverflow);
2139
+ white-space: var(--pf-c-table--cell--WhiteSpace);
2045
2140
  }
2046
2141
 
2047
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="4"] {
2048
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
2142
+ .pf-m-grid-lg.pf-c-table thead {
2143
+ display: none;
2144
+ visibility: hidden;
2049
2145
  }
2050
2146
 
2051
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="5"] {
2052
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
2147
+ .pf-m-grid-lg.pf-c-table tbody {
2148
+ display: block;
2053
2149
  }
2054
2150
 
2055
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="6"] {
2056
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
2151
+ .pf-m-grid-lg.pf-c-table tbody:first-of-type {
2152
+ border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2057
2153
  }
2058
2154
 
2059
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="7"] {
2060
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
2155
+ .pf-m-grid-lg.pf-c-table table.pf-m-compact > tbody {
2156
+ border-top: 0;
2061
2157
  }
2062
2158
 
2063
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="8"] {
2064
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
2159
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) {
2160
+ border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2065
2161
  }
2066
2162
 
2067
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="9"] {
2068
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
2163
+ .pf-m-grid-lg.pf-c-table tr:last-child,
2164
+ .pf-m-grid-lg.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
2165
+ border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
2069
2166
  }
2070
2167
 
2071
- .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="10"] {
2072
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
2168
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded {
2169
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
2073
2170
  }
2074
- }
2075
- @media screen and (max-width: 1450px) {
2076
- .pf-m-tree-view-grid-2xl.pf-c-table {
2077
- --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
2078
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
2079
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
2080
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
2081
- --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
2082
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
2083
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
2084
- --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
2085
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
2086
- --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
2087
- --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
2088
- --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
2089
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
2090
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
2091
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
2092
- --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
2093
- --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
2094
- --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
2095
- --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
2096
- --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
2097
- --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
2098
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
2099
- --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
2171
+
2172
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
2173
+ border-bottom: 0;
2100
2174
  }
2101
2175
 
2102
- .pf-m-tree-view-grid-2xl.pf-c-table tbody tr {
2103
- position: relative;
2104
- outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
2105
- border: none;
2176
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
2177
+ border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2106
2178
  }
2107
2179
 
2108
- .pf-m-tree-view-grid-2xl.pf-c-table tbody tr::before {
2109
- position: absolute;
2110
- top: 0;
2111
- right: 0;
2112
- bottom: 0;
2113
- left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
2114
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
2115
- content: "";
2180
+ .pf-m-grid-lg.pf-c-table tr.pf-m-selected {
2181
+ --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
2182
+ --pf-c-table__expandable-row--after--BorderColor: transparent;
2116
2183
  }
2117
2184
 
2118
- .pf-m-tree-view-grid-2xl.pf-c-table tr:not([hidden]) {
2185
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) {
2119
2186
  display: grid;
2120
- grid-template-columns: 1fr max-content;
2187
+ grid-template-columns: 1fr;
2188
+ height: auto;
2189
+ grid-auto-columns: max-content;
2190
+ grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
2191
+ padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
2121
2192
  }
2122
2193
 
2123
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
2124
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
2194
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
2195
+ padding: var(--pf-c-table--cell--responsive--PaddingTop) var(--pf-c-table--cell--responsive--PaddingRight) var(--pf-c-table--cell--responsive--PaddingBottom) var(--pf-c-table--cell--responsive--PaddingLeft);
2125
2196
  }
2126
2197
 
2127
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
2128
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
2198
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
2199
+ --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--cell--first-child--responsive--PaddingTop);
2129
2200
  }
2130
2201
 
2131
- .pf-m-tree-view-grid-2xl.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
2132
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
2133
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
2134
- padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
2202
+ .pf-m-grid-lg.pf-c-table.pf-m-compact {
2203
+ --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table--m-compact-tr--responsive--PaddingTop);
2204
+ --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr--responsive--PaddingBottom);
2205
+ --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--m-compact-tr-td--responsive--PaddingTop);
2206
+ --pf-c-table--cell--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr-td--responsive--PaddingBottom);
2207
+ --pf-c-table__check--input--MarginTop: 0;
2135
2208
  }
2136
2209
 
2137
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-text {
2138
- padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
2210
+ .pf-m-grid-lg.pf-c-table.pf-m-compact .pf-c-table__action {
2211
+ margin-top: var(--pf-c-table--m-compact__action--responsive--MarginTop);
2212
+ margin-bottom: var(--pf-c-table--m-compact__action--responsive--MarginTop);
2139
2213
  }
2140
2214
 
2141
- .pf-m-tree-view-grid-2xl.pf-c-table thead th {
2142
- display: none;
2143
- visibility: none;
2215
+ .pf-m-grid-lg.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
2216
+ margin-bottom: var(--pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
2144
2217
  }
2145
2218
 
2146
- .pf-m-tree-view-grid-2xl.pf-c-table td {
2147
- display: none;
2219
+ .pf-m-grid-lg.pf-c-table .pf-c-table__icon > * {
2220
+ text-align: left;
2148
2221
  }
2149
2222
 
2150
- .pf-m-tree-view-grid-2xl.pf-c-table td[data-label] {
2223
+ .pf-m-grid-lg.pf-c-table [data-label] {
2224
+ --pf-c-table--cell--hidden-visible--Display: var(--pf-c-table--m-grid--cell--hidden-visible--Display);
2151
2225
  grid-column: 1;
2152
- grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
2153
- grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
2226
+ grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);
2227
+ grid-template-columns: 1fr minmax(0, 1.5fr);
2154
2228
  align-items: start;
2155
2229
  }
2156
2230
 
2157
- .pf-m-tree-view-grid-2xl.pf-c-table td[data-label] > * {
2231
+ .pf-m-grid-lg.pf-c-table [data-label] > * {
2158
2232
  grid-column: 2;
2159
2233
  }
2160
2234
 
2161
- .pf-m-tree-view-grid-2xl.pf-c-table td[data-label]::before {
2235
+ .pf-m-grid-lg.pf-c-table [data-label]::before {
2162
2236
  font-weight: bold;
2163
2237
  text-align: left;
2164
2238
  content: attr(data-label);
2165
2239
  }
2166
2240
 
2167
- .pf-m-tree-view-grid-2xl.pf-c-table tr.pf-m-tree-view-details-expanded {
2168
- padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
2169
- }
2170
-
2171
- .pf-m-tree-view-grid-2xl.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
2172
- display: grid;
2241
+ .pf-m-grid-lg.pf-c-table tr > *:first-child {
2242
+ --pf-c-table--cell--PaddingLeft: 0;
2173
2243
  }
2174
2244
 
2175
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-title-header-cell {
2176
- display: block;
2177
- visibility: visible;
2245
+ .pf-m-grid-lg.pf-c-table tr > *:last-child {
2246
+ --pf-c-table--cell--PaddingRight: 0;
2178
2247
  }
2179
2248
 
2180
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-details-toggle,
2181
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
2182
- display: inline-block;
2183
- visibility: visible;
2249
+ .pf-m-grid-lg.pf-c-table .pf-c-table {
2250
+ --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
2251
+ --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--nested-table--PaddingRight);
2252
+ --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table-tr--responsive--nested-table--PaddingBottom);
2253
+ --pf-c-table-tr--responsive--PaddingLeft: var(--pf-c-table-tr--responsive--nested-table--PaddingLeft);
2254
+ border: 0;
2184
2255
  }
2185
2256
 
2186
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
2187
- --pf-c-table--cell--Width: auto;
2188
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
2189
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
2190
- --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
2191
- grid-column: 2;
2192
- grid-row: 1;
2257
+ .pf-m-grid-lg.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
2258
+ --pf-c-table-tr--responsive--PaddingTop: 0;
2193
2259
  }
2194
2260
 
2195
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action > .pf-c-dropdown {
2196
- margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
2197
- margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
2261
+ .pf-m-grid-lg.pf-c-table .pf-c-table__compound-expansion-toggle {
2262
+ --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
2263
+ --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
2264
+ --pf-c-table__compound-expansion-toggle__button--after--Top: 100%;
2198
2265
  }
2199
2266
 
2200
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
2201
- margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
2202
- margin-left: auto;
2203
- order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
2267
+ .pf-m-grid-lg.pf-c-table tbody {
2268
+ position: relative;
2204
2269
  }
2205
2270
 
2206
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-details-toggle {
2207
- margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
2208
- margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
2271
+ .pf-m-grid-lg.pf-c-table tbody::after {
2272
+ position: absolute;
2273
+ top: 0;
2274
+ bottom: 0;
2275
+ left: 0;
2276
+ content: "";
2277
+ border: 0;
2278
+ border-left: var(--pf-c-table--tbody--after--BorderLeftWidth) solid var(--pf-c-table--tbody--after--BorderColor);
2209
2279
  }
2210
2280
 
2211
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="2"] {
2212
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
2281
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded {
2282
+ --pf-c-table--tbody--after--BorderLeftWidth: var(--pf-c-table--tbody--after--border-width--base);
2213
2283
  }
2214
2284
 
2215
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="3"] {
2216
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
2285
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded tbody {
2286
+ --pf-c-table--tbody--after--BorderLeftWidth: 0;
2217
2287
  }
2218
2288
 
2219
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="4"] {
2220
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
2289
+ .pf-m-grid-lg.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
2290
+ --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
2291
+ position: static;
2292
+ width: auto;
2293
+ background-color: transparent;
2221
2294
  }
2222
2295
 
2223
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="5"] {
2224
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
2296
+ .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row {
2297
+ --pf-c-table--cell--responsive--PaddingTop: 0;
2298
+ --pf-c-table--cell--responsive--PaddingRight: 0;
2299
+ --pf-c-table--cell--responsive--PaddingBottom: 0;
2300
+ --pf-c-table--cell--responsive--PaddingLeft: 0;
2301
+ --pf-c-table--cell--PaddingRight: 0;
2302
+ --pf-c-table--cell--PaddingLeft: 0;
2303
+ display: block;
2304
+ max-height: var(--pf-c-table__expandable-row--MaxHeight);
2305
+ overflow-y: auto;
2306
+ border-bottom: none;
2307
+ box-shadow: none;
2225
2308
  }
2226
2309
 
2227
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="6"] {
2228
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
2310
+ .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row > * {
2311
+ position: static;
2312
+ display: block;
2229
2313
  }
2230
2314
 
2231
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="7"] {
2232
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
2315
+ .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
2316
+ border-top-color: var(--pf-c-table--BorderColor);
2233
2317
  }
2234
2318
 
2235
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="8"] {
2236
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
2319
+ .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
2320
+ content: none;
2237
2321
  }
2238
2322
 
2239
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="9"] {
2240
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
2323
+ .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
2324
+ padding: 0;
2241
2325
  }
2242
2326
 
2243
- .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="10"] {
2244
- --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
2327
+ .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
2328
+ display: none;
2329
+ visibility: hidden;
2245
2330
  }
2246
- }
2247
- .pf-c-table[class*=pf-m-grid] {
2248
- --pf-c-table--responsive--BorderColor: var(--pf-global--BorderColor--300);
2249
- --pf-c-table--tbody--responsive--border-width--base: var(--pf-global--spacer--sm);
2250
- --pf-c-table--tbody--after--border-width--base: var(--pf-global--BorderWidth--lg);
2251
- --pf-c-table--tbody--after--BorderLeftWidth: 0;
2252
- --pf-c-table--tbody--after--BorderColor: var(--pf-global--active-color--100);
2253
- --pf-c-table-tr--responsive--border-width--base: var(--pf-global--spacer--sm);
2254
- --pf-c-table-tr--responsive--last-child--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
2255
- --pf-c-table-tr--responsive--GridColumnGap: var(--pf-global--spacer--md);
2256
- --pf-c-table-tr--responsive--MarginTop: var(--pf-global--spacer--sm);
2257
- --pf-c-table-tr--responsive--PaddingTop: var(--pf-global--spacer--md);
2258
- --pf-c-table-tr--responsive--PaddingRight: var(--pf-global--spacer--lg);
2259
- --pf-c-table-tr--responsive--xl--PaddingRight: var(--pf-global--spacer--md);
2260
- --pf-c-table-tr--responsive--PaddingBottom: var(--pf-global--spacer--md);
2261
- --pf-c-table-tr--responsive--PaddingLeft: var(--pf-global--spacer--lg);
2262
- --pf-c-table-tr--responsive--xl--PaddingLeft: var(--pf-global--spacer--md);
2263
- --pf-c-table-tr--responsive--nested-table--PaddingTop: var(--pf-global--spacer--xl);
2264
- --pf-c-table-tr--responsive--nested-table--PaddingRight: var(--pf-global--spacer--lg);
2265
- --pf-c-table-tr--responsive--nested-table--PaddingBottom: var(--pf-global--spacer--xl);
2266
- --pf-c-table-tr--responsive--nested-table--PaddingLeft: var(--pf-global--spacer--lg);
2267
- --pf-c-table--tbody--after--tr--BorderLeftWidth: 0;
2268
- --pf-c-table--tbody--after--tr--BorderLeftColor: transparent;
2269
- --pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
2270
- --pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor: var(--pf-global--active-color--400);
2271
- --pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
2272
- --pf-c-table--tbody--m-selected--after--tr--BorderLeftColor: var(--pf-global--active-color--100);
2273
- --pf-c-table--m-grid--cell--hidden-visible--Display: grid;
2274
- --pf-c-table--m-grid--cell--PaddingTop: 0;
2275
- --pf-c-table--m-grid--cell--PaddingRight: 0;
2276
- --pf-c-table--m-grid--cell--PaddingBottom: 0;
2277
- --pf-c-table--m-grid--cell--PaddingLeft: 0;
2278
- --pf-c-table-td--responsive--GridColumnGap: var(--pf-global--spacer--md);
2279
- --pf-c-table--cell--responsive--PaddingTop: var(--pf-global--spacer--md);
2280
- --pf-c-table--cell--responsive--PaddingBottom: var(--pf-global--spacer--sm);
2281
- --pf-c-table--cell--first-child--responsive--PaddingTop: var(--pf-global--spacer--sm);
2282
- --pf-c-table--cell--responsive--PaddingRight: 0;
2283
- --pf-c-table--cell--responsive--PaddingLeft: 0;
2284
- --pf-c-table--m-compact-tr--responsive--PaddingTop: var(--pf-global--spacer--sm);
2285
- --pf-c-table--m-compact-tr--responsive--PaddingBottom: var(--pf-global--spacer--sm);
2286
- --pf-c-table--m-compact-tr-td--responsive--PaddingTop: var(--pf-global--spacer--xs);
2287
- --pf-c-table--m-compact-tr-td--responsive--PaddingBottom: var(--pf-global--spacer--xs);
2288
- --pf-c-table--m-compact__action--responsive--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
2289
- --pf-c-table--m-compact__action--responsive--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
2290
- --pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom: calc(0.375rem * -1);
2291
- --pf-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-global--spacer--lg);
2292
- --pf-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-global--spacer--lg);
2293
- --pf-c-table__expandable-row-content--responsive--xl--PaddingRight: var(--pf-global--spacer--md);
2294
- --pf-c-table__expandable-row-content--responsive--xl--PaddingLeft: var(--pf-global--spacer--md);
2295
- --pf-c-table__expandable-row-content--BackgroundColor: var(--pf-global--BackgroundColor--100);
2296
- --pf-c-table__check--responsive--MarginLeft: var(--pf-global--spacer--sm);
2297
- --pf-c-table__check--responsive--MarginTop: 0.875rem;
2298
- --pf-c-table--m-grid__favorite--MarginTop: 0.5rem;
2299
- --pf-c-table--m-grid__check--favorite--MarginLeft: var(--pf-global--spacer--xl);
2300
- --pf-c-table--m-grid__action--MarginTop: 0.375rem;
2301
- --pf-c-table__action--responsive--MarginLeft: var(--pf-global--spacer--xl);
2302
- --pf-c-table--m-grid__favorite--action--MarginLeft: var(--pf-global--spacer--2xl);
2303
- --pf-c-table--m-grid__check--favorite--action--MarginLeft: calc(var(--pf-c-table--m-grid__check--favorite--MarginLeft) + var(--pf-c-table--m-grid__favorite--action--MarginLeft));
2304
- --pf-c-table__toggle__icon--Transition: .2s ease-in 0s;
2305
- --pf-c-table__toggle--m-expanded__icon--Rotate: 180deg;
2306
- }
2307
2331
 
2308
- @media screen and (max-width: 1200px) {
2309
- .pf-c-table[class*=pf-m-grid] {
2310
- --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--xl--PaddingRight);
2311
- --pf-c-table-tr--responsive--PaddingLeft: var(--pf-c-table-tr--responsive--xl--PaddingLeft);
2312
- }
2313
- }
2314
- @media screen and (max-width: 1200px) {
2315
- .pf-c-table[class*=pf-m-grid] {
2316
- --pf-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-c-table__expandable-row-content--responsive--xl--PaddingRight);
2317
- --pf-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-c-table__expandable-row-content--responsive--xl--PaddingLeft);
2332
+ .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
2333
+ padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
2334
+ padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
2318
2335
  }
2319
- }
2320
- .pf-m-grid.pf-c-table {
2321
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
2322
- --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
2323
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
2324
- --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
2325
- --pf-c-table__favorite--c-button--MarginTop: auto;
2326
- --pf-c-table__favorite--c-button--MarginRight: auto;
2327
- --pf-c-table__favorite--c-button--MarginBottom: auto;
2328
- --pf-c-table__favorite--c-button--MarginLeft: auto;
2329
- display: grid;
2330
- border: none;
2331
- }
2332
2336
 
2333
- .pf-m-grid.pf-c-table tr > * {
2334
- width: auto;
2335
- min-width: 0;
2336
- max-width: none;
2337
- overflow: visible;
2338
- text-overflow: clip;
2339
- white-space: normal;
2340
- }
2337
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable {
2338
+ --pf-c-table--tbody--after--BorderLeftWidth: 0;
2339
+ --pf-c-table--tbody--after--BorderLeftColor: transparent;
2340
+ }
2341
2341
 
2342
- .pf-m-grid.pf-c-table .pf-c-table__text {
2343
- position: relative;
2344
- width: auto;
2345
- min-width: 0;
2346
- max-width: none;
2347
- overflow: var(--pf-c-table--cell--Overflow);
2348
- text-overflow: var(--pf-c-table--cell--TextOverflow);
2349
- white-space: var(--pf-c-table--cell--WhiteSpace);
2350
- }
2342
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable,
2343
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr {
2344
+ position: relative;
2345
+ }
2351
2346
 
2352
- .pf-m-grid.pf-c-table thead {
2353
- display: none;
2354
- visibility: hidden;
2355
- }
2347
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr::after {
2348
+ content: "";
2349
+ position: absolute;
2350
+ top: 0;
2351
+ bottom: 0;
2352
+ left: 0;
2353
+ width: var(--pf-c-table--tbody--after--tr--BorderLeftWidth);
2354
+ background-color: var(--pf-c-table--tbody--after--tr--BorderLeftColor);
2355
+ }
2356
2356
 
2357
- .pf-m-grid.pf-c-table tbody {
2358
- display: block;
2359
- }
2357
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
2358
+ --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth);
2359
+ --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor);
2360
+ }
2360
2361
 
2361
- .pf-m-grid.pf-c-table tbody:first-of-type {
2362
- border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2363
- }
2362
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
2363
+ --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth);
2364
+ --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftColor);
2365
+ }
2364
2366
 
2365
- .pf-m-grid.pf-c-table table.pf-m-compact > tbody {
2366
- border-top: 0;
2367
- }
2367
+ .pf-m-grid-lg.pf-c-table tr.pf-m-selected::after {
2368
+ content: "";
2369
+ position: absolute;
2370
+ top: 0;
2371
+ bottom: 0;
2372
+ left: 0;
2373
+ width: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
2374
+ background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
2375
+ }
2368
2376
 
2369
- .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) {
2370
- border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2371
- }
2377
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
2378
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
2379
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
2380
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
2381
+ width: auto;
2382
+ padding: 0;
2383
+ }
2372
2384
 
2373
- .pf-m-grid.pf-c-table tr:last-child,
2374
- .pf-m-grid.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
2375
- border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
2376
- }
2385
+ .pf-m-grid-lg.pf-c-table .pf-c-table__toggle {
2386
+ grid-row-start: 20;
2387
+ grid-column: -1;
2388
+ justify-self: end;
2389
+ padding-right: 0;
2390
+ }
2377
2391
 
2378
- .pf-m-grid.pf-c-table tbody.pf-m-expanded {
2379
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
2380
- }
2392
+ .pf-m-grid-lg.pf-c-table .pf-c-table__toggle::after {
2393
+ content: none;
2394
+ }
2381
2395
 
2382
- .pf-m-grid.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
2383
- border-bottom: 0;
2384
- }
2396
+ .pf-m-grid-lg.pf-c-table .pf-c-table__button {
2397
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
2398
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
2399
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
2400
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
2401
+ }
2385
2402
 
2386
- .pf-m-grid.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
2387
- border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2388
- }
2403
+ .pf-m-grid-lg.pf-c-table .pf-c-table__check,
2404
+ .pf-m-grid-lg.pf-c-table .pf-c-table__favorite,
2405
+ .pf-m-grid-lg.pf-c-table .pf-c-table__action {
2406
+ grid-row-start: 1;
2407
+ grid-column-start: 2;
2408
+ }
2389
2409
 
2390
- .pf-m-grid.pf-c-table tr.pf-m-selected {
2391
- --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
2392
- --pf-c-table__expandable-row--after--BorderColor: transparent;
2393
- }
2394
-
2395
- .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) {
2396
- display: grid;
2397
- grid-template-columns: 1fr;
2398
- height: auto;
2399
- grid-auto-columns: max-content;
2400
- grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
2401
- padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
2402
- }
2410
+ .pf-m-grid-lg.pf-c-table .pf-c-table__check {
2411
+ margin-top: var(--pf-c-table__check--responsive--MarginTop);
2412
+ margin-left: var(--pf-c-table__check--responsive--MarginLeft);
2413
+ }
2403
2414
 
2404
- .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
2405
- padding: var(--pf-c-table--cell--responsive--PaddingTop) var(--pf-c-table--cell--responsive--PaddingRight) var(--pf-c-table--cell--responsive--PaddingBottom) var(--pf-c-table--cell--responsive--PaddingLeft);
2406
- }
2415
+ .pf-m-grid-lg.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
2416
+ margin-left: var(--pf-c-table--m-grid__check--favorite--MarginLeft);
2417
+ }
2407
2418
 
2408
- .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
2409
- --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--cell--first-child--responsive--PaddingTop);
2410
- }
2419
+ .pf-m-grid-lg.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
2420
+ margin-left: var(--pf-c-table--m-grid__check--favorite--action--MarginLeft);
2421
+ }
2411
2422
 
2412
- .pf-m-grid.pf-c-table.pf-m-compact {
2413
- --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table--m-compact-tr--responsive--PaddingTop);
2414
- --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr--responsive--PaddingBottom);
2415
- --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--m-compact-tr-td--responsive--PaddingTop);
2416
- --pf-c-table--cell--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr-td--responsive--PaddingBottom);
2417
- --pf-c-table__check--input--MarginTop: 0;
2418
- }
2423
+ .pf-m-grid-lg.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
2424
+ margin-left: var(--pf-c-table__action--responsive--MarginLeft);
2425
+ }
2419
2426
 
2420
- .pf-m-grid.pf-c-table.pf-m-compact .pf-c-table__action {
2421
- margin-top: var(--pf-c-table--m-compact__action--responsive--MarginTop);
2422
- margin-bottom: var(--pf-c-table--m-compact__action--responsive--MarginTop);
2423
- }
2427
+ .pf-m-grid-lg.pf-c-table .pf-c-table__favorite {
2428
+ margin-top: var(--pf-c-table--m-grid__favorite--MarginTop);
2429
+ }
2424
2430
 
2425
- .pf-m-grid.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
2426
- margin-bottom: var(--pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
2427
- }
2431
+ .pf-m-grid-lg.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
2432
+ margin-left: var(--pf-c-table--m-grid__favorite--action--MarginLeft);
2433
+ }
2428
2434
 
2429
- .pf-m-grid.pf-c-table .pf-c-table__icon > * {
2430
- text-align: left;
2435
+ .pf-m-grid-lg.pf-c-table .pf-c-table__action {
2436
+ margin-top: var(--pf-c-table--m-grid__action--MarginTop);
2437
+ text-align: right;
2438
+ }
2431
2439
  }
2432
-
2433
- .pf-m-grid.pf-c-table [data-label] {
2434
- --pf-c-table--cell--hidden-visible--Display: var(--pf-c-table--m-grid--cell--hidden-visible--Display);
2435
- grid-column: 1;
2436
- grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);
2437
- grid-template-columns: 1fr minmax(0, 1.5fr);
2438
- align-items: start;
2440
+ @media screen and (max-width: 992px) and (max-width: 576px) {
2441
+ .pf-m-grid-lg.pf-c-table .pf-c-table__action {
2442
+ grid-row-start: 1;
2443
+ grid-column-start: 2;
2444
+ margin-left: 0;
2445
+ }
2439
2446
  }
2440
-
2441
- .pf-m-grid.pf-c-table [data-label] > * {
2442
- grid-column: 2;
2447
+ @media screen and (max-width: 992px) {
2448
+ .pf-m-grid-lg.pf-c-table .pf-c-table__inline-edit-action {
2449
+ grid-column: 2;
2450
+ grid-row: 2;
2451
+ }
2443
2452
  }
2453
+ @media screen and (max-width: 992px) {
2454
+ .pf-m-grid-lg.pf-c-table .pf-c-table__toggle-icon {
2455
+ transition: var(--pf-c-table__toggle__icon--Transition);
2456
+ }
2444
2457
 
2445
- .pf-m-grid.pf-c-table [data-label]::before {
2446
- font-weight: bold;
2447
- text-align: left;
2448
- content: attr(data-label);
2458
+ .pf-c-button.pf-m-expanded > .pf-m-grid-lg.pf-c-table .pf-c-table__toggle-icon {
2459
+ transform: rotate(var(--pf-c-table__toggle--m-expanded__icon--Rotate));
2460
+ }
2449
2461
  }
2450
-
2451
- .pf-m-grid.pf-c-table tr > *:first-child {
2452
- --pf-c-table--cell--PaddingLeft: 0;
2462
+ @media screen and (max-width: 992px) {
2463
+ .pf-m-grid-lg.pf-c-table .pf-m-nowrap {
2464
+ --pf-c-table--cell--Overflow: auto;
2465
+ }
2453
2466
  }
2454
-
2455
- .pf-m-grid.pf-c-table tr > *:last-child {
2456
- --pf-c-table--cell--PaddingRight: 0;
2467
+ @media screen and (max-width: 992px) {
2468
+ .pf-m-grid-lg.pf-c-table .pf-m-fit-content {
2469
+ width: auto;
2470
+ white-space: normal;
2471
+ }
2457
2472
  }
2458
-
2459
- .pf-m-grid.pf-c-table .pf-c-table {
2460
- --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
2461
- --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--nested-table--PaddingRight);
2462
- --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table-tr--responsive--nested-table--PaddingBottom);
2463
- --pf-c-table-tr--responsive--PaddingLeft: var(--pf-c-table-tr--responsive--nested-table--PaddingLeft);
2464
- border: 0;
2473
+ @media screen and (max-width: 992px) {
2474
+ .pf-m-grid-lg.pf-c-table .pf-m-truncate {
2475
+ --pf-c-table--cell--MaxWidth: 100%;
2476
+ }
2465
2477
  }
2466
-
2467
- .pf-m-grid.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
2468
- --pf-c-table-tr--responsive--PaddingTop: 0;
2478
+ @media screen and (max-width: 992px) {
2479
+ .pf-m-grid-lg.pf-c-table [class*=pf-m-width] {
2480
+ --pf-c-table--cell--Width: auto;
2481
+ }
2469
2482
  }
2483
+ @media screen and (max-width: 1200px) {
2484
+ .pf-m-grid-xl.pf-c-table {
2485
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
2486
+ --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
2487
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
2488
+ --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
2489
+ --pf-c-table__favorite--c-button--MarginTop: auto;
2490
+ --pf-c-table__favorite--c-button--MarginRight: auto;
2491
+ --pf-c-table__favorite--c-button--MarginBottom: auto;
2492
+ --pf-c-table__favorite--c-button--MarginLeft: auto;
2493
+ display: grid;
2494
+ border: none;
2495
+ }
2470
2496
 
2471
- .pf-m-grid.pf-c-table .pf-c-table__compound-expansion-toggle {
2472
- --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
2473
- --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
2474
- --pf-c-table__compound-expansion-toggle__button--after--Top: 100%;
2475
- }
2497
+ .pf-m-grid-xl.pf-c-table tr > * {
2498
+ width: auto;
2499
+ min-width: 0;
2500
+ max-width: none;
2501
+ overflow: visible;
2502
+ text-overflow: clip;
2503
+ white-space: normal;
2504
+ }
2476
2505
 
2477
- .pf-m-grid.pf-c-table tbody {
2478
- position: relative;
2479
- }
2506
+ .pf-m-grid-xl.pf-c-table .pf-c-table__text {
2507
+ position: relative;
2508
+ width: auto;
2509
+ min-width: 0;
2510
+ max-width: none;
2511
+ overflow: var(--pf-c-table--cell--Overflow);
2512
+ text-overflow: var(--pf-c-table--cell--TextOverflow);
2513
+ white-space: var(--pf-c-table--cell--WhiteSpace);
2514
+ }
2480
2515
 
2481
- .pf-m-grid.pf-c-table tbody::after {
2482
- position: absolute;
2483
- top: 0;
2484
- bottom: 0;
2485
- left: 0;
2486
- content: "";
2487
- border: 0;
2488
- border-left: var(--pf-c-table--tbody--after--BorderLeftWidth) solid var(--pf-c-table--tbody--after--BorderColor);
2489
- }
2516
+ .pf-m-grid-xl.pf-c-table thead {
2517
+ display: none;
2518
+ visibility: hidden;
2519
+ }
2490
2520
 
2491
- .pf-m-grid.pf-c-table tbody.pf-m-expanded {
2492
- --pf-c-table--tbody--after--BorderLeftWidth: var(--pf-c-table--tbody--after--border-width--base);
2493
- }
2521
+ .pf-m-grid-xl.pf-c-table tbody {
2522
+ display: block;
2523
+ }
2494
2524
 
2495
- .pf-m-grid.pf-c-table tbody.pf-m-expanded tbody {
2496
- --pf-c-table--tbody--after--BorderLeftWidth: 0;
2497
- }
2525
+ .pf-m-grid-xl.pf-c-table tbody:first-of-type {
2526
+ border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2527
+ }
2498
2528
 
2499
- .pf-m-grid.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
2500
- --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
2501
- position: static;
2502
- width: auto;
2503
- background-color: transparent;
2504
- }
2529
+ .pf-m-grid-xl.pf-c-table table.pf-m-compact > tbody {
2530
+ border-top: 0;
2531
+ }
2505
2532
 
2506
- .pf-m-grid.pf-c-table .pf-c-table__expandable-row {
2507
- --pf-c-table--cell--responsive--PaddingTop: 0;
2508
- --pf-c-table--cell--responsive--PaddingRight: 0;
2509
- --pf-c-table--cell--responsive--PaddingBottom: 0;
2510
- --pf-c-table--cell--responsive--PaddingLeft: 0;
2511
- --pf-c-table--cell--PaddingRight: 0;
2512
- --pf-c-table--cell--PaddingLeft: 0;
2513
- display: block;
2514
- max-height: var(--pf-c-table__expandable-row--MaxHeight);
2515
- overflow-y: auto;
2516
- border-bottom: none;
2517
- box-shadow: none;
2518
- }
2533
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
2534
+ border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2535
+ }
2519
2536
 
2520
- .pf-m-grid.pf-c-table .pf-c-table__expandable-row > * {
2521
- position: static;
2522
- display: block;
2523
- }
2537
+ .pf-m-grid-xl.pf-c-table tr:last-child,
2538
+ .pf-m-grid-xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
2539
+ border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
2540
+ }
2524
2541
 
2525
- .pf-m-grid.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
2526
- border-top-color: var(--pf-c-table--BorderColor);
2527
- }
2542
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded {
2543
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
2544
+ }
2528
2545
 
2529
- .pf-m-grid.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
2530
- content: none;
2531
- }
2546
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
2547
+ border-bottom: 0;
2548
+ }
2532
2549
 
2533
- .pf-m-grid.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
2534
- padding: 0;
2535
- }
2550
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
2551
+ border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2552
+ }
2536
2553
 
2537
- .pf-m-grid.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
2538
- display: none;
2539
- visibility: hidden;
2540
- }
2554
+ .pf-m-grid-xl.pf-c-table tr.pf-m-selected {
2555
+ --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
2556
+ --pf-c-table__expandable-row--after--BorderColor: transparent;
2557
+ }
2541
2558
 
2542
- .pf-m-grid.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
2543
- padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
2544
- padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
2545
- }
2559
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
2560
+ display: grid;
2561
+ grid-template-columns: 1fr;
2562
+ height: auto;
2563
+ grid-auto-columns: max-content;
2564
+ grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
2565
+ padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
2566
+ }
2546
2567
 
2547
- .pf-m-grid.pf-c-table tbody.pf-m-hoverable {
2548
- --pf-c-table--tbody--after--BorderLeftWidth: 0;
2549
- --pf-c-table--tbody--after--BorderLeftColor: transparent;
2550
- }
2551
-
2552
- .pf-m-grid.pf-c-table tbody.pf-m-hoverable,
2553
- .pf-m-grid.pf-c-table tbody.pf-m-hoverable > tr {
2554
- position: relative;
2555
- }
2556
-
2557
- .pf-m-grid.pf-c-table tbody.pf-m-hoverable > tr::after {
2558
- content: "";
2559
- position: absolute;
2560
- top: 0;
2561
- bottom: 0;
2562
- left: 0;
2563
- width: var(--pf-c-table--tbody--after--tr--BorderLeftWidth);
2564
- background-color: var(--pf-c-table--tbody--after--tr--BorderLeftColor);
2565
- }
2566
-
2567
- .pf-m-grid.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
2568
- --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth);
2569
- --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor);
2570
- }
2571
-
2572
- .pf-m-grid.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
2573
- --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth);
2574
- --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftColor);
2575
- }
2576
-
2577
- .pf-m-grid.pf-c-table tr.pf-m-selected::after {
2578
- content: "";
2579
- position: absolute;
2580
- top: 0;
2581
- bottom: 0;
2582
- left: 0;
2583
- width: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
2584
- background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
2585
- }
2586
-
2587
- .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
2588
- .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
2589
- .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
2590
- .pf-m-grid.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
2591
- width: auto;
2592
- padding: 0;
2593
- }
2594
-
2595
- .pf-m-grid.pf-c-table .pf-c-table__toggle {
2596
- grid-row-start: 20;
2597
- grid-column: -1;
2598
- justify-self: end;
2599
- padding-right: 0;
2600
- }
2601
-
2602
- .pf-m-grid.pf-c-table .pf-c-table__toggle::after {
2603
- content: none;
2604
- }
2605
-
2606
- .pf-m-grid.pf-c-table .pf-c-table__button {
2607
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
2608
- --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
2609
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
2610
- --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
2611
- }
2612
-
2613
- .pf-m-grid.pf-c-table .pf-c-table__check,
2614
- .pf-m-grid.pf-c-table .pf-c-table__favorite,
2615
- .pf-m-grid.pf-c-table .pf-c-table__action {
2616
- grid-row-start: 1;
2617
- grid-column-start: 2;
2618
- }
2619
-
2620
- .pf-m-grid.pf-c-table .pf-c-table__check {
2621
- margin-top: var(--pf-c-table__check--responsive--MarginTop);
2622
- margin-left: var(--pf-c-table__check--responsive--MarginLeft);
2623
- }
2624
-
2625
- .pf-m-grid.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
2626
- margin-left: var(--pf-c-table--m-grid__check--favorite--MarginLeft);
2627
- }
2628
-
2629
- .pf-m-grid.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
2630
- margin-left: var(--pf-c-table--m-grid__check--favorite--action--MarginLeft);
2631
- }
2632
-
2633
- .pf-m-grid.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
2634
- margin-left: var(--pf-c-table__action--responsive--MarginLeft);
2635
- }
2636
-
2637
- .pf-m-grid.pf-c-table .pf-c-table__favorite {
2638
- margin-top: var(--pf-c-table--m-grid__favorite--MarginTop);
2639
- }
2640
-
2641
- .pf-m-grid.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
2642
- margin-left: var(--pf-c-table--m-grid__favorite--action--MarginLeft);
2643
- }
2644
-
2645
- .pf-m-grid.pf-c-table .pf-c-table__action {
2646
- margin-top: var(--pf-c-table--m-grid__action--MarginTop);
2647
- text-align: right;
2648
- }
2649
-
2650
- @media screen and (max-width: 576px) {
2651
- .pf-m-grid.pf-c-table .pf-c-table__action {
2652
- grid-row-start: 1;
2653
- grid-column-start: 2;
2654
- margin-left: 0;
2655
- }
2656
- }
2657
- .pf-m-grid.pf-c-table .pf-c-table__inline-edit-action {
2658
- grid-column: 2;
2659
- grid-row: 2;
2660
- }
2661
-
2662
- .pf-m-grid.pf-c-table .pf-c-table__toggle-icon {
2663
- transition: var(--pf-c-table__toggle__icon--Transition);
2664
- }
2665
-
2666
- .pf-c-button.pf-m-expanded > .pf-m-grid.pf-c-table .pf-c-table__toggle-icon {
2667
- transform: rotate(var(--pf-c-table__toggle--m-expanded__icon--Rotate));
2668
- }
2669
-
2670
- .pf-m-grid.pf-c-table .pf-m-nowrap {
2671
- --pf-c-table--cell--Overflow: auto;
2672
- }
2673
-
2674
- .pf-m-grid.pf-c-table .pf-m-fit-content {
2675
- width: auto;
2676
- white-space: normal;
2677
- }
2678
-
2679
- .pf-m-grid.pf-c-table .pf-m-truncate {
2680
- --pf-c-table--cell--MaxWidth: 100%;
2681
- }
2682
-
2683
- .pf-m-grid.pf-c-table [class*=pf-m-width] {
2684
- --pf-c-table--cell--Width: auto;
2685
- }
2686
-
2687
- @media screen and (max-width: 768px) {
2688
- .pf-m-grid-md.pf-c-table {
2689
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
2690
- --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
2691
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
2692
- --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
2693
- --pf-c-table__favorite--c-button--MarginTop: auto;
2694
- --pf-c-table__favorite--c-button--MarginRight: auto;
2695
- --pf-c-table__favorite--c-button--MarginBottom: auto;
2696
- --pf-c-table__favorite--c-button--MarginLeft: auto;
2697
- display: grid;
2698
- border: none;
2699
- }
2700
-
2701
- .pf-m-grid-md.pf-c-table tr > * {
2702
- width: auto;
2703
- min-width: 0;
2704
- max-width: none;
2705
- overflow: visible;
2706
- text-overflow: clip;
2707
- white-space: normal;
2708
- }
2709
-
2710
- .pf-m-grid-md.pf-c-table .pf-c-table__text {
2711
- position: relative;
2712
- width: auto;
2713
- min-width: 0;
2714
- max-width: none;
2715
- overflow: var(--pf-c-table--cell--Overflow);
2716
- text-overflow: var(--pf-c-table--cell--TextOverflow);
2717
- white-space: var(--pf-c-table--cell--WhiteSpace);
2718
- }
2719
-
2720
- .pf-m-grid-md.pf-c-table thead {
2721
- display: none;
2722
- visibility: hidden;
2723
- }
2724
-
2725
- .pf-m-grid-md.pf-c-table tbody {
2726
- display: block;
2727
- }
2728
-
2729
- .pf-m-grid-md.pf-c-table tbody:first-of-type {
2730
- border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2731
- }
2732
-
2733
- .pf-m-grid-md.pf-c-table table.pf-m-compact > tbody {
2734
- border-top: 0;
2735
- }
2736
-
2737
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) {
2738
- border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2739
- }
2740
-
2741
- .pf-m-grid-md.pf-c-table tr:last-child,
2742
- .pf-m-grid-md.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
2743
- border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
2744
- }
2745
-
2746
- .pf-m-grid-md.pf-c-table tbody.pf-m-expanded {
2747
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
2748
- }
2749
-
2750
- .pf-m-grid-md.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
2751
- border-bottom: 0;
2752
- }
2753
-
2754
- .pf-m-grid-md.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
2755
- border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
2756
- }
2757
-
2758
- .pf-m-grid-md.pf-c-table tr.pf-m-selected {
2759
- --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
2760
- --pf-c-table__expandable-row--after--BorderColor: transparent;
2761
- }
2762
-
2763
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) {
2764
- display: grid;
2765
- grid-template-columns: 1fr;
2766
- height: auto;
2767
- grid-auto-columns: max-content;
2768
- grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
2769
- padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
2770
- }
2771
-
2772
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
2568
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
2773
2569
  padding: var(--pf-c-table--cell--responsive--PaddingTop) var(--pf-c-table--cell--responsive--PaddingRight) var(--pf-c-table--cell--responsive--PaddingBottom) var(--pf-c-table--cell--responsive--PaddingLeft);
2774
2570
  }
2775
2571
 
2776
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
2572
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
2777
2573
  --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--cell--first-child--responsive--PaddingTop);
2778
2574
  }
2779
2575
 
2780
- .pf-m-grid-md.pf-c-table.pf-m-compact {
2576
+ .pf-m-grid-xl.pf-c-table.pf-m-compact {
2781
2577
  --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table--m-compact-tr--responsive--PaddingTop);
2782
2578
  --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr--responsive--PaddingBottom);
2783
2579
  --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--m-compact-tr-td--responsive--PaddingTop);
@@ -2785,20 +2581,20 @@
2785
2581
  --pf-c-table__check--input--MarginTop: 0;
2786
2582
  }
2787
2583
 
2788
- .pf-m-grid-md.pf-c-table.pf-m-compact .pf-c-table__action {
2584
+ .pf-m-grid-xl.pf-c-table.pf-m-compact .pf-c-table__action {
2789
2585
  margin-top: var(--pf-c-table--m-compact__action--responsive--MarginTop);
2790
2586
  margin-bottom: var(--pf-c-table--m-compact__action--responsive--MarginTop);
2791
2587
  }
2792
2588
 
2793
- .pf-m-grid-md.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
2589
+ .pf-m-grid-xl.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
2794
2590
  margin-bottom: var(--pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
2795
2591
  }
2796
2592
 
2797
- .pf-m-grid-md.pf-c-table .pf-c-table__icon > * {
2593
+ .pf-m-grid-xl.pf-c-table .pf-c-table__icon > * {
2798
2594
  text-align: left;
2799
2595
  }
2800
2596
 
2801
- .pf-m-grid-md.pf-c-table [data-label] {
2597
+ .pf-m-grid-xl.pf-c-table [data-label] {
2802
2598
  --pf-c-table--cell--hidden-visible--Display: var(--pf-c-table--m-grid--cell--hidden-visible--Display);
2803
2599
  grid-column: 1;
2804
2600
  grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);
@@ -2806,25 +2602,25 @@
2806
2602
  align-items: start;
2807
2603
  }
2808
2604
 
2809
- .pf-m-grid-md.pf-c-table [data-label] > * {
2605
+ .pf-m-grid-xl.pf-c-table [data-label] > * {
2810
2606
  grid-column: 2;
2811
2607
  }
2812
2608
 
2813
- .pf-m-grid-md.pf-c-table [data-label]::before {
2609
+ .pf-m-grid-xl.pf-c-table [data-label]::before {
2814
2610
  font-weight: bold;
2815
2611
  text-align: left;
2816
2612
  content: attr(data-label);
2817
2613
  }
2818
2614
 
2819
- .pf-m-grid-md.pf-c-table tr > *:first-child {
2615
+ .pf-m-grid-xl.pf-c-table tr > *:first-child {
2820
2616
  --pf-c-table--cell--PaddingLeft: 0;
2821
2617
  }
2822
2618
 
2823
- .pf-m-grid-md.pf-c-table tr > *:last-child {
2619
+ .pf-m-grid-xl.pf-c-table tr > *:last-child {
2824
2620
  --pf-c-table--cell--PaddingRight: 0;
2825
2621
  }
2826
2622
 
2827
- .pf-m-grid-md.pf-c-table .pf-c-table {
2623
+ .pf-m-grid-xl.pf-c-table .pf-c-table {
2828
2624
  --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
2829
2625
  --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--nested-table--PaddingRight);
2830
2626
  --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table-tr--responsive--nested-table--PaddingBottom);
@@ -2832,21 +2628,21 @@
2832
2628
  border: 0;
2833
2629
  }
2834
2630
 
2835
- .pf-m-grid-md.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
2631
+ .pf-m-grid-xl.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
2836
2632
  --pf-c-table-tr--responsive--PaddingTop: 0;
2837
2633
  }
2838
2634
 
2839
- .pf-m-grid-md.pf-c-table .pf-c-table__compound-expansion-toggle {
2635
+ .pf-m-grid-xl.pf-c-table .pf-c-table__compound-expansion-toggle {
2840
2636
  --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
2841
2637
  --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
2842
2638
  --pf-c-table__compound-expansion-toggle__button--after--Top: 100%;
2843
2639
  }
2844
2640
 
2845
- .pf-m-grid-md.pf-c-table tbody {
2641
+ .pf-m-grid-xl.pf-c-table tbody {
2846
2642
  position: relative;
2847
2643
  }
2848
2644
 
2849
- .pf-m-grid-md.pf-c-table tbody::after {
2645
+ .pf-m-grid-xl.pf-c-table tbody::after {
2850
2646
  position: absolute;
2851
2647
  top: 0;
2852
2648
  bottom: 0;
@@ -2856,22 +2652,22 @@
2856
2652
  border-left: var(--pf-c-table--tbody--after--BorderLeftWidth) solid var(--pf-c-table--tbody--after--BorderColor);
2857
2653
  }
2858
2654
 
2859
- .pf-m-grid-md.pf-c-table tbody.pf-m-expanded {
2655
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded {
2860
2656
  --pf-c-table--tbody--after--BorderLeftWidth: var(--pf-c-table--tbody--after--border-width--base);
2861
2657
  }
2862
2658
 
2863
- .pf-m-grid-md.pf-c-table tbody.pf-m-expanded tbody {
2659
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded tbody {
2864
2660
  --pf-c-table--tbody--after--BorderLeftWidth: 0;
2865
2661
  }
2866
2662
 
2867
- .pf-m-grid-md.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
2663
+ .pf-m-grid-xl.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
2868
2664
  --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
2869
2665
  position: static;
2870
2666
  width: auto;
2871
2667
  background-color: transparent;
2872
2668
  }
2873
2669
 
2874
- .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row {
2670
+ .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row {
2875
2671
  --pf-c-table--cell--responsive--PaddingTop: 0;
2876
2672
  --pf-c-table--cell--responsive--PaddingRight: 0;
2877
2673
  --pf-c-table--cell--responsive--PaddingBottom: 0;
@@ -2885,44 +2681,44 @@
2885
2681
  box-shadow: none;
2886
2682
  }
2887
2683
 
2888
- .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row > * {
2684
+ .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row > * {
2889
2685
  position: static;
2890
2686
  display: block;
2891
2687
  }
2892
2688
 
2893
- .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
2689
+ .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
2894
2690
  border-top-color: var(--pf-c-table--BorderColor);
2895
2691
  }
2896
2692
 
2897
- .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
2693
+ .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
2898
2694
  content: none;
2899
2695
  }
2900
2696
 
2901
- .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
2697
+ .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
2902
2698
  padding: 0;
2903
2699
  }
2904
2700
 
2905
- .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
2701
+ .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
2906
2702
  display: none;
2907
2703
  visibility: hidden;
2908
2704
  }
2909
2705
 
2910
- .pf-m-grid-md.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
2706
+ .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
2911
2707
  padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
2912
2708
  padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
2913
2709
  }
2914
2710
 
2915
- .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable {
2711
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable {
2916
2712
  --pf-c-table--tbody--after--BorderLeftWidth: 0;
2917
2713
  --pf-c-table--tbody--after--BorderLeftColor: transparent;
2918
2714
  }
2919
2715
 
2920
- .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable,
2921
- .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr {
2716
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable,
2717
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr {
2922
2718
  position: relative;
2923
2719
  }
2924
2720
 
2925
- .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr::after {
2721
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr::after {
2926
2722
  content: "";
2927
2723
  position: absolute;
2928
2724
  top: 0;
@@ -2932,17 +2728,17 @@
2932
2728
  background-color: var(--pf-c-table--tbody--after--tr--BorderLeftColor);
2933
2729
  }
2934
2730
 
2935
- .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
2731
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
2936
2732
  --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth);
2937
2733
  --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor);
2938
2734
  }
2939
2735
 
2940
- .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
2736
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
2941
2737
  --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth);
2942
2738
  --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftColor);
2943
2739
  }
2944
2740
 
2945
- .pf-m-grid-md.pf-c-table tr.pf-m-selected::after {
2741
+ .pf-m-grid-xl.pf-c-table tr.pf-m-selected::after {
2946
2742
  content: "";
2947
2743
  position: absolute;
2948
2744
  top: 0;
@@ -2952,114 +2748,114 @@
2952
2748
  background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
2953
2749
  }
2954
2750
 
2955
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
2956
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
2957
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
2958
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
2751
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
2752
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
2753
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
2754
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
2959
2755
  width: auto;
2960
2756
  padding: 0;
2961
2757
  }
2962
2758
 
2963
- .pf-m-grid-md.pf-c-table .pf-c-table__toggle {
2759
+ .pf-m-grid-xl.pf-c-table .pf-c-table__toggle {
2964
2760
  grid-row-start: 20;
2965
2761
  grid-column: -1;
2966
2762
  justify-self: end;
2967
2763
  padding-right: 0;
2968
2764
  }
2969
2765
 
2970
- .pf-m-grid-md.pf-c-table .pf-c-table__toggle::after {
2766
+ .pf-m-grid-xl.pf-c-table .pf-c-table__toggle::after {
2971
2767
  content: none;
2972
2768
  }
2973
2769
 
2974
- .pf-m-grid-md.pf-c-table .pf-c-table__button {
2770
+ .pf-m-grid-xl.pf-c-table .pf-c-table__button {
2975
2771
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
2976
2772
  --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
2977
2773
  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
2978
2774
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
2979
2775
  }
2980
2776
 
2981
- .pf-m-grid-md.pf-c-table .pf-c-table__check,
2982
- .pf-m-grid-md.pf-c-table .pf-c-table__favorite,
2983
- .pf-m-grid-md.pf-c-table .pf-c-table__action {
2777
+ .pf-m-grid-xl.pf-c-table .pf-c-table__check,
2778
+ .pf-m-grid-xl.pf-c-table .pf-c-table__favorite,
2779
+ .pf-m-grid-xl.pf-c-table .pf-c-table__action {
2984
2780
  grid-row-start: 1;
2985
2781
  grid-column-start: 2;
2986
2782
  }
2987
2783
 
2988
- .pf-m-grid-md.pf-c-table .pf-c-table__check {
2784
+ .pf-m-grid-xl.pf-c-table .pf-c-table__check {
2989
2785
  margin-top: var(--pf-c-table__check--responsive--MarginTop);
2990
2786
  margin-left: var(--pf-c-table__check--responsive--MarginLeft);
2991
2787
  }
2992
2788
 
2993
- .pf-m-grid-md.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
2789
+ .pf-m-grid-xl.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
2994
2790
  margin-left: var(--pf-c-table--m-grid__check--favorite--MarginLeft);
2995
2791
  }
2996
2792
 
2997
- .pf-m-grid-md.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
2793
+ .pf-m-grid-xl.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
2998
2794
  margin-left: var(--pf-c-table--m-grid__check--favorite--action--MarginLeft);
2999
2795
  }
3000
2796
 
3001
- .pf-m-grid-md.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
2797
+ .pf-m-grid-xl.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
3002
2798
  margin-left: var(--pf-c-table__action--responsive--MarginLeft);
3003
2799
  }
3004
2800
 
3005
- .pf-m-grid-md.pf-c-table .pf-c-table__favorite {
2801
+ .pf-m-grid-xl.pf-c-table .pf-c-table__favorite {
3006
2802
  margin-top: var(--pf-c-table--m-grid__favorite--MarginTop);
3007
2803
  }
3008
2804
 
3009
- .pf-m-grid-md.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
2805
+ .pf-m-grid-xl.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
3010
2806
  margin-left: var(--pf-c-table--m-grid__favorite--action--MarginLeft);
3011
2807
  }
3012
2808
 
3013
- .pf-m-grid-md.pf-c-table .pf-c-table__action {
2809
+ .pf-m-grid-xl.pf-c-table .pf-c-table__action {
3014
2810
  margin-top: var(--pf-c-table--m-grid__action--MarginTop);
3015
2811
  text-align: right;
3016
2812
  }
3017
2813
  }
3018
- @media screen and (max-width: 768px) and (max-width: 576px) {
3019
- .pf-m-grid-md.pf-c-table .pf-c-table__action {
2814
+ @media screen and (max-width: 1200px) and (max-width: 576px) {
2815
+ .pf-m-grid-xl.pf-c-table .pf-c-table__action {
3020
2816
  grid-row-start: 1;
3021
2817
  grid-column-start: 2;
3022
2818
  margin-left: 0;
3023
2819
  }
3024
2820
  }
3025
- @media screen and (max-width: 768px) {
3026
- .pf-m-grid-md.pf-c-table .pf-c-table__inline-edit-action {
2821
+ @media screen and (max-width: 1200px) {
2822
+ .pf-m-grid-xl.pf-c-table .pf-c-table__inline-edit-action {
3027
2823
  grid-column: 2;
3028
2824
  grid-row: 2;
3029
2825
  }
3030
2826
  }
3031
- @media screen and (max-width: 768px) {
3032
- .pf-m-grid-md.pf-c-table .pf-c-table__toggle-icon {
2827
+ @media screen and (max-width: 1200px) {
2828
+ .pf-m-grid-xl.pf-c-table .pf-c-table__toggle-icon {
3033
2829
  transition: var(--pf-c-table__toggle__icon--Transition);
3034
2830
  }
3035
2831
 
3036
- .pf-c-button.pf-m-expanded > .pf-m-grid-md.pf-c-table .pf-c-table__toggle-icon {
2832
+ .pf-c-button.pf-m-expanded > .pf-m-grid-xl.pf-c-table .pf-c-table__toggle-icon {
3037
2833
  transform: rotate(var(--pf-c-table__toggle--m-expanded__icon--Rotate));
3038
2834
  }
3039
2835
  }
3040
- @media screen and (max-width: 768px) {
3041
- .pf-m-grid-md.pf-c-table .pf-m-nowrap {
2836
+ @media screen and (max-width: 1200px) {
2837
+ .pf-m-grid-xl.pf-c-table .pf-m-nowrap {
3042
2838
  --pf-c-table--cell--Overflow: auto;
3043
2839
  }
3044
2840
  }
3045
- @media screen and (max-width: 768px) {
3046
- .pf-m-grid-md.pf-c-table .pf-m-fit-content {
2841
+ @media screen and (max-width: 1200px) {
2842
+ .pf-m-grid-xl.pf-c-table .pf-m-fit-content {
3047
2843
  width: auto;
3048
2844
  white-space: normal;
3049
2845
  }
3050
2846
  }
3051
- @media screen and (max-width: 768px) {
3052
- .pf-m-grid-md.pf-c-table .pf-m-truncate {
2847
+ @media screen and (max-width: 1200px) {
2848
+ .pf-m-grid-xl.pf-c-table .pf-m-truncate {
3053
2849
  --pf-c-table--cell--MaxWidth: 100%;
3054
2850
  }
3055
2851
  }
3056
- @media screen and (max-width: 768px) {
3057
- .pf-m-grid-md.pf-c-table [class*=pf-m-width] {
2852
+ @media screen and (max-width: 1200px) {
2853
+ .pf-m-grid-xl.pf-c-table [class*=pf-m-width] {
3058
2854
  --pf-c-table--cell--Width: auto;
3059
2855
  }
3060
2856
  }
3061
- @media screen and (max-width: 992px) {
3062
- .pf-m-grid-lg.pf-c-table {
2857
+ @media screen and (max-width: 1450px) {
2858
+ .pf-m-grid-2xl.pf-c-table {
3063
2859
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
3064
2860
  --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
3065
2861
  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
@@ -3072,7 +2868,7 @@
3072
2868
  border: none;
3073
2869
  }
3074
2870
 
3075
- .pf-m-grid-lg.pf-c-table tr > * {
2871
+ .pf-m-grid-2xl.pf-c-table tr > * {
3076
2872
  width: auto;
3077
2873
  min-width: 0;
3078
2874
  max-width: none;
@@ -3081,7 +2877,7 @@
3081
2877
  white-space: normal;
3082
2878
  }
3083
2879
 
3084
- .pf-m-grid-lg.pf-c-table .pf-c-table__text {
2880
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__text {
3085
2881
  position: relative;
3086
2882
  width: auto;
3087
2883
  min-width: 0;
@@ -3091,50 +2887,50 @@
3091
2887
  white-space: var(--pf-c-table--cell--WhiteSpace);
3092
2888
  }
3093
2889
 
3094
- .pf-m-grid-lg.pf-c-table thead {
2890
+ .pf-m-grid-2xl.pf-c-table thead {
3095
2891
  display: none;
3096
2892
  visibility: hidden;
3097
2893
  }
3098
2894
 
3099
- .pf-m-grid-lg.pf-c-table tbody {
2895
+ .pf-m-grid-2xl.pf-c-table tbody {
3100
2896
  display: block;
3101
2897
  }
3102
2898
 
3103
- .pf-m-grid-lg.pf-c-table tbody:first-of-type {
2899
+ .pf-m-grid-2xl.pf-c-table tbody:first-of-type {
3104
2900
  border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3105
2901
  }
3106
2902
 
3107
- .pf-m-grid-lg.pf-c-table table.pf-m-compact > tbody {
2903
+ .pf-m-grid-2xl.pf-c-table table.pf-m-compact > tbody {
3108
2904
  border-top: 0;
3109
2905
  }
3110
2906
 
3111
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) {
2907
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
3112
2908
  border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3113
2909
  }
3114
2910
 
3115
- .pf-m-grid-lg.pf-c-table tr:last-child,
3116
- .pf-m-grid-lg.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
2911
+ .pf-m-grid-2xl.pf-c-table tr:last-child,
2912
+ .pf-m-grid-2xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
3117
2913
  border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
3118
2914
  }
3119
2915
 
3120
- .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded {
2916
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded {
3121
2917
  border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
3122
2918
  }
3123
2919
 
3124
- .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
2920
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
3125
2921
  border-bottom: 0;
3126
2922
  }
3127
2923
 
3128
- .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
2924
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
3129
2925
  border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3130
2926
  }
3131
2927
 
3132
- .pf-m-grid-lg.pf-c-table tr.pf-m-selected {
2928
+ .pf-m-grid-2xl.pf-c-table tr.pf-m-selected {
3133
2929
  --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
3134
2930
  --pf-c-table__expandable-row--after--BorderColor: transparent;
3135
2931
  }
3136
2932
 
3137
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) {
2933
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
3138
2934
  display: grid;
3139
2935
  grid-template-columns: 1fr;
3140
2936
  height: auto;
@@ -3143,15 +2939,15 @@
3143
2939
  padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
3144
2940
  }
3145
2941
 
3146
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
2942
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
3147
2943
  padding: var(--pf-c-table--cell--responsive--PaddingTop) var(--pf-c-table--cell--responsive--PaddingRight) var(--pf-c-table--cell--responsive--PaddingBottom) var(--pf-c-table--cell--responsive--PaddingLeft);
3148
2944
  }
3149
2945
 
3150
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
2946
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
3151
2947
  --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--cell--first-child--responsive--PaddingTop);
3152
2948
  }
3153
2949
 
3154
- .pf-m-grid-lg.pf-c-table.pf-m-compact {
2950
+ .pf-m-grid-2xl.pf-c-table.pf-m-compact {
3155
2951
  --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table--m-compact-tr--responsive--PaddingTop);
3156
2952
  --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr--responsive--PaddingBottom);
3157
2953
  --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--m-compact-tr-td--responsive--PaddingTop);
@@ -3159,20 +2955,20 @@
3159
2955
  --pf-c-table__check--input--MarginTop: 0;
3160
2956
  }
3161
2957
 
3162
- .pf-m-grid-lg.pf-c-table.pf-m-compact .pf-c-table__action {
2958
+ .pf-m-grid-2xl.pf-c-table.pf-m-compact .pf-c-table__action {
3163
2959
  margin-top: var(--pf-c-table--m-compact__action--responsive--MarginTop);
3164
2960
  margin-bottom: var(--pf-c-table--m-compact__action--responsive--MarginTop);
3165
2961
  }
3166
2962
 
3167
- .pf-m-grid-lg.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
2963
+ .pf-m-grid-2xl.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
3168
2964
  margin-bottom: var(--pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
3169
2965
  }
3170
2966
 
3171
- .pf-m-grid-lg.pf-c-table .pf-c-table__icon > * {
2967
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__icon > * {
3172
2968
  text-align: left;
3173
2969
  }
3174
2970
 
3175
- .pf-m-grid-lg.pf-c-table [data-label] {
2971
+ .pf-m-grid-2xl.pf-c-table [data-label] {
3176
2972
  --pf-c-table--cell--hidden-visible--Display: var(--pf-c-table--m-grid--cell--hidden-visible--Display);
3177
2973
  grid-column: 1;
3178
2974
  grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);
@@ -3180,25 +2976,25 @@
3180
2976
  align-items: start;
3181
2977
  }
3182
2978
 
3183
- .pf-m-grid-lg.pf-c-table [data-label] > * {
2979
+ .pf-m-grid-2xl.pf-c-table [data-label] > * {
3184
2980
  grid-column: 2;
3185
2981
  }
3186
2982
 
3187
- .pf-m-grid-lg.pf-c-table [data-label]::before {
2983
+ .pf-m-grid-2xl.pf-c-table [data-label]::before {
3188
2984
  font-weight: bold;
3189
2985
  text-align: left;
3190
2986
  content: attr(data-label);
3191
2987
  }
3192
2988
 
3193
- .pf-m-grid-lg.pf-c-table tr > *:first-child {
2989
+ .pf-m-grid-2xl.pf-c-table tr > *:first-child {
3194
2990
  --pf-c-table--cell--PaddingLeft: 0;
3195
2991
  }
3196
2992
 
3197
- .pf-m-grid-lg.pf-c-table tr > *:last-child {
2993
+ .pf-m-grid-2xl.pf-c-table tr > *:last-child {
3198
2994
  --pf-c-table--cell--PaddingRight: 0;
3199
2995
  }
3200
2996
 
3201
- .pf-m-grid-lg.pf-c-table .pf-c-table {
2997
+ .pf-m-grid-2xl.pf-c-table .pf-c-table {
3202
2998
  --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
3203
2999
  --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--nested-table--PaddingRight);
3204
3000
  --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table-tr--responsive--nested-table--PaddingBottom);
@@ -3206,21 +3002,21 @@
3206
3002
  border: 0;
3207
3003
  }
3208
3004
 
3209
- .pf-m-grid-lg.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
3005
+ .pf-m-grid-2xl.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
3210
3006
  --pf-c-table-tr--responsive--PaddingTop: 0;
3211
3007
  }
3212
3008
 
3213
- .pf-m-grid-lg.pf-c-table .pf-c-table__compound-expansion-toggle {
3009
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__compound-expansion-toggle {
3214
3010
  --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
3215
3011
  --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
3216
3012
  --pf-c-table__compound-expansion-toggle__button--after--Top: 100%;
3217
3013
  }
3218
3014
 
3219
- .pf-m-grid-lg.pf-c-table tbody {
3015
+ .pf-m-grid-2xl.pf-c-table tbody {
3220
3016
  position: relative;
3221
3017
  }
3222
3018
 
3223
- .pf-m-grid-lg.pf-c-table tbody::after {
3019
+ .pf-m-grid-2xl.pf-c-table tbody::after {
3224
3020
  position: absolute;
3225
3021
  top: 0;
3226
3022
  bottom: 0;
@@ -3230,22 +3026,22 @@
3230
3026
  border-left: var(--pf-c-table--tbody--after--BorderLeftWidth) solid var(--pf-c-table--tbody--after--BorderColor);
3231
3027
  }
3232
3028
 
3233
- .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded {
3029
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded {
3234
3030
  --pf-c-table--tbody--after--BorderLeftWidth: var(--pf-c-table--tbody--after--border-width--base);
3235
3031
  }
3236
3032
 
3237
- .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded tbody {
3033
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded tbody {
3238
3034
  --pf-c-table--tbody--after--BorderLeftWidth: 0;
3239
3035
  }
3240
3036
 
3241
- .pf-m-grid-lg.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
3037
+ .pf-m-grid-2xl.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
3242
3038
  --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
3243
3039
  position: static;
3244
3040
  width: auto;
3245
3041
  background-color: transparent;
3246
3042
  }
3247
3043
 
3248
- .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row {
3044
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row {
3249
3045
  --pf-c-table--cell--responsive--PaddingTop: 0;
3250
3046
  --pf-c-table--cell--responsive--PaddingRight: 0;
3251
3047
  --pf-c-table--cell--responsive--PaddingBottom: 0;
@@ -3259,44 +3055,44 @@
3259
3055
  box-shadow: none;
3260
3056
  }
3261
3057
 
3262
- .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row > * {
3058
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row > * {
3263
3059
  position: static;
3264
3060
  display: block;
3265
3061
  }
3266
3062
 
3267
- .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
3063
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
3268
3064
  border-top-color: var(--pf-c-table--BorderColor);
3269
3065
  }
3270
3066
 
3271
- .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
3067
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
3272
3068
  content: none;
3273
3069
  }
3274
3070
 
3275
- .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
3071
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
3276
3072
  padding: 0;
3277
3073
  }
3278
3074
 
3279
- .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
3075
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
3280
3076
  display: none;
3281
3077
  visibility: hidden;
3282
3078
  }
3283
3079
 
3284
- .pf-m-grid-lg.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
3080
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
3285
3081
  padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
3286
3082
  padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
3287
3083
  }
3288
3084
 
3289
- .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable {
3085
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable {
3290
3086
  --pf-c-table--tbody--after--BorderLeftWidth: 0;
3291
3087
  --pf-c-table--tbody--after--BorderLeftColor: transparent;
3292
3088
  }
3293
3089
 
3294
- .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable,
3295
- .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr {
3090
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable,
3091
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr {
3296
3092
  position: relative;
3297
3093
  }
3298
3094
 
3299
- .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr::after {
3095
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr::after {
3300
3096
  content: "";
3301
3097
  position: absolute;
3302
3098
  top: 0;
@@ -3306,17 +3102,17 @@
3306
3102
  background-color: var(--pf-c-table--tbody--after--tr--BorderLeftColor);
3307
3103
  }
3308
3104
 
3309
- .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
3105
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
3310
3106
  --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth);
3311
3107
  --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor);
3312
3108
  }
3313
3109
 
3314
- .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
3110
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
3315
3111
  --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth);
3316
3112
  --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftColor);
3317
3113
  }
3318
3114
 
3319
- .pf-m-grid-lg.pf-c-table tr.pf-m-selected::after {
3115
+ .pf-m-grid-2xl.pf-c-table tr.pf-m-selected::after {
3320
3116
  content: "";
3321
3117
  position: absolute;
3322
3118
  top: 0;
@@ -3326,917 +3122,1121 @@
3326
3122
  background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
3327
3123
  }
3328
3124
 
3329
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
3330
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
3331
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
3332
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
3125
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
3126
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
3127
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
3128
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
3333
3129
  width: auto;
3334
3130
  padding: 0;
3335
3131
  }
3336
3132
 
3337
- .pf-m-grid-lg.pf-c-table .pf-c-table__toggle {
3133
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__toggle {
3338
3134
  grid-row-start: 20;
3339
3135
  grid-column: -1;
3340
3136
  justify-self: end;
3341
3137
  padding-right: 0;
3342
3138
  }
3343
3139
 
3344
- .pf-m-grid-lg.pf-c-table .pf-c-table__toggle::after {
3140
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__toggle::after {
3345
3141
  content: none;
3346
3142
  }
3347
3143
 
3348
- .pf-m-grid-lg.pf-c-table .pf-c-table__button {
3144
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__button {
3349
3145
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
3350
3146
  --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
3351
3147
  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
3352
3148
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
3353
3149
  }
3354
3150
 
3355
- .pf-m-grid-lg.pf-c-table .pf-c-table__check,
3356
- .pf-m-grid-lg.pf-c-table .pf-c-table__favorite,
3357
- .pf-m-grid-lg.pf-c-table .pf-c-table__action {
3151
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__check,
3152
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite,
3153
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
3358
3154
  grid-row-start: 1;
3359
3155
  grid-column-start: 2;
3360
3156
  }
3361
3157
 
3362
- .pf-m-grid-lg.pf-c-table .pf-c-table__check {
3158
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__check {
3363
3159
  margin-top: var(--pf-c-table__check--responsive--MarginTop);
3364
3160
  margin-left: var(--pf-c-table__check--responsive--MarginLeft);
3365
3161
  }
3366
3162
 
3367
- .pf-m-grid-lg.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
3163
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
3368
3164
  margin-left: var(--pf-c-table--m-grid__check--favorite--MarginLeft);
3369
3165
  }
3370
3166
 
3371
- .pf-m-grid-lg.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
3167
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
3372
3168
  margin-left: var(--pf-c-table--m-grid__check--favorite--action--MarginLeft);
3373
3169
  }
3374
3170
 
3375
- .pf-m-grid-lg.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
3171
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
3376
3172
  margin-left: var(--pf-c-table__action--responsive--MarginLeft);
3377
3173
  }
3378
3174
 
3379
- .pf-m-grid-lg.pf-c-table .pf-c-table__favorite {
3175
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite {
3380
3176
  margin-top: var(--pf-c-table--m-grid__favorite--MarginTop);
3381
3177
  }
3382
3178
 
3383
- .pf-m-grid-lg.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
3179
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
3384
3180
  margin-left: var(--pf-c-table--m-grid__favorite--action--MarginLeft);
3385
3181
  }
3386
3182
 
3387
- .pf-m-grid-lg.pf-c-table .pf-c-table__action {
3183
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
3388
3184
  margin-top: var(--pf-c-table--m-grid__action--MarginTop);
3389
3185
  text-align: right;
3390
3186
  }
3391
3187
  }
3392
- @media screen and (max-width: 992px) and (max-width: 576px) {
3393
- .pf-m-grid-lg.pf-c-table .pf-c-table__action {
3188
+ @media screen and (max-width: 1450px) and (max-width: 576px) {
3189
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
3394
3190
  grid-row-start: 1;
3395
3191
  grid-column-start: 2;
3396
3192
  margin-left: 0;
3397
3193
  }
3398
3194
  }
3399
- @media screen and (max-width: 992px) {
3400
- .pf-m-grid-lg.pf-c-table .pf-c-table__inline-edit-action {
3195
+ @media screen and (max-width: 1450px) {
3196
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__inline-edit-action {
3401
3197
  grid-column: 2;
3402
3198
  grid-row: 2;
3403
3199
  }
3404
3200
  }
3405
- @media screen and (max-width: 992px) {
3406
- .pf-m-grid-lg.pf-c-table .pf-c-table__toggle-icon {
3201
+ @media screen and (max-width: 1450px) {
3202
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__toggle-icon {
3407
3203
  transition: var(--pf-c-table__toggle__icon--Transition);
3408
3204
  }
3409
3205
 
3410
- .pf-c-button.pf-m-expanded > .pf-m-grid-lg.pf-c-table .pf-c-table__toggle-icon {
3206
+ .pf-c-button.pf-m-expanded > .pf-m-grid-2xl.pf-c-table .pf-c-table__toggle-icon {
3411
3207
  transform: rotate(var(--pf-c-table__toggle--m-expanded__icon--Rotate));
3412
3208
  }
3413
3209
  }
3414
- @media screen and (max-width: 992px) {
3415
- .pf-m-grid-lg.pf-c-table .pf-m-nowrap {
3210
+ @media screen and (max-width: 1450px) {
3211
+ .pf-m-grid-2xl.pf-c-table .pf-m-nowrap {
3416
3212
  --pf-c-table--cell--Overflow: auto;
3417
3213
  }
3418
3214
  }
3419
- @media screen and (max-width: 992px) {
3420
- .pf-m-grid-lg.pf-c-table .pf-m-fit-content {
3215
+ @media screen and (max-width: 1450px) {
3216
+ .pf-m-grid-2xl.pf-c-table .pf-m-fit-content {
3421
3217
  width: auto;
3422
3218
  white-space: normal;
3423
3219
  }
3424
3220
  }
3425
- @media screen and (max-width: 992px) {
3426
- .pf-m-grid-lg.pf-c-table .pf-m-truncate {
3221
+ @media screen and (max-width: 1450px) {
3222
+ .pf-m-grid-2xl.pf-c-table .pf-m-truncate {
3427
3223
  --pf-c-table--cell--MaxWidth: 100%;
3428
3224
  }
3429
3225
  }
3430
- @media screen and (max-width: 992px) {
3431
- .pf-m-grid-lg.pf-c-table [class*=pf-m-width] {
3226
+ @media screen and (max-width: 1450px) {
3227
+ .pf-m-grid-2xl.pf-c-table [class*=pf-m-width] {
3432
3228
  --pf-c-table--cell--Width: auto;
3433
3229
  }
3434
3230
  }
3435
- @media screen and (max-width: 1200px) {
3436
- .pf-m-grid-xl.pf-c-table {
3437
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
3438
- --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
3439
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
3440
- --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
3441
- --pf-c-table__favorite--c-button--MarginTop: auto;
3442
- --pf-c-table__favorite--c-button--MarginRight: auto;
3443
- --pf-c-table__favorite--c-button--MarginBottom: auto;
3444
- --pf-c-table__favorite--c-button--MarginLeft: auto;
3445
- display: grid;
3446
- border: none;
3447
- }
3231
+ .pf-c-table {
3232
+ --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
3233
+ --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
3234
+ --pf-c-table__sticky-column--Left: 0;
3235
+ --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
3236
+ --pf-c-table__sticky-column--Top: 0;
3237
+ --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
3238
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
3239
+ --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
3240
+ --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
3241
+ }
3242
+
3243
+ .pf-c-table .pf-c-table__sticky-column {
3244
+ position: sticky;
3245
+ left: var(--pf-c-table__sticky-column--Left);
3246
+ z-index: var(--pf-c-table__sticky-column--ZIndex);
3247
+ min-width: var(--pf-c-table__sticky-column--MinWidth);
3248
+ background-color: var(--pf-c-table__sticky-column--BackgroundColor);
3249
+ background-clip: padding-box;
3250
+ }
3251
+
3252
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
3253
+ --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
3254
+ --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
3255
+ }
3256
+
3257
+ .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
3258
+ --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
3259
+ --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
3260
+ }
3261
+
3262
+ .pf-c-table.pf-m-sticky-header {
3263
+ --pf-c-table--cell--Overflow: visible;
3264
+ }
3265
+
3266
+ .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
3267
+ z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
3268
+ }
3269
+
3270
+ .pf-c-scroll-outer-wrapper {
3271
+ --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
3272
+ display: flex;
3273
+ flex-direction: column;
3274
+ max-width: 100%;
3275
+ min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
3276
+ max-height: 100%;
3277
+ overflow: hidden;
3278
+ }
3279
+
3280
+ .pf-c-scroll-inner-wrapper {
3281
+ display: flex;
3282
+ flex-direction: column;
3283
+ max-width: 100%;
3284
+ max-height: 100%;
3285
+ overflow: auto;
3286
+ }
3287
+
3288
+ .pf-c-table {
3289
+ --pf-c-table__tree-view-main--indent--base: calc(var(--pf-global--spacer--md) * 2 + var(--pf-c-table__tree-view-icon--MinWidth));
3290
+ --pf-c-table__tree-view-main--nested-indent--base: calc(var(--pf-c-table__tree-view-main--indent--base) - var(--pf-global--spacer--md));
3291
+ --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
3292
+ --pf-c-table__tree-view-main--MarginLeft: calc(var(--pf-c-table--cell--PaddingLeft) * -1);
3293
+ --pf-c-table__tree-view-main--c-table__check--MarginRight: var(--pf-global--spacer--sm);
3294
+ --pf-c-table__tree-view-icon--MinWidth: var(--pf-global--FontSize--md);
3295
+ --pf-c-table__tree-view-icon--MarginRight: var(--pf-global--spacer--sm);
3296
+ --pf-c-table--m-tree-view__toggle--Position: absolute;
3297
+ --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
3298
+ --pf-c-table--m-tree-view__toggle--TranslateX: -100%;
3299
+ --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
3300
+ }
3301
+
3302
+ .pf-c-table.pf-m-tree-view > tbody > tr {
3303
+ --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
3304
+ }
3305
+
3306
+ .pf-c-table.pf-m-tree-view tr[aria-level="2"] {
3307
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
3308
+ }
3309
+
3310
+ .pf-c-table.pf-m-tree-view tr[aria-level="3"] {
3311
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
3312
+ }
3313
+
3314
+ .pf-c-table.pf-m-tree-view tr[aria-level="4"] {
3315
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
3316
+ }
3317
+
3318
+ .pf-c-table.pf-m-tree-view tr[aria-level="5"] {
3319
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
3320
+ }
3321
+
3322
+ .pf-c-table.pf-m-tree-view tr[aria-level="6"] {
3323
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
3324
+ }
3325
+
3326
+ .pf-c-table.pf-m-tree-view tr[aria-level="7"] {
3327
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
3328
+ }
3329
+
3330
+ .pf-c-table.pf-m-tree-view tr[aria-level="8"] {
3331
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
3332
+ }
3333
+
3334
+ .pf-c-table.pf-m-tree-view tr[aria-level="9"] {
3335
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
3336
+ }
3337
+
3338
+ .pf-c-table.pf-m-tree-view tr[aria-level="10"] {
3339
+ --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
3340
+ }
3341
+
3342
+ .pf-c-table__tree-view-main {
3343
+ position: relative;
3344
+ display: flex;
3345
+ align-items: baseline;
3346
+ min-width: 0;
3347
+ padding-left: var(--pf-c-table__tree-view-main--PaddingLeft);
3348
+ margin-left: var(--pf-c-table__tree-view-main--MarginLeft);
3349
+ text-align: left;
3350
+ cursor: pointer;
3351
+ }
3352
+
3353
+ .pf-c-table__tree-view-main > .pf-c-table__toggle {
3354
+ position: var(--pf-c-table--m-tree-view__toggle--Position);
3355
+ left: var(--pf-c-table--m-tree-view__toggle--Left);
3356
+ transform: translateX(var(--pf-c-table--m-tree-view__toggle--TranslateX));
3357
+ }
3358
+
3359
+ .pf-c-table__tree-view-main > .pf-c-table__toggle .pf-c-table__toggle-icon {
3360
+ min-width: var(--pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
3361
+ }
3362
+
3363
+ .pf-c-table__tree-view-main > .pf-c-table__check {
3364
+ margin-right: var(--pf-c-table__tree-view-main--c-table__check--MarginRight);
3365
+ }
3366
+
3367
+ .pf-c-table__tree-view-text {
3368
+ display: flex;
3369
+ }
3370
+
3371
+ .pf-c-table__tree-view-icon {
3372
+ min-width: var(--pf-c-table__tree-view-icon--MinWidth);
3373
+ margin-right: var(--pf-c-table__tree-view-icon--MarginRight);
3374
+ }
3375
+
3376
+ .pf-c-table__tree-view-details-toggle {
3377
+ display: none;
3378
+ visibility: hidden;
3379
+ }
3380
+
3381
+ .pf-m-tree-view-grid.pf-c-table {
3382
+ --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
3383
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
3384
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
3385
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
3386
+ --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
3387
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
3388
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
3389
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
3390
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
3391
+ --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
3392
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
3393
+ --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
3394
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
3395
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
3396
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
3397
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
3398
+ --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
3399
+ --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
3400
+ --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
3401
+ --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
3402
+ --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
3403
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
3404
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
3405
+ }
3406
+
3407
+ .pf-m-tree-view-grid.pf-c-table tbody tr {
3408
+ position: relative;
3409
+ outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
3410
+ border: none;
3411
+ }
3412
+
3413
+ .pf-m-tree-view-grid.pf-c-table tbody tr::before {
3414
+ position: absolute;
3415
+ top: 0;
3416
+ right: 0;
3417
+ bottom: 0;
3418
+ left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
3419
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
3420
+ content: "";
3421
+ }
3422
+
3423
+ .pf-m-tree-view-grid.pf-c-table tr:not([hidden]) {
3424
+ display: grid;
3425
+ grid-template-columns: 1fr max-content;
3426
+ }
3427
+
3428
+ .pf-m-tree-view-grid.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
3429
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
3430
+ }
3431
+
3432
+ .pf-m-tree-view-grid.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
3433
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
3434
+ }
3435
+
3436
+ .pf-m-tree-view-grid.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
3437
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
3438
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
3439
+ padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
3440
+ }
3441
+
3442
+ .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-text {
3443
+ padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
3444
+ }
3445
+
3446
+ .pf-m-tree-view-grid.pf-c-table thead th {
3447
+ display: none;
3448
+ visibility: none;
3449
+ }
3450
+
3451
+ .pf-m-tree-view-grid.pf-c-table td {
3452
+ display: none;
3453
+ }
3454
+
3455
+ .pf-m-tree-view-grid.pf-c-table td[data-label] {
3456
+ grid-column: 1;
3457
+ grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
3458
+ grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
3459
+ align-items: start;
3460
+ }
3461
+
3462
+ .pf-m-tree-view-grid.pf-c-table td[data-label] > * {
3463
+ grid-column: 2;
3464
+ }
3465
+
3466
+ .pf-m-tree-view-grid.pf-c-table td[data-label]::before {
3467
+ font-weight: bold;
3468
+ text-align: left;
3469
+ content: attr(data-label);
3470
+ }
3471
+
3472
+ .pf-m-tree-view-grid.pf-c-table tr.pf-m-tree-view-details-expanded {
3473
+ padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
3474
+ }
3475
+
3476
+ .pf-m-tree-view-grid.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
3477
+ display: grid;
3478
+ }
3479
+
3480
+ .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-title-header-cell {
3481
+ display: block;
3482
+ visibility: visible;
3483
+ }
3484
+
3485
+ .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-details-toggle,
3486
+ .pf-m-tree-view-grid.pf-c-table .pf-c-table__action {
3487
+ display: inline-block;
3488
+ visibility: visible;
3489
+ }
3490
+
3491
+ .pf-m-tree-view-grid.pf-c-table .pf-c-table__action {
3492
+ --pf-c-table--cell--Width: auto;
3493
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
3494
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
3495
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
3496
+ grid-column: 2;
3497
+ grid-row: 1;
3498
+ }
3499
+
3500
+ .pf-m-tree-view-grid.pf-c-table .pf-c-table__action > .pf-c-dropdown {
3501
+ margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
3502
+ margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
3503
+ }
3504
+
3505
+ .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
3506
+ margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
3507
+ margin-left: auto;
3508
+ order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
3509
+ }
3510
+
3511
+ .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-details-toggle {
3512
+ margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
3513
+ margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
3514
+ }
3448
3515
 
3449
- .pf-m-grid-xl.pf-c-table tr > * {
3450
- width: auto;
3451
- min-width: 0;
3452
- max-width: none;
3453
- overflow: visible;
3454
- text-overflow: clip;
3455
- white-space: normal;
3456
- }
3516
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="2"] {
3517
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
3518
+ }
3457
3519
 
3458
- .pf-m-grid-xl.pf-c-table .pf-c-table__text {
3459
- position: relative;
3460
- width: auto;
3461
- min-width: 0;
3462
- max-width: none;
3463
- overflow: var(--pf-c-table--cell--Overflow);
3464
- text-overflow: var(--pf-c-table--cell--TextOverflow);
3465
- white-space: var(--pf-c-table--cell--WhiteSpace);
3466
- }
3520
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="3"] {
3521
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
3522
+ }
3467
3523
 
3468
- .pf-m-grid-xl.pf-c-table thead {
3469
- display: none;
3470
- visibility: hidden;
3471
- }
3524
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="4"] {
3525
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
3526
+ }
3472
3527
 
3473
- .pf-m-grid-xl.pf-c-table tbody {
3474
- display: block;
3475
- }
3528
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="5"] {
3529
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
3530
+ }
3476
3531
 
3477
- .pf-m-grid-xl.pf-c-table tbody:first-of-type {
3478
- border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3479
- }
3532
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="6"] {
3533
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
3534
+ }
3480
3535
 
3481
- .pf-m-grid-xl.pf-c-table table.pf-m-compact > tbody {
3482
- border-top: 0;
3483
- }
3536
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="7"] {
3537
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
3538
+ }
3484
3539
 
3485
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
3486
- border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3487
- }
3540
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="8"] {
3541
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
3542
+ }
3488
3543
 
3489
- .pf-m-grid-xl.pf-c-table tr:last-child,
3490
- .pf-m-grid-xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
3491
- border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
3492
- }
3544
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="9"] {
3545
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
3546
+ }
3493
3547
 
3494
- .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded {
3495
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
3496
- }
3548
+ .pf-m-tree-view-grid.pf-c-table tr[aria-level="10"] {
3549
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
3550
+ }
3497
3551
 
3498
- .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
3499
- border-bottom: 0;
3552
+ @media screen and (max-width: 768px) {
3553
+ .pf-m-tree-view-grid-md.pf-c-table {
3554
+ --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
3555
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
3556
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
3557
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
3558
+ --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
3559
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
3560
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
3561
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
3562
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
3563
+ --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
3564
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
3565
+ --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
3566
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
3567
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
3568
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
3569
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
3570
+ --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
3571
+ --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
3572
+ --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
3573
+ --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
3574
+ --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
3575
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
3576
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
3500
3577
  }
3501
3578
 
3502
- .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
3503
- border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3579
+ .pf-m-tree-view-grid-md.pf-c-table tbody tr {
3580
+ position: relative;
3581
+ outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
3582
+ border: none;
3504
3583
  }
3505
3584
 
3506
- .pf-m-grid-xl.pf-c-table tr.pf-m-selected {
3507
- --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
3508
- --pf-c-table__expandable-row--after--BorderColor: transparent;
3585
+ .pf-m-tree-view-grid-md.pf-c-table tbody tr::before {
3586
+ position: absolute;
3587
+ top: 0;
3588
+ right: 0;
3589
+ bottom: 0;
3590
+ left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
3591
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
3592
+ content: "";
3509
3593
  }
3510
3594
 
3511
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
3595
+ .pf-m-tree-view-grid-md.pf-c-table tr:not([hidden]) {
3512
3596
  display: grid;
3513
- grid-template-columns: 1fr;
3514
- height: auto;
3515
- grid-auto-columns: max-content;
3516
- grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
3517
- padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
3597
+ grid-template-columns: 1fr max-content;
3518
3598
  }
3519
3599
 
3520
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
3521
- padding: var(--pf-c-table--cell--responsive--PaddingTop) var(--pf-c-table--cell--responsive--PaddingRight) var(--pf-c-table--cell--responsive--PaddingBottom) var(--pf-c-table--cell--responsive--PaddingLeft);
3600
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
3601
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
3522
3602
  }
3523
3603
 
3524
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
3525
- --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--cell--first-child--responsive--PaddingTop);
3604
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
3605
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
3526
3606
  }
3527
3607
 
3528
- .pf-m-grid-xl.pf-c-table.pf-m-compact {
3529
- --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table--m-compact-tr--responsive--PaddingTop);
3530
- --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr--responsive--PaddingBottom);
3531
- --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--m-compact-tr-td--responsive--PaddingTop);
3532
- --pf-c-table--cell--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr-td--responsive--PaddingBottom);
3533
- --pf-c-table__check--input--MarginTop: 0;
3608
+ .pf-m-tree-view-grid-md.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
3609
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
3610
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
3611
+ padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
3534
3612
  }
3535
3613
 
3536
- .pf-m-grid-xl.pf-c-table.pf-m-compact .pf-c-table__action {
3537
- margin-top: var(--pf-c-table--m-compact__action--responsive--MarginTop);
3538
- margin-bottom: var(--pf-c-table--m-compact__action--responsive--MarginTop);
3614
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-text {
3615
+ padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
3539
3616
  }
3540
3617
 
3541
- .pf-m-grid-xl.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
3542
- margin-bottom: var(--pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
3618
+ .pf-m-tree-view-grid-md.pf-c-table thead th {
3619
+ display: none;
3620
+ visibility: none;
3543
3621
  }
3544
3622
 
3545
- .pf-m-grid-xl.pf-c-table .pf-c-table__icon > * {
3546
- text-align: left;
3623
+ .pf-m-tree-view-grid-md.pf-c-table td {
3624
+ display: none;
3547
3625
  }
3548
3626
 
3549
- .pf-m-grid-xl.pf-c-table [data-label] {
3550
- --pf-c-table--cell--hidden-visible--Display: var(--pf-c-table--m-grid--cell--hidden-visible--Display);
3627
+ .pf-m-tree-view-grid-md.pf-c-table td[data-label] {
3551
3628
  grid-column: 1;
3552
- grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);
3553
- grid-template-columns: 1fr minmax(0, 1.5fr);
3629
+ grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
3630
+ grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
3554
3631
  align-items: start;
3555
3632
  }
3556
3633
 
3557
- .pf-m-grid-xl.pf-c-table [data-label] > * {
3634
+ .pf-m-tree-view-grid-md.pf-c-table td[data-label] > * {
3558
3635
  grid-column: 2;
3559
3636
  }
3560
3637
 
3561
- .pf-m-grid-xl.pf-c-table [data-label]::before {
3638
+ .pf-m-tree-view-grid-md.pf-c-table td[data-label]::before {
3562
3639
  font-weight: bold;
3563
3640
  text-align: left;
3564
3641
  content: attr(data-label);
3565
3642
  }
3566
3643
 
3567
- .pf-m-grid-xl.pf-c-table tr > *:first-child {
3568
- --pf-c-table--cell--PaddingLeft: 0;
3569
- }
3570
-
3571
- .pf-m-grid-xl.pf-c-table tr > *:last-child {
3572
- --pf-c-table--cell--PaddingRight: 0;
3573
- }
3574
-
3575
- .pf-m-grid-xl.pf-c-table .pf-c-table {
3576
- --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
3577
- --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--nested-table--PaddingRight);
3578
- --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table-tr--responsive--nested-table--PaddingBottom);
3579
- --pf-c-table-tr--responsive--PaddingLeft: var(--pf-c-table-tr--responsive--nested-table--PaddingLeft);
3580
- border: 0;
3581
- }
3582
-
3583
- .pf-m-grid-xl.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
3584
- --pf-c-table-tr--responsive--PaddingTop: 0;
3644
+ .pf-m-tree-view-grid-md.pf-c-table tr.pf-m-tree-view-details-expanded {
3645
+ padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
3585
3646
  }
3586
3647
 
3587
- .pf-m-grid-xl.pf-c-table .pf-c-table__compound-expansion-toggle {
3588
- --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
3589
- --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
3590
- --pf-c-table__compound-expansion-toggle__button--after--Top: 100%;
3648
+ .pf-m-tree-view-grid-md.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
3649
+ display: grid;
3591
3650
  }
3592
3651
 
3593
- .pf-m-grid-xl.pf-c-table tbody {
3594
- position: relative;
3652
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-title-header-cell {
3653
+ display: block;
3654
+ visibility: visible;
3595
3655
  }
3596
3656
 
3597
- .pf-m-grid-xl.pf-c-table tbody::after {
3598
- position: absolute;
3599
- top: 0;
3600
- bottom: 0;
3601
- left: 0;
3602
- content: "";
3603
- border: 0;
3604
- border-left: var(--pf-c-table--tbody--after--BorderLeftWidth) solid var(--pf-c-table--tbody--after--BorderColor);
3657
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-details-toggle,
3658
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
3659
+ display: inline-block;
3660
+ visibility: visible;
3605
3661
  }
3606
3662
 
3607
- .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded {
3608
- --pf-c-table--tbody--after--BorderLeftWidth: var(--pf-c-table--tbody--after--border-width--base);
3663
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
3664
+ --pf-c-table--cell--Width: auto;
3665
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
3666
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
3667
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
3668
+ grid-column: 2;
3669
+ grid-row: 1;
3609
3670
  }
3610
3671
 
3611
- .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded tbody {
3612
- --pf-c-table--tbody--after--BorderLeftWidth: 0;
3672
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action > .pf-c-dropdown {
3673
+ margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
3674
+ margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
3613
3675
  }
3614
3676
 
3615
- .pf-m-grid-xl.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
3616
- --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
3617
- position: static;
3618
- width: auto;
3619
- background-color: transparent;
3677
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
3678
+ margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
3679
+ margin-left: auto;
3680
+ order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
3620
3681
  }
3621
3682
 
3622
- .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row {
3623
- --pf-c-table--cell--responsive--PaddingTop: 0;
3624
- --pf-c-table--cell--responsive--PaddingRight: 0;
3625
- --pf-c-table--cell--responsive--PaddingBottom: 0;
3626
- --pf-c-table--cell--responsive--PaddingLeft: 0;
3627
- --pf-c-table--cell--PaddingRight: 0;
3628
- --pf-c-table--cell--PaddingLeft: 0;
3629
- display: block;
3630
- max-height: var(--pf-c-table__expandable-row--MaxHeight);
3631
- overflow-y: auto;
3632
- border-bottom: none;
3633
- box-shadow: none;
3683
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-details-toggle {
3684
+ margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
3685
+ margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
3634
3686
  }
3635
3687
 
3636
- .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row > * {
3637
- position: static;
3638
- display: block;
3688
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="2"] {
3689
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
3639
3690
  }
3640
3691
 
3641
- .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
3642
- border-top-color: var(--pf-c-table--BorderColor);
3692
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="3"] {
3693
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
3643
3694
  }
3644
3695
 
3645
- .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
3646
- content: none;
3696
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="4"] {
3697
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
3647
3698
  }
3648
3699
 
3649
- .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
3650
- padding: 0;
3700
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="5"] {
3701
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
3651
3702
  }
3652
3703
 
3653
- .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
3654
- display: none;
3655
- visibility: hidden;
3704
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="6"] {
3705
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
3656
3706
  }
3657
3707
 
3658
- .pf-m-grid-xl.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
3659
- padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
3660
- padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
3708
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="7"] {
3709
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
3661
3710
  }
3662
3711
 
3663
- .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable {
3664
- --pf-c-table--tbody--after--BorderLeftWidth: 0;
3665
- --pf-c-table--tbody--after--BorderLeftColor: transparent;
3712
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="8"] {
3713
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
3666
3714
  }
3667
3715
 
3668
- .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable,
3669
- .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr {
3670
- position: relative;
3716
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="9"] {
3717
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
3671
3718
  }
3672
3719
 
3673
- .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr::after {
3674
- content: "";
3675
- position: absolute;
3676
- top: 0;
3677
- bottom: 0;
3678
- left: 0;
3679
- width: var(--pf-c-table--tbody--after--tr--BorderLeftWidth);
3680
- background-color: var(--pf-c-table--tbody--after--tr--BorderLeftColor);
3720
+ .pf-m-tree-view-grid-md.pf-c-table tr[aria-level="10"] {
3721
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
3681
3722
  }
3682
-
3683
- .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
3684
- --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth);
3685
- --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor);
3723
+ }
3724
+ @media screen and (max-width: 992px) {
3725
+ .pf-m-tree-view-grid-lg.pf-c-table {
3726
+ --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
3727
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
3728
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
3729
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
3730
+ --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
3731
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
3732
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
3733
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
3734
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
3735
+ --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
3736
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
3737
+ --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
3738
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
3739
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
3740
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
3741
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
3742
+ --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
3743
+ --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
3744
+ --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
3745
+ --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
3746
+ --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
3747
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
3748
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
3686
3749
  }
3687
3750
 
3688
- .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
3689
- --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth);
3690
- --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftColor);
3751
+ .pf-m-tree-view-grid-lg.pf-c-table tbody tr {
3752
+ position: relative;
3753
+ outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
3754
+ border: none;
3691
3755
  }
3692
3756
 
3693
- .pf-m-grid-xl.pf-c-table tr.pf-m-selected::after {
3694
- content: "";
3757
+ .pf-m-tree-view-grid-lg.pf-c-table tbody tr::before {
3695
3758
  position: absolute;
3696
3759
  top: 0;
3760
+ right: 0;
3697
3761
  bottom: 0;
3698
- left: 0;
3699
- width: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
3700
- background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
3762
+ left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
3763
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
3764
+ content: "";
3701
3765
  }
3702
3766
 
3703
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
3704
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
3705
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
3706
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
3707
- width: auto;
3708
- padding: 0;
3767
+ .pf-m-tree-view-grid-lg.pf-c-table tr:not([hidden]) {
3768
+ display: grid;
3769
+ grid-template-columns: 1fr max-content;
3709
3770
  }
3710
3771
 
3711
- .pf-m-grid-xl.pf-c-table .pf-c-table__toggle {
3712
- grid-row-start: 20;
3713
- grid-column: -1;
3714
- justify-self: end;
3715
- padding-right: 0;
3772
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
3773
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
3716
3774
  }
3717
3775
 
3718
- .pf-m-grid-xl.pf-c-table .pf-c-table__toggle::after {
3719
- content: none;
3776
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
3777
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
3720
3778
  }
3721
3779
 
3722
- .pf-m-grid-xl.pf-c-table .pf-c-table__button {
3723
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
3724
- --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
3725
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
3726
- --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
3780
+ .pf-m-tree-view-grid-lg.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
3781
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
3782
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
3783
+ padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
3727
3784
  }
3728
3785
 
3729
- .pf-m-grid-xl.pf-c-table .pf-c-table__check,
3730
- .pf-m-grid-xl.pf-c-table .pf-c-table__favorite,
3731
- .pf-m-grid-xl.pf-c-table .pf-c-table__action {
3732
- grid-row-start: 1;
3733
- grid-column-start: 2;
3786
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-text {
3787
+ padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
3734
3788
  }
3735
3789
 
3736
- .pf-m-grid-xl.pf-c-table .pf-c-table__check {
3737
- margin-top: var(--pf-c-table__check--responsive--MarginTop);
3738
- margin-left: var(--pf-c-table__check--responsive--MarginLeft);
3790
+ .pf-m-tree-view-grid-lg.pf-c-table thead th {
3791
+ display: none;
3792
+ visibility: none;
3739
3793
  }
3740
3794
 
3741
- .pf-m-grid-xl.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
3742
- margin-left: var(--pf-c-table--m-grid__check--favorite--MarginLeft);
3795
+ .pf-m-tree-view-grid-lg.pf-c-table td {
3796
+ display: none;
3743
3797
  }
3744
3798
 
3745
- .pf-m-grid-xl.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
3746
- margin-left: var(--pf-c-table--m-grid__check--favorite--action--MarginLeft);
3799
+ .pf-m-tree-view-grid-lg.pf-c-table td[data-label] {
3800
+ grid-column: 1;
3801
+ grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
3802
+ grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
3803
+ align-items: start;
3747
3804
  }
3748
3805
 
3749
- .pf-m-grid-xl.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
3750
- margin-left: var(--pf-c-table__action--responsive--MarginLeft);
3806
+ .pf-m-tree-view-grid-lg.pf-c-table td[data-label] > * {
3807
+ grid-column: 2;
3751
3808
  }
3752
3809
 
3753
- .pf-m-grid-xl.pf-c-table .pf-c-table__favorite {
3754
- margin-top: var(--pf-c-table--m-grid__favorite--MarginTop);
3810
+ .pf-m-tree-view-grid-lg.pf-c-table td[data-label]::before {
3811
+ font-weight: bold;
3812
+ text-align: left;
3813
+ content: attr(data-label);
3755
3814
  }
3756
3815
 
3757
- .pf-m-grid-xl.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
3758
- margin-left: var(--pf-c-table--m-grid__favorite--action--MarginLeft);
3816
+ .pf-m-tree-view-grid-lg.pf-c-table tr.pf-m-tree-view-details-expanded {
3817
+ padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
3759
3818
  }
3760
3819
 
3761
- .pf-m-grid-xl.pf-c-table .pf-c-table__action {
3762
- margin-top: var(--pf-c-table--m-grid__action--MarginTop);
3763
- text-align: right;
3764
- }
3765
- }
3766
- @media screen and (max-width: 1200px) and (max-width: 576px) {
3767
- .pf-m-grid-xl.pf-c-table .pf-c-table__action {
3768
- grid-row-start: 1;
3769
- grid-column-start: 2;
3770
- margin-left: 0;
3771
- }
3772
- }
3773
- @media screen and (max-width: 1200px) {
3774
- .pf-m-grid-xl.pf-c-table .pf-c-table__inline-edit-action {
3775
- grid-column: 2;
3776
- grid-row: 2;
3777
- }
3778
- }
3779
- @media screen and (max-width: 1200px) {
3780
- .pf-m-grid-xl.pf-c-table .pf-c-table__toggle-icon {
3781
- transition: var(--pf-c-table__toggle__icon--Transition);
3820
+ .pf-m-tree-view-grid-lg.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
3821
+ display: grid;
3782
3822
  }
3783
3823
 
3784
- .pf-c-button.pf-m-expanded > .pf-m-grid-xl.pf-c-table .pf-c-table__toggle-icon {
3785
- transform: rotate(var(--pf-c-table__toggle--m-expanded__icon--Rotate));
3786
- }
3787
- }
3788
- @media screen and (max-width: 1200px) {
3789
- .pf-m-grid-xl.pf-c-table .pf-m-nowrap {
3790
- --pf-c-table--cell--Overflow: auto;
3791
- }
3792
- }
3793
- @media screen and (max-width: 1200px) {
3794
- .pf-m-grid-xl.pf-c-table .pf-m-fit-content {
3795
- width: auto;
3796
- white-space: normal;
3824
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-title-header-cell {
3825
+ display: block;
3826
+ visibility: visible;
3797
3827
  }
3798
- }
3799
- @media screen and (max-width: 1200px) {
3800
- .pf-m-grid-xl.pf-c-table .pf-m-truncate {
3801
- --pf-c-table--cell--MaxWidth: 100%;
3828
+
3829
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-details-toggle,
3830
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
3831
+ display: inline-block;
3832
+ visibility: visible;
3802
3833
  }
3803
- }
3804
- @media screen and (max-width: 1200px) {
3805
- .pf-m-grid-xl.pf-c-table [class*=pf-m-width] {
3834
+
3835
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
3806
3836
  --pf-c-table--cell--Width: auto;
3837
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
3838
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
3839
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
3840
+ grid-column: 2;
3841
+ grid-row: 1;
3807
3842
  }
3808
- }
3809
- @media screen and (max-width: 1450px) {
3810
- .pf-m-grid-2xl.pf-c-table {
3811
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
3812
- --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
3813
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
3814
- --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
3815
- --pf-c-table__favorite--c-button--MarginTop: auto;
3816
- --pf-c-table__favorite--c-button--MarginRight: auto;
3817
- --pf-c-table__favorite--c-button--MarginBottom: auto;
3818
- --pf-c-table__favorite--c-button--MarginLeft: auto;
3819
- display: grid;
3820
- border: none;
3843
+
3844
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action > .pf-c-dropdown {
3845
+ margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
3846
+ margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
3821
3847
  }
3822
3848
 
3823
- .pf-m-grid-2xl.pf-c-table tr > * {
3824
- width: auto;
3825
- min-width: 0;
3826
- max-width: none;
3827
- overflow: visible;
3828
- text-overflow: clip;
3829
- white-space: normal;
3849
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
3850
+ margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
3851
+ margin-left: auto;
3852
+ order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
3830
3853
  }
3831
3854
 
3832
- .pf-m-grid-2xl.pf-c-table .pf-c-table__text {
3833
- position: relative;
3834
- width: auto;
3835
- min-width: 0;
3836
- max-width: none;
3837
- overflow: var(--pf-c-table--cell--Overflow);
3838
- text-overflow: var(--pf-c-table--cell--TextOverflow);
3839
- white-space: var(--pf-c-table--cell--WhiteSpace);
3855
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-details-toggle {
3856
+ margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
3857
+ margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
3840
3858
  }
3841
3859
 
3842
- .pf-m-grid-2xl.pf-c-table thead {
3843
- display: none;
3844
- visibility: hidden;
3860
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="2"] {
3861
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
3845
3862
  }
3846
3863
 
3847
- .pf-m-grid-2xl.pf-c-table tbody {
3848
- display: block;
3864
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="3"] {
3865
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
3849
3866
  }
3850
3867
 
3851
- .pf-m-grid-2xl.pf-c-table tbody:first-of-type {
3852
- border-top: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3868
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="4"] {
3869
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
3853
3870
  }
3854
3871
 
3855
- .pf-m-grid-2xl.pf-c-table table.pf-m-compact > tbody {
3856
- border-top: 0;
3872
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="5"] {
3873
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
3857
3874
  }
3858
3875
 
3859
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
3860
- border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3876
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="6"] {
3877
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
3861
3878
  }
3862
3879
 
3863
- .pf-m-grid-2xl.pf-c-table tr:last-child,
3864
- .pf-m-grid-2xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
3865
- border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
3880
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="7"] {
3881
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
3866
3882
  }
3867
3883
 
3868
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded {
3869
- border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
3884
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="8"] {
3885
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
3870
3886
  }
3871
3887
 
3872
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded tr:not(.pf-c-table__expandable-row) {
3873
- border-bottom: 0;
3888
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="9"] {
3889
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
3874
3890
  }
3875
3891
 
3876
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded:not(:last-of-type) {
3877
- border-bottom: var(--pf-c-table--tbody--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
3892
+ .pf-m-tree-view-grid-lg.pf-c-table tr[aria-level="10"] {
3893
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
3894
+ }
3895
+ }
3896
+ @media screen and (max-width: 1200px) {
3897
+ .pf-m-tree-view-grid-xl.pf-c-table {
3898
+ --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
3899
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
3900
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
3901
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
3902
+ --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
3903
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
3904
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
3905
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
3906
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
3907
+ --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
3908
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
3909
+ --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
3910
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
3911
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
3912
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
3913
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
3914
+ --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
3915
+ --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
3916
+ --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
3917
+ --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
3918
+ --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
3919
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
3920
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
3878
3921
  }
3879
3922
 
3880
- .pf-m-grid-2xl.pf-c-table tr.pf-m-selected {
3881
- --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
3882
- --pf-c-table__expandable-row--after--BorderColor: transparent;
3923
+ .pf-m-tree-view-grid-xl.pf-c-table tbody tr {
3924
+ position: relative;
3925
+ outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
3926
+ border: none;
3883
3927
  }
3884
3928
 
3885
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
3929
+ .pf-m-tree-view-grid-xl.pf-c-table tbody tr::before {
3930
+ position: absolute;
3931
+ top: 0;
3932
+ right: 0;
3933
+ bottom: 0;
3934
+ left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
3935
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
3936
+ content: "";
3937
+ }
3938
+
3939
+ .pf-m-tree-view-grid-xl.pf-c-table tr:not([hidden]) {
3886
3940
  display: grid;
3887
- grid-template-columns: 1fr;
3888
- height: auto;
3889
- grid-auto-columns: max-content;
3890
- grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
3891
- padding: var(--pf-c-table-tr--responsive--PaddingTop) var(--pf-c-table-tr--responsive--PaddingRight) var(--pf-c-table-tr--responsive--PaddingBottom) var(--pf-c-table-tr--responsive--PaddingLeft);
3941
+ grid-template-columns: 1fr max-content;
3892
3942
  }
3893
3943
 
3894
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) > * {
3895
- padding: var(--pf-c-table--cell--responsive--PaddingTop) var(--pf-c-table--cell--responsive--PaddingRight) var(--pf-c-table--cell--responsive--PaddingBottom) var(--pf-c-table--cell--responsive--PaddingLeft);
3944
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
3945
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
3896
3946
  }
3897
3947
 
3898
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) > *:first-child {
3899
- --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--cell--first-child--responsive--PaddingTop);
3948
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
3949
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
3900
3950
  }
3901
3951
 
3902
- .pf-m-grid-2xl.pf-c-table.pf-m-compact {
3903
- --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table--m-compact-tr--responsive--PaddingTop);
3904
- --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr--responsive--PaddingBottom);
3905
- --pf-c-table--cell--responsive--PaddingTop: var(--pf-c-table--m-compact-tr-td--responsive--PaddingTop);
3906
- --pf-c-table--cell--responsive--PaddingBottom: var(--pf-c-table--m-compact-tr-td--responsive--PaddingBottom);
3907
- --pf-c-table__check--input--MarginTop: 0;
3952
+ .pf-m-tree-view-grid-xl.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
3953
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
3954
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
3955
+ padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
3908
3956
  }
3909
3957
 
3910
- .pf-m-grid-2xl.pf-c-table.pf-m-compact .pf-c-table__action {
3911
- margin-top: var(--pf-c-table--m-compact__action--responsive--MarginTop);
3912
- margin-bottom: var(--pf-c-table--m-compact__action--responsive--MarginTop);
3958
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-text {
3959
+ padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
3913
3960
  }
3914
3961
 
3915
- .pf-m-grid-2xl.pf-c-table.pf-m-compact .pf-c-table__toggle .pf-c-button {
3916
- margin-bottom: var(--pf-c-table--m-compact__toggle--c-button--responsive--MarginBottom);
3962
+ .pf-m-tree-view-grid-xl.pf-c-table thead th {
3963
+ display: none;
3964
+ visibility: none;
3917
3965
  }
3918
3966
 
3919
- .pf-m-grid-2xl.pf-c-table .pf-c-table__icon > * {
3920
- text-align: left;
3967
+ .pf-m-tree-view-grid-xl.pf-c-table td {
3968
+ display: none;
3921
3969
  }
3922
3970
 
3923
- .pf-m-grid-2xl.pf-c-table [data-label] {
3924
- --pf-c-table--cell--hidden-visible--Display: var(--pf-c-table--m-grid--cell--hidden-visible--Display);
3971
+ .pf-m-tree-view-grid-xl.pf-c-table td[data-label] {
3925
3972
  grid-column: 1;
3926
- grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);
3927
- grid-template-columns: 1fr minmax(0, 1.5fr);
3973
+ grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
3974
+ grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
3928
3975
  align-items: start;
3929
3976
  }
3930
3977
 
3931
- .pf-m-grid-2xl.pf-c-table [data-label] > * {
3978
+ .pf-m-tree-view-grid-xl.pf-c-table td[data-label] > * {
3932
3979
  grid-column: 2;
3933
3980
  }
3934
3981
 
3935
- .pf-m-grid-2xl.pf-c-table [data-label]::before {
3982
+ .pf-m-tree-view-grid-xl.pf-c-table td[data-label]::before {
3936
3983
  font-weight: bold;
3937
3984
  text-align: left;
3938
3985
  content: attr(data-label);
3939
3986
  }
3940
3987
 
3941
- .pf-m-grid-2xl.pf-c-table tr > *:first-child {
3942
- --pf-c-table--cell--PaddingLeft: 0;
3988
+ .pf-m-tree-view-grid-xl.pf-c-table tr.pf-m-tree-view-details-expanded {
3989
+ padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
3943
3990
  }
3944
3991
 
3945
- .pf-m-grid-2xl.pf-c-table tr > *:last-child {
3946
- --pf-c-table--cell--PaddingRight: 0;
3992
+ .pf-m-tree-view-grid-xl.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
3993
+ display: grid;
3947
3994
  }
3948
3995
 
3949
- .pf-m-grid-2xl.pf-c-table .pf-c-table {
3950
- --pf-c-table-tr--responsive--PaddingTop: var(--pf-c-table-tr--responsive--nested-table--PaddingTop);
3951
- --pf-c-table-tr--responsive--PaddingRight: var(--pf-c-table-tr--responsive--nested-table--PaddingRight);
3952
- --pf-c-table-tr--responsive--PaddingBottom: var(--pf-c-table-tr--responsive--nested-table--PaddingBottom);
3953
- --pf-c-table-tr--responsive--PaddingLeft: var(--pf-c-table-tr--responsive--nested-table--PaddingLeft);
3954
- border: 0;
3996
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-title-header-cell {
3997
+ display: block;
3998
+ visibility: visible;
3955
3999
  }
3956
4000
 
3957
- .pf-m-grid-2xl.pf-c-table .pf-c-table tr:not(.pf-c-table__expandable-row) + tr:not(.pf-c-table__expandable-row) {
3958
- --pf-c-table-tr--responsive--PaddingTop: 0;
4001
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-details-toggle,
4002
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
4003
+ display: inline-block;
4004
+ visibility: visible;
3959
4005
  }
3960
4006
 
3961
- .pf-m-grid-2xl.pf-c-table .pf-c-table__compound-expansion-toggle {
3962
- --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
3963
- --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
3964
- --pf-c-table__compound-expansion-toggle__button--after--Top: 100%;
4007
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
4008
+ --pf-c-table--cell--Width: auto;
4009
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
4010
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
4011
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
4012
+ grid-column: 2;
4013
+ grid-row: 1;
3965
4014
  }
3966
4015
 
3967
- .pf-m-grid-2xl.pf-c-table tbody {
3968
- position: relative;
4016
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action > .pf-c-dropdown {
4017
+ margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
4018
+ margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
3969
4019
  }
3970
4020
 
3971
- .pf-m-grid-2xl.pf-c-table tbody::after {
3972
- position: absolute;
3973
- top: 0;
3974
- bottom: 0;
3975
- left: 0;
3976
- content: "";
3977
- border: 0;
3978
- border-left: var(--pf-c-table--tbody--after--BorderLeftWidth) solid var(--pf-c-table--tbody--after--BorderColor);
4021
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
4022
+ margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
4023
+ margin-left: auto;
4024
+ order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
3979
4025
  }
3980
4026
 
3981
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded {
3982
- --pf-c-table--tbody--after--BorderLeftWidth: var(--pf-c-table--tbody--after--border-width--base);
4027
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-details-toggle {
4028
+ margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
4029
+ margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
3983
4030
  }
3984
4031
 
3985
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded tbody {
3986
- --pf-c-table--tbody--after--BorderLeftWidth: 0;
4032
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="2"] {
4033
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
3987
4034
  }
3988
4035
 
3989
- .pf-m-grid-2xl.pf-c-table tbody > tr > :first-child:not(.pf-c-table__check)::after {
3990
- --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
3991
- position: static;
3992
- width: auto;
3993
- background-color: transparent;
4036
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="3"] {
4037
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
3994
4038
  }
3995
4039
 
3996
- .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row {
3997
- --pf-c-table--cell--responsive--PaddingTop: 0;
3998
- --pf-c-table--cell--responsive--PaddingRight: 0;
3999
- --pf-c-table--cell--responsive--PaddingBottom: 0;
4000
- --pf-c-table--cell--responsive--PaddingLeft: 0;
4001
- --pf-c-table--cell--PaddingRight: 0;
4002
- --pf-c-table--cell--PaddingLeft: 0;
4003
- display: block;
4004
- max-height: var(--pf-c-table__expandable-row--MaxHeight);
4005
- overflow-y: auto;
4006
- border-bottom: none;
4007
- box-shadow: none;
4040
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="4"] {
4041
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
4008
4042
  }
4009
4043
 
4010
- .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row > * {
4011
- position: static;
4012
- display: block;
4044
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="5"] {
4045
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
4013
4046
  }
4014
4047
 
4015
- .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row.pf-m-expanded {
4016
- border-top-color: var(--pf-c-table--BorderColor);
4048
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="6"] {
4049
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
4017
4050
  }
4018
4051
 
4019
- .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row > :first-child:not(.pf-c-table__check)::after {
4020
- content: none;
4052
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="7"] {
4053
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
4021
4054
  }
4022
4055
 
4023
- .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row td.pf-m-no-padding .pf-c-table__expandable-row-content, .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row th.pf-m-no-padding .pf-c-table__expandable-row-content {
4024
- padding: 0;
4056
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="8"] {
4057
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
4025
4058
  }
4026
4059
 
4027
- .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row:not(.pf-m-expanded) {
4028
- display: none;
4029
- visibility: hidden;
4060
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="9"] {
4061
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
4030
4062
  }
4031
4063
 
4032
- .pf-m-grid-2xl.pf-c-table .pf-c-table__expandable-row .pf-c-table__expandable-row-content {
4033
- padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
4034
- padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);
4064
+ .pf-m-tree-view-grid-xl.pf-c-table tr[aria-level="10"] {
4065
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
4035
4066
  }
4036
-
4037
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable {
4038
- --pf-c-table--tbody--after--BorderLeftWidth: 0;
4039
- --pf-c-table--tbody--after--BorderLeftColor: transparent;
4067
+ }
4068
+ @media screen and (max-width: 1450px) {
4069
+ .pf-m-tree-view-grid-2xl.pf-c-table {
4070
+ --pf-c-table--m-tree-view-grid--tr--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
4071
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop: var(--pf-global--spacer--md);
4072
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom: var(--pf-global--spacer--md);
4073
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table__tree-view-main--indent--base);
4074
+ --pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap: var(--pf-global--spacer--sm);
4075
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingTop: var(--pf-global--spacer--md);
4076
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom: var(--pf-global--spacer--md);
4077
+ --pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft: 0;
4078
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop: var(--pf-global--spacer--xl);
4079
+ --pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom: var(--pf-global--spacer--xl);
4080
+ --pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xl);
4081
+ --pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
4082
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-global--spacer--xs);
4083
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-global--spacer--xs);
4084
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight: 0;
4085
+ --pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order: 4;
4086
+ --pf-c-table__tree-view-text--PaddingRight: var(--pf-global--spacer--sm);
4087
+ --pf-c-table--tbody--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingTop);
4088
+ --pf-c-table--tbody--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingBottom);
4089
+ --pf-c-table__tree-view-details-toggle--MarginTop: calc(0.375rem * -1);
4090
+ --pf-c-table__tree-view-details-toggle--MarginBottom: calc(0.375rem * -1);
4091
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginTop: calc(0.375rem * -1);
4092
+ --pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom: calc(0.375rem * -1);
4040
4093
  }
4041
4094
 
4042
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable,
4043
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr {
4095
+ .pf-m-tree-view-grid-2xl.pf-c-table tbody tr {
4044
4096
  position: relative;
4097
+ outline-offset: var(--pf-c-table--m-tree-view-grid--tr--OutlineOffset);
4098
+ border: none;
4045
4099
  }
4046
4100
 
4047
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr::after {
4048
- content: "";
4101
+ .pf-m-tree-view-grid-2xl.pf-c-table tbody tr::before {
4049
4102
  position: absolute;
4050
4103
  top: 0;
4104
+ right: 0;
4051
4105
  bottom: 0;
4052
- left: 0;
4053
- width: var(--pf-c-table--tbody--after--tr--BorderLeftWidth);
4054
- background-color: var(--pf-c-table--tbody--after--tr--BorderLeftColor);
4106
+ left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
4107
+ border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
4108
+ content: "";
4055
4109
  }
4056
4110
 
4057
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable.pf-m-expanded {
4058
- --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftWidth);
4059
- --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-expanded--after--tr--BorderLeftColor);
4111
+ .pf-m-tree-view-grid-2xl.pf-c-table tr:not([hidden]) {
4112
+ display: grid;
4113
+ grid-template-columns: 1fr max-content;
4060
4114
  }
4061
4115
 
4062
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable.pf-m-selected {
4063
- --pf-c-table--tbody--after--tr--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftWidth);
4064
- --pf-c-table--tbody--after--tr--BorderLeftColor: var(--pf-c-table--tbody--m-selected--after--tr--BorderLeftColor);
4116
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell {
4117
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop);
4065
4118
  }
4066
4119
 
4067
- .pf-m-grid-2xl.pf-c-table tr.pf-m-selected::after {
4068
- content: "";
4069
- position: absolute;
4070
- top: 0;
4071
- bottom: 0;
4072
- left: 0;
4073
- width: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
4074
- background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
4120
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-expanded] .pf-c-table__tree-view-title-cell ~ .pf-c-table__action {
4121
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid__tr--expanded__tree-view-title-cell--action--PaddingTop);
4075
4122
  }
4076
4123
 
4077
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
4078
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
4079
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
4080
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
4081
- width: auto;
4082
- padding: 0;
4124
+ .pf-m-tree-view-grid-2xl.pf-c-table td:not(.pf-c-table__tree-view-title-cell) {
4125
+ --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop);
4126
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom);
4127
+ padding-left: var(--pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft);
4083
4128
  }
4084
4129
 
4085
- .pf-m-grid-2xl.pf-c-table .pf-c-table__toggle {
4086
- grid-row-start: 20;
4087
- grid-column: -1;
4088
- justify-self: end;
4089
- padding-right: 0;
4130
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-text {
4131
+ padding-right: var(--pf-c-table__tree-view-text--PaddingRight);
4090
4132
  }
4091
4133
 
4092
- .pf-m-grid-2xl.pf-c-table .pf-c-table__toggle::after {
4093
- content: none;
4134
+ .pf-m-tree-view-grid-2xl.pf-c-table thead th {
4135
+ display: none;
4136
+ visibility: none;
4094
4137
  }
4095
4138
 
4096
- .pf-m-grid-2xl.pf-c-table .pf-c-table__button {
4097
- --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-grid--cell--PaddingTop);
4098
- --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-grid--cell--PaddingRight);
4099
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-grid--cell--PaddingBottom);
4100
- --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
4139
+ .pf-m-tree-view-grid-2xl.pf-c-table td {
4140
+ display: none;
4101
4141
  }
4102
4142
 
4103
- .pf-m-grid-2xl.pf-c-table .pf-c-table__check,
4104
- .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite,
4105
- .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
4106
- grid-row-start: 1;
4107
- grid-column-start: 2;
4143
+ .pf-m-tree-view-grid-2xl.pf-c-table td[data-label] {
4144
+ grid-column: 1;
4145
+ grid-column-gap: var(--pf-c-table--m-tree-view-grid--tbody--cell--GridColumnGap);
4146
+ grid-template-columns: var(--pf-c-table--m-tree-view-grid--td--data-label--GridTemplateColumns);
4147
+ align-items: start;
4108
4148
  }
4109
4149
 
4110
- .pf-m-grid-2xl.pf-c-table .pf-c-table__check {
4111
- margin-top: var(--pf-c-table__check--responsive--MarginTop);
4112
- margin-left: var(--pf-c-table__check--responsive--MarginLeft);
4150
+ .pf-m-tree-view-grid-2xl.pf-c-table td[data-label] > * {
4151
+ grid-column: 2;
4113
4152
  }
4114
4153
 
4115
- .pf-m-grid-2xl.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite {
4116
- margin-left: var(--pf-c-table--m-grid__check--favorite--MarginLeft);
4154
+ .pf-m-tree-view-grid-2xl.pf-c-table td[data-label]::before {
4155
+ font-weight: bold;
4156
+ text-align: left;
4157
+ content: attr(data-label);
4117
4158
  }
4118
4159
 
4119
- .pf-m-grid-2xl.pf-c-table .pf-c-table__check ~ .pf-c-table__favorite ~ .pf-c-table__action {
4120
- margin-left: var(--pf-c-table--m-grid__check--favorite--action--MarginLeft);
4160
+ .pf-m-tree-view-grid-2xl.pf-c-table tr.pf-m-tree-view-details-expanded {
4161
+ padding-bottom: var(--pf-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
4121
4162
  }
4122
4163
 
4123
- .pf-m-grid-2xl.pf-c-table .pf-c-table__check ~ .pf-c-table__action {
4124
- margin-left: var(--pf-c-table__action--responsive--MarginLeft);
4164
+ .pf-m-tree-view-grid-2xl.pf-c-table tr.pf-m-tree-view-details-expanded td[data-label] {
4165
+ display: grid;
4125
4166
  }
4126
4167
 
4127
- .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite {
4128
- margin-top: var(--pf-c-table--m-grid__favorite--MarginTop);
4168
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-title-header-cell {
4169
+ display: block;
4170
+ visibility: visible;
4129
4171
  }
4130
4172
 
4131
- .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite ~ .pf-c-table__action {
4132
- margin-left: var(--pf-c-table--m-grid__favorite--action--MarginLeft);
4173
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-details-toggle,
4174
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
4175
+ display: inline-block;
4176
+ visibility: visible;
4133
4177
  }
4134
4178
 
4135
- .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
4136
- margin-top: var(--pf-c-table--m-grid__action--MarginTop);
4137
- text-align: right;
4138
- }
4139
- }
4140
- @media screen and (max-width: 1450px) and (max-width: 576px) {
4141
- .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
4142
- grid-row-start: 1;
4143
- grid-column-start: 2;
4144
- margin-left: 0;
4145
- }
4146
- }
4147
- @media screen and (max-width: 1450px) {
4148
- .pf-m-grid-2xl.pf-c-table .pf-c-table__inline-edit-action {
4179
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
4180
+ --pf-c-table--cell--Width: auto;
4181
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingLeft);
4182
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingTop: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingTop);
4183
+ --pf-c-table--m-tree-view-grid--td--not--c-table__tree-view-title-cell--PaddingBottom: var(--pf-c-table--m-tree-view-grid--c-table__action--PaddingBottom);
4149
4184
  grid-column: 2;
4150
- grid-row: 2;
4151
- }
4152
- }
4153
- @media screen and (max-width: 1450px) {
4154
- .pf-m-grid-2xl.pf-c-table .pf-c-table__toggle-icon {
4155
- transition: var(--pf-c-table__toggle__icon--Transition);
4185
+ grid-row: 1;
4156
4186
  }
4157
4187
 
4158
- .pf-c-button.pf-m-expanded > .pf-m-grid-2xl.pf-c-table .pf-c-table__toggle-icon {
4159
- transform: rotate(var(--pf-c-table__toggle--m-expanded__icon--Rotate));
4188
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action > .pf-c-dropdown {
4189
+ margin-top: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginTop);
4190
+ margin-bottom: var(--pf-c-table--m-tree-view-grid--c-dropdown--MarginBottom);
4160
4191
  }
4161
- }
4162
- @media screen and (max-width: 1450px) {
4163
- .pf-m-grid-2xl.pf-c-table .pf-m-nowrap {
4164
- --pf-c-table--cell--Overflow: auto;
4192
+
4193
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-main > .pf-c-table__check {
4194
+ margin-right: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
4195
+ margin-left: auto;
4196
+ order: var(--pf-c-table--m-tree-view-mobile__tree-view-main--c-table__check--Order);
4165
4197
  }
4166
- }
4167
- @media screen and (max-width: 1450px) {
4168
- .pf-m-grid-2xl.pf-c-table .pf-m-fit-content {
4169
- width: auto;
4170
- white-space: normal;
4198
+
4199
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-details-toggle {
4200
+ margin-top: var(--pf-c-table__tree-view-details-toggle--MarginTop);
4201
+ margin-bottom: var(--pf-c-table__tree-view-details-toggle--MarginBottom);
4171
4202
  }
4172
- }
4173
- @media screen and (max-width: 1450px) {
4174
- .pf-m-grid-2xl.pf-c-table .pf-m-truncate {
4175
- --pf-c-table--cell--MaxWidth: 100%;
4203
+
4204
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="2"] {
4205
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
4176
4206
  }
4177
- }
4178
- @media screen and (max-width: 1450px) {
4179
- .pf-m-grid-2xl.pf-c-table [class*=pf-m-width] {
4180
- --pf-c-table--cell--Width: auto;
4207
+
4208
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="3"] {
4209
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 2 + var(--pf-c-table__tree-view-main--indent--base));
4181
4210
  }
4182
- }
4183
- .pf-c-table {
4184
- --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
4185
- --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
4186
- --pf-c-table__sticky-column--Left: 0;
4187
- --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
4188
- --pf-c-table__sticky-column--Top: 0;
4189
- --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
4190
- --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
4191
- --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
4192
- --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
4193
- }
4194
4211
 
4195
- .pf-c-table .pf-c-table__sticky-column {
4196
- position: sticky;
4197
- left: var(--pf-c-table__sticky-column--Left);
4198
- z-index: var(--pf-c-table__sticky-column--ZIndex);
4199
- min-width: var(--pf-c-table__sticky-column--MinWidth);
4200
- background-color: var(--pf-c-table__sticky-column--BackgroundColor);
4201
- background-clip: padding-box;
4202
- }
4212
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="4"] {
4213
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 3 + var(--pf-c-table__tree-view-main--indent--base));
4214
+ }
4203
4215
 
4204
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
4205
- --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
4206
- --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
4207
- }
4216
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="5"] {
4217
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 4 + var(--pf-c-table__tree-view-main--indent--base));
4218
+ }
4208
4219
 
4209
- .pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
4210
- --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
4211
- --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
4212
- }
4220
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="6"] {
4221
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 5 + var(--pf-c-table__tree-view-main--indent--base));
4222
+ }
4213
4223
 
4214
- .pf-c-table.pf-m-sticky-header {
4215
- --pf-c-table--cell--Overflow: visible;
4216
- }
4224
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="7"] {
4225
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 6 + var(--pf-c-table__tree-view-main--indent--base));
4226
+ }
4217
4227
 
4218
- .pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
4219
- z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
4220
- }
4228
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="8"] {
4229
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 7 + var(--pf-c-table__tree-view-main--indent--base));
4230
+ }
4221
4231
 
4222
- .pf-c-scroll-outer-wrapper {
4223
- --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
4224
- display: flex;
4225
- flex-direction: column;
4226
- max-width: 100%;
4227
- min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
4228
- max-height: 100%;
4229
- overflow: hidden;
4230
- }
4232
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="9"] {
4233
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 8 + var(--pf-c-table__tree-view-main--indent--base));
4234
+ }
4231
4235
 
4232
- .pf-c-scroll-inner-wrapper {
4233
- display: flex;
4234
- flex-direction: column;
4235
- max-width: 100%;
4236
- max-height: 100%;
4237
- overflow: auto;
4236
+ .pf-m-tree-view-grid-2xl.pf-c-table tr[aria-level="10"] {
4237
+ --pf-c-table--m-tree-view-grid--tbody--cell--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 9 + var(--pf-c-table__tree-view-main--indent--base));
4238
+ }
4238
4239
  }
4239
-
4240
4240
  .pf-c-form {
4241
4241
  --pf-c-form--GridGap: var(--pf-global--gutter--md);
4242
4242
  --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);