@g1cloud/page-builder-editor 1.0.0-alpha.77 → 1.0.0-alpha.79

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 (44) hide show
  1. package/css/page-builder-editor.css +373 -0
  2. package/css/page-builder-viewer.css +195 -0
  3. package/dist/{PbPropertyEditorColor-CIbIVOH6.js → PbPropertyEditorColor-5SJkOBUx.js} +1 -1
  4. package/dist/{PbPropertyEditorCssLength-B-4sVDmD.js → PbPropertyEditorCssLength-CNHbyz8V.js} +1 -1
  5. package/dist/{PbPropertyEditorHtml-D-P-rK2d.js → PbPropertyEditorHtml-DdQPQqJb.js} +1 -1
  6. package/dist/{PbPropertyEditorImage-Djqz82Tj.js → PbPropertyEditorImage-D0kxh68g.js} +1 -1
  7. package/dist/{PbPropertyEditorMultilineText-DFfXK9Mh.js → PbPropertyEditorMultilineText-BRLH4Ayi.js} +1 -1
  8. package/dist/{PbPropertyEditorText-Bl87u7Hn.js → PbPropertyEditorText-DDtYWGlr.js} +1 -1
  9. package/dist/{PbPropertyEditorYoutube-vn68-hix.js → PbPropertyEditorYoutube-BxrZ1nyk.js} +1 -1
  10. package/dist/{PbWidgetAddModal-jAxxY2xD.js → PbWidgetAddModal-uVBBeNVl.js} +1 -1
  11. package/dist/{index-BhMJnNHk.js → index-BVTz0PeS.js} +14 -12
  12. package/dist/page-builder-editor.js +1 -1
  13. package/dist/page-builder-editor.umd.cjs +5 -3
  14. package/dist/style.css +369 -2
  15. package/package.json +8 -6
  16. package/scss/page-builder-editor.scss +320 -0
  17. package/scss/page-builder-viewer.scss +1 -0
  18. package/{css → scss}/page-widget.scss +1 -1
  19. package/{css → scss}/page.scss +0 -1
  20. package/{css → scss}/property-editor-image.scss +4 -3
  21. package/{css → scss}/property-group-editor-background.scss +3 -2
  22. package/{css → scss}/property-group-editor-media.scss +4 -3
  23. package/css/page-builder-editor.scss +0 -315
  24. package/css/variable.scss +0 -5
  25. package/dist/css/page-builder-editor.css +0 -388
  26. /package/{css → scss}/canvas.scss +0 -0
  27. /package/{css → scss}/page-block.scss +0 -0
  28. /package/{css → scss}/page-page.scss +0 -0
  29. /package/{css → scss}/page-section.scss +0 -0
  30. /package/{css → scss}/property-editor-color.scss +0 -0
  31. /package/{css → scss}/property-editor-html.scss +0 -0
  32. /package/{css → scss}/property-editor-multiline-text.scss +0 -0
  33. /package/{css → scss}/property-editor-number.scss +0 -0
  34. /package/{css → scss}/property-editor-product.scss +0 -0
  35. /package/{css → scss}/property-editor-readonly-text.scss +0 -0
  36. /package/{css → scss}/property-editor-select.scss +0 -0
  37. /package/{css → scss}/property-editor-text.scss +0 -0
  38. /package/{css → scss}/property-editor-youtube.scss +0 -0
  39. /package/{css → scss}/property-group-editor-border.scss +0 -0
  40. /package/{css → scss}/property-group-editor-margin.scss +0 -0
  41. /package/{css → scss}/property-group-editor-padding.scss +0 -0
  42. /package/{css → scss}/property-group-editor-position.scss +0 -0
  43. /package/{css → scss}/property-group-editor-size.scss +0 -0
  44. /package/{css → scss}/property-localpart.scss +0 -0
