codecheck

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

6
.p-datatable-table {
7
    border-spacing: 0px;
8
    width: 100%;
9
}
10

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

16
.p-datatable .p-sortable-column .p-column-title,
17
.p-datatable .p-sortable-column .p-sortable-column-icon,
18
.p-datatable .p-sortable-column .p-sortable-column-badge {
19
    vertical-align: middle;
20
}
21

22
.p-datatable .p-sortable-column .p-sortable-column-badge {
23
    display: inline-flex;
24
    align-items: center;
25
    justify-content: center;
26
}
27

28
.p-datatable-hoverable-rows .p-selectable-row {
29
    cursor: pointer;
30
}
31

32
/* Scrollable */
33
.p-datatable-scrollable > .p-datatable-wrapper {
34
    position: relative;
35
}
36

37
.p-datatable-scrollable-table > .p-datatable-thead {
38
    top: 0;
39
    z-index: 1;
40
}
41

42
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
43
    position: sticky;
44
    z-index: 1;
45
}
46

47
.p-datatable-scrollable-table > .p-datatable-tfoot {
48
    bottom: 0;
49
    z-index: 1;
50
}
51

52
.p-datatable-scrollable .p-frozen-column {
53
    position: sticky;
54
    background: inherit;
55
}
56

57
.p-datatable-scrollable th.p-frozen-column {
58
    z-index: 1;
59
}
60

61
.p-datatable-flex-scrollable {
62
    display: flex;
63
    flex-direction: column;
64
    height: 100%;
65
}
66

67
.p-datatable-flex-scrollable > .p-datatable-wrapper {
68
    display: flex;
69
    flex-direction: column;
70
    flex: 1;
71
    height: 100%;
72
}
73

74
.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
75
    position: sticky;
76
    z-index: 1;
77
}
78

79
/* Resizable */
80
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
81
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
82
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
83
    overflow: hidden;
84
    white-space: nowrap;
85
}
86

87
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
88
    background-clip: padding-box;
89
    position: relative;
90
}
91

92
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
93
    display: none;
94
}
95

96
.p-datatable .p-column-resizer {
97
    display: block;
98
    position: absolute;
99
    top: 0;
100
    right: 0;
101
    margin: 0;
102
    width: 0.5rem;
103
    height: 100%;
104
    padding: 0px;
105
    cursor: col-resize;
106
    border: 1px solid transparent;
107
}
108

109
.p-datatable .p-column-header-content {
110
    display: flex;
111
    align-items: center;
112
}
113

114
.p-datatable .p-column-resizer-helper {
115
    width: 1px;
116
    position: absolute;
117
    z-index: 10;
118
    display: none;
119
}
120

121
.p-datatable .p-row-editor-init,
122
.p-datatable .p-row-editor-save,
123
.p-datatable .p-row-editor-cancel {
124
    display: inline-flex;
125
    align-items: center;
126
    justify-content: center;
127
    overflow: hidden;
128
    position: relative;
129
}
130

131
/* Expand */
132
.p-datatable .p-row-toggler {
133
    display: inline-flex;
134
    align-items: center;
135
    justify-content: center;
136
    overflow: hidden;
137
    position: relative;
138
}
139

140
/* Reorder */
141
.p-datatable-reorder-indicator-up,
142
.p-datatable-reorder-indicator-down {
143
    position: absolute;
144
    display: none;
145
}
146

147
.p-reorderable-column,
148
.p-datatable-reorderablerow-handle {
149
    cursor: move;
150
}
151

152
/* Loader */
153
.p-datatable .p-datatable-loading-overlay {
154
    position: absolute;
155
    display: flex;
156
    align-items: center;
157
    justify-content: center;
158
    z-index: 2;
159
}
160

161
/* Filter */
162
.p-column-filter-row {
163
    display: flex;
164
    align-items: center;
165
    width: 100%;
166
}
167

168
.p-column-filter-menu {
169
    display: inline-flex;
170
    margin-left: auto;
171
}
172

173
.p-column-filter-row .p-column-filter-element {
174
    flex: 1 1 auto;
175
    width: 1%;
176
}
177

178
.p-column-filter-menu-button,
179
.p-column-filter-clear-button {
180
    display: inline-flex;
181
    justify-content: center;
182
    align-items: center;
183
    cursor: pointer;
184
    text-decoration: none;
185
    overflow: hidden;
186
    position: relative;
187
}
188

189
.p-column-filter-row-items {
190
    margin: 0;
191
    padding: 0;
192
    list-style: none;
193
}
194

195
.p-column-filter-row-item {
196
    cursor: pointer;
197
}
198

199
.p-column-filter-add-button,
200
.p-column-filter-remove-button {
201
    justify-content: center;
202
}
203

204
.p-column-filter-add-button .p-button-label,
205
.p-column-filter-remove-button .p-button-label {
206
    flex-grow: 0;
207
}
208

209
.p-column-filter-buttonbar {
210
    display: flex;
211
    align-items: center;
212
    justify-content: space-between;
213
}
214

215
.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
216
    width: auto;
217
}
218

