@patternfly/patternfly 5.0.0-alpha.37 → 5.0.0-alpha.39

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 (15) hide show
  1. package/components/Card/card.css +95 -29
  2. package/components/Card/card.scss +142 -37
  3. package/components/DataList/data-list.css +34 -29
  4. package/components/DataList/data-list.scss +32 -24
  5. package/components/Table/table.css +60 -63
  6. package/components/Table/table.scss +56 -60
  7. package/docs/components/Card/examples/Card.md +544 -59
  8. package/docs/components/DataList/examples/DataList.md +52 -54
  9. package/docs/components/Table/examples/Table.md +136 -2125
  10. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +10 -20
  11. package/package.json +5 -5
  12. package/patternfly-no-globals.css +189 -121
  13. package/patternfly.css +189 -121
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/Table/table.css CHANGED
@@ -215,43 +215,43 @@
215
215
  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
216
216
  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
217
217
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
218
- --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
219
- --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
220
- --pf-c-table--tr--m-hoverable--BoxShadow: none;
221
- --pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
222
- --pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
223
- --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
224
- --pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
225
- --pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
226
- --pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
227
- --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
228
- --pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
218
+ --pf-c-table--tr--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
219
+ --pf-c-table--tr--m-clickable--BackgroundColor: transparent;
220
+ --pf-c-table--tr--m-clickable--BoxShadow: none;
221
+ --pf-c-table--tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
222
+ --pf-c-table--tr--m-clickable--hover--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
223
+ --pf-c-table--tr--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
224
+ --pf-c-table--tr--m-clickable--focus--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
225
+ --pf-c-table--tr--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
226
+ --pf-c-table--tr--m-clickable--active--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
227
+ --pf-c-table--tr--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
228
+ --pf-c-table--tr--m-clickable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
229
229
  --pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
230
230
  --pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
231
231
  --pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
232
232
  --pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
233
- --pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
233
+ --pf-c-table--tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
234
234
  --pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
235
235
  --pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
236
236
  --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
237
237
  --pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
238
- --pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
239
- --pf-c-table--tbody--m-hoverable--BoxShadow: none;
240
- --pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;
241
- --pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
242
- --pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
243
- --pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
244
- --pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
245
- --pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
246
- --pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
247
- --pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
248
- --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400);
249
- --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
238
+ --pf-c-table--tbody--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
239
+ --pf-c-table--tbody--m-clickable--BoxShadow: none;
240
+ --pf-c-table--tbody--m-clickable--BackgroundColor: transparent;
241
+ --pf-c-table--tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
242
+ --pf-c-table--tbody--m-clickable--hover--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
243
+ --pf-c-table--tbody--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
244
+ --pf-c-table--tbody--m-clickable--focus--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
245
+ --pf-c-table--tbody--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
246
+ --pf-c-table--tbody--m-clickable--active--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
247
+ --pf-c-table--tbody--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
248
+ --pf-c-table--tbody--m-clickable--m-expanded--BorderColor: var(--pf-global--active-color--400);
249
+ --pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
250
250
  --pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
251
251
  --pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
252
252
  --pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
253
253
  --pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
254
- --pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
254
+ --pf-c-table--tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
255
255
  --pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
256
256
  --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
257
257
  --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
@@ -448,6 +448,9 @@
448
448
  margin-top: var(--pf-c-table__check--input--MarginTop);
449
449
  vertical-align: top;
450
450
  }
451
+ .pf-c-table tbody.pf-m-expanded > :first-child:not(.pf-c-table__control-row) {
452
+ border-bottom-width: 0;
453
+ }
451
454
  .pf-c-table .pf-c-table__compound-expansion-toggle, .pf-c-table .pf-c-table__compound-expansion-toggle:first-child, .pf-c-table .pf-c-table__compound-expansion-toggle:last-child {
452
455
  padding: 0;
453
456
  }
@@ -507,26 +510,26 @@
507
510
  .pf-c-table.pf-m-no-border-rows > tbody .pf-c-table__control-row > .pf-c-table__compound-expansion-toggle:first-child > ::before {
508
511
  border-left-width: 0;
509
512
  }