@@ -0,0 +1,373 @@
1
+ @charset "UTF-8";
2
+ .pb-editor {
3
+ --color-canvas-frame-bg: #aaa;
4
+ height: 100%;
5
+ }
6
+ .pb-editor .pb-menu {
7
+ width: 100%;
8
+ }
9
+ .pb-editor .pb-menu .pb-toolbar {
10
+ margin: 0 -8px;
11
+ }
12
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group::after {
13
+ content: "";
14
+ margin: 0 8px;
15
+ height: 80%;
16
+ border-right: 1px solid var(--border-light);
17
+ align-self: center;
18
+ }
19
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button {
20
+ padding: 2px;
21
+ margin: 0 2px;
22
+ }
23
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button {
24
+ width: 28px;
25
+ height: 28px;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ }
30
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-editor-body .pb-part-add-modal .group .part, .pb-editor .pb-editor-body .pb-part-add-modal .group .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part {
31
+ user-select: none;
32
+ cursor: pointer;
33
+ }
34
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable:hover, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-editor-body .pb-part-add-modal .group .part:hover, .pb-editor .pb-editor-body .pb-part-add-modal .group .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:hover {
35
+ filter: opacity(75%);
36
+ }
37
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable:active, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-editor-body .pb-part-add-modal .group .part:active, .pb-editor .pb-editor-body .pb-part-add-modal .group .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:active {
38
+ filter: opacity(50%);
39
+ }
40
+ .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .bs-clickable.disabled, .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .pb-editor-body .pb-part-add-modal .group .disabled.part, .pb-editor .pb-editor-body .pb-part-add-modal .group .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .disabled.part {
41
+ filter: opacity(40%);
42
+ }
43
+ .pb-editor .pb-editor-body {
44
+ padding: 8px 0 0;
45
+ height: 1px;
46
+ }
47
+ .pb-editor .pb-editor-body .pb-canvas-wrapper {
48
+ background-color: var(--color-canvas-frame-bg);
49
+ flex-grow: 1;
50
+ min-width: 0;
51
+ width: 0;
52
+ height: 100%;
53
+ padding: 20px;
54
+ outline: none;
55
+ overflow: auto;
56
+ }
57
+ .pb-editor .pb-editor-body .pb-canvas {
58
+ display: flex;
59
+ flex-direction: row;
60
+ transform-origin: top left;
61
+ width: fit-content;
62
+ height: 100%;
63
+ margin: 0;
64
+ }
65
+ .pb-editor .pb-editor-body .pb-page-frame iframe.page-frame {
66
+ border: 0;
67
+ }
68
+ .pb-editor .pb-editor-body .bs-tab-sheet .tab-bar .tabs {
69
+ padding-top: 0;
70
+ }
71
+ .pb-editor .pb-editor-body .pb-navigator {
72
+ position: relative;
73
+ width: 200px;
74
+ height: 1px;
75
+ overflow-y: auto;
76
+ padding: 8px 0;
77
+ flex-grow: 1;
78
+ border: 1px solid var(--border-light);
79
+ border-right-color: var(--color-canvas-frame-bg);
80
+ }
81
+ .pb-editor .pb-editor-body .pb-navigator:focus {
82
+ outline: none;
83
+ }
84
+ .pb-editor .pb-editor-body .pb-sidebar {
85
+ width: 300px;
86
+ overflow: auto;
87
+ border: 1px solid var(--border-light);
88
+ border-left-color: var(--color-canvas-frame-bg);
89
+ }
90
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties {
91
+ padding: 0;
92
+ }
93
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-title {
94
+ padding: 8px;
95
+ background-color: var(--blue-bg);
96
+ color: var(--blue);
97
+ font-weight: 600;
98
+ }
99
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group:not(:empty) {
100
+ padding: 8px;
101
+ border-bottom: 1px solid var(--border-light);
102
+ }
103
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-title > label {
104
+ padding: 4px 0;
105
+ font-size: 90%;
106
+ font-weight: 600;
107
+ }
108
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor {
109
+ padding: 4px 0;
110
+ font-size: 0.9em;
111
+ }
112
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title {
113
+ padding: 0 0 8px 0;
114
+ }
115
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .title label {
116
+ min-width: 6em;
117
+ max-width: 6em;
118
+ padding-right: 0.5em;
119
+ font-weight: bold;
120
+ }
121
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor .sub-title label {
122
+ min-width: 6em;
123
+ max-width: 6em;
124
+ padding-right: 0.5em;
125
+ font-weight: 400;
126
+ }
127
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor {
128
+ padding: 4px 0;
129
+ font-size: 0.9em;
130
+ }
131
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title {
132
+ padding: 0 0 8px 0;
133
+ }
134
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor > .title > label {
135
+ min-width: 6em;
136
+ max-width: 6em;
137
+ padding-right: 0.5em;
138
+ font-weight: 600;
139
+ }
140
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor:nth-child(n+2) {
141
+ margin-top: 4px;
142
+ }
143
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-color .color {
144
+ width: 50%;
145
+ }
146
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image button.select-button {
147
+ color: var(--white);
148
+ border: none;
149
+ padding: 4px 12px;
150
+ cursor: pointer;
151
+ line-height: 1;
152
+ width: 120px;
153
+ height: 26px;
154
+ background-color: var(--primary);
155
+ border-radius: 2px;
156
+ }
157
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-image .input-area {
158
+ height: 24px;
159
+ }
160
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product button {
161
+ color: #fff;
162
+ border: none;
163
+ padding: 4px 12px;
164
+ cursor: pointer;
165
+ line-height: 1;
166
+ width: 200px;
167
+ height: 28px;
168
+ background-color: #1f8fff;
169
+ }
170
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product .input-area {
171
+ height: 24px;
172
+ }
173
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .bs-select {
174
+ display: block;
175
+ }
176
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-select .input-area {
177
+ height: 24px;
178
+ }
179
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
180
+ display: block;
181
+ }
182
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
183
+ height: 24px;
184
+ }
185
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .bs-text-input {
186
+ display: block;
187
+ }
188
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-text .input-area {
189
+ height: 24px;
190
+ }
191
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html button {
192
+ color: #fff;
193
+ border: none;
194
+ padding: 4px 12px;
195
+ cursor: pointer;
196
+ line-height: 1;
197
+ width: 100px;
198
+ height: 28px;
199
+ background-color: #1f8fff;
200
+ }
201
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html .input-area {
202
+ height: 24px;
203
+ }
204
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color {
205
+ flex: 1;
206
+ display: flex;
207
+ flex-direction: row;
208
+ align-items: center;
209
+ }
210
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .color .bs-text-input {
211
+ flex-grow: 1;
212
+ }
213
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image {
214
+ flex: 1;
215
+ padding-left: 8px;
216
+ }
217
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-background .image button {
218
+ color: #fff;
219
+ border: none;
220
+ padding: 4px 12px;
221
+ cursor: pointer;
222
+ line-height: 1;
223
+ width: 120px;
224
+ height: 26px;
225
+ background-color: var(--primary);
226
+ border-radius: 2px;
227
+ }
228
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color {
229
+ width: 50%;
230
+ flex: 1;
231
+ display: flex;
232
+ flex-direction: row;
233
+ align-items: center;
234
+ }
235
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .color .bs-text-input {
236
+ flex-grow: 1;
237
+ }
238
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-border .corner-icon {
239
+ width: 1.1em;
240
+ height: 1.1em;
241
+ fill: #000;
242
+ }
243
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media button.select-button {
244
+ color: var(--white);
245
+ border: none;
246
+ padding: 4px 12px;
247
+ cursor: pointer;
248
+ line-height: 1;
249
+ width: 120px;
250
+ height: 26px;
251
+ background-color: var(--primary);
252
+ border-radius: 2px;
253
+ }
254
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .group-editor-media .input-area {
255
+ height: 24px;
256
+ }
257
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .title {
258
+ font-weight: 600;
259
+ }
260
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part button {
261
+ color: #fff;
262
+ border: none;
263
+ padding: 0 4px;
264
+ cursor: pointer;
265
+ line-height: 1;
266
+ height: 24px;
267
+ background-color: #1f8fff;
268
+ }
269
+ .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .input-area {
270
+ height: 24px;
271
+ }
272
+ .pb-editor .pb-editor-body .pb-color-picker {
273
+ display: inline-flex;
274
+ position: relative;
275
+ }
276
+ .pb-editor .pb-editor-body .pb-color-picker .buttons {
277
+ display: flex;
278
+ padding: 0;
279
+ }
280
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button {
281
+ width: 24px;
282
+ height: 24px;
283
+ display: flex;
284
+ justify-content: center;
285
+ align-items: center;
286
+ }
287
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button.none {
288
+ position: relative;
289
+ overflow: hidden;
290
+ }
291
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button.none::after {
292
+ content: " ";
293
+ display: inline-block;
294
+ width: 100px;
295
+ height: 1px;
296
+ background: red;
297
+ position: absolute;
298
+ top: 50%;
299
+ left: 50%;
300
+ transform: translate(-50%, -50%) rotate(45deg);
301
+ }
302
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button.picker-button {
303
+ border: 1px solid #cccccc;
304
+ }
305
+ .pb-editor .pb-editor-body .pb-color-picker .buttons button i {
306
+ font-size: 1.4rem;
307
+ }
308
+ .pb-editor .pb-editor-body .pb-color-picker .sketch-wrap {
309
+ width: 220px;
310
+ position: absolute;
311
+ z-index: 10;
312
+ left: -12px;
313
+ top: 24px;
314
+ white-space: break-spaces;
315
+ text-align: left;
316
+ }
317
+ .pb-editor .pb-editor-body .pb-part-add-modal .section-title {
318
+ font-weight: 700;
319
+ }
320
+ .pb-editor .pb-editor-body .pb-part-add-modal .group .part {
321
+ border: 1px solid var(--border-light);
322
+ border-radius: 4px;
323
+ padding: 8px 16px;
324
+ }
325
+ .pb-editor .pb-editor-body .pb-html-editor-modal .preview {
326
+ width: 50%;
327
+ }
328
+ .pb-editor .pb-editor-body .pb-html-editor-modal .preview .content {
329
+ border: solid 1px #ccc;
330
+ }
331
+ .pb-editor .pb-editor-body .pb-html-editor-modal .preview .content iframe {
332
+ width: 100%;
333
+ height: 100%;
334
+ }
335
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor {
336
+ width: 50%;
337
+ }
338
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
339
+ height: 0;
340
+ }
341
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor .tags {
342
+ height: 60%;
343
+ }
344
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor .style {
345
+ height: 40%;
346
+ }
347
+ .pb-editor .pb-editor-body .pb-html-editor-modal .editor .bs-code-editor {
348
+ height: 100%;
349
+ }
350
+ .pb-editor .pb-editor-body .pb-html-editor-modal .buttons {
351
+ text-align: center;
352
+ }
353
+ .pb-editor .pb-editor-body .pb-html-editor-modal .buttons button {
354
+ color: #fff;
355
+ border: none;
356
+ padding: 4px 12px;
357
+ cursor: pointer;
358
+ line-height: 1;
359
+ height: 28px;
360
+ background-color: #1f8fff;
361
+ }
362
+ .pb-editor .pb-editor-body .pb-youtube-modal .flex-grow-1.overflow-auto {
363
+ overflow: hidden !important;
364
+ }
365
+ .pb-editor .pb-editor-body .pb-youtube-modal button {
366
+ color: #fff;
367
+ border: none;
368
+ padding: 4px 12px;
369
+ cursor: pointer;
370
+ line-height: 1;
371
+ height: 28px;
372
+ background-color: #1f8fff;
373
+ }
@@ -0,0 +1,195 @@
1
+ .pb-page {
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 100%;
5
+ background-position: 50% 50%;
6
+ background-repeat: no-repeat;
7
+ background-size: cover;
8
+ overflow-x: hidden;
9
+ }
10
+ .pb-page .pb-section {
11
+ display: flex;
12
+ position: relative;
13
+ width: 100%;
14
+ background-position: 50% 50%;
15
+ background-repeat: no-repeat;
16
+ background-size: cover;
17
+ }
18
+ .pb-page .pb-section .pb-block {
19
+ display: flex;
20
+ min-width: 1px;
21
+ position: relative;
22
+ background-position: 50% 50%;
23
+ background-repeat: no-repeat;
24
+ background-size: cover;
25
+ width: 100%;
26
+ }
27
+ .pb-page .pb-section .pb-block .pb-widget {
28
+ position: relative;
29
+ background-position: 50% 50%;
30
+ background-repeat: no-repeat;
31
+ background-size: cover;
32
+ width: 100%;
33
+ }
34
+ .pb-page .pb-section .pb-block .pb-widget .children {
35
+ position: absolute;
36
+ width: 100%;
37
+ height: 100%;
38
+ }
39
+ .pb-page .pb-section .pb-block .pb-text-widget {
40
+ width: 100%;
41
+ height: fit-content;
42
+ }
43
+ .pb-page .pb-section .pb-block .pb-text-widget .text {
44
+ color: #333;
45
+ }
46
+ .pb-page .pb-section .pb-block .pb-text-widget .placeholder {
47
+ padding: 4px 0;
48
+ font-size: 18px;
49
+ text-align: center;
50
+ color: #999;
51
+ }
52
+ .pb-page .pb-section .pb-block .pb-media-widget {
53
+ width: 100%;
54
+ }
55
+ .pb-page .pb-section .pb-block .pb-media-widget .image {
56
+ width: 100%;
57
+ }
58
+ .pb-page .pb-section .pb-block .pb-media-widget .video {
59
+ width: 100%;
60
+ }
61
+ .pb-page .pb-section .pb-block .pb-media-widget .placeholder {
62
+ height: 100px;
63
+ background-color: #eee;
64
+ text-align: center;
65
+ }
66
+ .pb-page .pb-section .pb-block .pb-media-widget .placeholder span {
67
+ font-size: 40px;
68
+ color: #999;
69
+ line-height: 100px;
70
+ vertical-align: middle;
71
+ }
72
+ .pb-page .pb-section .pb-block .pb-html-widget {
73
+ width: 100%;
74
+ height: fit-content;
75
+ }
76
+ .pb-page .pb-section .pb-block .pb-html-widget .placeholder {
77
+ padding: 4px 0;
78
+ font-size: 18px;
79
+ text-align: center;
80
+ color: #999;
81
+ }
82
+ .pb-page .pb-section .pb-block .pb-iframe-widget {
83
+ width: 100%;
84
+ height: fit-content;
85
+ }
86
+ .pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {
87
+ padding: 4px 0;
88
+ font-size: 18px;
89
+ text-align: center;
90
+ color: #999;
91
+ }
92
+ .pb-page .pb-section .pb-block .pb-youtube-widget {
93
+ width: 100%;
94
+ }
95
+ .pb-page .pb-section .pb-block .pb-youtube-widget .youtube {
96
+ width: 100%;
97
+ height: 100%;
98
+ }
99
+ .pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {
100
+ height: 100px;
101
+ background-color: #eee;
102
+ text-align: center;
103
+ }
104
+ .pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {
105
+ font-size: 40px;
106
+ color: #999;
107
+ line-height: 100px;
108
+ vertical-align: middle;
109
+ }
110
+ .pb-page .pb-section .pb-block .pb-container-widget {
111
+ width: 100%;
112
+ }
113
+ .pb-page .pb-section .pb-block .pb-container-widget .placeholder {
114
+ height: 100px;
115
+ background-color: #eee;
116
+ text-align: center;
117
+ }
118
+ .pb-page .pb-section .pb-block .pb-container-widget .placeholder span {
119
+ font-size: 40px;
120
+ color: #999;
121
+ line-height: 100px;
122
+ vertical-align: middle;
123
+ }
124
+ .pb-page .pb-section .pb-block .pb-product-list-widget {
125
+ width: 100%;
126
+ display: flex;
127
+ flex-direction: row;
128
+ flex-wrap: wrap;
129
+ justify-content: flex-start;
130
+ align-items: center;
131
+ }
132
+ .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {
133
+ width: 25%;
134
+ }
135
+ .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .product {
136
+ width: 95%;
137
+ margin: 0 auto;
138
+ padding-top: 8px;
139
+ padding-bottom: 8px;
140
+ }
141
+ .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {
142
+ width: 100%;
143
+ }
144
+ .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {
145
+ margin-top: 8px;
146
+ font-size: 14px;
147
+ }
148
+ .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {
149
+ margin-top: 8px;
150
+ font-size: 14px;
151
+ font-weight: bold;
152
+ }
153
+ .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {
154
+ height: 200px;
155
+ background-color: #eee;
156
+ text-align: center;
157
+ }
158
+ .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty span {
159
+ font-size: 40px;
160
+ color: #999;
161
+ line-height: 200px;
162
+ vertical-align: middle;
163
+ }
164
+ @media (max-width: 768px) {
165
+ .pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {
166
+ width: 50%;
167
+ }
168
+ }
169
+ .pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {
170
+ width: 50%;
171
+ }
172
+ .pb-page .pb-section .pb-block .pb-login-widget {
173
+ height: 200px;
174
+ text-align: center;
175
+ }
176
+ .pb-page .pb-section .pb-block .pb-login-widget h3 {
177
+ padding: 0;
178
+ margin: 0;
179
+ font-size: 32px;
180
+ font-weight: bold;
181
+ color: #ccc;
182
+ line-height: 200px;
183
+ vertical-align: middle;
184
+ }
185
+ .pb-page * {
186
+ box-sizing: border-box;
187
+ }
188
+
189
+ .pb-viewer {
190
+ display: flex;
191
+ flex-direction: column;
192
+ align-items: center;
193
+ width: 100%;
194
+ overflow-y: auto;
195
+ }
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
2
2
  import { vT, BSTextInput } from "@g1cloud/bluesea";
