@flozy/editor 1.3.4 → 1.3.7

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 (36) hide show
  1. package/dist/Editor/CommonEditor.js +5 -3
  2. package/dist/Editor/Editor.css +388 -314
  3. package/dist/Editor/Elements/Accordion/Accordion.js +31 -9
  4. package/dist/Editor/Elements/Accordion/AccordionSummary.js +17 -5
  5. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -1
  6. package/dist/Editor/Elements/Button/EditorButton.js +8 -2
  7. package/dist/Editor/Elements/Carousel/Carousel.js +38 -18
  8. package/dist/Editor/Elements/Embed/Video.js +3 -4
  9. package/dist/Editor/Elements/Form/FieldPopup.js +20 -0
  10. package/dist/Editor/Elements/Form/Form.js +268 -0
  11. package/dist/Editor/Elements/Form/FormButton.js +21 -0
  12. package/dist/Editor/Elements/Form/FormElements/FormText.js +48 -0
  13. package/dist/Editor/Elements/Form/FormElements/index.js +5 -0
  14. package/dist/Editor/Elements/Form/FormField.js +101 -0
  15. package/dist/Editor/Elements/Form/FormPopup.js +20 -0
  16. package/dist/Editor/Elements/Grid/Grid.js +10 -3
  17. package/dist/Editor/Elements/Grid/GridButton.js +24 -5
  18. package/dist/Editor/Elements/Grid/GridItem.js +11 -4
  19. package/dist/Editor/Toolbar/Toolbar.js +6 -0
  20. package/dist/Editor/Toolbar/toolbarGroups.js +3 -0
  21. package/dist/Editor/common/StyleBuilder/buttonStyle.js +28 -2
  22. package/dist/Editor/common/StyleBuilder/fieldStyle.js +71 -0
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +28 -0
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +7 -1
  25. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +3 -2
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +35 -0
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +60 -0
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +46 -0
  30. package/dist/Editor/common/StyleBuilder/formStyle.js +82 -0
  31. package/dist/Editor/service/formSubmit.js +16 -0
  32. package/dist/Editor/utils/SlateUtilityFunctions.js +12 -1
  33. package/dist/Editor/utils/form.js +24 -0
  34. package/dist/Editor/utils/formfield.js +20 -0
  35. package/dist/Editor/utils/grid.js +0 -1
  36. package/package.json +1 -1
package/dist/Editor/Editor.css CHANGED
@@ -1,463 +1,537 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
1
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
2
 
3
3
  .ml-1 {
4
- margin-left: 10px;
4
+ margin-left: 10px;
5
5
  }
6
6
  .dflex {
7
- display: flex;
7
+ display: flex;
8
8
  }
9
9
  .alignCenter {
10
- align-items: center;
10
+ align-items: center;
11
11
  }