510
- .pf-c-table tr.pf-m-hoverable {
513
+ .pf-c-table tr.pf-m-clickable {
511
514
  cursor: pointer;
512
- background-color: var(--pf-c-table--tr--m-hoverable--BackgroundColor);
513
- outline-offset: var(--pf-c-table--tr--m-hoverable--OutlineOffset);
514
- box-shadow: var(--pf-c-table--tr--m-hoverable--BoxShadow);
515
+ background-color: var(--pf-c-table--tr--m-clickable--BackgroundColor);
516
+ outline-offset: var(--pf-c-table--tr--m-clickable--OutlineOffset);
517
+ box-shadow: var(--pf-c-table--tr--m-clickable--BoxShadow);
515
518
  }
516
- .pf-c-table tr.pf-m-hoverable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-hoverable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-hoverable:active:not(.pf-m-selected) + tr.pf-m-selected {
517
- box-shadow: var(--pf-c-table--tr--m-hoverable--m-selected--BoxShadow);
519
+ .pf-c-table tr.pf-m-clickable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-clickable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-clickable:active:not(.pf-m-selected) + tr.pf-m-selected {
520
+ box-shadow: var(--pf-c-table--tr--m-clickable--m-selected--BoxShadow);
518
521
  }
519
- .pf-c-table tr.pf-m-hoverable:hover {
520
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--hover--BoxShadow);
521
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--hover--BackgroundColor);
522
+ .pf-c-table tr.pf-m-clickable:hover {
523
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--hover--BoxShadow);
524
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--hover--BackgroundColor);
522
525
  }
523
- .pf-c-table tr.pf-m-hoverable:focus {
524
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--focus--BoxShadow);
525
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--focus--BackgroundColor);
526
+ .pf-c-table tr.pf-m-clickable:focus {
527
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--focus--BoxShadow);
528
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--focus--BackgroundColor);
526
529
  }
527
- .pf-c-table tr.pf-m-hoverable:active {
528
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--active--BoxShadow);
529
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--active--BackgroundColor);
530
+ .pf-c-table tr.pf-m-clickable:active {
531
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--active--BoxShadow);
532
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--active--BackgroundColor);
530
533
  }
531
534
  .pf-c-table tr.pf-m-selected {
532
535
  --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
@@ -548,29 +551,29 @@
548
551
  .pf-c-table tr.pf-m-first-cell-offset-reset {
549
552
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
550
553
  }
551
- .pf-c-table tbody.pf-m-hoverable {
554
+ .pf-c-table tbody.pf-m-clickable {
552
555
  cursor: pointer;
553
- background-color: var(--pf-c-table--tbody--m-hoverable--BackgroundColor);
554
- outline-offset: var(--pf-c-table--tbody--m-hoverable--OutlineOffset);
555
- box-shadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow);
556
+ background-color: var(--pf-c-table--tbody--m-clickable--BackgroundColor);
557
+ outline-offset: var(--pf-c-table--tbody--m-clickable--OutlineOffset);
558
+ box-shadow: var(--pf-c-table--tbody--m-clickable--BoxShadow);
556
559
  }
557
- .pf-c-table tbody.pf-m-hoverable.pf-m-expanded:not(.pf-m-selected) {
558
- --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor);
560
+ .pf-c-table tbody.pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
561
+ --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-clickable--m-expanded--BorderColor);
559
562
  }
560
- .pf-c-table tbody.pf-m-hoverable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-hoverable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-hoverable:active:not(.pf-m-selected) + tbody.pf-m-selected {
561
- box-shadow: var(--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow);
563
+ .pf-c-table tbody.pf-m-clickable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-clickable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-clickable:active:not(.pf-m-selected) + tbody.pf-m-selected {
564
+ box-shadow: var(--pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow);
562
565
  }
563
- .pf-c-table tbody.pf-m-hoverable:hover {
564
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--hover--BoxShadow);
565
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--hover--BackgroundColor);
566
+ .pf-c-table tbody.pf-m-clickable:hover {
567
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--hover--BoxShadow);
568
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--hover--BackgroundColor);
566
569
  }
567
- .pf-c-table tbody.pf-m-hoverable:focus {
568
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--focus--BoxShadow);
569
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--focus--BackgroundColor);
570
+ .pf-c-table tbody.pf-m-clickable:focus {
571
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--focus--BoxShadow);
572
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--focus--BackgroundColor);
570
573
  }
