@patternfly/patternfly 6.0.0-alpha.177 → 6.0.0-alpha.179

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.
@@ -4,6 +4,7 @@
4
4
  --pf-v6-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
5
5
  --pf-v6-c-table__tbody--after--BorderInlineStartWidth: 0;
6
6
  --pf-v6-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked);
7
+ --pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
7
8
  --pf-v6-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
8
9
  --pf-v6-c-table__tr--responsive--last-child--BorderBlockEndWidth: var(--pf-v6-c-table__tbody--responsive--border-width--base);
9
10
  --pf-v6-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
@@ -94,24 +95,12 @@
94
95
  .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
95
96
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
96
97
  }
97
- .pf-m-grid.pf-v6-c-table .pf-v6-c-table.pf-m-compact > tbody:where(.pf-v6-c-table__tbody) {
98
- border-block-start: 0;
98
+ .pf-m-grid.pf-v6-c-table.pf-m-expandable {
99
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
99
100
  }
100
- .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
101
- border-block-end: var(--pf-v6-c-table__tr--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
102
- }
103
- .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):last-child,
104
- .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v6-c-table__tr) {
105
- border-block-end-width: var(--pf-v6-c-table__tr--responsive--last-child--BorderBlockEndWidth);
106
- }
107
- .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
108
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
109
- }
110
- .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
111
- border-block-end: 0;
112
- }
113
- .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded:not(:last-of-type) {
114
- border-block-end: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
101
+ .pf-m-grid.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
102
+ .pf-m-grid.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
103
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
115
104
  }
116
105
  .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
117
106
  --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
@@ -183,9 +172,6 @@
183
172
  --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
184
173
  border: 0;
185
174
  }
186
- .pf-m-grid.pf-v6-c-table .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) + tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
187
- --pf-v6-c-table__tr--responsive--PaddingBlockStart: 0;
188
- }
189
175
  .pf-m-grid.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
190
176
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
191
177
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
@@ -408,24 +394,12 @@
408
394
  .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
409
395
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
410
396
  }
411
- .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table.pf-m-compact > tbody:where(.pf-v6-c-table__tbody) {
412
- border-block-start: 0;
413
- }
414
- .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
415
- border-block-end: var(--pf-v6-c-table__tr--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
416
- }
417
- .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):last-child,
418
- .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v6-c-table__tr) {
419
- border-block-end-width: var(--pf-v6-c-table__tr--responsive--last-child--BorderBlockEndWidth);
420
- }
421
- .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
422
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
397
+ .pf-m-grid-md.pf-v6-c-table.pf-m-expandable {
398
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
423
399
  }
424
- .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
425
- border-block-end: 0;
426
- }
427
- .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded:not(:last-of-type) {
428
- border-block-end: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
400
+ .pf-m-grid-md.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
401
+ .pf-m-grid-md.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
402
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
429
403
  }
430
404
  .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
431
405
  --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
@@ -497,9 +471,6 @@
497
471
  --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
498
472
  border: 0;
499
473
  }
500
- .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) + tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
501
- --pf-v6-c-table__tr--responsive--PaddingBlockStart: 0;
502
- }
503
474
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
504
475
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
505
476
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
@@ -725,24 +696,12 @@
725
696
  .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
726
697
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
727
698
  }
728
- .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table.pf-m-compact > tbody:where(.pf-v6-c-table__tbody) {
729
- border-block-start: 0;
699
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable {
700
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
730
701
  }
731
- .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
732
- border-block-end: var(--pf-v6-c-table__tr--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
733
- }
734
- .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):last-child,
735
- .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v6-c-table__tr) {
736
- border-block-end-width: var(--pf-v6-c-table__tr--responsive--last-child--BorderBlockEndWidth);
737
- }
738
- .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
739
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
740
- }
741
- .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
742
- border-block-end: 0;
743
- }
744
- .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded:not(:last-of-type) {
745
- border-block-end: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
702
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
703
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
704
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
746
705
  }
747
706
  .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
748
707
  --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
@@ -814,9 +773,6 @@
814
773
  --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
815
774
  border: 0;
816
775
  }
817
- .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) + tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
818
- --pf-v6-c-table__tr--responsive--PaddingBlockStart: 0;
819
- }
820
776
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
821
777
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
822
778
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
@@ -1042,24 +998,12 @@
1042
998
  .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
1043
999
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1044
1000
  }
1045
- .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table.pf-m-compact > tbody:where(.pf-v6-c-table__tbody) {
1046
- border-block-start: 0;
1047
- }
1048
- .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
1049
- border-block-end: var(--pf-v6-c-table__tr--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1050
- }
1051
- .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):last-child,
1052
- .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v6-c-table__tr) {
1053
- border-block-end-width: var(--pf-v6-c-table__tr--responsive--last-child--BorderBlockEndWidth);
1054
- }
1055
- .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
1056
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
1057
- }
1058
- .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
1059
- border-block-end: 0;
1001
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable {
1002
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
1060
1003
  }
