@flozy/editor 1.3.4 → 1.3.7

Sign up to get free protection for your applications and to get access to all the features.
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
@@ -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
+ }