@patternfly/patternfly 6.0.0-alpha.88 → 6.0.0-alpha.89
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.
- package/components/Menu/menu.css +4 -1
- package/components/Menu/menu.scss +6 -1
- package/components/Table/table-tree-view.css +5 -0
- package/components/Table/table-tree-view.scss +9 -0
- package/components/Table/table.css +111 -190
- package/components/Table/table.scss +155 -268
- package/package.json +1 -1
- package/patternfly-no-globals.css +120 -191
- package/patternfly-theme-dark-unversioned.css +120 -191
- package/patternfly.css +120 -191
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -1,16 +1,8 @@
|
|
|
1
|
-
//
|
|
1
|
+
// TODO: clean up unused variables
|
|
2
|
+
// TODO: update grouping comments to // * Table {element}
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
// stylelint-disable
|
|
6
|
-
// ============================================================ //
|
|
7
|
-
// Start non-conformant variables
|
|
8
|
-
//
|
|
9
|
-
// these variables do not conform to guidelines as styling targets individual elements
|
|
10
|
-
// this is purposeful and necessary to avoid adding selectors to each td/th
|
|
11
|
-
// ============================================================ //
|
|
12
|
-
|
|
13
|
-
// Base
|
|
4
|
+
:where(:root),
|
|
5
|
+
:where(.#{$table}) {
|
|
14
6
|
--#{$table}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
15
7
|
--#{$table}--BorderColor: var(--pf-t--global--border--color--default);
|
|
16
8
|
--#{$table}--border-width--base: var(--pf-t--global--border--width--divider--default);
|
|
@@ -24,27 +16,30 @@
|
|
|
24
16
|
--#{$table}__caption--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
25
17
|
|
|
26
18
|
// Thead
|
|
27
|
-
--#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body--
|
|
19
|
+
--#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
|
|
28
20
|
--#{$table}__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
|
|
29
21
|
|
|
30
22
|
// Tbody cell
|
|
31
|
-
--#{$table}__tbody--cell--PaddingTop: var(--
|
|
32
|
-
--#{$table}__tbody--cell--PaddingBottom: var(--
|
|
23
|
+
--#{$table}__tbody--cell--PaddingTop: var(--#{$table}--cell--Padding--base);
|
|
24
|
+
--#{$table}__tbody--cell--PaddingBottom: var(--#{$table}--cell--Padding--base);
|
|
25
|
+
--#{$table}__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default); // set this explicitly for input heights to calc properly
|
|
33
26
|
|
|
34
27
|
// Tr
|
|
35
28
|
--#{$table}__tr--BoxShadow--top--base: 0 #{pf-size-prem(-3px)} #{pf-size-prem(4px)} #{pf-size-prem(-2px)} rgba(3,3,3,.08);
|
|
36
29
|
|
|
30
|
+
// TODO: update these in order of appearance in scss declarations
|
|
31
|
+
|
|
37
32
|
// Th / td shared variables
|
|
38
33
|
--#{$table}--cell--Padding--base: var(--pf-t--global--spacer--md);
|
|
39
34
|
--#{$table}--cell--FontSize: var(--pf-t--global--font--size--body--default);
|
|
40
35
|
--#{$table}--cell--FontWeight: var(--pf-t--global--font--weight--body);
|
|
36
|
+
--#{$table}--cell--LineHeight: var(--pf-t--global--font--line-height--body);
|
|
41
37
|
--#{$table}--cell--Color: var(--pf-t--global--text--color--regular);
|
|
42
38
|
--#{$table}--cell--PaddingTop: var(--#{$table}--cell--Padding--base);
|
|
43
39
|
--#{$table}--cell--PaddingRight: var(--#{$table}--cell--Padding--base);
|
|
44
40
|
--#{$table}--cell--PaddingBottom: var(--#{$table}--cell--Padding--base);
|
|
45
41
|
--#{$table}--cell--PaddingLeft: var(--#{$table}--cell--Padding--base);
|
|
46
|
-
--#{$table}--cell--first-last-child--
|
|
47
|
-
--#{$table}--cell--first-last-child--PaddingRight: var(--pf-t--global--spacer--md);
|
|
42
|
+
--#{$table}--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--sm);
|
|
48
43
|
--#{$table}__tr--m-first-cell-offset-reset--cell--PaddingLeft: var(--#{$table}--cell--Padding--base);
|
|
49
44
|
|
|
50
45
|
// Default cell variables
|
|
@@ -71,22 +66,25 @@
|
|
|
71
66
|
|
|
72
67
|
// Hidden visible
|
|
73
68
|
--#{$table}--cell--hidden-visible--Display: table-cell;
|
|
74
|
-
// stylelint-enable
|
|
75
|
-
|
|
76
|
-
// ============================================================ //
|
|
77
|
-
// End non-conformant variables
|
|
78
|
-
// ============================================================ //
|
|
79
69
|
|
|
80
70
|
// Table cell - toggle
|
|
81
|
-
--#{$table}__toggle--
|
|
82
|
-
--#{$table}__toggle--
|
|
71
|
+
--#{$table}__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
72
|
+
--#{$table}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
73
|
+
--#{$table}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
74
|
+
--#{$table}__toggle--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
83
75
|
--#{$table}__toggle--c-button__toggle-icon--Rotate: 270deg;
|
|
84
76
|
--#{$table}__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
|
|
85
77
|
--#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
|
|
86
78
|
|
|
87
79
|
// Button
|
|
88
|
-
--#{$table}__button--
|
|
80
|
+
--#{$table}__button--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
81
|
+
--#{$table}__button--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
82
|
+
--#{$table}__button--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
83
|
+
--#{$table}__button--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
89
84
|
--#{$table}__button--Color: var(--pf-t--global--text--color--regular);
|
|
85
|
+
--#{$table}__button--BackgroundColor: transparent;
|
|
86
|
+
--#{$table}__button--OutlineOffset: calc(var(--pf-t--global--border--width--strong) * -1);
|
|
87
|
+
--#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--small);
|
|
90
88
|
--#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
|
|
91
89
|
--#{$table}__button--focus--Color: var(--pf-t--global--text--color--regular);
|
|
92
90
|
--#{$table}__button--active--Color: var(--pf-t--global--text--color--regular);
|
|
@@ -97,18 +95,14 @@
|
|
|
97
95
|
--#{$table}--m-compact__toggle--PaddingBottom: 0;
|
|
98
96
|
|
|
99
97
|
// Check
|
|
100
|
-
--#{$table}__check--
|
|
101
|
-
--#{$table}
|
|
102
|
-
--#{$table}__check--input--FontSize: var(--pf-t--global--font--size--body--default);
|
|
98
|
+
--#{$table}__check--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
99
|
+
--#{$table}__check--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
103
100
|
|
|
104
101
|
// Favorite
|
|
105
|
-
--#{$table}--
|
|
106
|
-
--#{$table}__favorite--
|
|
102
|
+
--#{$table}__favorite--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
103
|
+
--#{$table}__favorite--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
107
104
|
--#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
|
|
108
|
-
--#{$table}
|
|
109
|
-
--#{$table}__favorite--c-button--MarginRight: calc(var(--#{$button}--PaddingRight) * -1);
|
|
110
|
-
--#{$table}__favorite--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
|
|
111
|
-
--#{$table}__favorite--c-button--MarginLeft: calc(var(--#{$button}--PaddingLeft) * -1);
|
|
105
|
+
--#{$table}--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
|
|
112
106
|
--#{$table}__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
|
|
113
107
|
--#{$table}__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
|
|
114
108
|
--#{$table}__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
|
|
@@ -126,26 +120,22 @@
|
|
|
126
120
|
--#{$table}__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
127
121
|
|
|
128
122
|
// Action
|
|
129
|
-
--#{$table}__action--PaddingTop:
|
|
130
|
-
--#{$table}__action--
|
|
131
|
-
--#{$table}__action--PaddingBottom: 0;
|
|
132
|
-
--#{$table}__action--PaddingLeft: 0;
|
|
123
|
+
--#{$table}__action--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
124
|
+
--#{$table}__action--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
133
125
|
|
|
134
126
|
// Inline edit
|
|
135
|
-
--#{$table}__inline-edit-action--PaddingTop:
|
|
136
|
-
--#{$table}__inline-edit-action--
|
|
137
|
-
--#{$table}__inline-edit-action--PaddingBottom: 0;
|
|
138
|
-
--#{$table}__inline-edit-action--PaddingLeft: 0;
|
|
127
|
+
--#{$table}__inline-edit-action--PaddingTop: var(--pf-t--global--spacer--sm);
|
|
128
|
+
--#{$table}__inline-edit-action--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
139
129
|
|
|
140
130
|
// Expandable row
|
|
141
|
-
// hardcoding to match design spec
|
|
142
131
|
--#{$table}__expandable-row--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
|
|
143
|
-
--#{$table}__expandable-row--
|
|
132
|
+
--#{$table}__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--md);
|
|
133
|
+
--#{$table}__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--md);
|
|
134
|
+
--#{$table}__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
|
|
135
|
+
--#{$table}__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
|
|
144
136
|
--#{$table}__expandable-row-content--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
|
|
145
|
-
--#{$table}__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
146
|
-
--#{$table}__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
147
137
|
|
|
148
|
-
// ::
|
|
138
|
+
// ::after border
|
|
149
139
|
--#{$table}__expandable-row--after--Top: calc(var(--#{$table}--border-width--base) * -1);
|
|
150
140
|
--#{$table}__expandable-row--after--Bottom: calc(var(--#{$table}--border-width--base) * -1);
|
|
151
141
|
--#{$table}__expandable-row--after--border-width--base: var(--pf-t--global--border--width--strong);
|
|
@@ -176,6 +166,10 @@
|
|
|
176
166
|
--#{$table}__sort__button--focus__text--Color: currentcolor;
|
|
177
167
|
--#{$table}__sort__button--active__text--Color: currentcolor;
|
|
178
168
|
|
|
169
|
+
// Sort text
|
|
170
|
+
--#{$table}__sort--cell--PaddingLeft: var(--pf-t--global--spacer--xs);
|
|
171
|
+
--#{$table}__sort--cell--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
172
|
+
|
|
179
173
|
// Sort indicator
|
|
180
174
|
--#{$table}__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
|
|
181
175
|
--#{$table}__sort-indicator--MarginLeft: var(--pf-t--global--spacer--md);
|
|
@@ -188,8 +182,7 @@
|
|
|
188
182
|
--#{$table}__th--m-help--MinWidth: 11ch;
|
|
189
183
|
|
|
190
184
|
// Table header popover
|
|
191
|
-
--#{$table}__column-help--MarginLeft: var(--pf-t--global--spacer--
|
|
192
|
-
--#{$table}__column-help--TranslateY: #{pf-size-prem(2px)};
|
|
185
|
+
--#{$table}__column-help--MarginLeft: var(--pf-t--global--spacer--sm);
|
|
193
186
|
--#{$table}__column-help--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
|
|
194
187
|
--#{$table}__column-help--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
|
|
195
188
|
--#{$table}__column-help--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
@@ -209,7 +202,7 @@
|
|
|
209
202
|
--#{$table}__compound-expansion-toggle__button--before--Bottom: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
|
|
210
203
|
--#{$table}__compound-expansion-toggle__button--before--Left: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
|
|
211
204
|
|
|
212
|
-
// ::
|
|
205
|
+
// ::after border treatment
|
|
213
206
|
--#{$table}__compound-expansion-toggle__button--after--border-width--base: var(--pf-t--global--border--width--strong);
|
|
214
207
|
--#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
215
208
|
--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: 0;
|
|
@@ -223,17 +216,8 @@
|
|
|
223
216
|
--#{$table}--m-compact--cell--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
224
217
|
--#{$table}--m-compact--cell--PaddingBottom: var(--pf-t--global--spacer--sm);
|
|
225
218
|
--#{$table}--m-compact--cell--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
226
|
-
--#{$table}--m-
|
|
227
|
-
--#{$table}--m-
|
|
228
|
-
--#{$table}--m-compact--FontSize: var(--pf-t--global--font--size--body--default);
|
|
229
|
-
--#{$table}--m-compact__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--lg);
|
|
230
|
-
--#{$table}--m-compact__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--lg);
|
|
231
|
-
--#{$table}--m-compact__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--lg);
|
|
232
|
-
--#{$table}--m-compact__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--lg);
|
|
233
|
-
|
|
234
|
-
// Nested table
|
|
235
|
-
--#{$table}--nested--first-last-child--PaddingRight: var(--#{$table}--m-compact--cell--first-last-child--PaddingLeft);
|
|
236
|
-
--#{$table}--nested--first-last-child--PaddingLeft: var(--#{$table}--m-compact--cell--first-last-child--PaddingRight);
|
|
219
|
+
--#{$table}--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
|
|
220
|
+
--#{$table}--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
237
221
|
|
|
238
222
|
// Modifier - expandable row expanded
|
|
239
223
|
--#{$table}__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
|
|
@@ -295,6 +279,8 @@
|
|
|
295
279
|
--#{$table}__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--xs);
|
|
296
280
|
|
|
297
281
|
// Subhead
|
|
282
|
+
--#{$table}__subhead--PaddingLeft: var(--pf-t--global--spacer--sm);
|
|
283
|
+
--#{$table}__subhead--PaddingRight: var(--pf-t--global--spacer--sm);
|
|
298
284
|
--#{$table}__subhead--Color: var(--pf-t--global--text--color--subtle);
|
|
299
285
|
|
|
300
286
|
// Striped
|
|
@@ -302,7 +288,12 @@
|
|
|
302
288
|
|
|
303
289
|
// Sticky
|
|
304
290
|
--#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--Zindex--xs);
|
|
291
|
+
}
|
|
305
292
|
|
|
293
|
+
// TODO: update grouping comments to // Table {element}
|
|
294
|
+
// TODO: flatten the modifiers out ex: .#{$table}.pf-m-sticky-header {}
|
|
295
|
+
// Table
|
|
296
|
+
.#{$table} {
|
|
306
297
|
@include pf-v5-t-light; // This component always needs to be light
|
|
307
298
|
|
|
308
299
|
// Base
|
|
@@ -337,7 +328,7 @@
|
|
|
337
328
|
inset-block-end: 0;
|
|
338
329
|
inset-inline-start: 0;
|
|
339
330
|
inset-inline-end: 0;
|
|
340
|
-
content:
|
|
331
|
+
content: '';
|
|
341
332
|
border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
|
|
342
333
|
}
|
|
343
334
|
}
|
|
@@ -426,6 +417,7 @@
|
|
|
426
417
|
overflow: var(--#{$table}--cell--Overflow);
|
|
427
418
|
font-size: var(--#{$table}--cell--FontSize);
|
|
428
419
|
font-weight: var(--#{$table}--cell--FontWeight);
|
|
420
|
+
line-height: var(--#{$table}--cell--LineHeight);
|
|
429
421
|
color: var(--#{$table}--cell--Color);
|
|
430
422
|
text-overflow: var(--#{$table}--cell--TextOverflow);
|
|
431
423
|
word-break: var(--#{$table}--cell--WordBreak);
|
|
@@ -433,12 +425,12 @@
|
|
|
433
425
|
|
|
434
426
|
// First child padding left
|
|
435
427
|
&:first-child {
|
|
436
|
-
--#{$table}--cell--
|
|
428
|
+
padding-inline-start: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingLeft));
|
|
437
429
|
}
|
|
438
430
|
|
|
439
431
|
// Last child padding right
|
|
440
432
|
&:last-child {
|
|
441
|
-
--#{$table}--cell--
|
|
433
|
+
padding-inline-end: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingRight));
|
|
442
434
|
}
|
|
443
435
|
|
|
444
436
|
&.pf-m-center {
|
|
@@ -465,10 +457,7 @@
|
|
|
465
457
|
&.pf-m-border-right::before,
|
|
466
458
|
&.pf-m-border-left::before {
|
|
467
459
|
position: absolute;
|
|
468
|
-
inset
|
|
469
|
-
inset-block-end: 0;
|
|
470
|
-
inset-inline-start: 0;
|
|
471
|
-
inset-inline-end: 0;
|
|
460
|
+
inset: 0;
|
|
472
461
|
pointer-events: none;
|
|
473
462
|
content: "";
|
|
474
463
|
}
|
|
@@ -498,7 +487,7 @@
|
|
|
498
487
|
--#{$table}--cell--FontSize: var(--#{$table}__thead--cell--FontSize);
|
|
499
488
|
--#{$table}--cell--FontWeight: var(--#{$table}__thead--cell--FontWeight);
|
|
500
489
|
|
|
501
|
-
vertical-align:
|
|
490
|
+
vertical-align: baseline;
|
|
502
491
|
|
|
503
492
|
// stylelint-disable
|
|
504
493
|
&.pf-m-nested-column-header {
|
|
@@ -506,17 +495,6 @@
|
|
|
506
495
|
outline-offset: var(--#{$table}__thead--m-nested-column-header--button--OutlineOffset);
|
|
507
496
|
}
|
|
508
497
|
|
|
509
|
-
th:where(.#{$table}__th),
|
|
510
|
-
td:where(.#{$table}__td),
|
|
511
|
-
input:where(.#{$check}__input) {
|
|
512
|
-
vertical-align: middle;
|
|
513
|
-
}
|
|
514
|
-
|
|
515
|
-
.#{$table}__check label {
|
|
516
|
-
display: flex;
|
|
517
|
-
align-items: center;
|
|
518
|
-
}
|
|
519
|
-
|
|
520
498
|
tr:where(.#{$table}__tr):not(:first-child) {
|
|
521
499
|
th:where(.#{$table}__th),
|
|
522
500
|
td:where(.#{$table}__td) {
|
|
@@ -529,9 +507,15 @@
|
|
|
529
507
|
// stylelint-enable
|
|
530
508
|
|
|
531
509
|
.#{$table}__subhead {
|
|
510
|
+
--#{$table}--cell--PaddingLeft: var(--#{$table}__subhead--PaddingLeft);
|
|
511
|
+
--#{$table}--cell--PaddingRight: var(--#{$table}__subhead--PaddingRight);
|
|
532
512
|
--#{$table}__sort__button__text--Color: var(--#{$table}__subhead--Color);
|
|
533
513
|
|
|
534
514
|
color: var(--#{$table}__subhead--Color);
|
|
515
|
+
|
|
516
|
+
.#{$table}__button {
|
|
517
|
+
margin-inline-start: 0;
|
|
518
|
+
}
|
|
535
519
|
}
|
|
536
520
|
}
|
|
537
521
|
|
|
@@ -541,9 +525,12 @@
|
|
|
541
525
|
--#{$table}--cell--PaddingTop: var(--#{$table}__tbody--cell--PaddingTop);
|
|
542
526
|
--#{$table}--cell--PaddingBottom: var(--#{$table}__tbody--cell--PaddingBottom);
|
|
543
527
|
|
|
528
|
+
vertical-align: top;
|
|
529
|
+
|
|
530
|
+
--#{$table}--cell--FontSize: var(--#{$table}__tbody--cell--FontSize);
|
|
531
|
+
|
|
544
532
|
> tr:where(.#{$table}__tr) > * {
|
|
545
533
|
overflow-wrap: break-word;
|
|
546
|
-
vertical-align: baseline;
|
|
547
534
|
}
|
|
548
535
|
|
|
549
536
|
// Border treatment
|
|
@@ -555,21 +542,13 @@
|
|
|
555
542
|
inset-block-start: var(--#{$table}__expandable-row--after--Top);
|
|
556
543
|
inset-block-end: var(--#{$table}__expandable-row--after--Bottom);
|
|
557
544
|
inset-inline-start: 0;
|
|
558
|
-
content:
|
|
545
|
+
content: '';
|
|
559
546
|
|
|
560
547
|
// add border left
|
|
561
548
|
background-color: transparent;
|
|
562
549
|
border-inline-start: var(--#{$table}__expandable-row--after--BorderLeftWidth) solid var(--#{$table}__expandable-row--after--BorderColor);
|
|
563
550
|
}
|
|
564
551
|
|
|
565
|
-
// Check table cell
|
|
566
|
-
.#{$table}__check {
|
|
567
|
-
input:where(.#{$check}__input) {
|
|
568
|
-
margin-block-start: var(--#{$table}__check--input--MarginTop);
|
|
569
|
-
vertical-align: top;
|
|
570
|
-
}
|
|
571
|
-
}
|
|
572
|
-
|
|
573
552
|
&.pf-m-expanded > :first-child:not(.#{$table}__control-row) {
|
|
574
553
|
border-block-end-width: 0;
|
|
575
554
|
}
|
|
@@ -580,14 +559,14 @@
|
|
|
580
559
|
// ==================================================================
|
|
581
560
|
// unset padding, button adds appropriate padding
|
|
582
561
|
// unset padding for these cells as the button within provides padding
|
|
583
|
-
.#{$table}__compound-expansion-toggle {
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
}
|
|
562
|
+
// .#{$table}__compound-expansion-toggle {
|
|
563
|
+
// &,
|
|
564
|
+
// &:first-child,
|
|
565
|
+
// &:last-child {
|
|
566
|
+
// // explicitly reset padding rather than css variable, as the button within uses the variable
|
|
567
|
+
// padding: 0;
|
|
568
|
+
// }
|
|
569
|
+
// }
|
|
591
570
|
|
|
592
571
|
// set property here to increase specificity
|
|
593
572
|
.#{$table}__sort {
|
|
@@ -782,16 +761,15 @@
|
|
|
782
761
|
|
|
783
762
|
// Text
|
|
784
763
|
.#{$table}__text {
|
|
785
|
-
// Allow __text child to inherit th/td modifier settings
|
|
786
|
-
// reset --#{$table}--cell--MaxWidth here for element and children
|
|
787
764
|
--#{$table}--cell--MaxWidth: 100%;
|
|
788
765
|
|
|
789
766
|
position: relative;
|
|
790
767
|
display: block;
|
|
791
768
|
width: var(--#{$table}--cell--Width);
|
|
792
|
-
min-width: var(--#{$table}--
|
|
769
|
+
min-width: var(--#{$table}--text--MinWidth);
|
|
793
770
|
max-width: var(--#{$table}--cell--MaxWidth);
|
|
794
771
|
overflow: var(--#{$table}--cell--Overflow);
|
|
772
|
+
line-height: var(--#{$table}--cell--LineHeight);
|
|
795
773
|
text-overflow: var(--#{$table}--cell--TextOverflow);
|
|
796
774
|
word-break: var(--#{$table}--cell--WordBreak);
|
|
797
775
|
white-space: var(--#{$table}--cell--WhiteSpace);
|
|
@@ -808,14 +786,15 @@
|
|
|
808
786
|
}
|
|
809
787
|
}
|
|
810
788
|
|
|
811
|
-
//
|
|
789
|
+
// Table button
|
|
812
790
|
.#{$table}__button {
|
|
813
791
|
position: static;
|
|
814
|
-
width:
|
|
815
|
-
padding-block-start: var(--#{$table}--
|
|
816
|
-
padding-block-end: var(--#{$table}--
|
|
817
|
-
padding-inline-start: var(--#{$table}--
|
|
818
|
-
padding-inline-end: var(--#{$table}--
|
|
792
|
+
width: auto;
|
|
793
|
+
padding-block-start: var(--#{$table}__button--PaddingTop);
|
|
794
|
+
padding-block-end: var(--#{$table}__button--PaddingBottom);
|
|
795
|
+
padding-inline-start: var(--#{$table}__button--PaddingLeft);
|
|
796
|
+
padding-inline-end: var(--#{$table}__button--PaddingRight);
|
|
797
|
+
margin-inline-start: calc(var(--#{$table}__button--PaddingLeft) * -1);
|
|
819
798
|
font-size: inherit;
|
|
820
799
|
font-weight: inherit;
|
|
821
800
|
color: var(--#{$table}__button--Color);
|
|
@@ -824,6 +803,12 @@
|
|
|
824
803
|
user-select: text;
|
|
825
804
|
background-color: var(--#{$table}__button--BackgroundColor);
|
|
826
805
|
border: 0;
|
|
806
|
+
border-radius: var(--#{$table}__button--BorderRadius);
|
|
807
|
+
|
|
808
|
+
// Table table table button
|
|
809
|
+
.#{$table} .#{$table} & {
|
|
810
|
+
margin-block-end: 0; // remove offset in nested tables
|
|
811
|
+
}
|
|
827
812
|
|
|
828
813
|
// Define clickable area with invisible ::before pseudo
|
|
829
814
|
&::before {
|
|
@@ -833,7 +818,7 @@
|
|
|
833
818
|
inset-inline-start: 0;
|
|
834
819
|
inset-inline-end: 0;
|
|
835
820
|
cursor: pointer;
|
|
836
|
-
content:
|
|
821
|
+
content: '';
|
|
837
822
|
}
|
|
838
823
|
|
|
839
824
|
&:hover {
|
|
@@ -862,17 +847,13 @@
|
|
|
862
847
|
}
|
|
863
848
|
}
|
|
864
849
|
|
|
865
|
-
.#{$table}__sort .#{$table}__text {
|
|
866
|
-
--#{$table}--cell--MinWidth: 0;
|
|
867
|
-
}
|
|
868
|
-
|
|
869
850
|
// Sort content
|
|
870
851
|
// display grid for buttons is not supported
|
|
871
852
|
.#{$table}__button-content,
|
|
872
853
|
.#{$table}__column-help {
|
|
873
|
-
display: grid;
|
|
854
|
+
display: inline-grid;
|
|
874
855
|
grid-template-columns: auto max-content;
|
|
875
|
-
align-items:
|
|
856
|
+
align-items: baseline;
|
|
876
857
|
justify-content: start;
|
|
877
858
|
|
|
878
859
|
.#{$table}__text {
|
|
@@ -901,13 +882,6 @@
|
|
|
901
882
|
}
|
|
902
883
|
}
|
|
903
884
|
|
|
904
|
-
// Minimize padding
|
|
905
|
-
.#{$table} .#{$table}__toggle,
|
|
906
|
-
.#{$table} .#{$table}__action,
|
|
907
|
-
.#{$table} .#{$table}__inline-edit-action {
|
|
908
|
-
--#{$table}--cell--PaddingBottom: 0;
|
|
909
|
-
}
|
|
910
|
-
|
|
911
885
|
// stylelint-disable
|
|
912
886
|
// Minimize width
|
|
913
887
|
.#{$table} .#{$table}__check,
|
|
@@ -924,22 +898,18 @@
|
|
|
924
898
|
|
|
925
899
|
// Toggle table cell
|
|
926
900
|
.#{$table}__toggle {
|
|
927
|
-
--#{$table}--cell--
|
|
928
|
-
--#{$table}--cell--
|
|
929
|
-
|
|
930
|
-
|
|
901
|
+
--#{$table}--cell--PaddingTop: var(--#{$table}__toggle--PaddingTop);
|
|
902
|
+
--#{$table}--cell--PaddingBottom: var(--#{$table}__toggle--PaddingBottom);
|
|
903
|
+
--#{$table}--cell--PaddingLeft: var(--#{$table}__toggle--PaddingLeft);
|
|
904
|
+
--#{$table}--cell--PaddingRight: var(--#{$table}__toggle--PaddingRight);
|
|
931
905
|
|
|
932
906
|
.#{$button} {
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
&.pf-m-expanded {
|
|
937
|
-
.#{$table}__toggle-icon {
|
|
938
|
-
transform: rotate(var(--#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate));
|
|
939
|
-
}
|
|
907
|
+
&.pf-m-expanded .#{$table}__toggle-icon {
|
|
908
|
+
transform: rotate(var(--#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate));
|
|
940
909
|
}
|
|
941
910
|
}
|
|
942
911
|
|
|
912
|
+
|
|
943
913
|
.#{$table}__toggle-icon {
|
|
944
914
|
@include pf-v5-mirror-inline-on-rtl;
|
|
945
915
|
|
|
@@ -954,39 +924,35 @@
|
|
|
954
924
|
|
|
955
925
|
// Check table cell
|
|
956
926
|
.#{$table}__check {
|
|
957
|
-
--#{$table}--cell--
|
|
927
|
+
--#{$table}--cell--PaddingLeft: var(--#{$table}__check--PaddingLeft);
|
|
928
|
+
--#{$table}--cell--PaddingRight: var(--#{$table}__check--PaddingRight);
|
|
958
929
|
|
|
959
|
-
|
|
960
|
-
input:not([disabled]) {
|
|
961
|
-
cursor: pointer;
|
|
962
|
-
}
|
|
963
|
-
|
|
964
|
-
label {
|
|
930
|
+
.#{$check}.pf-m-standalone {
|
|
965
931
|
display: inline-flex;
|
|
966
|
-
padding: inherit;
|
|
967
|
-
margin-block-start: calc(var(--#{$table}--cell--PaddingTop) * -1);
|
|
968
|
-
margin-block-end: calc(var(--#{$table}--cell--PaddingBottom) * -1);
|
|
969
|
-
margin-inline-start: calc(var(--#{$table}--cell--PaddingLeft) * -1);
|
|
970
|
-
margin-inline-end: calc(var(--#{$table}--cell--PaddingRight) * -1);
|
|
971
932
|
|
|
933
|
+
thead & {
|
|
934
|
+
vertical-align: bottom;
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
tbody & {
|
|
938
|
+
vertical-align: top;
|
|
939
|
+
}
|
|
972
940
|
}
|
|
973
941
|
|
|
974
|
-
|
|
975
|
-
|
|
942
|
+
// TODO: remove label wrapper at breaking change
|
|
943
|
+
label {
|
|
944
|
+
display: contents;
|
|
976
945
|
}
|
|
977
946
|
}
|
|
978
947
|
|
|
979
948
|
// Favorite body cell
|
|
980
949
|
.#{$table}__favorite {
|
|
950
|
+
--#{$table}--cell--PaddingLeft: var(--#{$table}__favorite--PaddingLeft);
|
|
951
|
+
--#{$table}--cell--PaddingRight: var(--#{$table}__favorite--PaddingRight);
|
|
952
|
+
|
|
981
953
|
.#{$button} {
|
|
982
|
-
--#{$button}--m-plain--Color: var(--#{$table}__favorite--c-button--Color);
|
|
983
954
|
--#{$button}--FontSize: var(--#{$table}__favorite--c-button--FontSize);
|
|
984
955
|
|
|
985
|
-
margin-block-start: var(--#{$table}__favorite--c-button--MarginTop);
|
|
986
|
-
margin-block-end: var(--#{$table}__favorite--c-button--MarginBottom);
|
|
987
|
-
margin-inline-start: var(--#{$table}__favorite--c-button--MarginLeft);
|
|
988
|
-
margin-inline-end: var(--#{$table}__favorite--c-button--MarginRight);
|
|
989
|
-
|
|
990
956
|
@at-root .pf-m-favorited#{&} {
|
|
991
957
|
--#{$button}--m-plain--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
|
|
992
958
|
}
|
|
@@ -996,10 +962,6 @@
|
|
|
996
962
|
// Draggable
|
|
997
963
|
.#{$table}__draggable {
|
|
998
964
|
.#{$button} {
|
|
999
|
-
margin-block-start: var(--#{$table}__draggable--c-button--MarginTop);
|
|
1000
|
-
margin-block-end: var(--#{$table}__draggable--c-button--MarginBottom);
|
|
1001
|
-
margin-inline-start: var(--#{$table}__draggable--c-button--MarginLeft);
|
|
1002
|
-
margin-inline-end: var(--#{$table}__draggable--c-button--MarginRight);
|
|
1003
965
|
cursor: grab;
|
|
1004
966
|
|
|
1005
967
|
&:active {
|
|
@@ -1010,27 +972,17 @@
|
|
|
1010
972
|
|
|
1011
973
|
// Table action cell
|
|
1012
974
|
.#{$table}__action,
|
|
1013
|
-
.#{$table}__inline-edit-action
|
|
1014
|
-
|
|
1015
|
-
--#{$table}--cell--
|
|
1016
|
-
--#{$table}--cell--PaddingBottom:
|
|
1017
|
-
--#{$table}--cell--PaddingLeft: var(--#{$table}__action--PaddingLeft);
|
|
1018
|
-
|
|
1019
|
-
padding-block-start: 0;
|
|
1020
|
-
padding-block-end: 0;
|
|
1021
|
-
vertical-align: middle;
|
|
1022
|
-
}
|
|
1023
|
-
|
|
1024
|
-
.#{$table}__action {
|
|
1025
|
-
text-align: end;
|
|
975
|
+
.#{$table}__inline-edit-action,
|
|
976
|
+
.#{$table}__draggable {
|
|
977
|
+
--#{$table}--cell--PaddingTop: var(--#{$table}__action--PaddingTop);
|
|
978
|
+
--#{$table}--cell--PaddingBottom: var(--#{$table}__action--PaddingBottom);
|
|
1026
979
|
}
|
|
1027
980
|
|
|
1028
|
-
|
|
981
|
+
.#{$table}__action,
|
|
1029
982
|
.#{$table}__inline-edit-action {
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
text-align: end;
|
|
983
|
+
&:last-child {
|
|
984
|
+
text-align: end;
|
|
985
|
+
}
|
|
1034
986
|
}
|
|
1035
987
|
|
|
1036
988
|
// Compound expansion toggle
|
|
@@ -1041,6 +993,7 @@
|
|
|
1041
993
|
--#{$table}__button--active--Color: var(--#{$table}__compound-expansion-toggle__button--active--Color);
|
|
1042
994
|
|
|
1043
995
|
position: relative;
|
|
996
|
+
padding: 0;
|
|
1044
997
|
|
|
1045
998
|
// show left border, use __text to truncate content
|
|
1046
999
|
&.pf-m-truncate {
|
|
@@ -1048,7 +1001,10 @@
|
|
|
1048
1001
|
}
|
|
1049
1002
|
|
|
1050
1003
|
.#{$table}__button {
|
|
1004
|
+
position: static;
|
|
1051
1005
|
min-width: 100%;
|
|
1006
|
+
padding: 0;
|
|
1007
|
+
margin: 0;
|
|
1052
1008
|
overflow: hidden;
|
|
1053
1009
|
|
|
1054
1010
|
// Remove outline and apply to parent td
|
|
@@ -1059,12 +1015,13 @@
|
|
|
1059
1015
|
}
|
|
1060
1016
|
}
|
|
1061
1017
|
|
|
1018
|
+
|
|
1062
1019
|
// Apply borders to button to avoid conflicts with expanded states
|
|
1063
1020
|
.#{$table}__button::before,
|
|
1064
1021
|
.#{$table}__button::after {
|
|
1065
1022
|
position: absolute;
|
|
1066
|
-
inset
|
|
1067
|
-
content:
|
|
1023
|
+
inset: 0;
|
|
1024
|
+
content: '';
|
|
1068
1025
|
border-style: solid;
|
|
1069
1026
|
border-width: 0;
|
|
1070
1027
|
}
|
|
@@ -1073,7 +1030,7 @@
|
|
|
1073
1030
|
inset-block-start: 0;
|
|
1074
1031
|
inset-block-end: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
|
|
1075
1032
|
inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--before--Left);
|
|
1076
|
-
|
|
1033
|
+
border-color: var(--#{$table}__compound-expansion-toggle__button--before--BorderColor);
|
|
1077
1034
|
border-inline-start-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth);
|
|
1078
1035
|
border-inline-end-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderRightWidth);
|
|
1079
1036
|
}
|
|
@@ -1095,11 +1052,6 @@
|
|
|
1095
1052
|
--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: var(--#{$table}__compound-expansion-toggle__button--after--border-width--base);
|
|
1096
1053
|
}
|
|
1097
1054
|
|
|
1098
|
-
&:first-child {
|
|
1099
|
-
--#{$table}__compound-expansion-toggle__button--before--Left: 0;
|
|
1100
|
-
--#{$table}__compound-expansion-toggle__button--after--Left: 0;
|
|
1101
|
-
}
|
|
1102
|
-
|
|
1103
1055
|
&.pf-m-expanded {
|
|
1104
1056
|
.#{$table}__button::before {
|
|
1105
1057
|
border-block-end: var(--#{$table}--BackgroundColor) solid var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
|
|
@@ -1122,36 +1074,17 @@
|
|
|
1122
1074
|
}
|
|
1123
1075
|
}
|
|
1124
1076
|
|
|
1077
|
+
// - Table column help action
|
|
1125
1078
|
.#{$table}__column-help-action {
|
|
1126
1079
|
margin-inline-start: var(--#{$table}__column-help--MarginLeft);
|
|
1127
|
-
transform: translateY(var(--#{$table}__column-help--TranslateY));
|
|
1128
|
-
|
|
1129
|
-
.#{$button} {
|
|
1130
|
-
--#{$button}--PaddingRight: var(--#{$table}__column-help--c-button--PaddingRight);
|
|
1131
|
-
--#{$button}--PaddingLeft: var(--#{$table}__column-help--c-button--PaddingLeft);
|
|
1132
|
-
|
|
1133
|
-
margin-block-start: var(--#{$table}__column-help--c-button--MarginTop);
|
|
1134
|
-
margin-block-end: var(--#{$table}__column-help--c-button--MarginBottom);
|
|
1135
|
-
font-size: inherit;
|
|
1136
|
-
line-height: 1;
|
|
1137
|
-
}
|
|
1138
1080
|
}
|
|
1139
1081
|
|
|
1140
1082
|
// Table sort
|
|
1141
1083
|
// ==================================================================
|
|
1142
1084
|
.#{$table}__sort {
|
|
1085
|
+
// - Table sort button
|
|
1086
|
+
// ==================================================================
|
|
1143
1087
|
.#{$table}__button {
|
|
1144
|
-
--#{$table}--cell--PaddingTop: var(--#{$table}__sort__button--PaddingTop);
|
|
1145
|
-
--#{$table}--cell--PaddingRight: var(--#{$table}__sort__button--PaddingRight);
|
|
1146
|
-
--#{$table}--cell--PaddingBottom: var(--#{$table}__sort__button--PaddingBottom);
|
|
1147
|
-
--#{$table}--cell--PaddingLeft: var(--#{$table}__sort__button--PaddingLeft);
|
|
1148
|
-
|
|
1149
|
-
display: flex;
|
|
1150
|
-
width: auto;
|
|
1151
|
-
margin-block-start: var(--#{$table}__sort__button--MarginTop);
|
|
1152
|
-
margin-block-end: var(--#{$table}__sort__button--MarginBottom);
|
|
1153
|
-
margin-inline-start: var(--#{$table}__sort__button--MarginLeft);
|
|
1154
|
-
|
|
1155
1088
|
&:hover {
|
|
1156
1089
|
--#{$table}__sort-indicator--Color: var(--#{$table}__sort__button--hover__sort-indicator--Color);
|
|
1157
1090
|
--#{$table}__sort__button__text--Color: var(--#{$table}__sort__button--hover__text--Color);
|
|
@@ -1196,17 +1129,15 @@
|
|
|
1196
1129
|
// Sort indicator
|
|
1197
1130
|
.#{$table}__sort-indicator {
|
|
1198
1131
|
grid-column: 2;
|
|
1199
|
-
margin-inline-start: var(--#{$table}__sort-indicator--MarginLeft);
|
|
1132
|
+
margin-inline-start: var(--#{$table}__sort-indicator--MarginLeft); // TODO: update this to gap
|
|
1200
1133
|
color: var(--#{$table}__sort-indicator--Color);
|
|
1134
|
+
color: var(--#{$table}__sort-indicator--FontSize);
|
|
1201
1135
|
pointer-events: none;
|
|
1202
1136
|
}
|
|
1203
1137
|
|
|
1204
1138
|
// Expandable row
|
|
1205
1139
|
// ==================================================================
|
|
1206
1140
|
.#{$table}__expandable-row {
|
|
1207
|
-
--#{$table}--cell--PaddingTop: 0;
|
|
1208
|
-
--#{$table}--cell--PaddingBottom: 0;
|
|
1209
|
-
|
|
1210
1141
|
position: relative;
|
|
1211
1142
|
border-block-end: 0 solid transparent;
|
|
1212
1143
|
box-shadow: 0 0 0 0 transparent;
|
|
@@ -1217,6 +1148,11 @@
|
|
|
1217
1148
|
}
|
|
1218
1149
|
|
|
1219
1150
|
// stylelint-disable
|
|
1151
|
+
> td,
|
|
1152
|
+
> th {
|
|
1153
|
+
padding-top: 0;
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1220
1156
|
td:where(.#{$table}__td),
|
|
1221
1157
|
th:where(.#{$table}__th) {
|
|
1222
1158
|
&.pf-m-no-padding {
|
|
@@ -1244,56 +1180,26 @@
|
|
|
1244
1180
|
box-shadow: var(--#{$table}__expandable-row--m-expanded--BoxShadow);
|
|
1245
1181
|
}
|
|
1246
1182
|
|
|
1247
|
-
|
|
1248
1183
|
&:not(.pf-m-expanded) {
|
|
1249
1184
|
display: none;
|
|
1250
1185
|
}
|
|
1251
|
-
}
|
|
1252
|
-
|
|
1253
|
-
// Nested table
|
|
1254
|
-
// ==================================================================
|
|
1255
|
-
.#{$table} .#{$table} {
|
|
1256
|
-
tr:where(.#{$table}__tr) > * {
|
|
1257
|
-
// First child padding left
|
|
1258
|
-
&:first-child {
|
|
1259
|
-
--#{$table}--cell--PaddingLeft: var(--#{$table}--nested--first-last-child--PaddingLeft);
|
|
1260
|
-
}
|
|
1261
1186
|
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
}
|
|
1187
|
+
// Table table
|
|
1188
|
+
tr:last-child {
|
|
1189
|
+
border-block-end: 0;
|
|
1266
1190
|
}
|
|
1267
1191
|
}
|
|
1268
1192
|
|
|
1269
1193
|
// Compact table
|
|
1270
1194
|
// ==================================================================
|
|
1271
1195
|
.#{$table}.pf-m-compact {
|
|
1272
|
-
--#{$table}--cell--FontSize: var(--#{$table}--m-compact--FontSize);
|
|
1273
1196
|
--#{$table}--cell--PaddingTop: var(--#{$table}--m-compact--cell--PaddingTop);
|
|
1274
1197
|
--#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact--cell--PaddingBottom);
|
|
1275
|
-
--#{$table}--cell--PaddingRight: var(--#{$table}--m-compact--cell--PaddingLeft);
|
|
1276
1198
|
|
|
1277
1199
|
tr:where(.#{$table}__tr) {
|
|
1278
|
-
--#{$table}--cell--PaddingLeft: var(--#{$table}--m-compact--cell--PaddingLeft);
|
|
1279
|
-
--#{$table}--cell--PaddingRight: var(--#{$table}--m-compact--cell--PaddingRight);
|
|
1280
|
-
|
|
1281
1200
|
&:not(.#{$table}__expandable-row) {
|
|
1282
|
-
--#{$table}--cell--FontSize: var(--#{$table}--m-compact--FontSize);
|
|
1283
1201
|
--#{$table}--cell--PaddingTop: var(--#{$table}--m-compact--cell--PaddingTop);
|
|
1284
1202
|
--#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact--cell--PaddingBottom);
|
|
1285
|
-
|
|
1286
|
-
// stylelint-disable
|
|
1287
|
-
> * {
|
|
1288
|
-
&:first-child {
|
|
1289
|
-
--#{$table}--cell--PaddingLeft: var(--#{$table}--m-compact--cell--first-last-child--PaddingLeft);
|
|
1290
|
-
}
|
|
1291
|
-
|
|
1292
|
-
&:last-child {
|
|
1293
|
-
--#{$table}--cell--PaddingRight: var(--#{$table}--m-compact--cell--first-last-child--PaddingRight);
|
|
1294
|
-
}
|
|
1295
|
-
}
|
|
1296
|
-
// stylelint-enable
|
|
1297
1203
|
}
|
|
1298
1204
|
}
|
|
1299
1205
|
|
|
@@ -1306,15 +1212,12 @@
|
|
|
1306
1212
|
}
|
|
1307
1213
|
}
|
|
1308
1214
|
|
|
1309
|
-
.#{$table}__action
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
.#{$table}__toggle {
|
|
1316
|
-
--#{$table}--cell--PaddingTop: var(--#{$table}--m-compact__toggle--PaddingTop);
|
|
1317
|
-
--#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact__toggle--PaddingBottom);
|
|
1215
|
+
.#{$table}__action,
|
|
1216
|
+
.#{$table}__favorite,
|
|
1217
|
+
.#{$table}__toggle,
|
|
1218
|
+
.#{$table}__draggable {
|
|
1219
|
+
--#{$table}--cell--PaddingTop: var(--#{$table}--m-compact__action--PaddingTop);
|
|
1220
|
+
--#{$table}--cell--PaddingBottom: var(--#{$table}--m-compact__action--PaddingBottom);
|
|
1318
1221
|
}
|
|
1319
1222
|
|
|
1320
1223
|
.#{$table}__icon {
|
|
@@ -1322,26 +1225,10 @@
|
|
|
1322
1225
|
min-width: 0;
|
|
1323
1226
|
text-align: center;
|
|
1324
1227
|
}
|
|
1325
|
-
|
|
1326
|
-
// nested tables
|
|
1327
|
-
.#{$table} & tr:where(.#{$table}__tr) > * {
|
|
1328
|
-
&:first-child {
|
|
1329
|
-
--#{$table}--cell--PaddingLeft: var(--#{$table}--nested--first-last-child--PaddingLeft);
|
|
1330
|
-
}
|
|
1331
|
-
|
|
1332
|
-
&:last-child {
|
|
1333
|
-
--#{$table}--cell--PaddingRight: var(--#{$table}--nested--first-last-child--PaddingRight);
|
|
1334
|
-
}
|
|
1335
|
-
}
|
|
1336
|
-
|
|
1337
|
-
.#{$table}__expandable-row-content {
|
|
1338
|
-
--#{$table}__expandable-row-content--PaddingTop: var(--#{$table}--m-compact__expandable-row-content--PaddingTop);
|
|
1339
|
-
--#{$table}__expandable-row-content--PaddingBottom: var(--#{$table}--m-compact__expandable-row-content--PaddingBottom);
|
|
1340
|
-
}
|
|
1341
1228
|
}
|
|
1342
1229
|
|
|
1343
|
-
// Icon inline
|
|
1344
1230
|
// replace this when inline text with icon is in place
|
|
1231
|
+
// Icon inline
|
|
1345
1232
|
.#{$table}__icon-inline {
|
|
1346
1233
|
display: flex;
|
|
1347
1234
|
align-items: center;
|
|
@@ -1411,7 +1298,7 @@
|
|
|
1411
1298
|
// stylelint-enable
|
|
1412
1299
|
|
|
1413
1300
|
// stylelint-disable no-invalid-position-at-import-rule
|
|
1414
|
-
@import
|
|
1301
|
+
@import 'themes/dark/table';
|
|
1415
1302
|
|
|
1416
1303
|
@include pf-v5-theme-dark {
|
|
1417
1304
|
@include pf-v5-theme-dark-table;
|