konnosDashboard
grid.css558 lines · main
1@reference "./globals.css";
2
3.sb-grid {
4 @apply flex h-full flex-col;
5}
6
7.sb-grid-fill-container:after {
8 content: '';
9 display: inline-block;
10 width: 100%;
11}
12
13.rdg-cell {
14 @apply flex;
15 @apply text-grid;
16 @apply border-secondary border-r border-b;
17 @apply text-foreground;
18 padding-inline: 0.5rem;
19 white-space: nowrap;
20 overflow: hidden;
21 text-overflow: ellipsis;
22 line-height: inherit;
23}
24
25/* Apply parent bg colour while editing */
26.rdg-cell.rdg-editor-container > * {
27 background-color: inherit;
28}
29
30.rdg-cell > div[draggable='true'] {
31 @apply h-full;
32}
33
34.rdg-row .rdg-cell-frozen:nth-last-child(1 of .rdg-cell-frozen) {
35 @apply border-secondary border-r;
36}
37
38.rdg-cell[aria-selected='true'] {
39 box-shadow: inset 0 0 0 1px #24b47e;
40}
41
42.rdg:not(:focus-within):not(.rdg-context-menu-open) .rdg-cell[aria-selected='true'] {
43 box-shadow: none;
44 outline: none;
45}
46
47/* Cell with unsaved changes - warning (amber) background/text color */
48.rdg-cell.rdg-cell--dirty {
49 background-color: hsl(var(--warning-300) / 0.75);
50 color: hsl(var(--warning-default));
51}
52
53/* Row pending addition - green background, green text */
54.rdg-row.rdg-row--added {
55 background-color: hsl(var(--brand-200) / 0.3);
56
57 &:hover {
58 background-color: hsl(var(--brand-200) / 0.5);
59 }
60
61 .rdg-cell {
62 border-left-color: hsl(var(--brand-default));
63 color: hsl(var(--brand-link));
64 }
65
66 /* First cell gets a stronger left border to indicate new row */
67 .rdg-cell:first-child {
68 box-shadow: inset 2px 0 0 0 hsl(var(--brand-default));
69 }
70}
71
72/* Row pending deletion - red background with strikethrough effect, red text */
73.rdg-row.rdg-row--deleted {
74 background-color: hsl(var(--destructive-300) / 0.3);
75
76 &:hover {
77 background-color: hsl(var(--destructive-300) / 0.5);
78 }
79
80 .rdg-cell {
81 text-decoration: line-through;
82 text-decoration-color: hsl(var(--destructive-default));
83 border-left-color: hsl(var(--destructive-default));
84 color: hsl(var(--destructive-default));
85 }
86
87 /* First cell gets a stronger left border to indicate deleted row */
88 .rdg-cell:first-child {
89 box-shadow: inset 2px 0 0 0 hsl(var(--destructive-default));
90 }
91}
92
93.rdg {
94 @apply box-border select-none overflow-x-auto overflow-y-scroll bg-dash-canvas;
95 @apply border-t border-r-0 border-l-0;
96 contain: strict;
97 font-size: 14px;
98}
99
100.rdg *,
101.rdg ::after,
102.rdg ::before {
103 box-sizing: inherit;
104}
105
106@supports not (contain: strict) {
107 .rdg {
108 position: relative;
109 z-index: 0;
110 }
111}
112
113.rdg-focus-sink {
114 position: sticky;
115 top: 0;
116 left: 0;
117 height: 0;
118 width: 0;
119 outline: 0;
120}
121
122/*
123 Row header
124*/
125
126.rdg-header-row {
127 @apply bg-surface-200 select-none border-none;
128}
129
130.rdg-header-row {
131 height: var(--header-row-height);
132 line-height: var(--header-row-height);
133 top: 0;
134}
135
136.rdg-header-row .rdg-cell {
137 @apply bg-surface-200 border-default border-b;
138}
139
140.rdg-header-row .rdg-cell-frozen:nth-last-child(1 of .rdg-cell-frozen) {
141 @apply border-default border-r border-b;
142}
143
144[data-theme='dark'] .rdg-row .rdg-cell-frozen:nth-last-child(1 of .rdg-cell-frozen),
145[data-theme='dark'] .rdg-header-row .rdg-cell-frozen:nth-last-child(1 of .rdg-cell-frozen) {
146 @apply border-r-strong;
147}
148
149.rdg-header-row .rdg-cell p {
150 @apply text-typography-body-light [[data-theme*=dark]_&]:text-typography-body-dark;
151}
152.rdg-header-row .rdg-checkbox {
153 @apply bg-surface-200 border-default rounded-xs border;
154}
155.rdg-header-row .rdg-checkbox-input:checked + .rdg-checkbox {
156 @apply border-default border-4 bg-brand-900;
157}
158.rdg-header-row .rdg-checkbox-input:focus + .rdg-checkbox {
159 box-shadow: none;
160}
161
162.rdg-cell .Select {
163 max-height: 30px;
164 font-size: 12px;
165 font-weight: 400;
166}
167
168/*
169 Row
170*/
171
172.rdg-row {
173 @apply bg-dash-sidebar transition-colors;
174 @apply hover:bg-surface-200;
175}
176
177/* edit button */
178.rdg-row__select-column__edit-action {
179 @apply opacity-0;
180}
181.rdg-row:hover .rdg-row__select-column__edit-action {
182 @apply opacity-100;
183}
184
185.rdg-row__select-column__edit-action:hover {
186 opacity: 1 !important;
187}
188
189/* select row */
190.rdg-row[aria-selected='true'] {
191 @apply bg-surface-200;
192}
193
194.tab-cursor {
195 cursor: pointer !important;
196}
197
198/*
199 Checkbox
200*/
201
202.sb-grid {
203 /* reset styles */
204 [type='checkbox'] {
205 webkit-appearance: none;
206 -moz-appearance: none;
207 appearance: none;
208 padding: 0;
209 -webkit-print-color-adjust: exact;
210 print-color-adjust: exact;
211 display: inline-block;
212 vertical-align: middle;
213 background-origin: border-box;
214 -webkit-user-select: none;
215 -moz-user-select: none;
216 -ms-user-select: none;
217 user-select: none;
218 flex-shrink: 0;
219 height: 1rem;
220 width: 1rem;
221 color: #2563eb;
222 background-color: #fff;
223 border-color: #6b7280;
224 border-width: 1px;
225 }
226
227 [type='checkbox']:checked {
228 @apply bg-foreground;
229 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl(0, 0%, 100%)'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") !important;
230 }
231
232 [type='checkbox']:indeterminate {
233 @apply bg-foreground;
234 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl(0, 0%, 100%)'%3E%3Crect x='3' y='7' width='10' height='2'/%3E%3C/svg%3E") !important;
235
236 [data-theme='dark'] & {
237 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl(0, 0%, 0%)'%3E%3Crect x='3' y='7' width='10' height='2'/%3E%3C/svg%3E") !important;
238 }
239 }
240
241 [type='checkbox'] {
242 @apply cursor-pointer rounded-sm border border-solid;
243
244 @apply text-foreground border-strong transition-all;
245 @apply hover:border-foreground focus:ring-0 focus:outline-hidden;
246
247 @apply bg-control;
248
249 margin-top: 2px;
250 }
251}
252
253/* Dark mode */
254[data-theme='dark'] .sb-grid [type='checkbox']:checked {
255 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='hsl(0, 0%, 0%)'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") !important;
256}
257
258.rdg__segmented-control {
259 @apply border-default relative mx-2 h-8 rounded-md border;
260}
261
262.rdg__segmented-control__button {
263 @apply absolute top-0 inline-flex h-full items-center justify-center;
264 @apply text-xs font-medium;
265 @apply text-border-muted;
266 @apply active:bg-alternative hover:text-white focus:z-10 focus:outline-hidden;
267 @apply transition duration-150 ease-in-out;
268 @apply cursor-pointer;
269 z-index: 1;
270}
271
272.rdg__segmented-control__button--option {
273 @apply text-background;
274}
275
276.rdg__segmented-control__button--right {
277 @apply right-0;
278}
279
280.rdg__segmented-control__button--left {
281 @apply left-0;
282}
283
284.rdg__segmented-control__label {
285 @apply bg-overlay-hover border-control z-0 inline-block h-full transform rounded-sm border shadow-sm transition duration-200 ease-in-out;
286}
287
288.rdg__segmented-control__label--left {
289 @apply translate-x-0;
290}
291
292.rdg__segmented-control__label--right {
293 @apply translate-x-12;
294}
295
296.rdg__segmented-control__options-label {
297 @apply uppercase;
298 color: inherit;
299}
300
301/*
302 DropdownControl
303*/
304
305.dropdown-control {
306 @apply overflow-auto;
307}
308
309.dropdown-control .sbui-typography {
310 @apply block px-2 py-4;
311}
312
313/*
314 NullValue
315*/
316
317.null-value {
318 @apply block;
319}
320
321/*
322 CheckboxEditor
323*/
324
325.sb-grid-checkbox-editor {
326 @apply flex h-full w-full;
327}
328
329.sb-grid-checkbox-editor__input {
330 @apply h-4 w-4;
331 outline: 4px auto -webkit-focus-ring-color;
332}
333
334/*
335 JsonEditor
336*/
337
338.sb-grid-json-editor__trigger {
339 @apply text-grid overflow-hidden text-ellipsis px-2;
340}
341
342/*
343 NumberEditor
344*/
345
346.sb-grid-number-editor {
347 @apply h-full w-full px-2;
348}
349
350/*
351 SelectEditor
352*/
353
354.sb-grid-select-editor {
355 button {
356 @apply border-none rounded-none shadow-none;
357 box-shadow: none !important;
358 }
359}
360
361/*
362 TextEditor
363*/
364
365.sb-grid-text-editor__trigger {
366 @apply text-grid overflow-hidden text-ellipsis px-2;
367}
368
369/*
370 TimeEditor
371*/
372
373.sb-grid-time-editor {
374 @apply h-full w-full px-2;
375}
376
377/*
378 Footer
379*/
380
381.sb-grid-footer {
382 @apply bg-surface-100 flex h-10 items-center justify-between px-2;
383}
384
385.sb-grid-footer__inner {
386 @apply flex items-center;
387}
388
389/*
390 ForeignKeyFormatter
391*/
392
393.sb-grid-foreign-key-formatter {
394 @apply flex w-full items-center justify-between;
395}
396
397.sb-grid-foreign-key-formatter__text {
398 @apply m-0 grow overflow-hidden text-ellipsis;
399}
400
401/*
402 ColumnHeader
403*/
404
405.sb-grid-column-header {
406 @apply flex h-full w-full items-center justify-between;
407}
408
409.sb-grid-column-header--cursor {
410 @apply cursor-default;
411}
412
413.sb-grid-column-header__inner {
414 @apply flex items-center gap-2 overflow-hidden text-ellipsis;
415}
416
417.sb-grid-column-header__inner__name {
418 @apply text-foreground overflow-hidden text-ellipsis text-xs select-text;
419}
420
421.sb-grid-column-header__inner__format {
422 @apply text-xs;
423 @apply overflow-hidden text-ellipsis font-normal;
424 @apply text-foreground-light;
425}
426
427.sb-grid-column-header__inner__primary-key {
428 @apply flex rotate-45 transform items-center;
429}
430
431.sb-grid-column-header__inner svg {
432 @apply border-brand text-brand;
433}
434
435/*
436 Grid
437*/
438
439.sb-grid-grid--loading {
440 @apply flex justify-center bg-transparent;
441}
442
443.sb-grid-grid--loading__inner {
444 @apply flex items-center;
445}
446
447.sb-grid-grid--loading__inner__text {
448 @apply m-8;
449}
450
451/*
452 SelectColumn
453*/
454
455.sb-grid-select-cell__formatter {
456 @apply flex h-full w-full items-center justify-between;
457}
458
459.sb-grid-select-cell__header {
460 @apply flex h-full w-full items-center justify-between;
461}
462
463.sb-grid-select-cell__header__input {
464 /* @apply focus:ring-brand-300; */
465 @apply border-background-surface-100;
466}
467
468/*
469 Header
470*/
471
472.sb-grid-header {
473 @apply bg-surface-100 flex h-10 justify-between px-2;
474}
475
476.sb-grid-header__inner {
477 @apply flex items-center space-x-2;
478}
479
480.sb-grid-header__inner__divider {
481 @apply py-2;
482}
483
484.row_header__selected-rows {
485 @apply ml-2 mr-2;
486}
487
488/*
489 StatusLabel
490*/
491
492.sb-grid-status-label {
493 @apply text-grid text-white;
494}
495
496.sb-grid-status-label__no-msg {
497 @apply flex h-5 w-5;
498}
499
500.sb-grid-status-label__no-msg > div {
501 @apply m-auto h-2 w-2 rounded-full bg-brand-900;
502}
503
504/*
505 Empty value
506*/
507
508.sb-grid-empty-value {
509 @apply block;
510}
511
512/*
513header/sort/SortDropdown
514*/
515
516.sb-grid-sort-popover {
517 @apply w-96;
518}
519
520.sb-grid-dropdown__empty {
521 @apply py-2;
522}
523
524.sb-grid-dropdown__empty__text {
525 @apply block;
526}
527
528.sb-grid-dropdown__item-trigger {
529 @apply my-1;
530}
531
532/*
533header/sort/SortRow
534*/
535
536.sb-grid-sort-row {
537 @apply flex justify-between space-x-3;
538}
539
540.sb-grid-sort-row__item {
541 @apply flex items-center space-x-3;
542}
543
544.sb-grid-sort-row__item__remove {
545 @apply bg-transparent p-0 hover:bg-transparent;
546}
547
548.sb-grid-sort-row__item__label {
549 @apply flex items-center space-x-2;
550}
551
552.sb-grid-sort-row__item_toogle {
553 @apply flex w-28 items-center gap-0 space-x-3;
554}
555
556.sb-grid-sort-row__item__move {
557 @apply flex cursor-move;
558}