equality/packages/ui/src/components/table/table-components.module.css at ccb8496f4d784d8dd9e925d8b2957d8d09dceaed · eqtylab/equality · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
@reference '../../theme/theme.module.css';

.table {
  @apply w-full overflow-auto;
}

.table-inner {
  @apply w-full;
  @apply caption-bottom text-sm;
}

.table-header {
  @apply [&_tr]:border-b;
}

.table-header--sticky {
  @apply sticky top-0 z-10;
}

.table-body {
  @apply [&_tr:last-child]:border-0;
}

.table-footer {
  @apply border-t last:[&>tr]:border-b-0;
  @apply font-medium;
}

.table-head {
  @apply h-10;
  @apply px-4 align-middle;
  @apply text-text-primary text-left font-medium transition-colors;
  @apply [&:has([role=checkbox])]:pr-0;
}

.table-cell {
  @apply px-4 py-2;
  @apply align-middle;
  @apply [&:has([role=checkbox])]:pr-0;
}

/* Clickable Variant */

.table-row--clickable {
  --mix-color: var(--color-brand-primary);
  --hover-darken: 50%;
  --hover-lighten: 50%;
  @apply cursor-pointer;
  @apply hover:bg-mixed-light! dark:hover:bg-mixed-dark!;
  @apply data-[state=selected]:bg-mixed-light dark:data-[state=selected]:bg-mixed-dark;
}

/* Truncate Variants */

.table-head--truncate,
.table-cell--truncate {
  @apply max-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
}

.table-caption {
  @apply text-text-secondary mt-4 text-sm;
}

/* ELEVATION */

.table--sunken .table-header,
.table--sunken .table-footer {
  @apply bg-background-base;
}
.table--sunken .table-body {
  @apply bg-background-sunken;
  --table-stripe-bg: light-dark(
    color-mix(in oklch, var(--color-background-sunken), black 2%),
    color-mix(in oklch, var(--color-background-sunken), white 4%)
  );
}

.table--base .table-header,
.table--base .table-footer {
  @apply bg-background-raised;
}
.table--base .table-body {
  @apply bg-background-base;
  --table-stripe-bg: light-dark(
    color-mix(in oklch, var(--color-background-base), black 2%),
    color-mix(in oklch, var(--color-background-base), white 4%)
  );
}

.table--raised .table-header,
.table--raised .table-footer {
  @apply bg-background-overlay;
}
.table--raised .table-body {
  @apply bg-background-raised;
  --table-stripe-bg: light-dark(
    color-mix(in oklch, var(--color-background-raised), black 2%),
    color-mix(in oklch, var(--color-background-raised), white 4%)
  );
}

.table--overlay .table-header,
.table--overlay .table-footer {
  @apply bg-background-overlay;
}
.table--overlay .table-body {
  @apply bg-background-overlay;
  --table-stripe-bg: light-dark(
    color-mix(in oklch, var(--color-background-overlay), black 2%),
    color-mix(in oklch, var(--color-background-overlay), white 4%)
  );
}

.table-body .table-row:nth-child(even) {
  background-color: var(--table-stripe-bg);
}