571
- .pf-c-table tbody.pf-m-hoverable:active {
572
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--active--BoxShadow);
573
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--active--BackgroundColor);
574
+ .pf-c-table tbody.pf-m-clickable:active {
575
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--active--BoxShadow);
576
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--active--BackgroundColor);
574
577
  }
575
578
  .pf-c-table tbody.pf-m-selected {
576
579
  --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--BorderLeftWidth);
@@ -938,12 +941,6 @@
938
941
  display: none;
939
942
  }
940
943
 
941
- .pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child,
942
- .pf-c-table__expandable-row.pf-m-expanded > :first-child,
943
- .pf-c-table tbody.pf-m-expanded > tr > :not(.pf-c-table__compound-expansion-toggle) {
944
- --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
945
- }
946
-
947
944
  .pf-c-table .pf-c-table tr > *:first-child {
948
945
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--nested--first-last-child--PaddingLeft);
949
946
  }
package/components/Table/table.scss CHANGED
@@ -246,50 +246,50 @@
246
246
  // Modifier - expandable row expanded
247
247
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
248
248
 
249
- // tr hoverable
250
- --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
251
- --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
252
- --pf-c-table--tr--m-hoverable--BoxShadow: none;
253
- --pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
254
- --pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
255
- --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
256
- --pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
257
- --pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
258
- --pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
259
- --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
260
- --pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
249
+ // tr clickable
250
+ --pf-c-table--tr--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
251
+ --pf-c-table--tr--m-clickable--BackgroundColor: transparent;
252
+ --pf-c-table--tr--m-clickable--BoxShadow: none;
253
+ --pf-c-table--tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
254
+ --pf-c-table--tr--m-clickable--hover--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
255
+ --pf-c-table--tr--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
256
+ --pf-c-table--tr--m-clickable--focus--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
257
+ --pf-c-table--tr--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
258
+ --pf-c-table--tr--m-clickable--active--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
259
+ --pf-c-table--tr--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
260
+ --pf-c-table--tr--m-clickable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
261
261
 
262
262
  // tr selected
263
263
  --pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
264
264
  --pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
265
265
  --pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
266
266
  --pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
267
- --pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
267
+ --pf-c-table--tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
268
268
  --pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
269
269
  --pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
270
270
  --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
271
271
  --pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
272
272
 
273
- // tbody hoverable
274
- --pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
275
- --pf-c-table--tbody--m-hoverable--BoxShadow: none;
276
- --pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;
277
- --pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
278
- --pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
279
- --pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
280
- --pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
281
- --pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
282
- --pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
283
- --pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
284
- --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400);
285
- --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
273
+ // tbody clickable
274
+ --pf-c-table--tbody--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
275
+ --pf-c-table--tbody--m-clickable--BoxShadow: none;
276
+ --pf-c-table--tbody--m-clickable--BackgroundColor: transparent;
277
+ --pf-c-table--tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
278
+ --pf-c-table--tbody--m-clickable--hover--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
279
+ --pf-c-table--tbody--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
280
+ --pf-c-table--tbody--m-clickable--focus--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
281
+ --pf-c-table--tbody--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
282
+ --pf-c-table--tbody--m-clickable--active--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
283
+ --pf-c-table--tbody--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
284
+ --pf-c-table--tbody--m-clickable--m-expanded--BorderColor: var(--pf-global--active-color--400);
285
+ --pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
286
286
 
287
287
  // tbody selected
288
288
  --pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
289
289
  --pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
290
290
  --pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
291
291
  --pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
292
- --pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
292
+ --pf-c-table--tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
293
293
  --pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
294
294
  --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
295
295
  --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
@@ -580,6 +580,10 @@
580
580
  vertical-align: top;
581
581
  }
582
582
  }
583
+
584
+ &.pf-m-expanded > :first-child:not(.pf-c-table__control-row) {
585
+ border-bottom-width: 0;
586
+ }
583
587
  }
584
588
  // stylelint-enable
585
589
 
@@ -668,34 +672,34 @@
668
672
  }
669
673
  }
670
674
 
