@patternfly/patternfly 4.198.0 → 4.198.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.
@@ -304,12 +304,14 @@
304
304
  border-bottom: 0;
305
305
  }
306
306
  .pf-c-table.pf-m-sticky-header > thead > tr > * {
307
+ z-index: var(--pf-global--ZIndex--xs);
308
+ }
309
+ .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
307
310
  position: sticky;
308
311
  top: 0;
309
- z-index: var(--pf-global--ZIndex--xs);
310
312
  background: var(--pf-c-table--BackgroundColor);
311
313
  }
312
- .pf-c-table.pf-m-sticky-header > thead > tr > *::after {
314
+ .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > *::after {
313
315
  position: absolute;
314
316
  right: 0;
315
317
  bottom: 0;
@@ -317,6 +319,27 @@
317
319
  content: "";
318
320
  border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
319
321
  }
322
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
323
+ position: sticky;
324
+ top: 0;
325
+ z-index: var(--pf-global--ZIndex--xs);
326
+ background: var(--pf-c-table--BackgroundColor);
327
+ }
328
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
329
+ height: var(--pf-c-table--border-width--base);
330
+ background-color: var(--pf-c-table--BorderColor);
331
+ }
332
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) th:not([rowspan]),
333
+ .pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) td:not([rowspan]) {
334
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
335
+ }
336
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) {
337
+ border-bottom: 0;
338
+ }
339
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
340
+ .pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
341
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
342
+ }
320
343
  .pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
321
344
  .pf-c-table > .pf-m-striped > tr:nth-child(odd),
322
345
  .pf-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -414,13 +437,6 @@
414
437
  .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
415
438
  --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
416
439
  }
417
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
418
- --pf-c-table--border-width--base: 0;
419
- }
420
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
421
- .pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
422
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
423
- }
424
440
  .pf-c-table thead .pf-c-table__subhead {
425
441
  --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
426
442
  color: var(--pf-c-table__subhead--Color);
@@ -330,9 +330,15 @@
330
330
  border-bottom: 0;
331
331
 
332
332
  > * {
333
+ z-index: var(--pf-global--ZIndex--xs); // set z-index here to allow sticky column to override
334
+ }
335
+ }
336
+
337
+ // standard sticky headers
338
+ > thead:not(.pf-m-nested-column-header) {
339
+ > tr > * {
333
340
  position: sticky;
334
341
  top: 0;
335
- z-index: var(--pf-global--ZIndex--xs);
336
342
  background: var(--pf-c-table--BackgroundColor);
337
343
 
338
344
  // stylelint-disable-next-line
@@ -346,6 +352,45 @@
346
352
  }
347
353
  }
348
354
  }
355
+
356
+ // nested column header
357
+ > .pf-m-nested-column-header {
358
+ position: sticky;
359
+ top: 0;
360
+ z-index: var(--pf-global--ZIndex--xs);
361
+ background: var(--pf-c-table--BackgroundColor);
362
+
363
+ > .pf-m-border-row {
364
+ height: var(--pf-c-table--border-width--base);
365
+ background-color: var(--pf-c-table--BorderColor);
366
+ }
367
+
368
+ tr:not(:nth-last-child(2)) {
369
+ // stylelint-disable max-nesting-depth
370
+ th,
371
+ td {
372
+ &:not([rowspan]) {
373
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
374
+ }
375
+ }
376
+ // stylelint-enable
377
+ }
378
+ }
379
+ }
380
+
381
+ &:not(.pf-m-sticky-header) > .pf-m-nested-column-header {
382
+ tr:not(:last-child) {
383
+ border-bottom: 0; // hard reset tr borders in nested headers
384
+
385
+ // stylelint-disable max-nesting-depth
386
+ th,
387
+ td {
388
+ &:not([rowspan]) {
389
+ --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
390
+ }
391
+ }
392
+ // stylelint-enable
393
+ }
349
394
  }
350
395
 
351
396
  // For regular and expandable tables
@@ -488,16 +533,6 @@
488
533
  }
489
534
  }
490
535
 
491
- tr:not(:last-child) {
492
- --pf-c-table--border-width--base: 0; // hard reset tr borders in nested headers
493
-
494
- th,
495
- td {
496
- &:not([rowspan]) {
497
- --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
498
- }
499
- }
500
- }
501
536
  }
502
537
  // stylelint-enable
503
538