1061
- .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded:not(:last-of-type) {
1062
- border-block-end: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1004
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
1005
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
1006
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
1063
1007
  }
1064
1008
  .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
1065
1009
  --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
@@ -1131,9 +1075,6 @@
1131
1075
  --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
1132
1076
  border: 0;
1133
1077
  }
1134
- .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) + tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
1135
- --pf-v6-c-table__tr--responsive--PaddingBlockStart: 0;
1136
- }
1137
1078
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
1138
1079
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
1139
1080
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
@@ -1359,24 +1300,12 @@
1359
1300
  .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
1360
1301
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1361
1302
  }
1362
- .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table.pf-m-compact > tbody:where(.pf-v6-c-table__tbody) {
1363
- border-block-start: 0;
1364
- }
1365
- .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
1366
- border-block-end: var(--pf-v6-c-table__tr--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1367
- }
1368
- .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):last-child,
1369
- .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):last-of-type:not(:only-of-type) > tr:where(.pf-v6-c-table__tr) {
1370
- border-block-end-width: var(--pf-v6-c-table__tr--responsive--last-child--BorderBlockEndWidth);
1303
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable {
1304
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
1371
1305
  }
1372
- .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded {
1373
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
1374
- }
1375
- .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
1376
- border-block-end: 0;
1377
- }
1378
- .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-expanded:not(:last-of-type) {
1379
- border-block-end: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1306
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody,
1307
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
1308
+ border-block-end: var(--pf-v6-c-table__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--pf-v6-c-table--responsive--BorderColor);
1380
1309
  }
1381
1310
  .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-selected {
1382
1311
  --pf-v6-c-table__expandable-row--after--BorderInlineStartWidth: 0;
@@ -1448,9 +1377,6 @@
1448
1377
  --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-v6-c-table__tr--responsive--nested-table--PaddingInlineStart);
1449
1378
  border: 0;
1450
1379
  }
1451
- .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) + tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
1452
- --pf-v6-c-table__tr--responsive--PaddingBlockStart: 0;
1453
- }
1454
1380
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__compound-expansion-toggle {
1455
1381
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineEndWidth: 0;
1456
1382
  --pf-v6-c-table__compound-expansion-toggle__button--before--BorderInlineStartWidth: 0;
@@ -49,6 +49,9 @@
49
49
  --#{$table}__tbody--after--BorderInlineStartWidth: 0;
50
50
  --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--clicked);
51
51
 
52
+ // * Table body responsive
53
+ --#{$table}__tbody--responsive--m-expandable--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
54
+
52
55
  // * Table tr responsive
53
56
  --#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
54
57
  --#{$table}__tr--responsive--last-child--BorderBlockEndWidth: var(--#{$table}__tbody--responsive--border-width--base);
@@ -177,32 +180,13 @@
177
180
  }
178
181
  }
179
182
 
180
- // Remove the border from the body inside of the nested table
181
- .#{$table}.pf-m-compact > tbody:where(.#{$table}__tbody) {
182
- border-block-start: 0;
183
- }
184
-
185
- // - Table grid not expandable row
186
- tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
187
- border-block-end: var(--#{$table}__tr--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
188
- }
189
-
190
- // The last tr should always have a border width of 1px
191
- tr:where(.#{$table}__tr):last-child,
192
- tbody:where(.#{$table}__tbody):last-of-type:not(:only-of-type) > tr:where(.#{$table}__tr) {
193
- border-block-end-width: var(--#{$table}__tr--responsive--last-child--BorderBlockEndWidth);
194
- }
195
-
196
- // - Table grid tbody expanded
197
- tbody:where(.#{$table}__tbody).pf-m-expanded {
198
- border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
199
-
200
- tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
201
- border-block-end: 0;
202
- }
183
+ // Remove border on tr inside non-expanded tbody in of expandable tables
184
+ &.pf-m-expandable {
185
+ --#{$table}__tr--BorderBlockEndWidth: 0; // nested table rows have no border
203
186
 
204
- &:not(:last-of-type) {
205
- border-block-end: var(--#{$table}__tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
187
+ .#{$table}__tbody,
188
+ .#{$table}__tbody.pf-m-expanded {
189
+ border-block-end: var(--#{$table}__tbody--responsive--m-expandable--BorderBlockEndWidth) solid var(--#{$table}--responsive--BorderColor);
206
190
  }
207
191
  }
208
192
 
@@ -311,10 +295,6 @@
311
295
  --#{$table}__tr--responsive--PaddingInlineStart: var(--#{$table}__tr--responsive--nested-table--PaddingInlineStart);
312
296
 
313
297
  border: 0;
314
-
315
- tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) + tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
316
- --#{$table}__tr--responsive--PaddingBlockStart: 0;
317
- }
318
298
  }
319
299
 
320
300
  // - Table grid compound expansion toggle