codecheck

1
// core
2
.p-treetable {
3
    position: relative;
4
}
5

6
.p-treetable table {
7
    border-collapse: collapse;
8
    width: 100%;
9
    table-layout: fixed;
10
}
11

12
.p-treetable .p-sortable-column {
13
    cursor: pointer;
14
    user-select: none;
15
}
16

17
.p-treetable-responsive-scroll > .p-treetable-wrapper {
18
    overflow-x: auto;
19
}
20

21
.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
22
.p-treetable-auto-layout > .p-treetable-wrapper > table {
23
    table-layout: auto;
24
}
25

26
.p-treetable-hoverable-rows .p-treetable-tbody > tr {
27
    cursor: pointer;
28
}
29

30
.p-treetable-toggler {
31
    cursor: pointer;
32
    user-select: none;
33
    display: inline-flex;
34
    align-items: center;
35
    justify-content: center;
36
    vertical-align: middle;
37
    overflow: hidden;
38
    position: relative;
39
}
40

41
.p-treetable-toggler + .p-checkbox {
42
    vertical-align: middle;
43
}
44

45
.p-treetable-toggler + .p-checkbox + span {
46
    vertical-align: middle;
47
}
48

49
/* Resizable */
50
.p-treetable-resizable > .p-treetable-wrapper {
51
    overflow-x: auto;
52
}
53

54
.p-treetable-resizable .p-treetable-thead > tr > th,
55
.p-treetable-resizable .p-treetable-tfoot > tr > td,
56
.p-treetable-resizable .p-treetable-tbody > tr > td {
57
    overflow: hidden;
58
}
59

60
.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
61
    background-clip: padding-box;
62
    position: relative;
63
}
64

65
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
66
    display: none;
67
}
68

69
.p-treetable .p-column-resizer {
70
    display: block;
71
    position: absolute;
72
    top: 0;
73
    right: 0;
74
    margin: 0;
75
    width: 0.5rem;
76
    height: 100%;
77
    padding: 0px;
78
    cursor: col-resize;
79
    border: 1px solid transparent;
80
}
81

82
.p-treetable .p-column-resizer-helper {
83
    width: 1px;
84
    position: absolute;
85
    z-index: 10;
86
    display: none;
87
}
88

89
.p-treetable .p-treetable-loading-overlay {
90
    position: absolute;
91
    display: flex;
92
    align-items: center;
93
    justify-content: center;
94
    z-index: 2;
95
}
96

97
/* Scrollable */
98
.p-treetable-scrollable .p-treetable-wrapper {
99
    position: relative;
100
    overflow: auto;
101
}
102

103
.p-treetable-scrollable .p-treetable-table {
104
    display: block;
105
}
106

107
.p-treetable-scrollable .p-treetable-thead,
108
.p-treetable-scrollable .p-treetable-tbody,
109
.p-treetable-scrollable .p-treetable-tfoot {
110
    display: block;
111
}
112

113
.p-treetable-scrollable .p-treetable-thead > tr,
114
.p-treetable-scrollable .p-treetable-tbody > tr,
115
.p-treetable-scrollable .p-treetable-tfoot > tr {
116
    display: flex;
117
    flex-wrap: nowrap;
118
    width: 100%;
119
}
120

121
.p-treetable-scrollable .p-treetable-thead > tr > th,
122
.p-treetable-scrollable .p-treetable-tbody > tr > td,
123
.p-treetable-scrollable .p-treetable-tfoot > tr > td {
124
    display: flex;
125
    flex: 1 1 0;
126
    align-items: center;
127
}
128

129
.p-treetable-scrollable .p-treetable-thead {
130
    position: sticky;
131
    top: 0;
132
    z-index: 1;
133
}
134

135
.p-treetable-scrollable .p-treetable-tfoot {
136
    position: sticky;
137
    bottom: 0;
138
    z-index: 1;
139
}
140

141
.p-treetable-scrollable .p-frozen-column {
142
    position: sticky;
143
    background: inherit;
144
}
145

