init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
.container {
  @apply w-full text-base text-left text-neutral-content border border-neutral-border rounded-lg flex flex-col overflow-x-auto overflow-y-hidden;
 
  font-family: var(--font-sans);
 
  // Let parent control height; we grow until constrained
  max-height: 100%;
}
 
.head {
  @apply bg-neutral-background min-w-min flex justify-stretch border-b border-neutral-border flex-shrink-0 sticky top-0 z-[2] shadow-sm;
 
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
 
.headRow {
  @apply relative min-w-min flex justify-start w-full;
}
 
.headCell {
  @apply relative font-medium bg-neutral-background text-neutral-content select-none cursor-default;
  @apply flex items-center box-content p-tight;
 
  min-width: 0;
  height: 32px;
 
  // Add divider between header cells (except first, pinned, and noDivider)
  &:not(:first-child, .headCellPinned, .headCellNoDivider)::after {
    content: "";
    display: block;
    width: 1px;
    height: 60%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-neutral-border);
  }
 
  > * {
    @apply min-w-0 truncate;
  }
}
 
.headCellContent {
  @apply flex items-center flex-1 min-w-0 overflow-hidden;
}
 
.headCellPinned {
  @apply sticky right-0 border-l border-neutral-border bg-neutral-background;
}
 
.headCellSortable {
  @apply cursor-pointer;
 
  &:hover {
    @apply bg-neutral-surface;
 
    .headerIcon {
      opacity: 1;
    }
  }
}
 
.headerContent {
  @apply flex items-center justify-between w-full;
}
 
.headerTextSorted {
  @apply text-neutral-content;
}
 
.headerIcon {
  @apply ml-2 flex items-center shrink-0 transition-opacity duration-150;
 
  opacity: 0;
}
 
.headerIconVisible {
  opacity: 1;
}
 
.headCellResizer {
  @apply absolute -right-[5px] top-0 bottom-0 opacity-0 w-[11px] cursor-col-resize z-[100];
 
  &:hover {
    @apply opacity-100;
  }
}
 
.body {
  @apply z-[1] relative overflow-y-auto;
 
  flex: 1 1 auto;
  min-height: 0;
  width: max-content;
  min-width: 100%;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
 
.bodyRow {
  @apply min-w-min flex justify-start transition-all duration-150 ease-out w-full;
 
  &:nth-child(2n) {
    @apply bg-neutral-surface;
  }
}
 
.bodyRowClickable {
  @apply cursor-pointer;
 
  &:hover:not(.bodyRowError, .bodyRowActive) {
    @apply bg-primary-emphasis-subtle;
  }
}
 
.bodyRowError {
  @apply bg-negative-background;
 
  border-bottom-color: var(--color-negative-accent-light);
}
 
.bodyRowSelected:not(.bodyRowError) {
  @apply bg-primary-emphasis-subtle;
}
 
.bodyRowActive:not(.bodyRowError) {
  @apply bg-primary-emphasis;
}
 
.bodyRowSelected.bodyRowActive:not(.bodyRowError) {
  @apply bg-primary-emphasis;
}
 
.bodyCell {
  @apply flex items-center min-h-[28px] box-content p-tight;
 
  min-width: 0;
  height: 32px;
 
  > * {
    @apply min-w-0 truncate;
  }
 
  // Style for disabled checkboxes in data table
  :global(.checkbox_disabled) {
    opacity: 0.5;
    cursor: not-allowed;
 
    :global(.checkbox__box),
    :global(.checkbox__input) {
      cursor: not-allowed;
    }
  }
}
 
.bodyCellPinned {
  @apply sticky right-0 border-l border-neutral-border bg-neutral-background;
}