219
/* Responsive */
220
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
221
    display: none;
222
}
223

224
/* VirtualScroller */
225
.p-datatable-virtualscroller-spacer {
226
    display: flex;
227
}
228

229
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
230
    transform: none !important;
231
    min-height: 0;
232
    position: sticky;
233
    top: 0;
234
    left: 0;
235
}
236

237
// theme
238
.p-datatable {
239
    .p-paginator-top {
240
        border-width: $tableTopPaginatorBorderWidth;
241
        border-radius: 0;
242
    }
243

244
    .p-paginator-bottom {
245
        border-width: $tableBottomPaginatorBorderWidth;
246
        border-radius: 0;
247
    }
248

249
    .p-datatable-header {
250
        background: $tableHeaderBg;
251
        color: $tableHeaderTextColor;
252
        border: $tableHeaderBorder;
253
        border-width: $tableHeaderBorderWidth;
254
        padding: $tableHeaderPadding;
255
        font-weight: $tableHeaderFontWeight;
256
    }
257

258
    .p-datatable-footer {
259
        background: $tableFooterBg;
260
        color: $tableFooterTextColor;
261
        border: $tableFooterBorder;
262
        border-width: $tableFooterBorderWidth;
263
        padding: $tableFooterPadding;
264
        font-weight: $tableFooterFontWeight;
265
    }
266

267
    .p-datatable-thead > tr > th {
268
        text-align: $tableCellContentAlignment;
269
        padding: $tableHeaderCellPadding;
270
        border: $tableHeaderCellBorder;
271
        border-width: $tableHeaderCellBorderWidth;
272
        font-weight: $tableHeaderCellFontWeight;
273
        color: $tableHeaderCellTextColor;
274
        background: $tableHeaderCellBg;
275
        transition: $listItemTransition;
276
    }
277

278
    .p-datatable-tfoot > tr > td {
279
        text-align: $tableCellContentAlignment;
280
        padding: $tableFooterCellPadding;
281
        border: $tableFooterCellBorder;
282
        border-width: $tableFooterCellBorderWidth;
283
        font-weight: $tableFooterCellFontWeight;
284
        color: $tableFooterCellTextColor;
285
        background: $tableFooterCellBg;
286
    }
287

288
    .p-sortable-column {
289
        .p-sortable-column-icon {
290
            color: $tableHeaderCellIconColor;
291
            margin-left: $inlineSpacing;
292
        }
293

294
        .p-sortable-column-badge {
295
            border-radius: 50%;
296
            height: $tableSortableColumnBadgeSize;
297
            min-width: $tableSortableColumnBadgeSize;
298
            line-height: $tableSortableColumnBadgeSize;
299
            color: $highlightTextColor;
300
            background: $highlightBg;
301
            margin-left: $inlineSpacing;
302
        }
303

304
        &:not(.p-highlight):hover {
305
            background: $tableHeaderCellHoverBg;
306
            color: $tableHeaderCellTextHoverColor;
307

308
            .p-sortable-column-icon {
309
                color: $tableHeaderCellIconHoverColor;
310
            }
311
        }
312

313
        &.p-highlight {
314
            background: $tableHeaderCellHighlightBg;
315
            color: $tableHeaderCellHighlightTextColor;
316

317
            .p-sortable-column-icon {
318
                color: $tableHeaderCellHighlightTextColor;
319
            }
320

321
            &:hover {
322
                background: $tableHeaderCellHighlightHoverBg;
323
                color: $tableHeaderCellHighlightTextColor;
324
    
325
                .p-sortable-column-icon {
326
                    color: $tableHeaderCellHighlightTextColor;
327
                }
328
            }
329
        }
330

331
        &:focus-visible {
332
            box-shadow: $inputListItemFocusShadow;
333
            outline: 0 none;
334
        }
335
    }
336

337
    .p-datatable-tbody {
338
        > tr {
339
            background: $tableBodyRowBg;
340
            color: $tableBodyRowTextColor;
341
            transition: $listItemTransition;
342

343
            > td {
344
                text-align: $tableCellContentAlignment;
345
                border: $tableBodyCellBorder;
346
                border-width: $tableBodyCellBorderWidth;
347
                padding: $tableBodyCellPadding;
348

349
                .p-row-toggler,
350
                .p-row-editor-init,
351
                .p-row-editor-save,
352
                .p-row-editor-cancel {
353
                    @include action-icon();
354
                }
355

356
                .p-row-editor-save {
357
                    margin-right: $inlineSpacing;
358
                }
359

360
                > .p-column-title {
361
                    font-weight: $tableHeaderCellFontWeight;
362
                }
363
            }
364

365
            &:focus-visible {
366
                outline: 0.15rem solid $focusOutlineColor;
367
                outline-offset: -0.15rem;
368
            }
369

370
            &.p-highlight {
371
                background: $highlightBg;
372
                color: $highlightTextColor;
373
            }
374

375
            &.p-highlight-contextmenu {
376
                outline: 0.15rem solid $focusOutlineColor;
377
                outline-offset: -0.15rem;
378
            }
379

380
            &.p-datatable-dragpoint-top > td {
381
                box-shadow: inset 0 2px 0 0 $highlightBg;
382
            }
383

384
            &.p-datatable-dragpoint-bottom > td {
385
                box-shadow: inset 0 -2px 0 0 $highlightBg;
386
            }
387
        }
388
    }
389

390
    &.p-datatable-hoverable-rows {
391
        .p-datatable-tbody > tr:not(.p-highlight):hover {
392
            background: $tableBodyRowHoverBg;
393
            color: $tableBodyRowTextHoverColor;
394
        }
395
    }
396

397
    .p-column-resizer-helper {
398
        background: $tableResizerHelperBg;
399
    }
400

401
    &.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
402
    &.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
403
        > .p-datatable-thead,
404
        > .p-datatable-tfoot {
405
            background-color: $tableHeaderCellBg;
406
        }
407
    }
