@salesforcedevs/docs-components 0.0.11-chat → 0.0.11-edit

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.
@@ -0,0 +1,613 @@
1
+ /* Host container */
2
+ :host {
3
+ font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont,
4
+ "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
5
+ sans-serif;
6
+ position: absolute;
7
+ top: 10px;
8
+ left: 50%;
9
+ z-index: 1000;
10
+ }
11
+
12
+ /* Edit File Trigger Button */
13
+ .edit-file-trigger {
14
+ background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
15
+ color: white;
16
+ border: none;
17
+ border-radius: 12px;
18
+ padding: 12px 16px;
19
+ cursor: pointer;
20
+ display: flex;
21
+ align-items: center;
22
+ gap: 8px;
23
+ box-shadow: 0 4px 16px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
24
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
25
+ font-size: 14px;
26
+ font-weight: 500;
27
+ letter-spacing: 0.02em;
28
+ width: 150px;
29
+ justify-content: center;
30
+ }
31
+
32
+ .edit-file-trigger:hover:not(:disabled) {
33
+ background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
34
+ transform: translateY(-2px);
35
+ box-shadow: 0 6px 20px rgb(1 118 211 / 35%), 0 4px 12px rgb(1 118 211 / 25%);
36
+ }
37
+
38
+ .edit-file-trigger:active:not(:disabled) {
39
+ transform: translateY(0);
40
+ box-shadow: 0 2px 8px rgb(1 118 211 / 30%);
41
+ }
42
+
43
+ .edit-file-trigger:disabled {
44
+ background: #d8dde6;
45
+ color: #706e6b;
46
+ cursor: not-allowed;
47
+ transform: none;
48
+ box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
49
+ }
50
+
51
+ .edit-file-icon {
52
+ width: 18px;
53
+ height: 18px;
54
+ flex-shrink: 0;
55
+ }
56
+
57
+ .edit-file-trigger-text {
58
+ font-weight: 500;
59
+ white-space: nowrap;
60
+ }
61
+
62
+ /* Overlay */
63
+ .edit-file-overlay {
64
+ position: fixed;
65
+ top: 0;
66
+ left: 0;
67
+ width: 100%;
68
+ height: 100%;
69
+ background: rgb(0 0 0 / 50%);
70
+ backdrop-filter: blur(4px);
71
+ z-index: 10000;
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: center;
75
+ opacity: 0;
76
+ visibility: hidden;
77
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
78
+ padding: 20px;
79
+ box-sizing: border-box;
80
+ }
81
+
82
+ .edit-file-overlay_open {
83
+ opacity: 1;
84
+ visibility: visible;
85
+ }
86
+
87
+ /* Popover */
88
+ .edit-file-popover {
89
+ background: white;
90
+ border-radius: 16px;
91
+ box-shadow: 0 20px 60px rgb(0 0 0 / 20%), 0 8px 24px rgb(0 0 0 / 15%);
92
+ width: 100%;
93
+ max-width: 900px;
94
+ max-height: 90vh;
95
+ display: flex;
96
+ flex-direction: column;
97
+ transform: scale(0.9) translateY(20px);
98
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
99
+ overflow: hidden;
100
+ }
101
+
102
+ .edit-file-popover_open {
103
+ transform: scale(1) translateY(0);
104
+ }
105
+
106
+ /* Popover Header */
107
+ .edit-file-header {
108
+ padding: 24px 24px 20px;
109
+ border-bottom: 1px solid #e5e7ea;
110
+ display: flex;
111
+ align-items: flex-start;
112
+ justify-content: space-between;
113
+ gap: 16px;
114
+ background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
115
+ position: relative;
116
+ }
117
+
118
+ .edit-file-title {
119
+ margin: 0;
120
+ font-size: 24px;
121
+ font-weight: 700;
122
+ color: #181818;
123
+ letter-spacing: -0.02em;
124
+ }
125
+
126
+ .edit-file-filename {
127
+ margin: 8px 0 0;
128
+ font-size: 14px;
129
+ color: #706e6b;
130
+ display: flex;
131
+ align-items: center;
132
+ gap: 6px;
133
+ font-weight: 500;
134
+ }
135
+
136
+ .edit-file-file-icon {
137
+ width: 16px;
138
+ height: 16px;
139
+ color: #0176d3;
140
+ }
141
+
142
+ .edit-file-close {
143
+ width: 40px;
144
+ height: 40px;
145
+ border: none;
146
+ background: transparent;
147
+ border-radius: 10px;
148
+ cursor: pointer;
149
+ display: flex;
150
+ align-items: center;
151
+ justify-content: center;
152
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
153
+ color: #706e6b;
154
+ flex-shrink: 0;
155
+ }
156
+
157
+ .edit-file-close:hover {
158
+ background: #f3f3f3;
159
+ color: #181818;
160
+ transform: scale(1.05);
161
+ }
162
+
163
+ .edit-file-close-icon {
164
+ width: 20px;
165
+ height: 20px;
166
+ }
167
+
168
+ /* Popover Content */
169
+ .edit-file-content {
170
+ flex: 1;
171
+ padding: 24px;
172
+ overflow-y: auto;
173
+ min-height: 0;
174
+ }
175
+
176
+ /* Loading State */
177
+ .edit-file-loading {
178
+ display: flex;
179
+ flex-direction: column;
180
+ align-items: center;
181
+ justify-content: center;
182
+ padding: 60px 20px;
183
+ gap: 16px;
184
+ }
185
+
186
+ .edit-file-spinner {
187
+ width: 32px;
188
+ height: 32px;
189
+ border: 3px solid #e5e7ea;
190
+ border-top: 3px solid #0176d3;
191
+ border-radius: 50%;
192
+ animation: edit-file-spin 1s linear infinite;
193
+ }
194
+
195
+ .edit-file-loading-text {
196
+ margin: 0;
197
+ color: #706e6b;
198
+ font-size: 16px;
199
+ font-weight: 500;
200
+ }
201
+
202
+ /* Error State */
203
+ .edit-file-error {
204
+ display: flex;
205
+ align-items: center;
206
+ gap: 12px;
207
+ padding: 16px 20px;
208
+ background: #fef7f7;
209
+ border: 1px solid #fecaca;
210
+ border-radius: 12px;
211
+ color: #dc2626;
212
+ margin-bottom: 20px;
213
+ }
214
+
215
+ .edit-file-error-icon {
216
+ width: 20px;
217
+ height: 20px;
218
+ flex-shrink: 0;
219
+ }
220
+
221
+ .edit-file-error-text {
222
+ font-size: 14px;
223
+ font-weight: 500;
224
+ }
225
+
226
+ /* Success State */
227
+ .edit-file-success {
228
+ display: flex;
229
+ align-items: flex-start;
230
+ gap: 16px;
231
+ padding: 20px;
232
+ background: #f0f9f4;
233
+ border: 1px solid #d1fae5;
234
+ border-radius: 12px;
235
+ margin-bottom: 24px;
236
+ }
237
+
238
+ .edit-file-success-icon {
239
+ width: 24px;
240
+ height: 24px;
241
+ color: #059669;
242
+ flex-shrink: 0;
243
+ margin-top: 2px;
244
+ }
245
+
246
+ .edit-file-success-content {
247
+ flex: 1;
248
+ display: flex;
249
+ flex-direction: column;
250
+ gap: 12px;
251
+ }
252
+
253
+ .edit-file-success-text {
254
+ font-size: 14px;
255
+ font-weight: 500;
256
+ color: #065f46;
257
+ line-height: 1.5;
258
+ }
259
+
260
+ .edit-file-pr-link {
261
+ display: inline-flex;
262
+ align-items: center;
263
+ gap: 6px;
264
+ color: #0176d3;
265
+ text-decoration: none;
266
+ font-size: 14px;
267
+ font-weight: 500;
268
+ transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
269
+ }
270
+
271
+ .edit-file-pr-link:hover {
272
+ color: #005fb2;
273
+ text-decoration: underline;
274
+ }
275
+
276
+ .edit-file-pr-link:focus {
277
+ outline: 2px solid #0176d3;
278
+ outline-offset: 2px;
279
+ border-radius: 4px;
280
+ }
281
+
282
+ .edit-file-success-footer {
283
+ display: flex;
284
+ justify-content: flex-end;
285
+ width: 100%;
286
+ }
287
+
288
+ /* Editor */
289
+ .edit-file-editor {
290
+ width: 100%;
291
+ }
292
+
293
+ .edit-file-editor_readonly {
294
+ opacity: 0.7;
295
+ }
296
+
297
+ .edit-file-label {
298
+ display: block;
299
+ margin-bottom: 8px;
300
+ font-size: 14px;
301
+ font-weight: 600;
302
+ color: #181818;
303
+ }
304
+
305
+ .edit-file-textarea {
306
+ width: 100%;
307
+ min-height: 400px;
308
+ padding: 16px;
309
+ border: 2px solid #e5e7ea;
310
+ border-radius: 12px;
311
+ font-family: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New",
312
+ monospace;
313
+ font-size: 14px;
314
+ line-height: 1.5;
315
+ resize: vertical;
316
+ outline: none;
317
+ background: #fafbfc;
318
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
319
+ box-sizing: border-box;
320
+ }
321
+
322
+ .edit-file-textarea_readonly {
323
+ background: #f8f9fa;
324
+ border-color: #d1d5db;
325
+ color: #6b7280;
326
+ cursor: not-allowed;
327
+ }
328
+
329
+ .edit-file-textarea:focus {
330
+ border-color: #0176d3;
331
+ background: white;
332
+ box-shadow: 0 0 0 3px rgb(1 118 211 / 10%);
333
+ }
334
+
335
+ .edit-file-textarea_readonly:focus {
336
+ border-color: #d1d5db;
337
+ background: #f8f9fa;
338
+ box-shadow: none;
339
+ }
340
+
341
+ .edit-file-textarea::placeholder {
342
+ color: #9ca3af;
343
+ }
344
+
345
+ /* Popover Footer */
346
+ .edit-file-footer {
347
+ padding: 20px 24px 24px;
348
+ border-top: 1px solid #e5e7ea;
349
+ display: flex;
350
+ align-items: center;
351
+ justify-content: space-between;
352
+ gap: 16px;
353
+ background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
354
+ }
355
+
356
+ /* Status Indicators */
357
+ .edit-file-status {
358
+ display: flex;
359
+ align-items: center;
360
+ gap: 8px;
361
+ font-size: 14px;
362
+ font-weight: 500;
363
+ }
364
+
365
+ .edit-file-saving {
366
+ display: flex;
367
+ align-items: center;
368
+ gap: 8px;
369
+ color: #0176d3;
370
+ }
371
+
372
+ .edit-file-mini-spinner {
373
+ width: 16px;
374
+ height: 16px;
375
+ border: 2px solid #e5e7ea;
376
+ border-top: 2px solid #0176d3;
377
+ border-radius: 50%;
378
+ animation: edit-file-spin 1s linear infinite;
379
+ }
380
+
381
+ .edit-file-unchanged {
382
+ color: #706e6b;
383
+ }
384
+
385
+ .edit-file-modified {
386
+ color: #059669;
387
+ position: relative;
388
+ }
389
+
390
+ .edit-file-modified::before {
391
+ content: "●";
392
+ margin-right: 6px;
393
+ color: #059669;
394
+ }
395
+
396
+ /* Action Buttons */
397
+ .edit-file-actions {
398
+ display: flex;
399
+ gap: 12px;
400
+ }
401
+
402
+ .edit-file-button {
403
+ padding: 12px 24px;
404
+ border-radius: 10px;
405
+ font-size: 14px;
406
+ font-weight: 600;
407
+ cursor: pointer;
408
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
409
+ display: flex;
410
+ align-items: center;
411
+ gap: 8px;
412
+ border: none;
413
+ white-space: nowrap;
414
+ }
415
+
416
+ .edit-file-button_secondary {
417
+ background: #f3f3f3;
418
+ color: #181818;
419
+ border: 1px solid #e5e7ea;
420
+ }
421
+
422
+ .edit-file-button_secondary:hover:not(:disabled) {
423
+ background: #e5e7ea;
424
+ transform: translateY(-1px);
425
+ }
426
+
427
+ .edit-file-button_primary {
428
+ background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
429
+ color: white;
430
+ }
431
+
432
+ .edit-file-button_primary:hover:not(:disabled) {
433
+ background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
434
+ transform: translateY(-1px);
435
+ box-shadow: 0 4px 12px rgb(1 118 211 / 25%);
436
+ }
437
+
438
+ .edit-file-button_disabled {
439
+ background: #d8dde6 !important;
440
+ color: #706e6b !important;
441
+ cursor: not-allowed !important;
442
+ transform: none !important;
443
+ box-shadow: none !important;
444
+ }
445
+
446
+ .edit-file-button:disabled {
447
+ background: #d8dde6;
448
+ color: #706e6b;
449
+ cursor: not-allowed;
450
+ transform: none;
451
+ box-shadow: none;
452
+ }
453
+
454
+ .edit-file-button-spinner {
455
+ width: 16px;
456
+ height: 16px;
457
+ border: 2px solid transparent;
458
+ border-top: 2px solid currentcolor;
459
+ border-radius: 50%;
460
+ animation: edit-file-spin 1s linear infinite;
461
+ }
462
+
463
+ /* Animations */
464
+ @keyframes edit-file-spin {
465
+ to {
466
+ transform: rotate(360deg);
467
+ }
468
+ }
469
+
470
+ /* Responsive Design */
471
+ @media (max-width: 768px) {
472
+ .edit-file-trigger {
473
+ padding: 10px 14px;
474
+ font-size: 13px;
475
+ }
476
+
477
+ .edit-file-trigger-text {
478
+ display: none;
479
+ }
480
+
481
+ .edit-file-overlay {
482
+ padding: 16px;
483
+ }
484
+
485
+ .edit-file-popover {
486
+ max-width: 100%;
487
+ max-height: 95vh;
488
+ }
489
+
490
+ .edit-file-header {
491
+ padding: 20px 20px 16px;
492
+ }
493
+
494
+ .edit-file-title {
495
+ font-size: 20px;
496
+ }
497
+
498
+ .edit-file-content {
499
+ padding: 20px;
500
+ }
501
+
502
+ .edit-file-textarea {
503
+ min-height: 300px;
504
+ font-size: 13px;
505
+ }
506
+
507
+ .edit-file-footer {
508
+ padding: 16px 20px 20px;
509
+ flex-direction: column;
510
+ align-items: stretch;
511
+ gap: 12px;
512
+ }
513
+
514
+ .edit-file-actions {
515
+ width: 100%;
516
+ justify-content: stretch;
517
+ }
518
+
519
+ .edit-file-button {
520
+ flex: 1;
521
+ justify-content: center;
522
+ }
523
+ }
524
+
525
+ @media (max-width: 480px) {
526
+ .edit-file-trigger {
527
+ padding: 8px 12px;
528
+ }
529
+
530
+ .edit-file-overlay {
531
+ padding: 12px;
532
+ }
533
+
534
+ .edit-file-header {
535
+ padding: 16px;
536
+ }
537
+
538
+ .edit-file-title {
539
+ font-size: 18px;
540
+ }
541
+
542
+ .edit-file-content {
543
+ padding: 16px;
544
+ }
545
+
546
+ .edit-file-footer {
547
+ padding: 12px 16px 16px;
548
+ }
549
+
550
+ .edit-file-textarea {
551
+ min-height: 250px;
552
+ padding: 12px;
553
+ }
554
+
555
+ .edit-file-success {
556
+ padding: 12px;
557
+ gap: 8px;
558
+ }
559
+
560
+ .edit-file-success-icon {
561
+ width: 18px;
562
+ height: 18px;
563
+ }
564
+
565
+ .edit-file-success-content {
566
+ gap: 6px;
567
+ }
568
+
569
+ .edit-file-success-text {
570
+ font-size: 12px;
571
+ }
572
+
573
+ .edit-file-pr-link {
574
+ font-size: 12px;
575
+ }
576
+ }
577
+
578
+ /* Accessibility improvements */
579
+ @media (prefers-reduced-motion: reduce) {
580
+ .edit-file-trigger,
581
+ .edit-file-overlay,
582
+ .edit-file-popover,
583
+ .edit-file-close,
584
+ .edit-file-button,
585
+ .edit-file-textarea {
586
+ transition: none;
587
+ }
588
+
589
+ .edit-file-spinner,
590
+ .edit-file-mini-spinner,
591
+ .edit-file-button-spinner {
592
+ animation: none;
593
+ }
594
+ }
595
+
596
+ /* High contrast mode support */
597
+ @media (prefers-contrast: high) {
598
+ .edit-file-trigger {
599
+ border: 2px solid;
600
+ }
601
+
602
+ .edit-file-popover {
603
+ border: 2px solid #000;
604
+ }
605
+
606
+ .edit-file-textarea {
607
+ border: 2px solid #000;
608
+ }
609
+
610
+ .edit-file-button {
611
+ border: 2px solid;
612
+ }
613
+ }