@parathantl/react-email-editor 0.1.0 → 0.1.2
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.
- package/README.md +129 -2
- package/dist/index.cjs +3601 -3641
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +439 -30
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +205 -58
- package/dist/index.d.ts +205 -58
- package/dist/index.js +3708 -3765
- package/dist/index.js.map +1 -1
- package/package.json +11 -5
package/dist/index.css
CHANGED
|
@@ -1,3 +1,122 @@
|
|
|
1
|
+
/* src/styles/error-boundary.module.css */
|
|
2
|
+
.errorBoundary {
|
|
3
|
+
padding: var(--ee-space-lg);
|
|
4
|
+
margin: var(--ee-space-sm);
|
|
5
|
+
background: var(--ee-color-danger-light);
|
|
6
|
+
border: 1px solid var(--ee-color-danger-border);
|
|
7
|
+
border-radius: var(--ee-border-radius);
|
|
8
|
+
color: var(--ee-color-danger);
|
|
9
|
+
font-size: var(--ee-font-size-md);
|
|
10
|
+
}
|
|
11
|
+
.errorMessage {
|
|
12
|
+
margin: var(--ee-space-sm) 0 0;
|
|
13
|
+
color: var(--ee-color-danger-hover);
|
|
14
|
+
}
|
|
15
|
+
.retryBtn {
|
|
16
|
+
margin-top: var(--ee-space-md);
|
|
17
|
+
padding: var(--ee-space-sm) var(--ee-space-lg);
|
|
18
|
+
background: var(--ee-color-danger);
|
|
19
|
+
color: var(--ee-text-inverse);
|
|
20
|
+
border: none;
|
|
21
|
+
border-radius: var(--ee-border-radius-sm);
|
|
22
|
+
font-size: var(--ee-font-size-sm);
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
transition: background var(--ee-transition-fast);
|
|
25
|
+
}
|
|
26
|
+
.retryBtn:hover {
|
|
27
|
+
background: var(--ee-color-danger-hover);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* src/styles/confirm-dialog.module.css */
|
|
31
|
+
.overlay {
|
|
32
|
+
position: fixed;
|
|
33
|
+
top: 0;
|
|
34
|
+
right: 0;
|
|
35
|
+
bottom: 0;
|
|
36
|
+
left: 0;
|
|
37
|
+
background: var(--ee-overlay-backdrop);
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
z-index: var(--ee-z-modal);
|
|
42
|
+
animation: fadeIn var(--ee-transition-fast);
|
|
43
|
+
}
|
|
44
|
+
.dialog {
|
|
45
|
+
background: var(--ee-bg-panel);
|
|
46
|
+
border-radius: var(--ee-border-radius-lg);
|
|
47
|
+
box-shadow: var(--ee-shadow-lg);
|
|
48
|
+
padding: var(--ee-space-xl);
|
|
49
|
+
min-width: 320px;
|
|
50
|
+
max-width: 400px;
|
|
51
|
+
animation: slideUp var(--ee-transition-normal);
|
|
52
|
+
font-family: var(--ee-font-family);
|
|
53
|
+
}
|
|
54
|
+
.title {
|
|
55
|
+
margin: 0 0 var(--ee-space-sm) 0;
|
|
56
|
+
font-size: var(--ee-font-size-lg);
|
|
57
|
+
font-weight: var(--ee-font-weight-semibold);
|
|
58
|
+
color: var(--ee-text-primary);
|
|
59
|
+
}
|
|
60
|
+
.message {
|
|
61
|
+
margin: 0 0 var(--ee-space-xl) 0;
|
|
62
|
+
font-size: var(--ee-font-size-base);
|
|
63
|
+
color: var(--ee-text-secondary);
|
|
64
|
+
line-height: 1.5;
|
|
65
|
+
}
|
|
66
|
+
.actions {
|
|
67
|
+
display: flex;
|
|
68
|
+
justify-content: flex-end;
|
|
69
|
+
gap: var(--ee-space-sm);
|
|
70
|
+
}
|
|
71
|
+
.btnCancel {
|
|
72
|
+
padding: var(--ee-space-sm) var(--ee-space-lg);
|
|
73
|
+
border: 1px solid var(--ee-border-color);
|
|
74
|
+
border-radius: var(--ee-border-radius-sm);
|
|
75
|
+
background: var(--ee-bg-panel);
|
|
76
|
+
color: var(--ee-text-primary);
|
|
77
|
+
font-size: var(--ee-font-size-base);
|
|
78
|
+
font-family: var(--ee-font-family);
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
transition: all var(--ee-transition-fast);
|
|
81
|
+
}
|
|
82
|
+
.btnCancel:hover {
|
|
83
|
+
background: var(--ee-bg-hover);
|
|
84
|
+
border-color: var(--ee-border-color-strong);
|
|
85
|
+
}
|
|
86
|
+
.btnConfirm {
|
|
87
|
+
padding: var(--ee-space-sm) var(--ee-space-lg);
|
|
88
|
+
border: 1px solid var(--ee-color-danger);
|
|
89
|
+
border-radius: var(--ee-border-radius-sm);
|
|
90
|
+
background: var(--ee-color-danger);
|
|
91
|
+
color: var(--ee-text-inverse);
|
|
92
|
+
font-size: var(--ee-font-size-base);
|
|
93
|
+
font-family: var(--ee-font-family);
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
transition: all var(--ee-transition-fast);
|
|
96
|
+
}
|
|
97
|
+
.btnConfirm:hover {
|
|
98
|
+
background: var(--ee-color-danger-hover);
|
|
99
|
+
border-color: var(--ee-color-danger-hover);
|
|
100
|
+
}
|
|
101
|
+
@keyframes fadeIn {
|
|
102
|
+
from {
|
|
103
|
+
opacity: 0;
|
|
104
|
+
}
|
|
105
|
+
to {
|
|
106
|
+
opacity: 1;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
@keyframes slideUp {
|
|
110
|
+
from {
|
|
111
|
+
opacity: 0;
|
|
112
|
+
transform: translateY(8px);
|
|
113
|
+
}
|
|
114
|
+
to {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
transform: translateY(0);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
1
120
|
/* src/styles/toolbar.module.css */
|
|
2
121
|
.toolbar {
|
|
3
122
|
display: flex;
|
|
@@ -102,6 +221,38 @@
|
|
|
102
221
|
color: var(--ee-color-primary);
|
|
103
222
|
border-color: var(--ee-color-primary);
|
|
104
223
|
}
|
|
224
|
+
.exportWrapper {
|
|
225
|
+
position: relative;
|
|
226
|
+
}
|
|
227
|
+
.exportDropdown {
|
|
228
|
+
position: absolute;
|
|
229
|
+
top: 100%;
|
|
230
|
+
right: 0;
|
|
231
|
+
margin-top: 4px;
|
|
232
|
+
background: var(--ee-bg-panel);
|
|
233
|
+
border: 1px solid var(--ee-border-color);
|
|
234
|
+
border-radius: var(--ee-border-radius);
|
|
235
|
+
box-shadow: var(--ee-shadow-md);
|
|
236
|
+
z-index: var(--ee-z-dropdown);
|
|
237
|
+
min-width: 120px;
|
|
238
|
+
overflow: hidden;
|
|
239
|
+
}
|
|
240
|
+
.exportDropdownItem {
|
|
241
|
+
display: block;
|
|
242
|
+
width: 100%;
|
|
243
|
+
padding: 8px 16px;
|
|
244
|
+
font-size: var(--ee-font-size-sm);
|
|
245
|
+
font-family: var(--ee-font-family);
|
|
246
|
+
color: var(--ee-text-primary);
|
|
247
|
+
background: none;
|
|
248
|
+
border: none;
|
|
249
|
+
text-align: left;
|
|
250
|
+
cursor: pointer;
|
|
251
|
+
transition: background var(--ee-transition-fast);
|
|
252
|
+
}
|
|
253
|
+
.exportDropdownItem:hover {
|
|
254
|
+
background: var(--ee-bg-hover);
|
|
255
|
+
}
|
|
105
256
|
.richTextToolbar {
|
|
106
257
|
display: flex;
|
|
107
258
|
align-items: center;
|
|
@@ -274,6 +425,11 @@
|
|
|
274
425
|
.richTextLinkInput:focus {
|
|
275
426
|
border-color: var(--ee-border-focus);
|
|
276
427
|
}
|
|
428
|
+
.richTextLinkError {
|
|
429
|
+
color: var(--ee-color-danger, #dc2626);
|
|
430
|
+
font-size: 11px;
|
|
431
|
+
margin-bottom: 4px;
|
|
432
|
+
}
|
|
277
433
|
.richTextLinkActions {
|
|
278
434
|
display: flex;
|
|
279
435
|
gap: 6px;
|
|
@@ -307,10 +463,14 @@
|
|
|
307
463
|
}
|
|
308
464
|
.richTextLinkRemove:hover {
|
|
309
465
|
background: var(--ee-color-danger, #ef4444);
|
|
310
|
-
color:
|
|
466
|
+
color: var(--ee-text-inverse);
|
|
311
467
|
}
|
|
312
468
|
|
|
313
469
|
/* src/styles/editor.module.css */
|
|
470
|
+
.editorWrapper {
|
|
471
|
+
height: 100%;
|
|
472
|
+
min-height: 0;
|
|
473
|
+
}
|
|
314
474
|
.editorContainer {
|
|
315
475
|
display: flex;
|
|
316
476
|
flex-direction: column;
|
|
@@ -357,6 +517,20 @@
|
|
|
357
517
|
overflow-y: auto;
|
|
358
518
|
flex-shrink: 0;
|
|
359
519
|
}
|
|
520
|
+
.sourceLayout {
|
|
521
|
+
display: flex;
|
|
522
|
+
flex: 1;
|
|
523
|
+
min-height: 0;
|
|
524
|
+
}
|
|
525
|
+
.sourcePane {
|
|
526
|
+
flex: 1;
|
|
527
|
+
min-width: 0;
|
|
528
|
+
}
|
|
529
|
+
.sourcePaneDivider {
|
|
530
|
+
flex: 1;
|
|
531
|
+
min-width: 0;
|
|
532
|
+
border-left: 1px solid var(--ee-border-color);
|
|
533
|
+
}
|
|
360
534
|
.panelToggle {
|
|
361
535
|
display: none;
|
|
362
536
|
}
|
|
@@ -397,7 +571,10 @@
|
|
|
397
571
|
.panelOverlay.panelOverlayVisible {
|
|
398
572
|
display: block;
|
|
399
573
|
position: absolute;
|
|
400
|
-
|
|
574
|
+
top: 0;
|
|
575
|
+
right: 0;
|
|
576
|
+
bottom: 0;
|
|
577
|
+
left: 0;
|
|
401
578
|
background: var(--ee-overlay-backdrop);
|
|
402
579
|
z-index: calc(var(--ee-z-overlay) - 1);
|
|
403
580
|
}
|
|
@@ -506,7 +683,7 @@
|
|
|
506
683
|
background: var(--ee-color-primary-light);
|
|
507
684
|
border-color: var(--ee-color-primary);
|
|
508
685
|
transform: translateY(-1px);
|
|
509
|
-
box-shadow:
|
|
686
|
+
box-shadow: var(--ee-shadow-sm);
|
|
510
687
|
}
|
|
511
688
|
.variableChip:active {
|
|
512
689
|
transform: translateY(0);
|
|
@@ -519,13 +696,13 @@
|
|
|
519
696
|
transition: all 0.15s ease;
|
|
520
697
|
}
|
|
521
698
|
.variableChipCustom {
|
|
522
|
-
background:
|
|
523
|
-
color:
|
|
524
|
-
border-color:
|
|
699
|
+
background: var(--ee-color-success-light);
|
|
700
|
+
color: var(--ee-color-success-text);
|
|
701
|
+
border-color: var(--ee-color-success-border);
|
|
525
702
|
}
|
|
526
703
|
.variableChipCustom:hover {
|
|
527
|
-
background:
|
|
528
|
-
border-color:
|
|
704
|
+
background: var(--ee-color-success-light-hover);
|
|
705
|
+
border-color: var(--ee-color-success);
|
|
529
706
|
}
|
|
530
707
|
.variableChipDelete {
|
|
531
708
|
display: inline-flex;
|
|
@@ -547,7 +724,7 @@
|
|
|
547
724
|
}
|
|
548
725
|
.variableChipDelete:hover {
|
|
549
726
|
opacity: 1;
|
|
550
|
-
background:
|
|
727
|
+
background: var(--ee-overlay-subtle);
|
|
551
728
|
}
|
|
552
729
|
.variableChipIcon {
|
|
553
730
|
font-size: 11px;
|
|
@@ -694,7 +871,7 @@
|
|
|
694
871
|
.textBlockToolbar {
|
|
695
872
|
position: sticky;
|
|
696
873
|
top: 0;
|
|
697
|
-
z-index:
|
|
874
|
+
z-index: var(--ee-z-block-toolbar);
|
|
698
875
|
margin-bottom: 4px;
|
|
699
876
|
}
|
|
700
877
|
.buttonBlock {
|
|
@@ -887,12 +1064,12 @@
|
|
|
887
1064
|
transform: translate(-50%, -50%);
|
|
888
1065
|
width: 60px;
|
|
889
1066
|
height: 60px;
|
|
890
|
-
background:
|
|
1067
|
+
background: var(--ee-overlay-dark);
|
|
891
1068
|
border-radius: 50%;
|
|
892
1069
|
display: flex;
|
|
893
1070
|
align-items: center;
|
|
894
1071
|
justify-content: center;
|
|
895
|
-
color:
|
|
1072
|
+
color: var(--ee-text-inverse);
|
|
896
1073
|
font-size: 24px;
|
|
897
1074
|
pointer-events: none;
|
|
898
1075
|
}
|
|
@@ -979,6 +1156,7 @@
|
|
|
979
1156
|
flex-direction: column;
|
|
980
1157
|
align-items: center;
|
|
981
1158
|
gap: 16px;
|
|
1159
|
+
min-height: 80px;
|
|
982
1160
|
}
|
|
983
1161
|
.heroHeading {
|
|
984
1162
|
margin: 0;
|
|
@@ -1045,10 +1223,10 @@
|
|
|
1045
1223
|
font-family: inherit;
|
|
1046
1224
|
font-weight: inherit;
|
|
1047
1225
|
font-style: inherit;
|
|
1048
|
-
background:
|
|
1049
|
-
color:
|
|
1050
|
-
border: 1px solid
|
|
1051
|
-
border-radius:
|
|
1226
|
+
background: var(--ee-variable-bg);
|
|
1227
|
+
color: var(--ee-variable-color);
|
|
1228
|
+
border: 1px solid var(--ee-variable-border);
|
|
1229
|
+
border-radius: var(--ee-border-radius-sm);
|
|
1052
1230
|
vertical-align: baseline;
|
|
1053
1231
|
user-select: none;
|
|
1054
1232
|
white-space: nowrap;
|
|
@@ -1075,7 +1253,7 @@
|
|
|
1075
1253
|
.canvasBody {
|
|
1076
1254
|
width: 600px;
|
|
1077
1255
|
min-height: 400px;
|
|
1078
|
-
background:
|
|
1256
|
+
background: var(--ee-bg-email-body);
|
|
1079
1257
|
box-shadow: var(--ee-shadow-lg);
|
|
1080
1258
|
border-radius: var(--ee-border-radius);
|
|
1081
1259
|
position: relative;
|
|
@@ -1086,15 +1264,16 @@
|
|
|
1086
1264
|
}
|
|
1087
1265
|
.section {
|
|
1088
1266
|
position: relative;
|
|
1089
|
-
border:
|
|
1267
|
+
border: 1px solid transparent;
|
|
1090
1268
|
transition: border-color var(--ee-transition-fast);
|
|
1091
1269
|
cursor: pointer;
|
|
1092
1270
|
}
|
|
1093
1271
|
.section:hover {
|
|
1094
1272
|
border-color: var(--ee-border-color-strong);
|
|
1095
1273
|
}
|
|
1096
|
-
.sectionSelected
|
|
1097
|
-
|
|
1274
|
+
.section.sectionSelected,
|
|
1275
|
+
.sectionSelected:hover {
|
|
1276
|
+
border-color: var(--ee-border-selected);
|
|
1098
1277
|
}
|
|
1099
1278
|
.sectionFullWidth {
|
|
1100
1279
|
border-left: 3px solid var(--ee-color-primary);
|
|
@@ -1107,7 +1286,7 @@
|
|
|
1107
1286
|
gap: 2px;
|
|
1108
1287
|
opacity: 0;
|
|
1109
1288
|
transition: opacity var(--ee-transition-fast);
|
|
1110
|
-
z-index:
|
|
1289
|
+
z-index: var(--ee-z-block-overlay);
|
|
1111
1290
|
}
|
|
1112
1291
|
.section:hover .sectionOverlay {
|
|
1113
1292
|
opacity: 1;
|
|
@@ -1167,7 +1346,7 @@
|
|
|
1167
1346
|
.column {
|
|
1168
1347
|
flex: 1;
|
|
1169
1348
|
min-height: 40px;
|
|
1170
|
-
padding:
|
|
1349
|
+
padding: 2px;
|
|
1171
1350
|
position: relative;
|
|
1172
1351
|
}
|
|
1173
1352
|
.blockWrapper {
|
|
@@ -1180,8 +1359,9 @@
|
|
|
1180
1359
|
.blockWrapper:hover {
|
|
1181
1360
|
border-color: var(--ee-border-color-strong);
|
|
1182
1361
|
}
|
|
1183
|
-
.blockSelected
|
|
1184
|
-
|
|
1362
|
+
.blockWrapper.blockSelected,
|
|
1363
|
+
.blockSelected:hover {
|
|
1364
|
+
border-color: var(--ee-border-selected);
|
|
1185
1365
|
box-shadow: var(--ee-shadow-focus);
|
|
1186
1366
|
}
|
|
1187
1367
|
.blockOverlay {
|
|
@@ -1192,7 +1372,7 @@
|
|
|
1192
1372
|
gap: 2px;
|
|
1193
1373
|
opacity: 0;
|
|
1194
1374
|
transition: opacity var(--ee-transition-fast);
|
|
1195
|
-
z-index:
|
|
1375
|
+
z-index: var(--ee-z-block-overlay);
|
|
1196
1376
|
}
|
|
1197
1377
|
.blockWrapper:hover .blockOverlay {
|
|
1198
1378
|
opacity: 1;
|
|
@@ -1221,8 +1401,14 @@
|
|
|
1221
1401
|
color: var(--ee-text-inverse);
|
|
1222
1402
|
border-color: var(--ee-color-primary);
|
|
1223
1403
|
}
|
|
1404
|
+
.blockWrapper.blockDropBefore {
|
|
1405
|
+
box-shadow: 0 -2px 0 0 var(--ee-color-primary);
|
|
1406
|
+
}
|
|
1407
|
+
.blockWrapper.blockDropAfter {
|
|
1408
|
+
box-shadow: 0 2px 0 0 var(--ee-color-primary);
|
|
1409
|
+
}
|
|
1224
1410
|
.dropZone {
|
|
1225
|
-
min-height:
|
|
1411
|
+
min-height: 2px;
|
|
1226
1412
|
padding: 4px 0;
|
|
1227
1413
|
transition: all var(--ee-transition-fast);
|
|
1228
1414
|
position: relative;
|
|
@@ -1236,7 +1422,10 @@
|
|
|
1236
1422
|
}
|
|
1237
1423
|
.dropZoneLabel {
|
|
1238
1424
|
position: absolute;
|
|
1239
|
-
|
|
1425
|
+
top: 0;
|
|
1426
|
+
right: 0;
|
|
1427
|
+
bottom: 0;
|
|
1428
|
+
left: 0;
|
|
1240
1429
|
display: flex;
|
|
1241
1430
|
align-items: center;
|
|
1242
1431
|
justify-content: center;
|
|
@@ -1264,7 +1453,7 @@
|
|
|
1264
1453
|
font-weight: var(--ee-font-weight-medium);
|
|
1265
1454
|
}
|
|
1266
1455
|
.sectionDropZone {
|
|
1267
|
-
min-height:
|
|
1456
|
+
min-height: 2px;
|
|
1268
1457
|
transition: all var(--ee-transition-fast);
|
|
1269
1458
|
position: relative;
|
|
1270
1459
|
}
|
|
@@ -1277,7 +1466,10 @@
|
|
|
1277
1466
|
}
|
|
1278
1467
|
.sectionDropZoneLabel {
|
|
1279
1468
|
position: absolute;
|
|
1280
|
-
|
|
1469
|
+
top: 0;
|
|
1470
|
+
right: 0;
|
|
1471
|
+
bottom: 0;
|
|
1472
|
+
left: 0;
|
|
1281
1473
|
display: flex;
|
|
1282
1474
|
align-items: center;
|
|
1283
1475
|
justify-content: center;
|
|
@@ -1456,6 +1648,16 @@
|
|
|
1456
1648
|
.colorPresetBtnActive {
|
|
1457
1649
|
border-color: var(--ee-color-primary);
|
|
1458
1650
|
}
|
|
1651
|
+
.colorPresetBtnTransparent {
|
|
1652
|
+
background: repeating-conic-gradient(var(--ee-border-color-strong) 0% 25%, var(--ee-bg-panel) 0% 50%) 0 0 / 12px 12px;
|
|
1653
|
+
font-size: var(--ee-font-size-xs);
|
|
1654
|
+
color: var(--ee-text-secondary);
|
|
1655
|
+
font-weight: var(--ee-font-weight-medium);
|
|
1656
|
+
height: 24px;
|
|
1657
|
+
}
|
|
1658
|
+
.colorSwatchTransparent {
|
|
1659
|
+
background: repeating-conic-gradient(var(--ee-border-color-strong) 0% 25%, var(--ee-bg-panel) 0% 50%) 0 0 / 8px 8px;
|
|
1660
|
+
}
|
|
1459
1661
|
.paddingGrid {
|
|
1460
1662
|
display: grid;
|
|
1461
1663
|
grid-template-columns: 1fr 1fr;
|
|
@@ -1528,6 +1730,14 @@
|
|
|
1528
1730
|
background: var(--ee-color-primary);
|
|
1529
1731
|
cursor: pointer;
|
|
1530
1732
|
}
|
|
1733
|
+
.sliderInput::-moz-range-thumb {
|
|
1734
|
+
width: 14px;
|
|
1735
|
+
height: 14px;
|
|
1736
|
+
border: none;
|
|
1737
|
+
border-radius: 50%;
|
|
1738
|
+
background: var(--ee-color-primary);
|
|
1739
|
+
cursor: pointer;
|
|
1740
|
+
}
|
|
1531
1741
|
.sliderValue {
|
|
1532
1742
|
font-size: var(--ee-font-size-xs);
|
|
1533
1743
|
color: var(--ee-text-secondary);
|
|
@@ -1535,20 +1745,207 @@
|
|
|
1535
1745
|
text-align: right;
|
|
1536
1746
|
font-family: monospace;
|
|
1537
1747
|
}
|
|
1748
|
+
.itemActionBtn {
|
|
1749
|
+
padding: 4px 6px;
|
|
1750
|
+
cursor: pointer;
|
|
1751
|
+
border: 1px solid var(--ee-border-color);
|
|
1752
|
+
border-radius: 3px;
|
|
1753
|
+
background: var(--ee-bg-input);
|
|
1754
|
+
}
|
|
1755
|
+
.itemActionBtnDanger {
|
|
1756
|
+
composes: itemActionBtn;
|
|
1757
|
+
color: var(--ee-color-danger);
|
|
1758
|
+
}
|
|
1759
|
+
.addItemBtn {
|
|
1760
|
+
margin-top: 8px;
|
|
1761
|
+
padding: 6px 12px;
|
|
1762
|
+
cursor: pointer;
|
|
1763
|
+
border: 1px solid var(--ee-border-color);
|
|
1764
|
+
border-radius: var(--ee-border-radius-sm);
|
|
1765
|
+
background: var(--ee-bg-input);
|
|
1766
|
+
font-size: var(--ee-font-size-sm);
|
|
1767
|
+
width: 100%;
|
|
1768
|
+
}
|
|
1769
|
+
.fieldInputFlex {
|
|
1770
|
+
composes: fieldInput;
|
|
1771
|
+
flex: 1;
|
|
1772
|
+
}
|
|
1773
|
+
.fieldRowCompact {
|
|
1774
|
+
display: flex;
|
|
1775
|
+
gap: 4px;
|
|
1776
|
+
}
|
|
1777
|
+
.fieldSelectNarrow {
|
|
1778
|
+
composes: fieldSelect;
|
|
1779
|
+
width: 90px;
|
|
1780
|
+
flex-shrink: 0;
|
|
1781
|
+
}
|
|
1782
|
+
.fieldTextareaCode {
|
|
1783
|
+
composes: fieldInput;
|
|
1784
|
+
font-family: monospace;
|
|
1785
|
+
font-size: 12px;
|
|
1786
|
+
resize: vertical;
|
|
1787
|
+
}
|
|
1788
|
+
.fieldBtnUpload {
|
|
1789
|
+
composes: fieldInput;
|
|
1790
|
+
cursor: pointer;
|
|
1791
|
+
text-align: center;
|
|
1792
|
+
}
|
|
1793
|
+
.fieldBtnUploadDisabled {
|
|
1794
|
+
composes: fieldBtnUpload;
|
|
1795
|
+
cursor: wait;
|
|
1796
|
+
}
|
|
1797
|
+
.validationError {
|
|
1798
|
+
color: var(--ee-color-danger);
|
|
1799
|
+
font-size: var(--ee-font-size-xs);
|
|
1800
|
+
margin-top: 2px;
|
|
1801
|
+
}
|
|
1802
|
+
.fieldInputStacked {
|
|
1803
|
+
composes: fieldInput;
|
|
1804
|
+
margin-top: 4px;
|
|
1805
|
+
}
|
|
1806
|
+
.checkboxLabel {
|
|
1807
|
+
composes: fieldLabel;
|
|
1808
|
+
display: flex;
|
|
1809
|
+
align-items: center;
|
|
1810
|
+
gap: 8px;
|
|
1811
|
+
}
|
|
1812
|
+
.colorPresetBtnFull {
|
|
1813
|
+
grid-column: 1 / -1;
|
|
1814
|
+
width: 100%;
|
|
1815
|
+
}
|
|
1816
|
+
.colorNativeInput {
|
|
1817
|
+
width: 100%;
|
|
1818
|
+
grid-column: 1 / -1;
|
|
1819
|
+
height: 28px;
|
|
1820
|
+
cursor: pointer;
|
|
1821
|
+
border: none;
|
|
1822
|
+
}
|
|
1538
1823
|
.separator {
|
|
1539
1824
|
height: 1px;
|
|
1540
1825
|
background: var(--ee-border-color);
|
|
1541
1826
|
margin: var(--ee-space-xs) 0;
|
|
1542
1827
|
}
|
|
1543
1828
|
|
|
1829
|
+
/* src/styles/preview.module.css */
|
|
1830
|
+
.preview {
|
|
1831
|
+
width: 100%;
|
|
1832
|
+
height: 100%;
|
|
1833
|
+
display: flex;
|
|
1834
|
+
flex-direction: column;
|
|
1835
|
+
box-sizing: border-box;
|
|
1836
|
+
}
|
|
1837
|
+
.previewToggles {
|
|
1838
|
+
display: flex;
|
|
1839
|
+
justify-content: center;
|
|
1840
|
+
gap: 0;
|
|
1841
|
+
padding: 12px 24px 0;
|
|
1842
|
+
}
|
|
1843
|
+
.previewToggle {
|
|
1844
|
+
padding: 6px 16px;
|
|
1845
|
+
border: 1px solid var(--ee-border-color);
|
|
1846
|
+
background: var(--ee-bg-panel);
|
|
1847
|
+
cursor: pointer;
|
|
1848
|
+
font-size: var(--ee-font-size-md);
|
|
1849
|
+
color: var(--ee-text-secondary);
|
|
1850
|
+
transition: all var(--ee-transition-fast);
|
|
1851
|
+
}
|
|
1852
|
+
.previewToggleActive {
|
|
1853
|
+
background: var(--ee-color-primary);
|
|
1854
|
+
color: var(--ee-text-inverse);
|
|
1855
|
+
border-color: var(--ee-color-primary);
|
|
1856
|
+
}
|
|
1857
|
+
.previewToggleDesktop {
|
|
1858
|
+
border-radius: var(--ee-border-radius-sm) 0 0 var(--ee-border-radius-sm);
|
|
1859
|
+
}
|
|
1860
|
+
.previewToggleMobile {
|
|
1861
|
+
border-radius: 0 var(--ee-border-radius-sm) var(--ee-border-radius-sm) 0;
|
|
1862
|
+
border-left: none;
|
|
1863
|
+
}
|
|
1864
|
+
.previewContainer {
|
|
1865
|
+
flex: 1;
|
|
1866
|
+
display: flex;
|
|
1867
|
+
justify-content: center;
|
|
1868
|
+
padding: 24px;
|
|
1869
|
+
box-sizing: border-box;
|
|
1870
|
+
}
|
|
1871
|
+
.previewIframe {
|
|
1872
|
+
height: 100%;
|
|
1873
|
+
border: 1px solid var(--ee-border-color);
|
|
1874
|
+
border-radius: var(--ee-border-radius);
|
|
1875
|
+
background: var(--ee-bg-panel);
|
|
1876
|
+
transition: width var(--ee-transition-normal);
|
|
1877
|
+
}
|
|
1878
|
+
|
|
1879
|
+
/* src/styles/source-editor.module.css */
|
|
1880
|
+
.sourceEditor {
|
|
1881
|
+
display: flex;
|
|
1882
|
+
flex-direction: column;
|
|
1883
|
+
height: 100%;
|
|
1884
|
+
padding: var(--ee-space-lg);
|
|
1885
|
+
gap: var(--ee-space-sm);
|
|
1886
|
+
box-sizing: border-box;
|
|
1887
|
+
}
|
|
1888
|
+
.sourceHeader {
|
|
1889
|
+
display: flex;
|
|
1890
|
+
justify-content: space-between;
|
|
1891
|
+
align-items: center;
|
|
1892
|
+
}
|
|
1893
|
+
.sourceLabel {
|
|
1894
|
+
font-size: var(--ee-font-size-md);
|
|
1895
|
+
font-weight: var(--ee-font-weight-semibold);
|
|
1896
|
+
color: var(--ee-text-secondary);
|
|
1897
|
+
}
|
|
1898
|
+
.sourceApply {
|
|
1899
|
+
padding: 6px 16px;
|
|
1900
|
+
font-size: var(--ee-font-size-md);
|
|
1901
|
+
font-weight: var(--ee-font-weight-medium);
|
|
1902
|
+
background: var(--ee-color-primary);
|
|
1903
|
+
color: var(--ee-text-inverse);
|
|
1904
|
+
border: none;
|
|
1905
|
+
border-radius: var(--ee-border-radius-sm);
|
|
1906
|
+
cursor: pointer;
|
|
1907
|
+
}
|
|
1908
|
+
.sourceError {
|
|
1909
|
+
padding: var(--ee-space-sm);
|
|
1910
|
+
font-size: var(--ee-font-size-sm);
|
|
1911
|
+
color: var(--ee-color-danger);
|
|
1912
|
+
background: var(--ee-color-danger-light);
|
|
1913
|
+
border-radius: var(--ee-border-radius-sm);
|
|
1914
|
+
}
|
|
1915
|
+
.sourceTextarea {
|
|
1916
|
+
flex: 1;
|
|
1917
|
+
font-family:
|
|
1918
|
+
ui-monospace,
|
|
1919
|
+
SFMono-Regular,
|
|
1920
|
+
Menlo,
|
|
1921
|
+
monospace;
|
|
1922
|
+
font-size: var(--ee-font-size-md);
|
|
1923
|
+
line-height: 1.5;
|
|
1924
|
+
padding: var(--ee-space-md);
|
|
1925
|
+
border: 1px solid var(--ee-border-color);
|
|
1926
|
+
border-radius: var(--ee-border-radius);
|
|
1927
|
+
resize: none;
|
|
1928
|
+
outline: none;
|
|
1929
|
+
background: var(--ee-bg-input);
|
|
1930
|
+
color: var(--ee-text-primary);
|
|
1931
|
+
tab-size: 2;
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1544
1934
|
/* src/styles/variables.css */
|
|
1545
|
-
|
|
1935
|
+
.ee-editor-wrapper,
|
|
1936
|
+
.ee-dialog-overlay {
|
|
1546
1937
|
--ee-color-primary: #2563eb;
|
|
1547
1938
|
--ee-color-primary-hover: #1d4ed8;
|
|
1548
1939
|
--ee-color-primary-light: #dbeafe;
|
|
1549
1940
|
--ee-color-danger: #ef4444;
|
|
1550
1941
|
--ee-color-danger-hover: #dc2626;
|
|
1942
|
+
--ee-color-danger-light: #fef2f2;
|
|
1943
|
+
--ee-color-danger-border: #fed7d7;
|
|
1551
1944
|
--ee-color-success: #22c55e;
|
|
1945
|
+
--ee-color-success-light: #f0fdf4;
|
|
1946
|
+
--ee-color-success-light-hover: #dcfce7;
|
|
1947
|
+
--ee-color-success-text: #166534;
|
|
1948
|
+
--ee-color-success-border: #86efac;
|
|
1552
1949
|
--ee-color-warning: #f59e0b;
|
|
1553
1950
|
--ee-bg-app: #f3f4f6;
|
|
1554
1951
|
--ee-bg-panel: #ffffff;
|
|
@@ -1557,6 +1954,7 @@
|
|
|
1557
1954
|
--ee-bg-selected: #eff6ff;
|
|
1558
1955
|
--ee-bg-input: #ffffff;
|
|
1559
1956
|
--ee-bg-toolbar: #ffffff;
|
|
1957
|
+
--ee-bg-email-body: #ffffff;
|
|
1560
1958
|
--ee-border-color: #e5e7eb;
|
|
1561
1959
|
--ee-border-color-strong: #d1d5db;
|
|
1562
1960
|
--ee-border-focus: #2563eb;
|
|
@@ -1599,12 +1997,16 @@
|
|
|
1599
1997
|
--ee-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);
|
|
1600
1998
|
--ee-transition-fast: 150ms ease;
|
|
1601
1999
|
--ee-transition-normal: 200ms ease;
|
|
2000
|
+
--ee-z-block-overlay: 10;
|
|
2001
|
+
--ee-z-block-toolbar: 20;
|
|
1602
2002
|
--ee-z-dropdown: 100;
|
|
1603
2003
|
--ee-z-toolbar: 200;
|
|
1604
2004
|
--ee-z-overlay: 250;
|
|
1605
2005
|
--ee-z-modal: 300;
|
|
1606
2006
|
--ee-z-tooltip: 400;
|
|
1607
2007
|
--ee-overlay-backdrop: rgba(0, 0, 0, 0.2);
|
|
2008
|
+
--ee-overlay-dark: rgba(0, 0, 0, 0.6);
|
|
2009
|
+
--ee-overlay-subtle: rgba(0, 0, 0, 0.1);
|
|
1608
2010
|
--ee-dropzone-color: #3b82f6;
|
|
1609
2011
|
--ee-dropzone-bg: rgba(59, 130, 246, 0.08);
|
|
1610
2012
|
--ee-dropzone-height: 4px;
|
|
@@ -1613,4 +2015,11 @@
|
|
|
1613
2015
|
--ee-variable-color: #1e40af;
|
|
1614
2016
|
--ee-variable-border: #93c5fd;
|
|
1615
2017
|
}
|
|
2018
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2019
|
+
.ee-editor-wrapper,
|
|
2020
|
+
.ee-dialog-overlay {
|
|
2021
|
+
--ee-transition-fast: 0ms;
|
|
2022
|
+
--ee-transition-normal: 0ms;
|
|
2023
|
+
}
|
|
2024
|
+
}
|
|
1616
2025
|
/*# sourceMappingURL=index.css.map */
|