408

409
    .p-datatable-loading-icon {
410
        font-size: $loadingIconFontSize;
411

412
        &.p-icon {
413
            width:  $loadingIconFontSize;
414
            height: $loadingIconFontSize;
415
        }
416
    }
417

418
    &.p-datatable-gridlines {
419
        .p-datatable-header {
420
            border-width: 1px 1px 0 1px;
421
        }
422

423
        .p-datatable-footer {
424
            border-width: 0 1px 1px 1px;
425
        }
426

427
        .p-paginator-top {
428
            border-width: 0 1px 0 1px;
429
        }
430

431
        .p-paginator-bottom {
432
            border-width: 0 1px 1px 1px;
433
        }
434

435
        .p-datatable-thead {
436
            > tr {
437
                > th {
438
                    border-width: 1px 0 1px 1px;
439

440
                    &:last-child {
441
                        border-width: 1px;
442
                    }
443
                }
444
            }
445
        }
446

447
        .p-datatable-tbody {
448
            > tr {
449
                > td {
450
                    border-width: 1px 0 0 1px;
451

452
                    &:last-child {
453
                        border-width: 1px 1px 0 1px;
454
                    }
455
                }
456

457
                &:last-child {
458
                    > td {
459
                        border-width: 1px 0 1px 1px;
460

461
                        &:last-child {
462
                            border-width: 1px;
463
                        }
464
                    }
465
                }
466
            }
467
        }
468

469
        .p-datatable-tfoot {
470
            > tr {
471
                > td {
472
                    border-width: 1px 0 1px 1px;
473

474
                    &:last-child {
475
                        border-width: 1px 1px 1px 1px;
476
                    }
477
                }
478
            }
479
        }
480

481
        .p-datatable-thead + .p-datatable-tfoot {
482
            > tr {
483
                > td {
484
                    border-width: 0 0 1px 1px;
485

486
                    &:last-child {
487
                        border-width: 0 1px 1px 1px;
488
                    }
489
                }
490
            }
491
        }
492

493
        &:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
494
            > tr {
495
                > td {
496
                    border-width: 0 0 1px 1px;
497

498
                    &:last-child {
499
                        border-width: 0 1px 1px 1px;
500
                    }
501
                }
502
            }
503
        }
504

505
        &:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
506
            > tr {
507
                &:last-child {
508
                    > td {
509
                        border-width: 0 0 0 1px;
510

511
                        &:last-child {
512
                            border-width: 0 1px 0 1px;
513
                        }
514
                    }
515
                }
516
            }
517
        }
518
    }
519

520
    &.p-datatable-striped {
521
        .p-datatable-tbody {
522
            > tr.p-row-odd {
523
                background: $tableBodyRowEvenBg;
524
    
525
                &.p-highlight {
526
                    background: $highlightBg;
527
                    color: $highlightTextColor;
528
    
529
                    .p-row-toggler {
530
                        color: $highlightTextColor;
531
    
532
                        &:hover {
533
                            color: $highlightTextColor;
534
                        }
535
                    }
536
                }
537
            }
538
        }
539
    }
540

541
    &.p-datatable-sm {
542
        .p-datatable-header {
543
            @include scaledPadding($tableHeaderPadding, $tableScaleSM);
544
        }
545

546
        .p-datatable-thead > tr > th {
547
            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
548
        }
549

550
        .p-datatable-tbody > tr > td {
551
            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
552
        }
553

554
        .p-datatable-tfoot > tr > td {
555
            @include scaledPadding($tableFooterPadding, $tableScaleSM);
556
        }
557

558
        .p-datatable-footer {
559
            @include scaledPadding($tableFooterPadding, $tableScaleSM);
560
        }
561
    }
562

563
    &.p-datatable-lg {
564
        .p-datatable-header {
565
            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
566
        }
567

568
        .p-datatable-thead > tr > th {
569
            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
570
        }
571

572
        .p-datatable-tbody > tr > td {
573
            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
574
        }
575

576
        .p-datatable-tfoot > tr > td {
577
            @include scaledPadding($tableFooterPadding, $tableScaleLG);
578
        }
579

580
        .p-datatable-footer {
581
            @include scaledPadding($tableFooterPadding, $tableScaleLG);
582
        }
583
    }
584
}
585