3
- import { P as PbColorPicker } from "./index-BhMJnNHk.js";
3
+ import { P as PbColorPicker } from "./index-BVTz0PeS.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-color" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _hoisted_3 = { class: "bs-layout-horizontal flex-align-center color" };
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
2
2
  import { vT, BSTextInput } from "@g1cloud/bluesea";
3
- import { t as toCssLength } from "./index-BhMJnNHk.js";
3
+ import { t as toCssLength } from "./index-BVTz0PeS.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, defineAsyncComponent } from "vue";
2
2
  import { useModal, vT } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-BhMJnNHk.js";
3
+ import { u as usePageBuilderEditor } from "./index-BVTz0PeS.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-html flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -1,5 +1,5 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, toDisplayString, createVNode, createCommentVNode, Fragment } from "vue";
2
- import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-BhMJnNHk.js";
2
+ import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-BVTz0PeS.js";
3
3
  import { useModal, vT, BSButton, BSMultiLangTextInput, showNotification } from "@g1cloud/bluesea";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image" };
5
5
  const _hoisted_2 = { class: "title" };
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
2
2
  import { vT, BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-BhMJnNHk.js";
3
+ import { u as usePageBuilderEditor } from "./index-BVTz0PeS.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
2
2
  import { vT, BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
3
- import { u as usePageBuilderEditor } from "./index-BhMJnNHk.js";
3
+ import { u as usePageBuilderEditor } from "./index-BVTz0PeS.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref } from "vue";
2
2
  import { useModal, vT } from "@g1cloud/bluesea";
3
- import { s as selectYoutubeVideo } from "./index-BhMJnNHk.js";
3
+ import { s as selectYoutubeVideo } from "./index-BVTz0PeS.js";
4
4
  const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
5
5
  const _hoisted_2 = { class: "title" };
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -1,6 +1,6 @@
1
1
  import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
2
2
  import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
3
- import { w as widgetPartDefinitions } from "./index-BhMJnNHk.js";
3
+ import { w as widgetPartDefinitions } from "./index-BVTz0PeS.js";
4
4
  const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
5
5
  const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
6
6
  const _hoisted_3 = ["onClick", "textContent"];