146
.p-treetable-scrollable th.p-frozen-column {
147
    z-index: 1;
148
}
149

150
.p-treetable-scrollable-both .p-treetable-thead > tr > th,
151
.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
152
.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
153
.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
154
.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
155
    flex: 0 0 auto;
156
}
157

158
.p-treetable-flex-scrollable {
159
    display: flex;
160
    flex-direction: column;
161
    height: 100%;
162
}
163

164
.p-treetable-flex-scrollable .p-treetable-wrapper {
165
    display: flex;
166
    flex-direction: column;
167
    flex: 1;
168
    height: 100%;
169
}
170

171
// theme
172
.p-treetable {
173
    .p-paginator-top {
174
        border-width: $tableTopPaginatorBorderWidth;
175
        border-radius: 0;
176
    }
177

178
    .p-paginator-bottom {
179
        border-width: $tableBottomPaginatorBorderWidth;
180
        border-radius: 0;
181
    }
182

183
    .p-treetable-header {
184
        background: $tableHeaderBg;
185
        color: $tableHeaderTextColor;
186
        border: $tableHeaderBorder;
187
        border-width: $tableHeaderBorderWidth;
188
        padding: $tableHeaderPadding;
189
        font-weight: $tableHeaderFontWeight;
190
    }
191

192
    .p-treetable-footer {
193
        background: $tableFooterBg;
194
        color: $tableFooterTextColor;
195
        border: $tableFooterBorder;
196
        border-width: $tableFooterBorderWidth;
197
        padding: $tableFooterPadding;
198
        font-weight: $tableFooterFontWeight;
199
    }
200

201
    .p-treetable-thead > tr > th {
202
        text-align: $tableCellContentAlignment;
203
        padding: $tableHeaderCellPadding;
204
        border: $tableHeaderCellBorder;
205
        border-width: $tableHeaderCellBorderWidth;
206
        font-weight: $tableHeaderCellFontWeight;
207
        color: $tableHeaderCellTextColor;
208
        background: $tableHeaderCellBg;
209
        transition: $listItemTransition;
210
    }
211

212
    .p-treetable-tfoot > tr > td {
213
        text-align: $tableCellContentAlignment;
214
        padding: $tableFooterCellPadding;
215
        border: $tableFooterCellBorder;
216
        border-width: $tableFooterCellBorderWidth;
217
        font-weight: $tableFooterCellFontWeight;
218
        color: $tableFooterCellTextColor;
219
        background: $tableFooterCellBg;
220
    }
221

222
    .p-sortable-column {
223
        outline-color: $focusOutlineColor;
224

225
        .p-sortable-column-icon {
226
            color: $tableHeaderCellIconColor;
227
            margin-left: $inlineSpacing;
228
        }
229

230
        .p-sortable-column-badge {
231
            border-radius: 50%;
232
            height: $tableSortableColumnBadgeSize;
233
            min-width: $tableSortableColumnBadgeSize;
234
            line-height: $tableSortableColumnBadgeSize;
235
            color: $highlightTextColor;
236
            background: $highlightBg;
237
            margin-left: $inlineSpacing;
238
        }
239

240
        &:not(.p-highlight):hover {
241
            background: $tableHeaderCellHoverBg;
242
            color: $tableHeaderCellTextHoverColor;
243

244
            .p-sortable-column-icon {
245
                color: $tableHeaderCellIconHoverColor;
246
            }
247
        }
248

249
        &.p-highlight {
250
            background: $tableHeaderCellHighlightBg;
251
            color: $tableHeaderCellHighlightTextColor;
252

253
            .p-sortable-column-icon {
254
                color: $tableHeaderCellHighlightTextColor;
255
            }
256
        }
257
    }
258

259
    .p-treetable-tbody {
260
        > tr {
261
            background: $tableBodyRowBg;
262
            color: $tableBodyRowTextColor;
263
            transition: $listItemTransition;
264

265
            > td {
266
                text-align: $tableCellContentAlignment;
267
                border: $tableBodyCellBorder;
268
                border-width: $tableBodyCellBorderWidth;
269
                padding: $tableBodyCellPadding;
270

271
                .p-treetable-toggler {
272
                    @include action-icon();
273
                    margin-right: $inlineSpacing;
274
                    
275
                    & + .p-checkbox {
276
                        margin-right: $inlineSpacing;
277
                        
278
                        &.p-indeterminate {
279
                            .p-checkbox-icon {
280
                                color: $textColor;
281
                            }
282
                        }
283
                    }
284
                }
285
            }
286

287
            &:focus-visible {
288
                outline: 0.15rem solid $focusOutlineColor;
289
                outline-offset: -0.15rem;
290
            }
291

292
            &.p-highlight {
293
                background: $highlightBg;
294
                color: $highlightTextColor;
295

296
                .p-treetable-toggler {
297
                    color: $highlightTextColor;
298

299
                    &:hover {
300
                        color: $highlightTextColor;
301
                    }
302
                    
303
                }
304
            }
305
        }
306
    }
307

308
    &.p-treetable-hoverable-rows {
309
        .p-treetable-tbody > tr:not(.p-highlight):hover {
310
            background: $tableBodyRowHoverBg;
311
            color: $tableBodyRowTextHoverColor;
312

313
            .p-treetable-toggler {
314
                color: $tableBodyRowTextHoverColor;
315
            }
316
        }
317
    }
318

319
    .p-column-resizer-helper {
320
        background: $tableResizerHelperBg;
321
    }
322

323
    .p-treetable-scrollable-header,
324
    .p-treetable-scrollable-footer {
325
        background: $panelHeaderBg;
326
    }
327

328
    .p-treetable-loading-icon {
329
        font-size: $loadingIconFontSize;
330

331
        &.p-icon {
332
            width:  $loadingIconFontSize;
333
            height: $loadingIconFontSize;
334
        }
335
    }
336

337
    &.p-treetable-gridlines {
338
        .p-datatable-header {
339
            border-width: 1px 1px 0 1px;
340
        }
341

342
        .p-treetable-footer {
343
            border-width: 0 1px 1px 1px;
344
        }
345

346
        .p-treetable-top {
347
            border-width: 0 1px 0 1px;
348
        }
349

350
        .p-treetable-bottom {
351
            border-width: 0 1px 1px 1px;
352
        }
353

354
        .p-treetable-thead {
355
            > tr {
356
                > th {
357
                    border-width: 1px;
358
                }
359
            }
360
        }
361

362
        .p-treetable-tbody {
363
            > tr {
364
                > td {
365
                    border-width: 1px;
366
                }
367
            }
368
        }
369

370
        .p-treetable-tfoot {
371
            > tr {
372
                > td {
373
                    border-width: 1px;
374
                }
375
            }
376
        }
377
    }
378

379
    &.p-treetable-sm {
380
        .p-treetable-header {
381
            @include scaledPadding($tableHeaderPadding, $scaleSM);
382
        }
383

384
        .p-treetable-thead > tr > th {
385
            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
386
        }
387

388
        .p-treetable-tbody > tr > td {
389
            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
390
        }
391

392
        .p-treetable-tfoot > tr > td {
393
            @include scaledPadding($tableFooterPadding, $tableScaleSM);
394
        }
395

396
        .p-treetable-footer {
397
            @include scaledPadding($tableFooterPadding, $tableScaleSM);
398
        }
399
    }
400

401
    &.p-treetable-lg {
402
        .p-treetable-header {
403
            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
404
        }
405

406
        .p-treetable-thead > tr > th {
407
            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
408
        }
409

410
        .p-treetable-tbody > tr > td {
411
            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
412
        }
413

414
        .p-treetable-tfoot > tr > td {
415
            @include scaledPadding($tableFooterPadding, $tableScaleLG);
416
        }
417

418
        .p-treetable-footer {
419
            @include scaledPadding($tableFooterPadding, $tableScaleLG);
420
        }
421
    }
422
}
423