@nextlyhq/plugin-form-builder 0.0.2-alpha.4 → 0.0.2-alpha.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +4 -5
  2. package/dist/admin/index.d.ts +123 -331
  3. package/dist/admin/index.js +3809 -3419
  4. package/dist/admin/index.js.map +1 -1
  5. package/dist/chunk-WVI7N3QO.js +559 -0
  6. package/dist/chunk-WVI7N3QO.js.map +1 -0
  7. package/dist/index.d.ts +12 -11
  8. package/dist/index.js +555 -661
  9. package/dist/index.js.map +1 -1
  10. package/dist/{index-C0kBvYjm.d.ts → types-r8uBeB0u.d.ts} +126 -125
  11. package/package.json +28 -30
  12. package/dist/CheckboxFieldEditor-K4T6QX52.js +0 -121
  13. package/dist/CheckboxFieldEditor-K4T6QX52.js.map +0 -1
  14. package/dist/DateFieldEditor-JFJFAVOH.js +0 -187
  15. package/dist/DateFieldEditor-JFJFAVOH.js.map +0 -1
  16. package/dist/EmailFieldEditor-MMOXXL7P.js +0 -138
  17. package/dist/EmailFieldEditor-MMOXXL7P.js.map +0 -1
  18. package/dist/NumberFieldEditor-UISAYR6Z.js +0 -175
  19. package/dist/NumberFieldEditor-UISAYR6Z.js.map +0 -1
  20. package/dist/RadioFieldEditor-6UQFH4WT.js +0 -165
  21. package/dist/RadioFieldEditor-6UQFH4WT.js.map +0 -1
  22. package/dist/SelectFieldEditor-PSO4KHV4.js +0 -213
  23. package/dist/SelectFieldEditor-PSO4KHV4.js.map +0 -1
  24. package/dist/TextFieldEditor-5EU64EA5.js +0 -187
  25. package/dist/TextFieldEditor-5EU64EA5.js.map +0 -1
  26. package/dist/TextareaFieldEditor-773G3LNM.js +0 -190
  27. package/dist/TextareaFieldEditor-773G3LNM.js.map +0 -1
  28. package/dist/admin/index.css +0 -934
  29. package/dist/admin/index.css.map +0 -1
  30. package/dist/chunk-ABNZFTQK.js +0 -586
  31. package/dist/chunk-ABNZFTQK.js.map +0 -1
  32. package/dist/chunk-XTCEPJ7B.js +0 -256
  33. package/dist/chunk-XTCEPJ7B.js.map +0 -1
  34. package/dist/components/index.d.ts +0 -3
  35. package/dist/components/index.js +0 -9
  36. package/dist/components/index.js.map +0 -1
  37. package/dist/styles/form-builder.css +0 -1150
  38. package/dist/styles/submissions-filter.css +0 -75
