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

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 (7) hide show
  1. package/css/page-builder-editor.css +39 -27
  2. package/dist/style.css +36 -27
  3. package/package.json +2 -2
  4. package/scss/canvas.scss +1 -0
  5. package/scss/page-builder-editor.scss +76 -70
  6. package/scss/property-editor-html.scss +4 -3
  7. package/scss/property-editor-product.scss +4 -3
package/css/page-builder-editor.css CHANGED
@@ -27,17 +27,17 @@
27
27
  align-items: center;
28
28
  justify-content: center;
29
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 {
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-part-add-modal .group .part, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part {
31
31
  user-select: none;
32
32
  cursor: pointer;
33
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 {
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-part-add-modal .group .part:hover, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:hover {
35
35
  filter: opacity(75%);
36
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 {
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-part-add-modal .group .part:active, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:active {
38
38
  filter: opacity(50%);
39
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 {
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-part-add-modal .group .disabled.part, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .disabled.part {
41
41
  filter: opacity(40%);
42
42
  }
43
43
  .pb-editor .pb-editor-body {
@@ -46,6 +46,7 @@
46
46
  }
47
47
  .pb-editor .pb-editor-body .pb-canvas-wrapper {
48
48
  background-color: var(--color-canvas-frame-bg);
49
+ border-top: 1px solid var(--color-canvas-frame-bg);
49
50
  flex-grow: 1;
50
51
  min-width: 0;
51
52
  width: 0;
@@ -68,15 +69,20 @@
68
69
  .pb-editor .pb-editor-body .bs-tab-sheet .tab-bar .tabs {
69
70
  padding-top: 0;
70
71
  }
72
+ .pb-editor .pb-editor-body .bs-horizontal-layout-resizer {
73
+ transform: scaleX(6);
74
+ }
75
+ .pb-editor .pb-editor-body .bs-horizontal-layout-resizer .resize-line {
76
+ background-color: var(--color-canvas-frame-bg);
77
+ }
71
78
  .pb-editor .pb-editor-body .pb-navigator {
72
79
  position: relative;
73
- width: 200px;
74
80
  height: 1px;
75
81
  overflow-y: auto;
76
82
  padding: 8px 0;
77
83
  flex-grow: 1;
78
84
  border: 1px solid var(--border-light);
79
- border-right-color: var(--color-canvas-frame-bg);
85
+ border-right: 0 none;
80
86
  }
81
87
  .pb-editor .pb-editor-body .pb-navigator:focus {
82
88
  outline: none;
@@ -85,7 +91,7 @@
85
91
  width: 300px;
86
92
  overflow: auto;
87
93
  border: 1px solid var(--border-light);
88
- border-left-color: var(--color-canvas-frame-bg);
94
+ border-left: 0 none;
89
95
  }
90
96
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties {
91
97
  padding: 0;
@@ -158,14 +164,15 @@
158
164
  height: 24px;
159
165
  }
160
166
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product button {
161
- color: #fff;
167
+ color: var(--white);
162
168
  border: none;
163
169
  padding: 4px 12px;
164
170
  cursor: pointer;
165
171
  line-height: 1;
166
172
  width: 200px;
167
- height: 28px;
168
- background-color: #1f8fff;
173
+ height: 26px;
174
+ background-color: var(--primary);
175
+ border-radius: 2px;
169
176
  }
170
177
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product .input-area {
171
178
  height: 24px;
@@ -189,14 +196,15 @@
189
196
  height: 24px;
190
197
  }
191
198
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html button {
192
- color: #fff;
199
+ color: var(--white);
193
200
  border: none;
194
201
  padding: 4px 12px;
195
202
  cursor: pointer;
196
203
  line-height: 1;
197
204
  width: 100px;
198
- height: 28px;
199
- background-color: #1f8fff;
205
+ height: 26px;
206
+ background-color: var(--primary);
207
+ border-radius: 2px;
200
208
  }
201
209
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html .input-area {
202
210
  height: 24px;
@@ -314,43 +322,46 @@
314
322
  white-space: break-spaces;
315
323
  text-align: left;
316
324
  }
317
- .pb-editor .pb-editor-body .pb-part-add-modal .section-title {
325
+
326
+ .pb-part-add-modal .section-title {
318
327
  font-weight: 700;
319
328
  }
320
- .pb-editor .pb-editor-body .pb-part-add-modal .group .part {
329
+ .pb-part-add-modal .group .part {
321
330
  border: 1px solid var(--border-light);
322
331
  border-radius: 4px;
323
332
  padding: 8px 16px;
333
+ cursor: pointer;
324
334
  }
325
- .pb-editor .pb-editor-body .pb-html-editor-modal .preview {
335
+
336
+ .pb-html-editor-modal .preview {
326
337
  width: 50%;
327
338
  }
328
- .pb-editor .pb-editor-body .pb-html-editor-modal .preview .content {
339
+ .pb-html-editor-modal .preview .content {
329
340
  border: solid 1px #ccc;
330
341
  }
331
- .pb-editor .pb-editor-body .pb-html-editor-modal .preview .content iframe {
342
+ .pb-html-editor-modal .preview .content iframe {
332
343
  width: 100%;
333
344
  height: 100%;
334
345
  }
335
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor {
346
+ .pb-html-editor-modal .editor {
336
347
  width: 50%;
337
348
  }
338
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
349
+ .pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
339
350
  height: 0;
340
351
  }
341
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor .tags {
352
+ .pb-html-editor-modal .editor .tags {
342
353
  height: 60%;
343
354
  }
344
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor .style {
355
+ .pb-html-editor-modal .editor .style {
345
356
  height: 40%;
346
357
  }
347
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor .bs-code-editor {
358
+ .pb-html-editor-modal .editor .bs-code-editor {
348
359
  height: 100%;
349
360
  }
350
- .pb-editor .pb-editor-body .pb-html-editor-modal .buttons {
361
+ .pb-html-editor-modal .buttons {
351
362
  text-align: center;
352
363
  }
353
- .pb-editor .pb-editor-body .pb-html-editor-modal .buttons button {
364
+ .pb-html-editor-modal .buttons button {
354
365
  color: #fff;
355
366
  border: none;
356
367
  padding: 4px 12px;
@@ -359,10 +370,11 @@
359
370
  height: 28px;
360
371
  background-color: #1f8fff;
361
372
  }
362
- .pb-editor .pb-editor-body .pb-youtube-modal .flex-grow-1.overflow-auto {
373
+
374
+ .pb-youtube-modal .flex-grow-1.overflow-auto {
363
375
  overflow: hidden !important;
364
376
  }
365
- .pb-editor .pb-editor-body .pb-youtube-modal button {
377
+ .pb-youtube-modal button {
366
378
  color: #fff;
367
379
  border: none;
368
380
  padding: 4px 12px;
package/dist/style.css CHANGED
@@ -27,17 +27,17 @@
27
27
  align-items: center;
28
28
  justify-content: center;
29
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 {
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-part-add-modal .group .part, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part {
31
31
  user-select: none;
32
32
  cursor: pointer;
33
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 {
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-part-add-modal .group .part:hover, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:hover {
35
35
  filter: opacity(75%);
36
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 {
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-part-add-modal .group .part:active, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .part:active {
38
38
  filter: opacity(50%);
39
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 {
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-part-add-modal .group .disabled.part, .pb-part-add-modal .group .pb-editor .pb-menu .pb-toolbar .pb-tool-button-group .pb-tool-button .tool-button .disabled.part {
41
41
  filter: opacity(40%);
42
42
  }
43
43
  .pb-editor .pb-editor-body {
@@ -46,6 +46,7 @@
46
46
  }
47
47
  .pb-editor .pb-editor-body .pb-canvas-wrapper {
48
48
  background-color: var(--color-canvas-frame-bg);
49
+ border-top: 1px solid var(--color-canvas-frame-bg);
49
50
  flex-grow: 1;
50
51
  min-width: 0;
51
52
  width: 0;
@@ -68,15 +69,20 @@
68
69
  .pb-editor .pb-editor-body .bs-tab-sheet .tab-bar .tabs {
69
70
  padding-top: 0;
70
71
  }
72
+ .pb-editor .pb-editor-body .bs-horizontal-layout-resizer {
73
+ transform: scaleX(6);
74
+ }
75
+ .pb-editor .pb-editor-body .bs-horizontal-layout-resizer .resize-line {
76
+ background-color: var(--color-canvas-frame-bg);
77
+ }
71
78
  .pb-editor .pb-editor-body .pb-navigator {
72
79
  position: relative;
73
- width: 200px;
74
80
  height: 1px;
75
81
  overflow-y: auto;
76
82
  padding: 8px 0;
77
83
  flex-grow: 1;
78
84
  border: 1px solid var(--border-light);
79
- border-right-color: var(--color-canvas-frame-bg);
85
+ border-right: 0 none;
80
86
  }
81
87
  .pb-editor .pb-editor-body .pb-navigator:focus {
82
88
  outline: none;
@@ -85,7 +91,7 @@
85
91
  width: 300px;
86
92
  overflow: auto;
87
93
  border: 1px solid var(--border-light);
88
- border-left-color: var(--color-canvas-frame-bg);
94
+ border-left: 0 none;
89
95
  }
90
96
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties {
91
97
  padding: 0;
@@ -158,14 +164,15 @@
158
164
  height: 24px;
159
165
  }
160
166
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product button {
161
- color: #fff;
167
+ color: var(--white);
162
168
  border: none;
163
169
  padding: 4px 12px;
164
170
  cursor: pointer;
165
171
  line-height: 1;
166
172
  width: 200px;
167
- height: 28px;
168
- background-color: #1f8fff;
173
+ height: 26px;
174
+ background-color: var(--primary);
175
+ border-radius: 2px;
169
176
  }
170
177
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-product .input-area {
171
178
  height: 24px;
@@ -189,14 +196,15 @@
189
196
  height: 24px;
190
197
  }
191
198
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html button {
192
- color: #fff;
199
+ color: var(--white);
193
200
  border: none;
194
201
  padding: 4px 12px;
195
202
  cursor: pointer;
196
203
  line-height: 1;
197
204
  width: 100px;
198
- height: 28px;
199
- background-color: #1f8fff;
205
+ height: 26px;
206
+ background-color: var(--primary);
207
+ border-radius: 2px;
200
208
  }
201
209
  .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-html .input-area {
202
210
  height: 24px;
@@ -314,43 +322,44 @@
314
322
  white-space: break-spaces;
315
323
  text-align: left;
316
324
  }
317
- .pb-editor .pb-editor-body .pb-part-add-modal .section-title {
325
+ .pb-part-add-modal .section-title {
318
326
  font-weight: 700;
319
327
  }
320
- .pb-editor .pb-editor-body .pb-part-add-modal .group .part {
328
+ .pb-part-add-modal .group .part {
321
329
  border: 1px solid var(--border-light);
322
330
  border-radius: 4px;
323
331
  padding: 8px 16px;
332
+ cursor: pointer;
324
333
  }
325
- .pb-editor .pb-editor-body .pb-html-editor-modal .preview {
334
+ .pb-html-editor-modal .preview {
326
335
  width: 50%;
327
336
  }
328
- .pb-editor .pb-editor-body .pb-html-editor-modal .preview .content {
337
+ .pb-html-editor-modal .preview .content {
329
338
  border: solid 1px #ccc;
330
339
  }
331
- .pb-editor .pb-editor-body .pb-html-editor-modal .preview .content iframe {
340
+ .pb-html-editor-modal .preview .content iframe {
332
341
  width: 100%;
333
342
  height: 100%;
334
343
  }
335
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor {
344
+ .pb-html-editor-modal .editor {
336
345
  width: 50%;
337
346
  }
338
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
347
+ .pb-html-editor-modal .editor .bs-tab-sheet > :nth-child(2) {
339
348
  height: 0;
340
349
  }
341
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor .tags {
350
+ .pb-html-editor-modal .editor .tags {
342
351
  height: 60%;
343
352
  }
344
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor .style {
353
+ .pb-html-editor-modal .editor .style {
345
354
  height: 40%;
346
355
  }
347
- .pb-editor .pb-editor-body .pb-html-editor-modal .editor .bs-code-editor {
356
+ .pb-html-editor-modal .editor .bs-code-editor {
348
357
  height: 100%;
349
358
  }
350
- .pb-editor .pb-editor-body .pb-html-editor-modal .buttons {
359
+ .pb-html-editor-modal .buttons {
351
360
  text-align: center;
352
361
  }
353
- .pb-editor .pb-editor-body .pb-html-editor-modal .buttons button {
362
+ .pb-html-editor-modal .buttons button {
354
363
  color: #fff;
355
364
  border: none;
356
365
  padding: 4px 12px;
@@ -359,10 +368,10 @@
359
368
  height: 28px;
360
369
  background-color: #1f8fff;
361
370
  }
362
- .pb-editor .pb-editor-body .pb-youtube-modal .flex-grow-1.overflow-auto {
371
+ .pb-youtube-modal .flex-grow-1.overflow-auto {
363
372
  overflow: hidden !important;
364
373
  }
365
- .pb-editor .pb-editor-body .pb-youtube-modal button {
374
+ .pb-youtube-modal button {
366
375
  color: #fff;
367
376
  border: none;
368
377
  padding: 4px 12px;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@g1cloud/page-builder-editor",
3
3
  "private": false,
4
- "version": "1.0.0-alpha.79",
4
+ "version": "1.0.0-alpha.80",
5
5
  "engins": {
6
6
  "node": ">= 20.0.0"
7
7
  },
@@ -31,7 +31,7 @@
31
31
  "vue-router": "^4.4.3",
32
32
  "vue3-click-away": "^1.2.4",
33
33
  "yjs": "^13.6.14",
34
- "@g1cloud/page-builder-viewer": "1.0.0-alpha.79"
34
+ "@g1cloud/page-builder-viewer": "1.0.0-alpha.80"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@types/node": "^20.12.7",
package/scss/canvas.scss CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  .pb-canvas-wrapper {
3
3
  background-color: var(--color-canvas-frame-bg);
4
+ border-top: 1px solid var(--color-canvas-frame-bg);
4
5
  flex-grow: 1;
5
6
  min-width: 0;
6
7
  width: 0;
package/scss/page-builder-editor.scss CHANGED
@@ -65,15 +65,21 @@
65
65
  }
66
66
  }
67
67
 
68
+ .bs-horizontal-layout-resizer {
69
+ transform: scaleX(6);
70
+ .resize-line {
71
+ background-color: var(--color-canvas-frame-bg);
72
+ }
73
+ }
74
+
68
75
  .pb-navigator {
69
76
  position: relative;
70
- width: 200px;
71
77
  height: 1px;
72
78
  overflow-y: auto;
73
79
  padding: 8px 0;
74
80
  flex-grow: 1;
75
81
  border: 1px solid var(--border-light);
76
- border-right-color: var(--color-canvas-frame-bg);
82
+ border-right: 0 none;
77
83
 
78
84
  &:focus {
79
85
  outline: none;
@@ -84,7 +90,7 @@
84
90
  width: 300px;
85
91
  overflow: auto;
86
92
  border: 1px solid var(--border-light);
87
- border-left-color: var(--color-canvas-frame-bg);
93
+ border-left: 0 none;
88
94
 
89
95
  .pb-sidebar-properties {
90
96
  padding: 0;
@@ -228,93 +234,93 @@
228
234
  text-align: left;
229
235
  }
230
236
  }
237
+ }
238
+ }
231
239
 
232
- .pb-part-add-modal {
233
- .section-title {
234
- font-weight: 700;
235
- }
240
+ .pb-part-add-modal {
241
+ .section-title {
242
+ font-weight: 700;
243
+ }
236
244
 
237
- .group {
245
+ .group {
238
246
 
239
- .part {
240
- @extend .bs-clickable;
241
- border: 1px solid var(--border-light);
242
- border-radius: 4px;
243
- padding: 8px 16px;
244
- }
245
- }
247
+ .part {
248
+ @extend .bs-clickable;
249
+ border: 1px solid var(--border-light);
250
+ border-radius: 4px;
251
+ padding: 8px 16px;
252
+ cursor: pointer;
246
253
  }
254
+ }
255
+ }
247
256
 
248
- .pb-html-editor-modal {
249
- .preview {
250
- width: 50%;
257
+ .pb-html-editor-modal {
258
+ .preview {
259
+ width: 50%;
251
260
 
252
- .content {
253
- border: solid 1px #ccc;
261
+ .content {
262
+ border: solid 1px #ccc;
254
263
 
255
- iframe {
256
- width: 100%;
257
- height: 100%;
258
- }
259
- }
264
+ iframe {
265
+ width: 100%;
266
+ height: 100%;
260
267
  }
268
+ }
269
+ }
261
270
 
262
- .editor {
263
- width: 50%;
264
-
265
- .bs-tab-sheet > :nth-child(2) {
266
- height: 0;
267
- }
268
-
269
- .tags {
270
- height: 60%;
271
-
272
- .content {
273
- }
274
- }
271
+ .editor {
272
+ width: 50%;
275
273
 
276
- .style {
277
- height: 40%;
274
+ .bs-tab-sheet > :nth-child(2) {
275
+ height: 0;
276
+ }
278
277
 
279
- .content {
280
- }
281
- }
278
+ .tags {
279
+ height: 60%;
282
280
 
283
- .bs-code-editor {
284
- height: 100%;
285
- }
281
+ .content {
286
282
  }
283
+ }
287
284
 
288
- .buttons {
289
- text-align: center;
285
+ .style {
286
+ height: 40%;
290
287
 
291
- button {
292
- color: #fff;
293
- border: none;
294
- padding: 4px 12px;
295
- cursor: pointer;
296
- line-height: 1;
297
- height: 28px;
298
- background-color: #1f8fff;
299
- }
288
+ .content {
300
289
  }
301
290
  }
302
291
 
303
- .pb-youtube-modal {
304
- .flex-grow-1.overflow-auto {
305
- overflow: hidden !important;
306
- }
292
+ .bs-code-editor {
293
+ height: 100%;
294
+ }
295
+ }
307
296
 
308
- button {
309
- color: #fff;
310
- border: none;
311
- padding: 4px 12px;
312
- cursor: pointer;
313
- line-height: 1;
314
- height: 28px;
315
- background-color: #1f8fff;
316
- }
297
+ .buttons {
298
+ text-align: center;
299
+
300
+ button {
301
+ color: #fff;
302
+ border: none;
303
+ padding: 4px 12px;
304
+ cursor: pointer;
305
+ line-height: 1;
306
+ height: 28px;
307
+ background-color: #1f8fff;
317
308
  }
309
+ }
310
+ }
311
+
312
+ .pb-youtube-modal {
313
+ .flex-grow-1.overflow-auto {
314
+ overflow: hidden !important;
315
+ }
318
316
 
317
+ button {
318
+ color: #fff;
319
+ border: none;
320
+ padding: 4px 12px;
321
+ cursor: pointer;
322
+ line-height: 1;
323
+ height: 28px;
324
+ background-color: #1f8fff;
319
325
  }
320
326
  }
package/scss/property-editor-html.scss CHANGED
@@ -1,13 +1,14 @@
1
1
  .property-editor-html {
2
2
  button {
3
- color: #fff;
3
+ color: var(--white);
4
4
  border: none;
5
5
  padding: 4px 12px;
6
6
  cursor: pointer;
7
7
  line-height: 1;
8
8
  width: 100px;
9
- height: 28px;
10
- background-color: #1f8fff;
9
+ height: 26px;
10
+ background-color: var(--primary);
11
+ border-radius: 2px;
11
12
  }
12
13
 
13
14
  .input-area {
package/scss/property-editor-product.scss CHANGED
@@ -1,14 +1,15 @@
1
1
  .property-editor-product {
2
2
 
3
3
  button {
4
- color: #fff;
4
+ color: var(--white);
5
5
  border: none;
6
6
  padding: 4px 12px;
7
7
  cursor: pointer;
8
8
  line-height: 1;
9
9
  width: 200px;
10
- height: 28px;
11
- background-color: #1f8fff;
10
+ height: 26px;
11
+ background-color: var(--primary);
12
+ border-radius: 2px;
12
13
  }
13
14
 
14
15
  .input-area {