12
- blockquote{
13
- border-left: 2px solid #ddd;
14
- margin-left: 0;
15
- margin-right: 0;
16
- padding-left: 10px;
17
- color: #aaa;
18
- font-style: italic;
12
+ blockquote {
13
+ border-left: 2px solid #ddd;
14
+ margin-left: 0;
15
+ margin-right: 0;
16
+ padding-left: 10px;
17
+ color: #aaa;
18
+ font-style: italic;
19
19
  }
20
20
 
21
- .editor-wrapper table,
22
- .editor-wrapperth,
21
+ .editor-wrapper table,
22
+ .editor-wrapperth,
23
23
  .editor-wrapper td {
24
- border: 1px solid black;
24
+ border: 1px solid black;
25
25
  }
26
- .editor-wrapper table{
27
- border-collapse: collapse;
26
+ .editor-wrapper table {
27
+ border-collapse: collapse;
28
28
  }
29
- .editor-wrapper .editor-wrapperbutton{
30
- background-color: white;
31
- border:none;
29
+ .editor-wrapper .editor-wrapperbutton {
30
+ background-color: white;
31
+ border: none;
32
32
  }
33
- .editor-wrapper .btnActive{
34
- opacity: 1;
33
+ .editor-wrapper .btnActive {
34
+ opacity: 1;
35
35
  }
36
- .editor-wrapper{
37
- font-family:'Helvetica','Arial', sans-serif;
38
- background: #ffffff;
39
- min-height: 400px;
40
- height: fit-content;
41
- max-width: 100%;
42
- border: none !important;
43
- z-index: 1;
36
+ .editor-wrapper {
37
+ font-family: "Helvetica", "Arial", sans-serif;
38
+ background: #ffffff;
39
+ min-height: 400px;
40
+ height: fit-content;
41
+ max-width: 100%;
42
+ border: none !important;
43
+ z-index: 1;
44
44
  }
45
45
 
46
- .editor-wrapper table{
47
- /* width:100%; */
46
+ .editor-wrapper table {
47
+ /* width:100%; */
48
48
  }
49
- .editor-wrapper td{
50
- height: 50px;
51
- padding:0 5px;
49
+ .editor-wrapper td {
50
+ height: 50px;
51
+ padding: 0 5px;
52
52
  }
53
53
  .popup-wrapper1 {
54
- display: inline;
55
- position: relative;
56
- }
57
- .af-popup{
58
- position: fixed;
59
- left: 0;
60
- right: 0;
61
- top: 0;
62
- bottom: 0;
63
- margin: auto;
64
- background-color: white;
65
- padding: 20px;
66
- border-radius: 6px;
67
- /* border: 1px solid lightgray; */
68
- height: fit-content !important;
69
- z-index: 999;
70
- width: 300px;
71
-
72
- }
73
- .editor-wrapper button{
74
- cursor: pointer;
54
+ display: inline;
55
+ position: relative;
56
+ }
57
+ .af-popup {
58
+ position: fixed;
59
+ left: 0;
60
+ right: 0;
61
+ top: 0;
62
+ bottom: 0;
63
+ margin: auto;
64
+ background-color: white;
65
+ padding: 20px;
66
+ border-radius: 6px;
67
+ /* border: 1px solid lightgray; */
68
+ height: fit-content !important;
69
+ z-index: 999;
70
+ width: 300px;
71
+ }
72
+ .editor-wrapper button {
73
+ cursor: pointer;
75
74
  }
76
75
  .editor-wrapper code {
77
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
78
- monospace;
76
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
77
+ monospace;
79
78
  }
80
- .editor-wrapper html{
81
- scroll-behavior: smooth;
79
+ .editor-wrapper html {
80
+ scroll-behavior: smooth;
82
81
  }
83
82
  .editor-wrapper *:focus-visible {
84
- outline: none;
83
+ outline: none;
85
84
  }
86
85
 
87
86
  .grid-container {
88
- display: flex;
89
- border-radius: 0px;
90
- background-color: transparent;
91
- border: 0px solid #E5EAF2;
92
- padding: 16px;
93
- position: relative;
94
- flex-wrap: wrap;
87
+ display: flex;
88
+ border-radius: 0px;
89
+ background-color: transparent;
90
+ border: 0px solid #e5eaf2;
91
+ padding: 0px;
92
+ position: relative;
93
+ flex-wrap: wrap;
95
94
  }
96
95
 
97
96
  .grid-container-toolbar,
98
97
  .grid-item-toolbar {
99
- position: absolute;
100
- right: 0;
101
- top: -30px;
98
+ position: absolute;
99
+ display: flex;
100
+ flex-direction: column;
101
+ pointer-events: auto;
102
+ }
103
+
104
+ .grid-container-toolbar {
105
+ right: -52px;
106
+ }
107
+
108
+ .grid-item-toolbar {
109
+ left: -52px;
102
110
  }
103
111
 
104
112
  .element-toolbar {
105
- position: absolute;
106
- right: 0;
107
- top: -14px;
108
- z-index: 1000;
113
+ position: absolute;
114
+ right: 0;
115
+ top: -14px;
116
+ z-index: 1000;
109
117
  }
110
118
 
111
119
  .grid-container-toolbar button,
112
120
  .grid-item-toolbar button,
113
121
  .element-toolbar button {
114
- /* margin-right: 8px;
122
+ /* margin-right: 8px;
115
123
  background-color: rgba(0, 0, 0, 0.8);
116
124
  color: #FFF; */
117
- margin-left: 8px;
118
- background-color: rgb(255 255 255);
119
- color: #64748b;
120
- padding: 5px;
121
- font-size: 12px;
122
- border-radius: 4px;
123
- border: 1px solid #64748b;
125
+ /* margin-left: 8px; */
126
+ background-color: rgb(255 255 255);
127
+ color: #64748b;
128
+ font-size: 12px;
129
+ border-radius: 4px;
130
+ border: 1px solid #64748b;
131
+ margin-bottom: 6px;
124
132
  }
125
133
 
126
134
  .grid-item {
127
- padding: 16px;
128
- background-color: #fff;
129
- position: relative;
135
+ padding: 0px;
136
+ background-color: #fff;
137
+ position: relative;
130
138
  }
131
139
 
132
140
  .accordion-container {
133
- padding: 0px;
141
+ padding: 0px;
134
142
  }
135
143
 
136
144
  .accordion-title {
137
- position: relative;
138
- background-color: #CCC;
139
- display: flex;
140
- align-items: center;
145
+ position: relative;
146
+ background-color: #ccc;
147
+ display: flex;
148
+ align-items: center;
141
149
  }
142
150
 
143
151
  .accordion-content {
144
- padding-left: 32px;
145
- background-color: #eee;
146
- border: 1px solid #CCC;
152
+ padding-left: 32px;
153
+ background-color: #eee;
154
+ border: 1px solid #ccc;
147
155
  }
148
156
 
149
157
  .accordion-summary-container {
150
- padding: 8px 0px;
151
- margin: 0px;
152
- position: relative;
153
- padding-left: 16px;
158
+ padding: 8px 0px;
159
+ margin: 0px;
160
+ position: relative;
161
+ padding-left: 16px;
154
162
  }
155
163
 
156
164
  .accordion-summary-collapse-btn {
157
- width: 32px;
158
- height: 32px;
159
- z-index: 1;
160
- border-radius: 50%;
161
- display: flex;
162
- justify-content: center;
163
- align-items: center;
164
- margin-left: 12px;
165
- margin-right: 12px;
166
- position: relative;
165
+ width: 32px;
166
+ height: 32px;
167
+ z-index: 1;
168
+ border-radius: 50%;
169
+ display: flex;
170
+ justify-content: center;
171
+ align-items: center;
172
+ margin-left: 12px;
173
+ margin-right: 12px;
174
+ position: relative;
167
175
  }
168
176
 
169
177
  .accordion-details-container {
170
- margin: 0px;
171
- padding: 8px;
178
+ margin: 0px;
179
+ padding: 8px;
172
180
  }
173
181
 
174
182
  .signature-btn-container button {
175
- background-color: #0052CC;
176
- padding: 8px 12px;
177
- color: #FFFFFF;
178
- font-weight: bold;
179
- border-radius: 12px;
180
- opacity: 1;
183
+ background-color: #0052cc;
184
+ padding: 8px 12px;
185
+ color: #ffffff;
186
+ font-weight: bold;
187
+ border-radius: 12px;
188
+ opacity: 1;
181
189
  }
182
190
 
183
191
  .signature-btn-grps {
184
- display: flex;
185
- justify-content: space-around;
192
+ display: flex;
193
+ justify-content: space-around;
186
194
  }
187
195
  .signature-btn-grps svg {
188
- height: 17px !important;
189
- width: 17px !important;
196
+ height: 17px !important;
197
+ width: 17px !important;
190
198
  }
191
199
 
192
200
  .close-popupbtn {
193
- background-color: #EDEDED !important;
194
- border-radius: 4px !important;
195
- width: 24px;
196
- height: 24px;
201
+ background-color: #ededed !important;
202
+ border-radius: 4px !important;
203
+ width: 24px;
204
+ height: 24px;
197
205
  }
198
206
 
199
- .close-popupbtn svg {
200
- width: 17px;
201
- height: 17px;
207
+ .close-popupbtn svg {
208
+ width: 17px;
209
+ height: 17px;
202
210
  }
203
211
 
204
212
  .popupTitle {
205
- font-size: 16px !important;
206
- font-weight: 600 !important;
207
- font-family: Inter, sans-serif;
208
- text-transform: uppercase;
213
+ font-size: 16px !important;
214
+ font-weight: 600 !important;
215
+ font-family: Inter, sans-serif;
216
+ text-transform: uppercase;
209
217
  }
210
218
 
211
-
212
-
213
219
  .signature-tab-content {
214
- display: flex;
215
- margin: 12px 0px;
216
- padding: 0px 5px;
217
- border: 0px solid #CCC;
218
- min-height: 100px;
220
+ display: flex;
221
+ margin: 12px 0px;
222
+ padding: 0px 5px;
223
+ border: 0px solid #ccc;
224
+ min-height: 100px;
219
225
  }
220
226
 
221
227
  .signature-signed-wrapper {
222
- position: relative;
223
- display: flex;
228
+ position: relative;
229
+ display: flex;
224
230
  }
225
231
  .signature-signed-span {
226
- position: relative;
232
+ position: relative;
227
233
  }
228
234
  .signature-signed-wrapper .signed-btn-del {
229
- position: absolute;
230
- right: -20px;
231
- top: -20px;
232
- opacity: 1;
233
- z-index: 1;
235
+ position: absolute;
236
+ right: -20px;
237
+ top: -20px;
238
+ opacity: 1;
239
+ z-index: 1;
234
240
  }
235
241
  .signed-btn {
236
- text-align: center;
237
- opacity: 1;
242
+ text-align: center;
243
+ opacity: 1;
238
244
  }
239
245
 
240
246
  .signed-text {
241
- display: flex;
242
- justify-content: center;
243
- margin-bottom: 8px;
244
- padding-bottom: 8px;
245
- border-bottom: 1px solid #000;
247
+ display: flex;
248
+ justify-content: center;
249
+ margin-bottom: 8px;
250
+ padding-bottom: 8px;
251
+ border-bottom: 1px solid #000;
246
252
  }
247
253
 
248
254
  .typesignature-fontfamily .MuiButtonBase-root {
249
- opacity: 1;
250
- border: 1px solid #cccccc6b;
251
- color: #0F172A;
252
- box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08);
255
+ opacity: 1;
256
+ border: 1px solid #cccccc6b;
257
+ color: #0f172a;
258
+ box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.08);
253
259
  }
254
260
  .typesignature-fontfamily .MuiButtonBase-root.active {
255
- border: 1px solid #0052CC;
261
+ border: 1px solid #0052cc;
256
262
  }
257
263
  .typesignature-input-wrapper .MuiInputAdornment-root .MuiButtonBase-root {
258
- background-color: #E9EBF8 !important;
259
- border-radius: 4px !important;
260
- width: 24px;
261
- height: 24px;
262
- padding: 2px;
263
- }
264
- .typesignature-input-wrapper .MuiInputAdornment-root svg{
265
- width: 100%;
266
- height: 100%;
267
- }
268
-
269
- .signature-canvas{
270
- height: 100%;
271
- width: 100%;
272
- border: 1px solid #0052CC;
273
- border-radius: 12px;
274
- }
264
+ background-color: #e9ebf8 !important;
265
+ border-radius: 4px !important;
266
+ width: 24px;
267
+ height: 24px;
268
+ padding: 2px;
269
+ }
270
+ .typesignature-input-wrapper .MuiInputAdornment-root svg {
271
+ width: 100%;
272
+ height: 100%;
273
+ }
275
274
 
276
- .react-datepicker__input-container {
277
- display: flex !important;
278
- align-items: center;
279
- }
280
- .react-datepicker__input-container input {
281
- height: 27px;
282
- border: 1px solid #ccc;
283
- border-radius: 5px;
284
- width: 100%;
285
- }
275
+ .signature-canvas {
276
+ height: 100%;
277
+ width: 100%;
278
+ border: 1px solid #0052cc;
279
+ border-radius: 12px;
280
+ }
286
281
 
287
- .brushcolorpic {
282
+ .react-datepicker__input-container {
283
+ display: flex !important;
284
+ align-items: center;
285
+ }
286
+ .react-datepicker__input-container input {
287
+ height: 27px;
288
+ border: 1px solid #ccc;
289
+ border-radius: 5px;
290
+ width: 100%;
291
+ }
288
292
 
289
- }
290
- .sizeIcons .MuiButtonBase-root {
291
- opacity: 1;
292
- }
293
- .sizeIcons .MuiButtonBase-root.active .MuiSvgIcon-root {
294
- fill: #0052CC;
295
- }
293
+ .brushcolorpic {
294
+ }
295
+ .sizeIcons .MuiButtonBase-root {
296
+ opacity: 1;
297
+ }
298
+ .sizeIcons .MuiButtonBase-root.active .MuiSvgIcon-root {
299
+ fill: #0052cc;
300
+ }
296
301
 
297
- .dialog-actions-si .MuiButtonBase-root {
298
- opacity: 1;
299
- }
302
+ .dialog-actions-si .MuiButtonBase-root {
303
+ opacity: 1;
304
+ }
300
305
 
301
- .signature-tab {
302
- display: flex;
303
- align-items: center;
304
- justify-content: center;
305
- flex-direction: column;
306
- width: 100%;
307
- }
306
+ .signature-tab {
307
+ display: flex;
308
+ align-items: center;
309
+ justify-content: center;
310
+ flex-direction: column;
311
+ width: 100%;
312
+ }
308
313
 
309
- .upload-sign-img-wrapper {
310
- text-align: center;
311
- }
314
+ .upload-sign-img-wrapper {
315
+ text-align: center;
316
+ }
312
317
 
313
- .signature-tab img {
314
- width: 150px;
315
- height: auto;
316
- }
318
+ .signature-tab img {
319
+ width: 150px;
320
+ height: auto;
321
+ }
317
322
 
318
- .editor-btn-wrapper {
319
- position: relative;
320
- }
323
+ .editor-btn-wrapper {
324
+ position: relative;
325
+ }
321
326
 
322
- .editor-btn {
323
- opacity: 1;
324
- }
327
+ .editor-btn {
328
+ opacity: 1;
329
+ }
325
330
 
326
- .editor-btn-options .MuiList-root {
327
- display: flex;
328
- }
331
+ .editor-btn-options .MuiList-root {
332
+ display: flex;
333
+ }
329
334
 
330
- .input-adorn .MuiInputAdornment-root .MuiIconButton-root.active {
331
- background-color: #CCC;
332
- }
335
+ .input-adorn .MuiInputAdornment-root .MuiIconButton-root.active {
336
+ background-color: #ccc;
337
+ }
338
+
339
+ .empty-carousel-wrapper {
340
+ display: flex;
341
+ flex-direction: column;
342
+ overflow-x: auto;
343
+ }
344
+ .empty-carousel-wrapper > div {
345
+ display: flex;
346
+ flex-direction: column;
347
+ flex-shrink: 0;
348
+ border: 1px solid #000;
349
+ }
350
+ .empty-carousel-wrapper .carousel-item-inner {
351
+ width: 100%;
352
+ }
353
+
354
+ .editor-chip-text {
355
+ padding: 4px;
356
+ background-color: #ccc;
357
+ }
358
+
359
+ .drawer-menu {
360
+ display: inline-flex;
361
+ }
333
362
 
334
- .empty-carousel-wrapper {
363
+ .MuiButton-root.primaryBtn {
364
+ background: #2563eb !important;
365
+ box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
366
+ border-radius: 8px !important;
367
+ height: 28px !important;
368
+ font-weight: 600 !important;
369
+ font-size: 12px !important;
370
+ color: #ffffff !important;
371
+ border: 1px solid #2563eb !important;
372
+ width: auto !important;
373
+ }
374
+ .MuiButton-root.secondaryBtn {
375
+ background: #ffffff;
376
+ border: 1px solid #2563eb !important;
377
+ box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
378
+ border-radius: 8px !important;
379
+ height: 28px !important;
380
+ font-weight: 600 !important;
381
+ font-size: 12px !important;
382
+ margin-right: 15px !important;
383
+ color: #2563eb;
384
+ width: auto !important;
385
+ }
386
+ .deleteBtn {
387
+ background: #ffffff;
388
+ border: 1px solid #d32f2f !important;
389
+ box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
390
+ border-radius: 8px !important;
391
+ height: 28px !important;
392
+ font-weight: 600 !important;
393
+ font-size: 12px !important;
394
+ margin-right: 15px !important;
395
+ color: #d32f2f;
396
+ width: auto !important;
397
+ }
398
+ @media (max-width: 480px) {
399
+ body {
400
+ padding: 0px !important;
401
+ }
402
+ .app-logo {
403
+ justify-content: end;
404
+ }
405
+ .editor-t-wrapper {
406
+ padding: 0px 0px !important;
407
+ }
408
+ .toolbar {
335
409
  display: flex;
336
- flex-direction: column;
337
- overflow-x: auto;
410
+ flex-wrap: nowrap;
411
+ overflow-x: scroll;
338
412
  }
339
- .empty-carousel-wrapper > div{
413
+ .toolbar-grp1,
414
+ .toolbar-grp1 > div {
340
415
  display: flex;
341
- flex-direction: column;
342
- flex-shrink: 0;
343
- border: 1px solid #000;
344
416
  }
345
- .empty-carousel-wrapper .carousel-item-inner {
346
- width: 100%;
417
+ .grid-container > div {
418
+ flex-direction: column !important;
347
419
  }
348
-
349
- .editor-chip-text {
350
- padding: 4px;
351
- background-color: #CCC;
420
+ .grid-item {
421
+ width: 100% !important;
352
422
  }
353
-
354
- .drawer-menu {
355
- display: inline-flex;
423
+ .grid-item > div {
424
+ text-align: center;
356
425
  }
357
-
358
- .MuiButton-root.primaryBtn {
359
- background: #2563eb !important;
360
- box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
361
- border-radius: 8px !important;
362
- height: 28px !important;
363
- font-weight: 600 !important;
364
- font-size: 12px !important;
365
- color: #ffffff !important;
366
- border: 1px solid #2563eb !important;
367
- width: auto !important;
426
+ .page-builder .editor-wrapper {
427
+ max-width: 100% !important;
428
+ margin-top: 0px !important;
429
+ padding: 0px !important;
368
430
  }
369
- .MuiButton-root.secondaryBtn {
370
- background: #ffffff;
371
- border: 1px solid #2563eb !important;
372
- box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
373
- border-radius: 8px !important;
374
- height: 28px !important;
375
- font-weight: 600 !important;
376
- font-size: 12px !important;
377
- margin-right: 15px !important;
378
- color: #2563EB;
379
- width: auto !important;
431
+ .embed {
432
+ justify-content: center;
433
+ }
434
+ .embed img {
435
+ object-fit: contain;
436
+ }
437
+ form .form-field {
438
+ width: 100% !important;
439
+ }
440
+ .form-btn-wrpr {
441
+ justify-content: center !important;
380
442
  }
381
- .deleteBtn {
382
- background: #ffffff;
383
- border: 1px solid #d32f2f !important;
384
- box-shadow: 0px 8px 24px rgba(30, 64, 175, 0.08);
385
- border-radius: 8px !important;
386
- height: 28px !important;
387
- font-weight: 600 !important;
388
- font-size: 12px !important;
389
- margin-right: 15px !important;
390
- color: #d32f2f;
391
- width: auto !important;
392
- }
393
- @media (max-width: 480px) {
394
- .toolbar {
395
- display: flex;
396
- flex-wrap: nowrap;
397
- overflow-x: scroll;
398
- }
399
- .toolbar-grp1,
400
- .toolbar-grp1 > div {
401
- display: flex;
402
- }
403
- .grid-item {
404
- width: 100% !important;
405
- }
406
443
  }
407
444
 
408
-
409
445
  .editorTabs {
410
- height: 40px;
411
- min-height: 40px;
446
+ height: 40px;
447
+ min-height: 40px;
412
448
  }
413
449
 
414
450
  .editorTabs .MuiTab-root {
415
- min-width: 80px;
416
- min-height: 30px !important;
417
- font-size: 14px;
418
- /* max-width: 130px; */
419
- /* padding: 6px 6px !important; */
420
- color: #0F172A;
421
- text-transform: capitalize;
451
+ min-width: 80px;
452
+ min-height: 30px !important;
453
+ font-size: 14px;
454
+ /* max-width: 130px; */
455
+ /* padding: 6px 6px !important; */
456
+ color: #0f172a;
457
+ text-transform: capitalize;
422
458
  }
423
459
 
424
460
  .editorTabs .MuiTabScrollButton-horizontal.Mui-disabled {
425
- display: none;
461
+ display: none;
426
462
  }
427
- .editorTabs .MuiTabs-scroller {
428
- border-bottom: 1px solid #8080801c;
463
+ .editorTabs .MuiTabs-scroller {
464
+ border-bottom: 1px solid #8080801c;
429
465
  }
430
466
 
431
- .btnColorPicker .MuiOutlinedInput-input, .tablePopup .MuiOutlinedInput-input {
432
- padding: 8.5px 14px;
467
+ .btnColorPicker .MuiOutlinedInput-input,
468
+ .tablePopup .MuiOutlinedInput-input {
469
+ padding: 8.5px 14px;
433
470
  }
434
471
 
435
472
  .toolbar svg {
436
- /* fill: 'red' */
473
+ /* fill: 'red' */
437
474
  }
438
475
 
439
476
  .MuiIconButton-root.btnActive {
440
- background-color: #ccc;
477
+ background-color: #ccc;
441
478
  }
442
479
 
443
480
  .embed .element-toolbar {
444
- left: 0;
445
- right: 0;
446
- bottom: 0;
447
- top: auto;
448
- width: fit-content;
449
- height: fit-content;
450
- margin: auto;
481
+ left: 0;
482
+ right: 0;
483
+ bottom: 0;
484
+ top: auto;
485
+ width: fit-content;
486
+ height: fit-content;
487
+ margin: auto;
451
488
  }
452
489
 
453
490
  .resize-br {
454
- position: absolute !important;
455
- bottom: 2px;
456
- right: 2px;
491
+ position: absolute !important;
492
+ bottom: 2px;
493
+ right: 2px;
457
494
  }
458
495
  .visible-on-hover {
459
- display: none !important;
496
+ display: none !important;
460
497
  }
461
498
  .has-hover:hover .visible-on-hover {
462
- display: flex !important;
463
- }
499
+ display: flex !important;
500
+ }
501
+
502
+ .page-builder .editor-wrapper {
503
+ max-width: 80%;
504
+ margin-top: 24px;
505
+ }
506
+
507
+ .element-root .element-selector {
508
+ position: absolute;
509
+ width: calc(100% + 16px);
510
+ height: calc(100% + 16px);
511
+ border: 4px dotted #2684ff;
512
+ display: none;
513
+ pointer-events: none;
514
+ top: -8px;
515
+ left: -8px;
516
+ z-index: 100;
517
+ }
518
+
519
+ .element-selector.selected {
520
+ display: block;
521
+ }
522
+
523
+ .element-toolbar button {
524
+ margin-right: 6px;
525
+ }
526
+
527
+ .empty-carousel-wrapper .element-selector {
528
+ width: 100%;
529
+ }
530
+
531
+ .empty-carousel-wrapper .grid-container-toolbar {
532
+ right: 0px;
533
+ }
534
+
535
+ .empty-carousel-wrapper .grid-item-toolbar {
536
+ left: 0px;
537
+ }