@@ -1,934 +0,0 @@
1
- /* src/styles/form-builder.css */
2
- .form-builder-view {
3
- --fb-primary: hsl(var(--primary));
4
- --fb-primary-hover: hsl(var(--primary) / 0.9);
5
- --fb-primary-light: hsl(var(--primary) / 0.1);
6
- --fb-danger: #ef4444;
7
- --fb-danger-hover: #dc2626;
8
- --fb-success: #22c55e;
9
- --fb-warning: #f59e0b;
10
- --fb-bg: #ffffff;
11
- --fb-bg-muted: #f8fafc;
12
- --fb-bg-hover: #f1f5f9;
13
- --fb-border: #e2e8f0;
14
- --fb-border-focus: hsl(var(--primary));
15
- --fb-text: #1e293b;
16
- --fb-text-muted: #64748b;
17
- --fb-text-light: #94a3b8;
18
- --fb-radius-sm: 0.375rem;
19
- --fb-radius-md: 0.375rem;
20
- --fb-radius-lg: 0.375rem;
21
- --fb-shadow: none;
22
- --fb-shadow-md: none;
23
- --fb-shadow-lg: none;
24
- }
25
- .dark .form-builder-view,
26
- [data-theme=dark] .form-builder-view {
27
- --fb-bg: hsl(222.2, 47.4%, 11.2%);
28
- --fb-bg-muted: hsl(217.2, 32.6%, 17.5%);
29
- --fb-bg-hover: hsl(215.4, 16.3%, 25.9%);
30
- --fb-border: hsl(217.2, 32.6%, 17.5%);
31
- --fb-text: hsl(210, 40%, 98%);
32
- --fb-text-muted: hsl(215, 20.2%, 65.1%);
33
- --fb-text-light: hsl(215.3, 25%, 36.7%);
34
- }
35
- .field-editor {
36
- padding: 16px;
37
- }
38
- .field-editor-header {
39
- margin-bottom: 20px;
40
- }
41
- .field-editor-title {
42
- font-size: 0.875rem;
43
- font-weight: 600;
44
- color: var(--fb-text);
45
- margin: 0 0 4px 0;
46
- display: flex;
47
- align-items: center;
48
- gap: 8px;
49
- }
50
- .field-editor-type-badge {
51
- font-size: 0.75rem;
52
- font-weight: 500;
53
- color: var(--fb-primary);
54
- background: var(--fb-primary-light);
55
- padding: 2px 8px;
56
- border-radius: 9999px;
57
- }
58
- .field-editor-actions {
59
- display: flex;
60
- gap: 8px;
61
- margin-top: 12px;
62
- }
63
- .field-editor-action-btn {
64
- display: flex;
65
- align-items: center;
66
- gap: 6px;
67
- padding: 6px 12px;
68
- font-size: 0.75rem;
69
- font-weight: 500;
70
- border: 1px solid var(--fb-border);
71
- border-radius: var(--fb-radius-sm);
72
- background: var(--fb-bg);
73
- cursor: pointer;
74
- transition: all 0.15s ease;
75
- color: var(--fb-text-muted);
76
- }
77
- .field-editor-action-btn:hover {
78
- border-color: var(--fb-text-light);
79
- color: var(--fb-text);
80
- }
81
- .field-editor-action-btn--danger:hover {
82
- border-color: var(--fb-danger);
83
- color: var(--fb-danger);
84
- background: #fef2f2;
85
- }
86
- .field-editor-section {
87
- margin-bottom: 20px;
88
- }
89
- .field-editor-section-title {
90
- font-size: 0.75rem;
91
- font-weight: 600;
92
- color: var(--fb-text-muted);
93
- text-transform: uppercase;
94
- letter-spacing: 0.05em;
95
- margin: 0 0 12px 0;
96
- }
97
- .field-editor-row {
98
- margin-bottom: 14px;
99
- }
100
- .field-editor-row:last-child {
101
- margin-bottom: 0;
102
- }
103
- .field-editor-row--checkbox {
104
- display: flex;
105
- align-items: center;
106
- }
107
- .field-editor-field {
108
- margin-bottom: 16px;
109
- }
110
- .field-editor-field:last-child {
111
- margin-bottom: 0;
112
- }
113
- .field-editor-label {
114
- display: block;
115
- font-size: 0.8125rem;
116
- font-weight: 500;
117
- color: var(--fb-text);
118
- margin-bottom: 6px;
119
- }
120
- .field-editor-input {
121
- width: 100%;
122
- padding: 8px 12px;
123
- font-size: 0.875rem;
124
- color: var(--fb-text);
125
- background: var(--fb-bg);
126
- border: 1px solid var(--fb-border);
127
- border-radius: var(--fb-radius-sm);
128
- transition: all 0.15s ease;
129
- }
130
- .field-editor-input:focus {
131
- outline: none;
132
- border-color: var(--fb-border-focus);
133
- }
134
- .field-editor-input::placeholder {
135
- color: var(--fb-text-light);
136
- }
137
- .field-editor-input--small {
138
- width: 120px;
139
- }
140
- .field-editor-textarea {
141
- min-height: 80px;
142
- resize: vertical;
143
- }
144
- .field-editor-select {
145
- width: 100%;
146
- padding: 8px 12px;
147
- font-size: 0.875rem;
148
- color: var(--fb-text);
149
- background: var(--fb-bg);
150
- border: 1px solid var(--fb-border);
151
- border-radius: var(--fb-radius-sm);
152
- transition: all 0.15s ease;
153
- cursor: pointer;
154
- }
155
- .field-editor-select:focus {
156
- outline: none;
157
- border-color: var(--fb-border-focus);
158
- }
159
- .field-editor-checkbox-row {
160
- display: flex;
161
- align-items: center;
162
- gap: 8px;
163
- }
164
- .field-editor-checkbox {
165
- width: 16px;
166
- height: 16px;
167
- accent-color: var(--fb-primary);
168
- }
169
- .field-editor-checkbox-label {
170
- display: flex;
171
- align-items: center;
172
- gap: 8px;
173
- cursor: pointer;
174
- font-size: 0.8125rem;
175
- color: var(--fb-text);
176
- }
177
- .field-editor-help {
178
- display: block;
179
- font-size: 0.6875rem;
180
- color: var(--fb-text-muted);
181
- margin-top: 4px;
182
- }
183
- .field-editor-warning {
184
- display: block;
185
- font-size: 0.6875rem;
186
- color: var(--fb-warning);
187
- margin-top: 4px;
188
- }
189
- .field-editor-info {
190
- padding: 10px 14px;
191
- background: var(--fb-bg-muted);
192
- border-radius: var(--fb-radius-sm);
193
- font-size: 0.8125rem;
194
- color: var(--fb-text-muted);
195
- }
196
- .field-editor-options {
197
- margin-bottom: 14px;
198
- }
199
- .field-editor-options-empty {
200
- padding: 12px;
201
- background: var(--fb-bg-muted);
202
- border-radius: var(--fb-radius-sm);
203
- font-size: 0.8125rem;
204
- color: var(--fb-text-muted);
205
- text-align: center;
206
- margin-bottom: 8px;
207
- }
208
- .field-editor-options-list {
209
- display: flex;
210
- flex-direction: column;
211
- gap: 6px;
212
- margin-bottom: 8px;
213
- }
214
- .field-editor-option-row {
215
- display: flex;
216
- align-items: center;
217
- gap: 6px;
218
- }
219
- .field-editor-option-remove {
220
- display: flex;
221
- align-items: center;
222
- justify-content: center;
223
- width: 24px;
224
- height: 24px;
225
- background: none;
226
- border: 1px solid var(--fb-border);
227
- border-radius: var(--fb-radius-sm);
228
- cursor: pointer;
229
- font-size: 1rem;
230
- color: var(--fb-text-muted);
231
- transition: all 0.15s ease;
232
- flex-shrink: 0;
233
- }
234
- .field-editor-option-remove:hover {
235
- color: var(--fb-danger);
236
- border-color: var(--fb-danger);
237
- background: #fef2f2;
238
- }
239
- .field-editor-add-option-btn {
240
- padding: 6px 12px;
241
- font-size: 0.75rem;
242
- font-weight: 500;
243
- color: var(--fb-primary);
244
- background: var(--fb-primary-light);
245
- border: 1px dashed var(--fb-primary);
246
- border-radius: var(--fb-radius-sm);
247
- cursor: pointer;
248
- transition: all 0.15s ease;
249
- width: 100%;
250
- }
251
- .field-editor-add-option-btn:hover {
252
- background: #dbeafe;
253
- }
254
- .field-editor-tabs {
255
- display: flex;
256
- gap: 0;
257
- background: var(--fb-bg-muted);
258
- border-radius: var(--fb-radius-sm);
259
- padding: 3px;
260
- margin-bottom: 16px;
261
- }
262
- .field-editor-tab {
263
- flex: 1;
264
- padding: 5px 10px;
265
- font-size: 0.75rem;
266
- font-weight: 500;
267
- color: var(--fb-text-muted);
268
- background: transparent;
269
- border: none;
270
- border-radius: 4px;
271
- cursor: pointer;
272
- transition: all 0.15s ease;
273
- }
274
- .field-editor-tab--active {
275
- color: var(--fb-text);
276
- background: var(--fb-bg);
277
- }
278
- .field-editor-footer {
279
- display: flex;
280
- gap: 8px;
281
- margin-top: 20px;
282
- padding-top: 16px;
283
- border-top: 1px solid var(--fb-border);
284
- }
285
- .field-editor-btn {
286
- display: inline-flex;
287
- align-items: center;
288
- justify-content: center;
289
- gap: 6px;
290
- padding: 7px 14px;
291
- font-size: 0.8125rem;
292
- font-weight: 500;
293
- border-radius: var(--fb-radius-sm);
294
- cursor: pointer;
295
- transition: all 0.15s ease;
296
- border: 1px solid var(--fb-border);
297
- background: var(--fb-bg);
298
- color: var(--fb-text-muted);
299
- }
300
- .field-editor-btn:hover {
301
- color: var(--fb-text);
302
- border-color: var(--fb-text-light);
303
- }
304
- .field-editor-btn--secondary {
305
- color: var(--fb-text-muted);
306
- }
307
- .field-editor-btn--danger {
308
- color: var(--fb-danger);
309
- border-color: #fecaca;
310
- background: #fef2f2;
311
- }
312
- .field-editor-btn--danger:hover {
313
- background: #fee2e2;
314
- border-color: var(--fb-danger);
315
- }
316
- .form-settings-tab {
317
- max-width: 640px;
318
- }
319
- .form-settings-section {
320
- margin-bottom: 32px;
321
- padding-bottom: 24px;
322
- border-bottom: 1px solid var(--fb-border);
323
- }
324
- .form-settings-section:last-child {
325
- margin-bottom: 0;
326
- padding-bottom: 0;
327
- border-bottom: none;
328
- }
329
- .form-settings-section-title {
330
- font-size: 1rem;
331
- font-weight: 600;
332
- color: var(--fb-text);
333
- margin: 0 0 16px 0;
334
- }
335
- .form-settings-field {
336
- margin-bottom: 16px;
337
- }
338
- .form-settings-field:last-child {
339
- margin-bottom: 0;
340
- }
341
- .form-settings-field--checkbox {
342
- margin-bottom: 12px;
343
- }
344
- .form-settings-label {
345
- display: block;
346
- font-size: 0.875rem;
347
- font-weight: 500;
348
- color: var(--fb-text);
349
- margin-bottom: 6px;
350
- }
351
- .form-settings-input,
352
- .form-settings-textarea {
353
- width: 100%;
354
- padding: 10px 14px;
355
- font-size: 0.875rem;
356
- color: var(--fb-text);
357
- background: var(--fb-bg);
358
- border: 1px solid var(--fb-border);
359
- border-radius: var(--fb-radius-md);
360
- transition: all 0.15s ease;
361
- }
362
- .form-settings-input:focus,
363
- .form-settings-textarea:focus {
364
- outline: none;
365
- border-color: var(--fb-border-focus);
366
- }
367
- .form-settings-input::placeholder,
368
- .form-settings-textarea::placeholder {
369
- color: var(--fb-text-light);
370
- }
371
- .form-settings-textarea {
372
- min-height: 80px;
373
- resize: vertical;
374
- }
375
- .form-settings-checkbox-label {
376
- display: flex;
377
- align-items: center;
378
- gap: 10px;
379
- cursor: pointer;
380
- font-size: 0.875rem;
381
- color: var(--fb-text);
382
- }
383
- .form-settings-checkbox {
384
- width: 18px;
385
- height: 18px;
386
- accent-color: var(--fb-primary);
387
- cursor: pointer;
388
- }
389
- .form-settings-hint {
390
- font-size: 0.75rem;
391
- color: var(--fb-text-muted);
392
- margin: 6px 0 0 0;
393
- }
394
- .form-settings-field--checkbox .form-settings-hint {
395
- margin-left: 28px;
396
- }
397
- .form-notifications-tab {
398
- max-width: 800px;
399
- }
400
- .form-notifications-header {
401
- display: flex;
402
- align-items: flex-start;
403
- justify-content: space-between;
404
- gap: 24px;
405
- margin-bottom: 24px;
406
- }
407
- .form-notifications-header-content {
408
- flex: 1;
409
- }
410
- .form-notifications-title {
411
- font-size: 1.125rem;
412
- font-weight: 600;
413
- color: var(--fb-text);
414
- margin: 0 0 4px 0;
415
- }
416
- .form-notifications-description {
417
- font-size: 0.875rem;
418
- color: var(--fb-text-muted);
419
- margin: 0;
420
- }
421
- .form-notifications-actions {
422
- display: flex;
423
- gap: 8px;
424
- }
425
- .form-notifications-add-btn {
426
- padding: 8px 14px;
427
- font-size: 0.8125rem;
428
- font-weight: 500;
429
- color: #ffffff;
430
- background: var(--fb-primary);
431
- border: none;
432
- border-radius: var(--fb-radius-md);
433
- cursor: pointer;
434
- transition: all 0.15s ease;
435
- white-space: nowrap;
436
- }
437
- .form-notifications-add-btn:hover {
438
- background: var(--fb-primary-hover);
439
- }
440
- .form-notifications-add-btn--secondary {
441
- color: var(--fb-text);
442
- background: var(--fb-bg);
443
- border: 1px solid var(--fb-border);
444
- }
445
- .form-notifications-add-btn--secondary:hover {
446
- background: var(--fb-bg-hover);
447
- border-color: var(--fb-text-light);
448
- }
449
- .form-notifications-empty {
450
- display: flex;
451
- flex-direction: column;
452
- align-items: center;
453
- justify-content: center;
454
- padding: 48px 24px;
455
- background: var(--fb-bg-muted);
456
- border: 2px dashed var(--fb-border);
457
- border-radius: var(--fb-radius-lg);
458
- text-align: center;
459
- }
460
- .form-notifications-empty-icon {
461
- font-size: 3rem;
462
- margin-bottom: 16px;
463
- opacity: 0.5;
464
- }
465
- .form-notifications-empty-title {
466
- font-size: 1rem;
467
- font-weight: 600;
468
- color: var(--fb-text);
469
- margin: 0 0 8px 0;
470
- }
471
- .form-notifications-empty-hint {
472
- font-size: 0.875rem;
473
- color: var(--fb-text-muted);
474
- margin: 0 0 20px 0;
475
- max-width: 400px;
476
- }
477
- .form-notifications-empty-actions {
478
- display: flex;
479
- gap: 8px;
480
- }
481
- .form-notifications-list {
482
- display: flex;
483
- flex-direction: column;
484
- gap: 16px;
485
- }
486
- .form-notification-card {
487
- background: var(--fb-bg);
488
- border: 1px solid var(--fb-border);
489
- border-radius: var(--fb-radius-lg);
490
- overflow: hidden;
491
- }
492
- .form-notification-card--disabled {
493
- opacity: 0.6;
494
- }
495
- .form-notification-header {
496
- display: flex;
497
- align-items: center;
498
- justify-content: space-between;
499
- gap: 12px;
500
- padding: 12px 16px;
501
- background: var(--fb-bg-muted);
502
- border-bottom: 1px solid var(--fb-border);
503
- }
504
- .form-notification-header-left {
505
- display: flex;
506
- align-items: center;
507
- gap: 12px;
508
- flex: 1;
509
- min-width: 0;
510
- }
511
- .form-notification-toggle {
512
- position: relative;
513
- display: inline-block;
514
- width: 40px;
515
- height: 22px;
516
- flex-shrink: 0;
517
- }
518
- .form-notification-toggle input {
519
- opacity: 0;
520
- width: 0;
521
- height: 0;
522
- }
523
- .form-notification-toggle-slider {
524
- position: absolute;
525
- cursor: pointer;
526
- top: 0;
527
- left: 0;
528
- right: 0;
529
- bottom: 0;
530
- background-color: var(--fb-border);
531
- transition: 0.2s;
532
- border-radius: 22px;
533
- }
534
- .form-notification-toggle-slider:before {
535
- position: absolute;
536
- content: "";
537
- height: 16px;
538
- width: 16px;
539
- left: 3px;
540
- bottom: 3px;
541
- background-color: white;
542
- transition: 0.2s;
543
- border-radius: 50%;
544
- }
545
- .form-notification-toggle input:checked + .form-notification-toggle-slider {
546
- background-color: var(--fb-success);
547
- }
548
- .form-notification-toggle input:checked + .form-notification-toggle-slider:before {
549
- transform: translateX(18px);
550
- }
551
- .form-notification-name {
552
- flex: 1;
553
- min-width: 0;
554
- padding: 6px 10px;
555
- font-size: 0.875rem;
556
- font-weight: 500;
557
- color: var(--fb-text);
558
- background: var(--fb-bg);
559
- border: 1px solid transparent;
560
- border-radius: var(--fb-radius-sm);
561
- transition: all 0.15s ease;
562
- }
563
- .form-notification-name:focus {
564
- outline: none;
565
- border-color: var(--fb-border-focus);
566
- }
567
- .form-notification-badge {
568
- padding: 3px 8px;
569
- font-size: 0.6875rem;
570
- font-weight: 600;
571
- text-transform: uppercase;
572
- letter-spacing: 0.05em;
573
- border-radius: 9999px;
574
- flex-shrink: 0;
575
- }
576
- .form-notification-badge--admin {
577
- color: #7c3aed;
578
- background: #ede9fe;
579
- }
580
- .form-notification-badge--autoReply {
581
- color: #059669;
582
- background: #d1fae5;
583
- }
584
- .form-notification-delete {
585
- padding: 6px 12px;
586
- font-size: 0.75rem;
587
- font-weight: 500;
588
- color: var(--fb-text-muted);
589
- background: transparent;
590
- border: 1px solid var(--fb-border);
591
- border-radius: var(--fb-radius-sm);
592
- cursor: pointer;
593
- transition: all 0.15s ease;
594
- }
595
- .form-notification-delete:hover {
596
- color: var(--fb-danger);
597
- border-color: var(--fb-danger);
598
- background: #fef2f2;
599
- }
600
- .form-notification-body {
601
- padding: 16px;
602
- }
603
- .form-notification-row {
604
- margin-bottom: 16px;
605
- }
606
- .form-notification-row:last-child {
607
- margin-bottom: 0;
608
- }
609
- .form-notification-row--two-col {
610
- display: grid;
611
- grid-template-columns: 1fr 1fr;
612
- gap: 16px;
613
- }
614
- .form-notification-field {
615
- display: flex;
616
- flex-direction: column;
617
- gap: 6px;
618
- }
619
- .form-notification-label {
620
- font-size: 0.8125rem;
621
- font-weight: 500;
622
- color: var(--fb-text);
623
- }
624
- .form-notification-input,
625
- .form-notification-textarea {
626
- padding: 10px 14px;
627
- font-size: 0.875rem;
628
- color: var(--fb-text);
629
- background: var(--fb-bg);
630
- border: 1px solid var(--fb-border);
631
- border-radius: var(--fb-radius-md);
632
- transition: all 0.15s ease;
633
- }
634
- .form-notification-input:focus,
635
- .form-notification-textarea:focus {
636
- outline: none;
637
- border-color: var(--fb-border-focus);
638
- }
639
- .form-notification-input::placeholder,
640
- .form-notification-textarea::placeholder {
641
- color: var(--fb-text-light);
642
- }
643
- .form-notification-textarea {
644
- min-height: 120px;
645
- resize: vertical;
646
- font-family: inherit;
647
- }
648
- .form-notification-hint {
649
- font-size: 0.75rem;
650
- color: var(--fb-text-muted);
651
- }
652
- .form-notification-hint p {
653
- margin: 0 0 4px 0;
654
- }
655
- .form-notification-placeholders {
656
- margin: 0;
657
- padding-left: 16px;
658
- list-style: none;
659
- }
660
- .form-notification-placeholders li {
661
- margin-bottom: 2px;
662
- }
663
- .form-notification-placeholders code {
664
- font-size: 0.6875rem;
665
- color: var(--fb-primary);
666
- background: var(--fb-primary-light);
667
- padding: 1px 4px;
668
- border-radius: 3px;
669
- }
670
- .form-notifications-help {
671
- margin-top: 32px;
672
- padding: 16px 20px;
673
- background: var(--fb-bg-muted);
674
- border-radius: var(--fb-radius-md);
675
- }
676
- .form-notifications-help h4 {
677
- font-size: 0.875rem;
678
- font-weight: 600;
679
- color: var(--fb-text);
680
- margin: 0 0 12px 0;
681
- }
682
- .form-notifications-help ul {
683
- margin: 0;
684
- padding-left: 20px;
685
- font-size: 0.8125rem;
686
- color: var(--fb-text-muted);
687
- line-height: 1.6;
688
- }
689
- .form-notifications-help li {
690
- margin-bottom: 6px;
691
- }
692
- .form-notifications-help li:last-child {
693
- margin-bottom: 0;
694
- }
695
- .form-notifications-help strong {
696
- color: var(--fb-text);
697
- }
698
- .form-integration-card {
699
- display: flex;
700
- align-items: center;
701
- justify-content: space-between;
702
- gap: 16px;
703
- padding: 14px 16px;
704
- background: var(--fb-bg);
705
- border: 1px solid var(--fb-border);
706
- border-radius: var(--fb-radius-lg);
707
- transition: border-color 0.15s ease;
708
- }
709
- .form-integration-card:hover {
710
- border-color: var(--fb-text-light);
711
- }
712
- .form-integration-card--disabled {
713
- opacity: 0.55;
714
- }
715
- .form-integration-card-left {
716
- display: flex;
717
- align-items: center;
718
- gap: 12px;
719
- flex: 1;
720
- min-width: 0;
721
- }
722
- .form-integration-card-info {
723
- display: flex;
724
- flex-direction: column;
725
- gap: 4px;
726
- min-width: 0;
727
- }
728
- .form-integration-card-name {
729
- font-size: 0.9375rem;
730
- font-weight: 600;
731
- color: var(--fb-text);
732
- white-space: nowrap;
733
- overflow: hidden;
734
- text-overflow: ellipsis;
735
- }
736
- .form-integration-provider-badge {
737
- font-size: 0.75rem;
738
- color: var(--fb-text-muted);
739
- }
740
- .form-integration-card-actions {
741
- display: flex;
742
- gap: 8px;
743
- flex-shrink: 0;
744
- }
745
- .form-integration-btn {
746
- padding: 6px 12px;
747
- font-size: 0.75rem;
748
- font-weight: 500;
749
- border-radius: var(--fb-radius-sm);
750
- cursor: pointer;
751
- transition: all 0.15s ease;
752
- border: 1px solid var(--fb-border);
753
- background: transparent;
754
- }
755
- .form-integration-btn--edit {
756
- color: var(--fb-text-muted);
757
- }
758
- .form-integration-btn--edit:hover {
759
- color: var(--fb-primary);
760
- border-color: var(--fb-primary);
761
- background: var(--fb-primary-light);
762
- }
763
- .form-integration-btn--delete {
764
- color: var(--fb-text-muted);
765
- }
766
- .form-integration-btn--delete:hover {
767
- color: var(--fb-danger);
768
- border-color: var(--fb-danger);
769
- background: #fef2f2;
770
- }
771
- .form-integration-modal-overlay {
772
- position: fixed;
773
- inset: 0;
774
- background: rgba(0, 0, 0, 0.45);
775
- display: flex;
776
- align-items: center;
777
- justify-content: center;
778
- z-index: 1000;
779
- padding: 24px;
780
- }
781
- .form-integration-modal {
782
- background: var(--fb-bg);
783
- border: 1px solid var(--fb-border);
784
- border-radius: var(--fb-radius-lg);
785
- width: 100%;
786
- max-width: 560px;
787
- max-height: calc(100vh - 48px);
788
- display: flex;
789
- flex-direction: column;
790
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
791
- }
792
- .form-integration-modal-header {
793
- padding: 20px 24px 16px;
794
- border-bottom: 1px solid var(--fb-border);
795
- flex-shrink: 0;
796
- }
797
- .form-integration-modal-title {
798
- font-size: 1.0625rem;
799
- font-weight: 600;
800
- color: var(--fb-text);
801
- margin: 0;
802
- }
803
- .form-integration-modal-body {
804
- padding: 20px 24px;
805
- overflow-y: auto;
806
- display: flex;
807
- flex-direction: column;
808
- gap: 16px;
809
- flex: 1;
810
- }
811
- .form-integration-modal-footer {
812
- padding: 16px 24px;
813
- border-top: 1px solid var(--fb-border);
814
- display: flex;
815
- justify-content: flex-end;
816
- gap: 8px;
817
- flex-shrink: 0;
818
- }
819
- .form-integration-select {
820
- padding: 10px 14px;
821
- font-size: 0.875rem;
822
- color: var(--fb-text);
823
- background: var(--fb-bg);
824
- border: 1px solid var(--fb-border);
825
- border-radius: var(--fb-radius-md);
826
- transition: all 0.15s ease;
827
- appearance: none;
828
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
829
- background-repeat: no-repeat;
830
- background-position: right 12px center;
831
- padding-right: 36px;
832
- cursor: pointer;
833
- }
834
- .form-integration-select:focus {
835
- outline: none;
836
- border-color: var(--fb-border-focus);
837
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
838
- }
839
- .form-integration-recipient-list {
840
- display: flex;
841
- flex-direction: column;
842
- gap: 6px;
843
- margin-bottom: 8px;
844
- }
845
- .form-integration-recipient-item {
846
- display: flex;
847
- align-items: center;
848
- justify-content: space-between;
849
- padding: 6px 10px;
850
- background: var(--fb-bg-muted);
851
- border: 1px solid var(--fb-border);
852
- border-radius: var(--fb-radius-sm);
853
- font-size: 0.8125rem;
854
- color: var(--fb-text);
855
- }
856
- .form-integration-recipient-remove {
857
- background: transparent;
858
- border: none;
859
- color: var(--fb-text-light);
860
- cursor: pointer;
861
- font-size: 1rem;
862
- line-height: 1;
863
- padding: 0 2px;
864
- transition: color 0.15s ease;
865
- }
866
- .form-integration-recipient-remove:hover {
867
- color: var(--fb-danger);
868
- }
869
- .form-integration-recipient-add {
870
- display: flex;
871
- gap: 8px;
872
- }
873
- .form-integration-recipient-add .form-notification-input {
874
- flex: 1;
875
- }
876
- .form-integration-add-recipient-btn {
877
- padding: 10px 14px;
878
- font-size: 0.8125rem;
879
- font-weight: 500;
880
- color: var(--fb-text);
881
- background: var(--fb-bg);
882
- border: 1px solid var(--fb-border);
883
- border-radius: var(--fb-radius-md);
884
- cursor: pointer;
885
- white-space: nowrap;
886
- transition: all 0.15s ease;
887
- flex-shrink: 0;
888
- }
889
- .form-integration-add-recipient-btn:hover {
890
- background: var(--fb-bg-hover);
891
- border-color: var(--fb-text-light);
892
- }
893
- .form-integration-active-row {
894
- display: flex;
895
- align-items: center;
896
- justify-content: space-between;
897
- padding: 12px 0 4px;
898
- border-top: 1px solid var(--fb-border);
899
- }
900
- .form-integration-active-label {
901
- font-size: 0.875rem;
902
- font-weight: 500;
903
- color: var(--fb-text);
904
- }
905
- .form-integration-cancel-btn {
906
- padding: 9px 18px;
907
- font-size: 0.875rem;
908
- font-weight: 500;
909
- color: var(--fb-text);
910
- background: var(--fb-bg);
911
- border: 1px solid var(--fb-border);
912
- border-radius: var(--fb-radius-md);
913
- cursor: pointer;
914
- transition: all 0.15s ease;
915
- }
916
- .form-integration-cancel-btn:hover {
917
- background: var(--fb-bg-hover);
918
- border-color: var(--fb-text-light);
919
- }
920
- .form-integration-save-btn {
921
- padding: 9px 18px;
922
- font-size: 0.875rem;
923
- font-weight: 500;
924
- color: #ffffff;
925
- background: var(--fb-primary);
926
- border: none;
927
- border-radius: var(--fb-radius-md);
928
- cursor: pointer;
929
- transition: background 0.15s ease;
930
- }
931
- .form-integration-save-btn:hover {
932
- background: var(--fb-primary-hover);
933
- }
934
- /*# sourceMappingURL=index.css.map */