1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
9 | @import '../../globals/scss/vars';
|
10 | @import '../../globals/scss/helper-mixins';
|
11 | @import 'mixins';
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | @mixin data-table-core {
|
17 |
|
18 |
|
19 |
|
20 | .#{$prefix}--data-table-container {
|
21 |
|
22 | padding-top: $spacing-01;
|
23 | }
|
24 |
|
25 | .#{$prefix}--data-table-content {
|
26 | overflow-x: auto;
|
27 | }
|
28 |
|
29 |
|
30 |
|
31 |
|
32 | .#{$prefix}--data-table-header {
|
33 | padding: $spacing-05 0 $spacing-06 $spacing-05;
|
34 | background: $ui-01;
|
35 | }
|
36 |
|
37 | .#{$prefix}--data-table-header__title {
|
38 | @include type-style('productive-heading-03');
|
39 |
|
40 | color: $text-01;
|
41 | }
|
42 |
|
43 | .#{$prefix}--data-table-header__description {
|
44 | @include type-style('body-short-01');
|
45 |
|
46 | color: $text-02;
|
47 | }
|
48 |
|
49 |
|
50 |
|
51 |
|
52 | .#{$prefix}--data-table {
|
53 | width: 100%;
|
54 | border-collapse: collapse;
|
55 | border-spacing: 0;
|
56 | }
|
57 |
|
58 | .#{$prefix}--data-table thead {
|
59 | @include type-style('productive-heading-01');
|
60 |
|
61 | background-color: $ui-03;
|
62 | }
|
63 |
|
64 | .#{$prefix}--data-table tbody {
|
65 | @include type-style('body-short-01');
|
66 |
|
67 | width: 100%;
|
68 | background-color: $ui-01;
|
69 | }
|
70 |
|
71 | .#{$prefix}--data-table tr {
|
72 | width: 100%;
|
73 | height: $layout-04;
|
74 | border: none;
|
75 | }
|
76 |
|
77 | .#{$prefix}--data-table tbody tr,
|
78 | .#{$prefix}--data-table tbody tr td,
|
79 | .#{$prefix}--data-table tbody tr th {
|
80 | transition: background-color $duration--fast-01 motion(entrance, productive);
|
81 | }
|
82 |
|
83 | .#{$prefix}--data-table tbody tr:hover {
|
84 | background: $hover-field;
|
85 | }
|
86 |
|
87 | .#{$prefix}--data-table tbody tr:hover td,
|
88 | .#{$prefix}--data-table tbody tr:hover th {
|
89 | color: $text-01;
|
90 | background: $hover-field;
|
91 | border-top: 1px solid $hover-field;
|
92 | border-bottom: 1px solid $hover-field;
|
93 | }
|
94 |
|
95 | .#{$prefix}--data-table th,
|
96 | .#{$prefix}--data-table td {
|
97 | text-align: left;
|
98 | vertical-align: middle;
|
99 | }
|
100 |
|
101 | .#{$prefix}--data-table td {
|
102 | padding-right: $spacing-05;
|
103 | padding-left: $spacing-05;
|
104 | }
|
105 |
|
106 | .#{$prefix}--data-table th {
|
107 | color: $text-01;
|
108 | background-color: $ui-03;
|
109 | }
|
110 |
|
111 | .#{$prefix}--data-table th:last-of-type {
|
112 |
|
113 | position: static;
|
114 | width: auto;
|
115 | }
|
116 |
|
117 | .#{$prefix}--data-table .#{$prefix}--table-header-label {
|
118 | padding-right: $spacing-05;
|
119 | padding-left: $spacing-05;
|
120 | text-align: left;
|
121 | }
|
122 |
|
123 | .#{$prefix}--data-table td,
|
124 | .#{$prefix}--data-table tbody th {
|
125 | padding-right: $spacing-05;
|
126 | padding-left: $spacing-05;
|
127 | color: $text-02;
|
128 | background: $ui-01;
|
129 | border-top: 1px solid $ui-01;
|
130 | border-bottom: 1px solid $ui-03;
|
131 |
|
132 | + td:first-of-type {
|
133 | padding-left: $spacing-04;
|
134 | }
|
135 | }
|
136 |
|
137 | @supports (-moz-appearance: none) {
|
138 | .#{$prefix}--data-table td {
|
139 |
|
140 | background-clip: padding-box;
|
141 | }
|
142 | }
|
143 |
|
144 |
|
145 | .#{$prefix}--data-table
|
146 | td.#{$prefix}--table-column-menu
|
147 | .#{$prefix}--overflow-menu[aria-expanded='false']:focus {
|
148 | @include focus-outline('outline');
|
149 | }
|
150 |
|
151 | .#{$prefix}--data-table
|
152 | td.#{$prefix}--table-column-menu
|
153 | .#{$prefix}--overflow-menu[aria-expanded='true']:focus {
|
154 | outline: none;
|
155 | }
|
156 |
|
157 | @media screen and (hover: hover),
|
158 | (-ms-high-contrast: active),
|
159 | (-ms-high-contrast: none) {
|
160 | .#{$prefix}--data-table
|
161 | td.#{$prefix}--table-column-menu
|
162 | .#{$prefix}--overflow-menu
|
163 | .#{$prefix}--overflow-menu__icon {
|
164 | opacity: 0;
|
165 | }
|
166 | }
|
167 |
|
168 | .#{$prefix}--data-table
|
169 | td.#{$prefix}--table-column-menu
|
170 | .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open
|
171 | .#{$prefix}--overflow-menu__icon {
|
172 | opacity: 1;
|
173 | }
|
174 |
|
175 | .#{$prefix}--data-table.#{$prefix}--data-table--visible-overflow-menu
|
176 | td.#{$prefix}--table-column-menu
|
177 | .#{$prefix}--overflow-menu
|
178 | .#{$prefix}--overflow-menu__icon,
|
179 | .#{$prefix}--data-table
|
180 | td.#{$prefix}--table-column-menu
|
181 | .#{$prefix}--overflow-menu:hover
|
182 | .#{$prefix}--overflow-menu__icon,
|
183 | .#{$prefix}--data-table
|
184 | td.#{$prefix}--table-column-menu
|
185 | .#{$prefix}--overflow-menu:focus
|
186 | .#{$prefix}--overflow-menu__icon,
|
187 | .#{$prefix}--data-table
|
188 | tr:hover
|
189 | td.#{$prefix}--table-column-menu
|
190 | .#{$prefix}--overflow-menu
|
191 | .#{$prefix}--overflow-menu__icon {
|
192 | opacity: 1;
|
193 | }
|
194 |
|
195 | .#{$prefix}--table-row--menu-option
|
196 | .#{$prefix}--overflow-menu-options__btn
|
197 | .#{$prefix}--overflow-menu-options__option-content
|
198 | svg {
|
199 | position: relative;
|
200 |
|
201 | top: rem(3px);
|
202 | margin-right: $spacing-03;
|
203 | }
|
204 |
|
205 | .#{$prefix}--data-table .#{$prefix}--overflow-menu,
|
206 | .#{$prefix}--data-table .#{$prefix}--overflow-menu__trigger {
|
207 | &:hover {
|
208 | background-color: $hover-selected-ui;
|
209 | }
|
210 | }
|
211 |
|
212 | .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu,
|
213 | .#{$prefix}--data-table--selected .#{$prefix}--overflow-menu__trigger {
|
214 | &:hover {
|
215 | background-color: $hover-field;
|
216 | }
|
217 | }
|
218 |
|
219 | .#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu,
|
220 | .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu {
|
221 | height: rem(24px);
|
222 | padding-top: 0;
|
223 | padding-bottom: 0;
|
224 | }
|
225 |
|
226 | .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu {
|
227 | height: rem(32px);
|
228 | }
|
229 |
|
230 | .#{$prefix}--data-table--tall .#{$prefix}--table-column-menu {
|
231 | padding-top: $spacing-03;
|
232 | }
|
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 | .#{$prefix}--data-table--zebra
|
239 | tbody
|
240 | tr:not(.#{$prefix}--parent-row):nth-child(even)
|
241 | td {
|
242 | border-bottom: 1px solid $ui-01;
|
243 | }
|
244 |
|
245 | .#{$prefix}--data-table--zebra
|
246 | tbody
|
247 | tr:not(.#{$prefix}--parent-row):nth-child(odd)
|
248 | td {
|
249 | background-color: $data-table-zebra-color;
|
250 | border-top: 1px solid $data-table-zebra-color;
|
251 | border-bottom: 1px solid $data-table-zebra-color;
|
252 | }
|
253 |
|
254 | .#{$prefix}--data-table--zebra
|
255 | tbody
|
256 | tr:not(.#{$prefix}--parent-row):hover
|
257 | td {
|
258 | background-color: $hover-field;
|
259 | border-top: 1px solid $hover-field;
|
260 | border-bottom: 1px solid $hover-field;
|
261 | }
|
262 |
|
263 |
|
264 |
|
265 |
|
266 | .#{$prefix}--table-column-checkbox .#{$prefix}--checkbox-label {
|
267 | padding-left: $spacing-05;
|
268 | }
|
269 |
|
270 | .#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
|
271 |
|
272 | position: static;
|
273 |
|
274 | width: rem(44px);
|
275 | padding-right: $spacing-05;
|
276 | padding-left: $spacing-05;
|
277 | background: $ui-03;
|
278 | transition: background-color $duration--fast-01 motion(entrance, productive);
|
279 | }
|
280 |
|
281 | .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
|
282 | .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox,
|
283 | .#{$prefix}--data-table thead th.#{$prefix}--table-expand,
|
284 | .#{$prefix}--data-table tbody td.#{$prefix}--table-expand {
|
285 | min-width: 0;
|
286 |
|
287 |
|
288 | padding-right: 0;
|
289 | padding-left: $spacing-05;
|
290 | }
|
291 |
|
292 | .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
|
293 | .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
|
294 |
|
295 | width: rem(36px);
|
296 | }
|
297 |
|
298 | .#{$prefix}--data-table thead th.#{$prefix}--table-expand,
|
299 | .#{$prefix}--data-table tbody td.#{$prefix}--table-expand {
|
300 |
|
301 | width: rem(32px);
|
302 | }
|
303 |
|
304 | .#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox {
|
305 | padding-top: rem(13px);
|
306 | }
|
307 |
|
308 | .#{$prefix}--data-table--tall .#{$prefix}--table-column-radio {
|
309 | padding-top: $spacing-05;
|
310 | }
|
311 |
|
312 | .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
|
313 | background: $data-table-column-hover;
|
314 | }
|
315 |
|
316 |
|
317 |
|
318 |
|
319 | .#{$prefix}--table-column-radio {
|
320 | width: 48px;
|
321 | }
|
322 |
|
323 | .#{$prefix}--table-column-radio .#{$prefix}--radio-button__appearance {
|
324 | margin-right: rem(-2px);
|
325 | }
|
326 |
|
327 |
|
328 | .#{$prefix}--data-table--zebra
|
329 | tbody
|
330 | tr:nth-child(odd).#{$prefix}--data-table--selected
|
331 | td,
|
332 | tr.#{$prefix}--data-table--selected td {
|
333 | color: $text-01;
|
334 | background-color: $selected-ui;
|
335 | border-top: 1px solid $selected-ui;
|
336 |
|
337 | border-bottom: 1px solid $active-ui;
|
338 | }
|
339 |
|
340 |
|
341 | .#{$prefix}--data-table--zebra
|
342 | tbody
|
343 | tr:first-of-type:nth-child(odd).#{$prefix}--data-table--selected
|
344 | td,
|
345 | tr.#{$prefix}--data-table--selected:first-of-type td {
|
346 |
|
347 | border-top: 1px solid $active-ui;
|
348 | }
|
349 |
|
350 |
|
351 | .#{$prefix}--data-table--zebra
|
352 | tbody
|
353 | tr:last-of-type:nth-child(odd).#{$prefix}--data-table--selected
|
354 | td,
|
355 | .#{$prefix}--data-table--zebra
|
356 | tbody
|
357 | tr:last-of-type:nth-child(even).#{$prefix}--data-table--selected
|
358 | td,
|
359 | tr.#{$prefix}--data-table--selected:last-of-type td {
|
360 |
|
361 | border-top: 1px solid $selected-ui;
|
362 | border-bottom: 1px solid $selected-ui;
|
363 | }
|
364 |
|
365 |
|
366 | .#{$prefix}--data-table--zebra
|
367 | tbody
|
368 | tr:nth-child(even).#{$prefix}--data-table--selected
|
369 | td {
|
370 | border-bottom: 1px solid $active-ui;
|
371 | }
|
372 |
|
373 | .#{$prefix}--data-table--zebra
|
374 | tbody
|
375 | tr:nth-child(even).#{$prefix}--data-table--selected:hover
|
376 | td {
|
377 | border-bottom: 1px solid $data-table-column-hover;
|
378 | }
|
379 |
|
380 |
|
381 | .#{$prefix}--data-table--zebra
|
382 | tbody
|
383 | tr:nth-child(odd).#{$prefix}--data-table--selected:hover
|
384 | td,
|
385 | .#{$prefix}--data-table tbody .#{$prefix}--data-table--selected:hover td {
|
386 | color: $text-01;
|
387 | background: $data-table-column-hover;
|
388 | border-top: 1px solid $data-table-column-hover;
|
389 | border-bottom: 1px solid $data-table-column-hover;
|
390 | }
|
391 |
|
392 |
|
393 | .#{$prefix}--data-table--selected
|
394 | .#{$prefix}--overflow-menu
|
395 | .#{$prefix}--overflow-menu__icon {
|
396 | opacity: 1;
|
397 | }
|
398 |
|
399 |
|
400 |
|
401 |
|
402 | .#{$prefix}--data-table--compact thead tr,
|
403 | .#{$prefix}--data-table--compact tbody tr,
|
404 | .#{$prefix}--data-table--compact tbody tr th {
|
405 | height: rem(24px);
|
406 | }
|
407 |
|
408 | .#{$prefix}--data-table--compact .#{$prefix}--table-header-label {
|
409 | padding-top: rem(2px);
|
410 | padding-bottom: rem(2px);
|
411 | }
|
412 |
|
413 | .#{$prefix}--data-table--compact td,
|
414 | .#{$prefix}--data-table--compact tbody tr th {
|
415 | padding-top: rem(2px);
|
416 | padding-bottom: rem(2px);
|
417 | }
|
418 |
|
419 | .#{$prefix}--data-table--compact .#{$prefix}--overflow-menu {
|
420 | width: rem(32px);
|
421 | height: 100%;
|
422 | }
|
423 |
|
424 | .#{$prefix}--data-table.#{$prefix}--data-table--compact
|
425 | .#{$prefix}--table-column-checkbox {
|
426 | padding-top: 0;
|
427 | padding-bottom: 0;
|
428 | }
|
429 |
|
430 | .#{$prefix}--data-table.#{$prefix}--data-table--compact
|
431 | .#{$prefix}--table-column-checkbox
|
432 | .#{$prefix}--checkbox-label {
|
433 | height: rem(23px);
|
434 |
|
435 | min-height: rem(23px);
|
436 | }
|
437 |
|
438 |
|
439 |
|
440 |
|
441 | .#{$prefix}--data-table--short thead tr,
|
442 | .#{$prefix}--data-table--short tbody tr,
|
443 | .#{$prefix}--data-table--short tbody tr th {
|
444 | height: rem(32px);
|
445 | }
|
446 |
|
447 | .#{$prefix}--data-table--short .#{$prefix}--table-header-label {
|
448 | padding-top: rem(7px);
|
449 | padding-bottom: rem(7px);
|
450 | }
|
451 |
|
452 | .#{$prefix}--data-table--short td,
|
453 | .#{$prefix}--data-table--short tbody tr th {
|
454 | padding-top: rem(7px);
|
455 | padding-bottom: rem(6px);
|
456 | }
|
457 |
|
458 | .#{$prefix}--data-table.#{$prefix}--data-table--short
|
459 | .#{$prefix}--table-column-checkbox {
|
460 | padding-top: rem(3px);
|
461 | padding-bottom: rem(3px);
|
462 | }
|
463 |
|
464 | .#{$prefix}--data-table--short .#{$prefix}--overflow-menu {
|
465 | height: 100%;
|
466 | }
|
467 |
|
468 |
|
469 |
|
470 |
|
471 | .#{$prefix}--data-table--tall thead tr,
|
472 | .#{$prefix}--data-table--tall tbody tr,
|
473 | .#{$prefix}--data-table--tall tbody tr th {
|
474 | height: rem(64px);
|
475 | }
|
476 |
|
477 | .#{$prefix}--data-table--tall .#{$prefix}--table-header-label {
|
478 | padding-top: $spacing-05;
|
479 | padding-bottom: $spacing-05;
|
480 | }
|
481 |
|
482 | .#{$prefix}--data-table--tall td,
|
483 | .#{$prefix}--data-table--tall tbody tr th {
|
484 | padding-top: 1rem;
|
485 | }
|
486 |
|
487 | .#{$prefix}--data-table--tall th,
|
488 | .#{$prefix}--data-table--tall td {
|
489 | vertical-align: top;
|
490 | }
|
491 |
|
492 | .#{$prefix}--data-table--cell-secondary-text {
|
493 | @include type-style('label-01');
|
494 | }
|
495 |
|
496 |
|
497 |
|
498 |
|
499 | .#{$prefix}--data-table--static {
|
500 | width: auto;
|
501 | }
|
502 |
|
503 |
|
504 |
|
505 |
|
506 | .#{$prefix}--data-table_inner-container {
|
507 | background-color: $ui-03;
|
508 | transform: translateZ(0);
|
509 | }
|
510 |
|
511 | .#{$prefix}--data-table--sticky-header {
|
512 | display: block;
|
513 |
|
514 | overflow-y: scroll;
|
515 |
|
516 | thead,
|
517 | tbody,
|
518 | tr,
|
519 | th,
|
520 | td {
|
521 | display: flex;
|
522 | }
|
523 |
|
524 | thead {
|
525 | position: sticky;
|
526 | top: 0;
|
527 | z-index: 1;
|
528 | width: 100%;
|
529 | overflow: scroll;
|
530 | will-change: transform;
|
531 |
|
532 | -ms-overflow-style: none;
|
533 | }
|
534 |
|
535 | thead tr th {
|
536 | border-bottom: 1px solid $active-ui;
|
537 | }
|
538 |
|
539 | tbody {
|
540 | flex-direction: column;
|
541 | overflow-x: scroll;
|
542 |
|
543 | -ms-overflow-style: none;
|
544 | will-change: transform;
|
545 | }
|
546 |
|
547 | tr.#{$prefix}--parent-row.#{$prefix}--expandable-row {
|
548 | height: auto;
|
549 | min-height: 3rem;
|
550 | }
|
551 |
|
552 | tr.#{$prefix}--expandable-row:not(.#{$prefix}--parent-row) {
|
553 | height: auto;
|
554 | }
|
555 |
|
556 | .#{$prefix}--table-expand {
|
557 | max-width: rem(48px);
|
558 | }
|
559 |
|
560 | thead .#{$prefix}--table-expand {
|
561 | align-items: center;
|
562 | }
|
563 |
|
564 | .#{$prefix}--parent-row {
|
565 | min-height: 3rem;
|
566 | }
|
567 |
|
568 |
|
569 |
|
570 |
|
571 |
|
572 | &:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--short)
|
573 | td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) {
|
574 | padding-top: rem(14px);
|
575 | }
|
576 |
|
577 |
|
578 |
|
579 | tr.#{$prefix}--parent-row.#{$prefix}--expandable-row:hover
|
580 | + tr[data-child-row]
|
581 | td {
|
582 | border-top: 1px solid $hover-ui;
|
583 | }
|
584 |
|
585 | tr.#{$prefix}--expandable-row:last-of-type {
|
586 | overflow: hidden;
|
587 | }
|
588 |
|
589 | tr.#{$prefix}--data-table--selected:first-of-type td {
|
590 | border-top: none;
|
591 | }
|
592 |
|
593 |
|
594 | thead th.#{$prefix}--table-column-checkbox,
|
595 | tbody tr td.#{$prefix}--table-column-checkbox {
|
596 | align-items: center;
|
597 | width: rem(36px);
|
598 | min-width: rem(36px);
|
599 | }
|
600 |
|
601 | &.#{$prefix}--data-table--tall thead th.#{$prefix}--table-column-checkbox,
|
602 | &.#{$prefix}--data-table--tall td.#{$prefix}--table-column-checkbox {
|
603 | align-items: flex-start;
|
604 | }
|
605 |
|
606 |
|
607 |
|
608 | th.#{$prefix}--table-column-checkbox ~ th:last-of-type:empty {
|
609 | max-width: rem(64px);
|
610 | }
|
611 |
|
612 | th:empty:not(.#{$prefix}--table-expand) {
|
613 | max-width: 2.25rem;
|
614 | }
|
615 |
|
616 | td.#{$prefix}--table-column-menu {
|
617 | align-items: center;
|
618 | height: auto;
|
619 | padding-top: 0;
|
620 | }
|
621 |
|
622 |
|
623 | thead::-webkit-scrollbar,
|
624 | tbody::-webkit-scrollbar {
|
625 | display: none;
|
626 | }
|
627 |
|
628 |
|
629 | @-moz-document url-prefix() {
|
630 | thead,
|
631 | tbody {
|
632 | scrollbar-width: none;
|
633 | }
|
634 | }
|
635 |
|
636 | tbody tr:last-of-type {
|
637 | border-bottom: 0;
|
638 | }
|
639 |
|
640 | th:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand-v2):not(.#{$prefix}--table-column-icon),
|
641 | td:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand-v2):not(.#{$prefix}--table-column-icon) {
|
642 | width: 100%;
|
643 | min-width: 0;
|
644 | }
|
645 |
|
646 | &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row),
|
647 | &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row),
|
648 | &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row) {
|
649 | height: auto;
|
650 | }
|
651 |
|
652 |
|
653 | &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row) {
|
654 | min-height: rem(24px);
|
655 | }
|
656 |
|
657 |
|
658 | &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row) {
|
659 | min-height: rem(32px);
|
660 | }
|
661 |
|
662 |
|
663 | &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row) {
|
664 | min-height: rem(64px);
|
665 | }
|
666 |
|
667 |
|
668 | &.#{$prefix}--data-table--compact tr td.#{$prefix}--table-expand {
|
669 | padding-top: rem(4px);
|
670 | }
|
671 |
|
672 | &.#{$prefix}--data-table--short tr td.#{$prefix}--table-expand {
|
673 | padding-top: rem(8px);
|
674 | }
|
675 |
|
676 | .#{$prefix}--table-header-label {
|
677 | @include text-overflow;
|
678 |
|
679 | max-width: calc(100% - 10px);
|
680 |
|
681 | padding-top: rem(15px);
|
682 | padding-bottom: 1rem;
|
683 | overflow-y: hidden;
|
684 | }
|
685 |
|
686 | &.#{$prefix}--data-table--compact th .#{$prefix}--table-header-label {
|
687 | padding-top: rem(3px);
|
688 | padding-bottom: 0;
|
689 | }
|
690 |
|
691 | &.#{$prefix}--data-table--short th .#{$prefix}--table-header-label {
|
692 | padding-top: rem(8px);
|
693 | padding-bottom: 0;
|
694 | }
|
695 |
|
696 | &.#{$prefix}--data-table--tall th .#{$prefix}--table-header-label {
|
697 | padding-top: 1rem;
|
698 | }
|
699 |
|
700 | &.#{$prefix}--data-table--tall th.#{$prefix}--table-expand {
|
701 | display: flex;
|
702 | align-items: flex-start;
|
703 | }
|
704 |
|
705 |
|
706 | &.#{$prefix}--data-table--compact
|
707 | tr.#{$prefix}--parent-row
|
708 | .#{$prefix}--table-column-checkbox,
|
709 | &.#{$prefix}--data-table--short
|
710 | tr.#{$prefix}--parent-row
|
711 | .#{$prefix}--table-column-checkbox {
|
712 | align-items: flex-start;
|
713 | }
|
714 | }
|
715 |
|
716 | @include sticky-header($max-width: 100%);
|
717 |
|
718 |
|
719 |
|
720 |
|
721 | .#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
|
722 | margin: 0;
|
723 | }
|
724 |
|
725 | .#{$prefix}--data-table--short
|
726 | .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
|
727 | .#{$prefix}--data-table--compact
|
728 | .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
|
729 | margin: rem(-3px) 0;
|
730 | }
|
731 | }
|
732 |
|
733 | @include exports('data-table-v2-core') {
|
734 | @include data-table-core;
|
735 | }
|