671
- // tr hoverable
672
- tr.pf-m-hoverable {
675
+ // tr clickable
676
+ tr.pf-m-clickable {
673
677
  cursor: pointer;
674
- background-color: var(--pf-c-table--tr--m-hoverable--BackgroundColor);
675
- outline-offset: var(--pf-c-table--tr--m-hoverable--OutlineOffset);
676
- box-shadow: var(--pf-c-table--tr--m-hoverable--BoxShadow);
678
+ background-color: var(--pf-c-table--tr--m-clickable--BackgroundColor);
679
+ outline-offset: var(--pf-c-table--tr--m-clickable--OutlineOffset);
680
+ box-shadow: var(--pf-c-table--tr--m-clickable--BoxShadow);
677
681
 
678
682
  &:hover,
679
683
  &:focus,
680
684
  &:active {
681
685
  &:not(.pf-m-selected) + tr.pf-m-selected {
682
- box-shadow: var(--pf-c-table--tr--m-hoverable--m-selected--BoxShadow);
686
+ box-shadow: var(--pf-c-table--tr--m-clickable--m-selected--BoxShadow);
683
687
  }
684
688
  }
685
689
 
686
690
  &:hover {
687
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--hover--BoxShadow);
688
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--hover--BackgroundColor);
691
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--hover--BoxShadow);
692
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--hover--BackgroundColor);
689
693
  }
690
694
 
691
695
  &:focus {
692
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--focus--BoxShadow);
693
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--focus--BackgroundColor);
696
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--focus--BoxShadow);
697
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--focus--BackgroundColor);
694
698
  }
695
699
 
696
700
  &:active {
697
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--active--BoxShadow);
698
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--active--BackgroundColor);
701
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--active--BoxShadow);
702
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--active--BackgroundColor);
699
703
  }
700
704
  }
701
705
 
@@ -726,38 +730,38 @@
726
730
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
727
731
  }
728
732
 
729
- // tbody hoverable
730
- tbody.pf-m-hoverable {
733
+ // tbody clickable
734
+ tbody.pf-m-clickable {
731
735
  cursor: pointer;
732
- background-color: var(--pf-c-table--tbody--m-hoverable--BackgroundColor);
733
- outline-offset: var(--pf-c-table--tbody--m-hoverable--OutlineOffset);
734
- box-shadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow);
736
+ background-color: var(--pf-c-table--tbody--m-clickable--BackgroundColor);
737
+ outline-offset: var(--pf-c-table--tbody--m-clickable--OutlineOffset);
738
+ box-shadow: var(--pf-c-table--tbody--m-clickable--BoxShadow);
735
739
 
736
740
  &.pf-m-expanded:not(.pf-m-selected) {
737
- --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor);
741
+ --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-clickable--m-expanded--BorderColor);
738
742
  }
739
743
 
740
744
  &:hover,
741
745
  &:focus,
742
746
  &:active {
743
747
  &:not(.pf-m-selected) + tbody.pf-m-selected {
744
- box-shadow: var(--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow);
748
+ box-shadow: var(--pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow);
745
749
  }
746
750
  }
747
751
 
748
752
  &:hover {
749
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--hover--BoxShadow);
750
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--hover--BackgroundColor);
753
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--hover--BoxShadow);
754
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--hover--BackgroundColor);
751
755
  }
752
756
 
753
757
  &:focus {
754
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--focus--BoxShadow);
755
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--focus--BackgroundColor);
758
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--focus--BoxShadow);
759
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--focus--BackgroundColor);
756
760
  }
757
761
 
758
762
  &:active {
759
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--active--BoxShadow);
760
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--active--BackgroundColor);
763
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--active--BoxShadow);
764
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--active--BackgroundColor);
761
765
  }
762
766
  }
763
767
 
@@ -1239,14 +1243,6 @@
1239
1243
  }
1240
1244
  }
1241
1245
 
1242
- // stylelint-disable
1243
- .pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child,
1244
- .pf-c-table__expandable-row.pf-m-expanded > :first-child,
1245
- .pf-c-table tbody.pf-m-expanded > tr > :not(.pf-c-table__compound-expansion-toggle) {
1246
- --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
1247
- }
1248
- // stylelint-enable
1249
-
1250
1246
  // Nested table
1251
1247
  // ==================================================================
1252
1248
  .pf-c-table .pf-c-table {