@zipify/wysiwyg 1.0.0-dev.3 → 1.0.0-dev.30

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 (151) hide show
  1. package/.eslintignore +1 -0
  2. package/.github/dependabot.yaml +1 -0
  3. package/.release-it.json +3 -1
  4. package/.stylelintignore +1 -0
  5. package/README.md +3 -1
  6. package/config/jest/setupTests.js +7 -1
  7. package/config/webpack/example.config.js +2 -0
  8. package/config/webpack/lib.config.js +47 -0
  9. package/config/webpack/loaders/style-loader.js +3 -1
  10. package/config/webpack/loaders/svg-loader.js +1 -1
  11. package/dist/wysiwyg.css +1118 -0
  12. package/dist/wysiwyg.js +43805 -0
  13. package/example/ExampleApp.vue +51 -32
  14. package/example/example.js +26 -0
  15. package/example/pageBlocks.js +31 -0
  16. package/example/presets.js +4 -2
  17. package/lib/Wysiwyg.vue +41 -21
  18. package/lib/assets/icons/alignment-center.svg +3 -0
  19. package/lib/assets/icons/alignment-justify.svg +3 -0
  20. package/lib/assets/icons/alignment-left.svg +3 -0
  21. package/lib/assets/icons/alignment-right.svg +3 -0
  22. package/lib/assets/icons/arrow.svg +3 -0
  23. package/lib/assets/icons/background-color.svg +3 -0
  24. package/lib/assets/icons/case-style.svg +3 -0
  25. package/lib/assets/icons/font-color.svg +5 -0
  26. package/lib/assets/icons/italic.svg +3 -0
  27. package/lib/assets/icons/line-height.svg +3 -0
  28. package/lib/assets/icons/link.svg +3 -0
  29. package/lib/assets/icons/list-circle.svg +3 -0
  30. package/lib/assets/icons/list-decimal.svg +3 -0
  31. package/lib/assets/icons/list-disc.svg +3 -0
  32. package/lib/assets/icons/list-latin.svg +3 -0
  33. package/lib/assets/icons/list-roman.svg +3 -0
  34. package/lib/assets/icons/list-square.svg +3 -0
  35. package/lib/assets/icons/remove-format.svg +3 -0
  36. package/lib/assets/icons/reset-styles.svg +3 -0
  37. package/lib/assets/icons/strike-through.svg +3 -0
  38. package/lib/assets/icons/superscript.svg +3 -0
  39. package/lib/assets/icons/underline.svg +3 -0
  40. package/lib/assets/icons/unlink.svg +3 -0
  41. package/lib/components/base/Button.vue +21 -1
  42. package/lib/components/base/Checkbox.vue +89 -0
  43. package/lib/components/base/FieldLabel.vue +2 -1
  44. package/lib/components/base/Icon.vue +18 -10
  45. package/lib/components/base/Modal.vue +0 -1
  46. package/lib/components/base/TextField.vue +106 -0
  47. package/lib/components/base/__tests__/Icon.test.js +6 -13
  48. package/lib/components/base/__tests__/TextField.test.js +57 -0
  49. package/lib/components/base/__tests__/__snapshots__/TextField.test.js.snap +9 -0
  50. package/lib/components/base/colorPicker/composables/usePickerHotkeys.js +2 -1
  51. package/lib/components/base/composables/index.js +1 -0
  52. package/lib/components/base/composables/useValidator.js +19 -0
  53. package/lib/components/base/dropdown/Dropdown.vue +15 -3
  54. package/lib/components/base/dropdown/DropdownActivator.vue +19 -3
  55. package/lib/components/base/index.js +3 -1
  56. package/lib/components/toolbar/Toolbar.vue +49 -9
  57. package/lib/components/toolbar/ToolbarFull.vue +10 -2
  58. package/lib/components/toolbar/__tests__/Toolbar.test.js +6 -0
  59. package/lib/components/toolbar/controls/FontSizeControl.vue +7 -0
  60. package/lib/components/toolbar/controls/ListControl.vue +1 -5
  61. package/lib/components/toolbar/controls/UnderlineControl.vue +2 -2
  62. package/lib/components/toolbar/controls/__tests__/UnderlineControl.test.js +4 -0
  63. package/lib/components/toolbar/controls/index.js +1 -0
  64. package/lib/components/toolbar/controls/link/LinkControl.vue +152 -0
  65. package/lib/components/toolbar/controls/link/LinkControlApply.vue +35 -0
  66. package/lib/components/toolbar/controls/link/LinkControlHeader.vue +67 -0
  67. package/lib/components/toolbar/controls/link/composables/index.js +1 -0
  68. package/lib/components/toolbar/controls/link/composables/useLink.js +61 -0
  69. package/lib/components/toolbar/controls/link/destination/LinkControlDestination.vue +103 -0
  70. package/lib/components/toolbar/controls/link/destination/LinkControlPageBlock.vue +54 -0
  71. package/lib/components/toolbar/controls/link/destination/LinkControlUrl.vue +52 -0
  72. package/lib/components/toolbar/controls/link/destination/index.js +1 -0
  73. package/lib/components/toolbar/controls/link/index.js +1 -0
  74. package/lib/composables/__tests__/useEditor.test.js +14 -5
  75. package/lib/composables/useEditor.js +13 -8
  76. package/lib/composables/useToolbar.js +14 -29
  77. package/lib/directives/outClick.js +20 -4
  78. package/lib/enums/LinkDestinations.js +4 -0
  79. package/lib/enums/LinkTargets.js +4 -0
  80. package/lib/enums/TextSettings.js +3 -1
  81. package/lib/enums/index.js +2 -0
  82. package/lib/extensions/Alignment.js +21 -3
  83. package/lib/extensions/BackgroundColor.js +16 -1
  84. package/lib/extensions/FontColor.js +16 -1
  85. package/lib/extensions/FontFamily.js +26 -2
  86. package/lib/extensions/FontSize.js +28 -3
  87. package/lib/extensions/FontStyle.js +23 -2
  88. package/lib/extensions/FontWeight.js +33 -1
  89. package/lib/extensions/LineHeight.js +29 -3
  90. package/lib/extensions/Link.js +101 -0
  91. package/lib/extensions/StylePreset.js +36 -6
  92. package/lib/extensions/TextDecoration.js +29 -3
  93. package/lib/extensions/__tests__/Alignment.test.js +30 -3
  94. package/lib/extensions/__tests__/BackgroundColor.test.js +38 -3
  95. package/lib/extensions/__tests__/CaseStyle.test.js +4 -3
  96. package/lib/extensions/__tests__/FontColor.test.js +38 -3
  97. package/lib/extensions/__tests__/FontFamily.test.js +59 -5
  98. package/lib/extensions/__tests__/FontSize.test.js +38 -3
  99. package/lib/extensions/__tests__/FontStyle.test.js +46 -3
  100. package/lib/extensions/__tests__/FontWeight.test.js +66 -3
  101. package/lib/extensions/__tests__/LineHeight.test.js +49 -3
  102. package/lib/extensions/__tests__/StylePreset.test.js +143 -4
  103. package/lib/extensions/__tests__/TextDecoration.test.js +87 -3
  104. package/lib/extensions/__tests__/__snapshots__/Alignment.test.js.snap +70 -2
  105. package/lib/extensions/__tests__/__snapshots__/BackgroundColor.test.js.snap +121 -1
  106. package/lib/extensions/__tests__/__snapshots__/FontColor.test.js.snap +109 -1
  107. package/lib/extensions/__tests__/__snapshots__/FontFamily.test.js.snap +179 -1
  108. package/lib/extensions/__tests__/__snapshots__/FontSize.test.js.snap +132 -2
  109. package/lib/extensions/__tests__/__snapshots__/FontStyle.test.js.snap +142 -1
  110. package/lib/extensions/__tests__/__snapshots__/FontWeight.test.js.snap +179 -1
  111. package/lib/extensions/__tests__/__snapshots__/LineHeight.test.js.snap +118 -2
  112. package/lib/extensions/__tests__/__snapshots__/StylePreset.test.js.snap +171 -2
  113. package/lib/extensions/__tests__/__snapshots__/TextDecoration.test.js.snap +300 -3
  114. package/lib/extensions/core/CopyPasteProcessor.js +10 -0
  115. package/lib/extensions/core/TextProcessor.js +10 -0
  116. package/lib/extensions/core/__tests__/NodeProcessor.test.js +4 -3
  117. package/lib/extensions/core/__tests__/SelectionProcessor.test.js +9 -6
  118. package/lib/extensions/core/__tests__/TextProcessor.test.js +139 -10
  119. package/lib/extensions/core/__tests__/__snapshots__/TextProcessor.test.js.snap +26 -0
  120. package/lib/extensions/core/index.js +11 -2
  121. package/lib/extensions/core/plugins/PastePlugin.js +48 -0
  122. package/lib/extensions/core/plugins/ProseMirrorPlugin.js +20 -0
  123. package/lib/extensions/core/plugins/index.js +1 -0
  124. package/lib/extensions/index.js +41 -33
  125. package/lib/extensions/list/List.js +34 -0
  126. package/lib/extensions/list/__tests__/List.test.js +115 -5
  127. package/lib/extensions/list/__tests__/__snapshots__/List.test.js.snap +481 -0
  128. package/lib/index.js +4 -1
  129. package/lib/injectionTokens.js +2 -1
  130. package/lib/services/ContentNormalizer.js +157 -0
  131. package/lib/services/ContextWidnow.js +23 -0
  132. package/lib/services/Storage.js +1 -13
  133. package/lib/services/__tests__/ContentNormalizer.test.js +74 -0
  134. package/lib/services/__tests__/FavoriteColors.test.js +20 -0
  135. package/lib/services/__tests__/JsonSerializer.test.js +23 -0
  136. package/lib/services/__tests__/Storage.test.js +79 -0
  137. package/lib/services/index.js +2 -0
  138. package/lib/styles/content.css +96 -9
  139. package/lib/styles/helpers/offsets.css +16 -0
  140. package/lib/styles/variables.css +6 -0
  141. package/lib/utils/__tests__/__snapshots__/renderInlineSetting.test.js.snap +4 -4
  142. package/lib/utils/__tests__/convertColor.test.js +19 -0
  143. package/lib/utils/__tests__/createKeyboardShortcut.test.js +25 -0
  144. package/lib/utils/__tests__/renderInlineSetting.test.js +26 -0
  145. package/lib/utils/convertColor.js +7 -0
  146. package/lib/utils/importIcon.js +12 -0
  147. package/lib/utils/index.js +2 -0
  148. package/lib/utils/renderInlineSetting.js +2 -2
  149. package/package.json +18 -14
  150. package/lib/assets/icons.svg +0 -69
  151. package/lib/composables/__tests__/useToolbar.test.js +0 -56
@@ -0,0 +1,1118 @@
1
+
2
+ .zw-toolbar__divider[data-v-034e1143] {
3
+ border-color: rgba(var(--zw-color-n90), 0.1);
4
+ border-style: solid;
5
+ border-width: 0;
6
+ }
7
+ .zw-toolbar__divider--vertical[data-v-034e1143] {
8
+ border-left-width: 1px;
9
+ }
10
+ .zw-toolbar__divider--horizontal[data-v-034e1143] {
11
+ border-bottom-width: 1px;
12
+ }
13
+
14
+
15
+ .zw-toolbar__row[data-v-65916ef8] {
16
+ display: flex;
17
+ column-gap: var(--zw-offset-xs);
18
+ padding: var(--zw-offset-xxs) var(--zw-offset-xs);
19
+ }
20
+
21
+
22
+ .zw-toolbar__group[data-v-06bbae29] {
23
+ display: flex;
24
+ column-gap: var(--zw-offset-xxs);
25
+ }
26
+
27
+
28
+ .zw-button[data-v-610825a2] {
29
+ display: inline-flex;
30
+ align-items: center;
31
+ vertical-align: middle;
32
+ touch-action: manipulation;
33
+ cursor: pointer;
34
+ background-image: none;
35
+ background-color: transparent;
36
+ border: 0;
37
+ padding: 0;
38
+ white-space: nowrap;
39
+ appearance: none;
40
+ user-select: none;
41
+ text-transform: none;
42
+ letter-spacing: normal;
43
+ color: inherit;
44
+ transition: 0.1s opacity ease-out;
45
+ will-change: opacity;
46
+ }
47
+ .zw-button[data-v-610825a2]::-moz-focus-inner {
48
+ border: 0 !important;
49
+ }
50
+ .zw-button[data-v-610825a2]:hover,
51
+ .zw-button[data-v-610825a2]:focus {
52
+ text-decoration: none;
53
+ outline: none;
54
+ }
55
+ .zw-button[data-v-610825a2]:disabled {
56
+ user-select: none;
57
+ box-shadow: none;
58
+ cursor: not-allowed;
59
+ opacity: 0.35;
60
+ }
61
+ .zw-button--toolbar[data-v-610825a2] {
62
+ border-radius: 1px;
63
+ min-height: 28px;
64
+ font-weight: var(--zw-font-weight-semibold);
65
+ font-size: var(--zw-font-size-xs);
66
+ line-height: var(--zw-line-height-xxs);
67
+ color: rgb(var(--zw-color-n70));
68
+ transition-property: background-color, color, opacity;
69
+ will-change: background-color, color, opacity;
70
+ }
71
+ .zw-button--primary[data-v-610825a2] {
72
+ background-color: rgb(var(--zw-color-green));
73
+ color: rgb(var(--zw-color-white));
74
+ padding: var(--zw-offset-xxs) var(--zw-offset-sm);
75
+ line-height: var(--zw-line-height-md);
76
+ }
77
+ .zw-button--primary[data-v-610825a2],
78
+ .zw-button--secondary[data-v-610825a2] {
79
+ color: rgb(var(--zw-color-white));
80
+ padding: var(--zw-offset-xxs) var(--zw-offset-sm);
81
+ font-weight: 600;
82
+ font-size: var(--zw-font-size-xs);
83
+ }
84
+ .zw-button--primary[data-v-610825a2]:not(:disabled):hover,
85
+ .zw-button--secondary[data-v-610825a2]:not(:disabled):hover {
86
+ opacity: 0.9;
87
+ }
88
+ .zw-button--toolbar[data-v-610825a2]:not(.zw-button--icon) {
89
+ padding: var(--zw-offset-xxs) var(--zw-offset-xs);
90
+ }
91
+ .zw-button--toolbar[data-v-610825a2]:not(:disabled):hover,
92
+ .zw-button--toolbar[data-v-610825a2]:not(:disabled):focus,
93
+ .zw-button--toolbar.zw-button--active[data-v-610825a2]:not(:disabled) {
94
+ color: rgb(var(--zw-color-white));
95
+ background-color: rgb(var(--zw-color-n5));
96
+ }
97
+
98
+
99
+ .zw-button-toggle[data-v-de5fa53a] {
100
+ display: flex;
101
+ column-gap: var(--zw-offset-xxs);
102
+ }
103
+
104
+
105
+ .zw-icon[data-v-d4624794] {
106
+ display: flex;
107
+ }
108
+ .zw-icon--auto-color[data-v-d4624794] {
109
+ --zw-icon-foreground: currentColor;
110
+ }
111
+
112
+ [data-simplebar] {
113
+ position: relative;
114
+ flex-direction: column;
115
+ flex-wrap: wrap;
116
+ justify-content: flex-start;
117
+ align-content: flex-start;
118
+ align-items: flex-start;
119
+ }
120
+
121
+ .simplebar-wrapper {
122
+ overflow: hidden;
123
+ width: inherit;
124
+ height: inherit;
125
+ max-width: inherit;
126
+ max-height: inherit;
127
+ }
128
+
129
+ .simplebar-mask {
130
+ direction: inherit;
131
+ position: absolute;
132
+ overflow: hidden;
133
+ padding: 0;
134
+ margin: 0;
135
+ left: 0;
136
+ top: 0;
137
+ bottom: 0;
138
+ right: 0;
139
+ width: auto !important;
140
+ height: auto !important;
141
+ z-index: 0;
142
+ }
143
+
144
+ .simplebar-offset {
145
+ direction: inherit !important;
146
+ box-sizing: inherit !important;
147
+ resize: none !important;
148
+ position: absolute;
149
+ top: 0;
150
+ left: 0;
151
+ bottom: 0;
152
+ right: 0;
153
+ padding: 0;
154
+ margin: 0;
155
+ -webkit-overflow-scrolling: touch;
156
+ }
157
+
158
+ .simplebar-content-wrapper {
159
+ direction: inherit;
160
+ box-sizing: border-box !important;
161
+ position: relative;
162
+ display: block;
163
+ height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
164
+ width: auto;
165
+ max-width: 100%; /* Not required for horizontal scroll to trigger */
166
+ max-height: 100%; /* Needed for vertical scroll to trigger */
167
+ scrollbar-width: none;
168
+ -ms-overflow-style: none;
169
+ }
170
+
171
+ .simplebar-content-wrapper::-webkit-scrollbar,
172
+ .simplebar-hide-scrollbar::-webkit-scrollbar {
173
+ width: 0;
174
+ height: 0;
175
+ }
176
+
177
+ .simplebar-content:before,
178
+ .simplebar-content:after {
179
+ content: ' ';
180
+ display: table;
181
+ }
182
+
183
+ .simplebar-placeholder {
184
+ max-height: 100%;
185
+ max-width: 100%;
186
+ width: 100%;
187
+ pointer-events: none;
188
+ }
189
+
190
+ .simplebar-height-auto-observer-wrapper {
191
+ box-sizing: inherit !important;
192
+ height: 100%;
193
+ width: 100%;
194
+ max-width: 1px;
195
+ position: relative;
196
+ float: left;
197
+ max-height: 1px;
198
+ overflow: hidden;
199
+ z-index: -1;
200
+ padding: 0;
201
+ margin: 0;
202
+ pointer-events: none;
203
+ flex-grow: inherit;
204
+ flex-shrink: 0;
205
+ flex-basis: 0;
206
+ }
207
+
208
+ .simplebar-height-auto-observer {
209
+ box-sizing: inherit;
210
+ display: block;
211
+ opacity: 0;
212
+ position: absolute;
213
+ top: 0;
214
+ left: 0;
215
+ height: 1000%;
216
+ width: 1000%;
217
+ min-height: 1px;
218
+ min-width: 1px;
219
+ overflow: hidden;
220
+ pointer-events: none;
221
+ z-index: -1;
222
+ }
223
+
224
+ .simplebar-track {
225
+ z-index: 1;
226
+ position: absolute;
227
+ right: 0;
228
+ bottom: 0;
229
+ pointer-events: none;
230
+ overflow: hidden;
231
+ }
232
+
233
+ [data-simplebar].simplebar-dragging .simplebar-content {
234
+ pointer-events: none;
235
+ user-select: none;
236
+ -webkit-user-select: none;
237
+ }
238
+
239
+ [data-simplebar].simplebar-dragging .simplebar-track {
240
+ pointer-events: all;
241
+ }
242
+
243
+ .simplebar-scrollbar {
244
+ position: absolute;
245
+ left: 0;
246
+ right: 0;
247
+ min-height: 10px;
248
+ }
249
+
250
+ .simplebar-scrollbar:before {
251
+ position: absolute;
252
+ content: '';
253
+ background: black;
254
+ border-radius: 7px;
255
+ left: 2px;
256
+ right: 2px;
257
+ opacity: 0;
258
+ transition: opacity 0.2s linear;
259
+ }
260
+
261
+ .simplebar-scrollbar.simplebar-visible:before {
262
+ /* When hovered, remove all transitions from drag handle */
263
+ opacity: 0.5;
264
+ transition: opacity 0s linear;
265
+ }
266
+
267
+ .simplebar-track.simplebar-vertical {
268
+ top: 0;
269
+ width: 11px;
270
+ }
271
+
272
+ .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
273
+ top: 2px;
274
+ bottom: 2px;
275
+ }
276
+
277
+ .simplebar-track.simplebar-horizontal {
278
+ left: 0;
279
+ height: 11px;
280
+ }
281
+
282
+ .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
283
+ height: 100%;
284
+ left: 2px;
285
+ right: 2px;
286
+ }
287
+
288
+ .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
289
+ right: auto;
290
+ left: 0;
291
+ top: 2px;
292
+ height: 7px;
293
+ min-height: 0;
294
+ min-width: 10px;
295
+ width: auto;
296
+ }
297
+
298
+ /* Rtl support */
299
+ [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
300
+ right: auto;
301
+ left: 0;
302
+ }
303
+
304
+ .hs-dummy-scrollbar-size {
305
+ direction: rtl;
306
+ position: fixed;
307
+ opacity: 0;
308
+ visibility: hidden;
309
+ height: 500px;
310
+ width: 500px;
311
+ overflow-y: hidden;
312
+ overflow-x: scroll;
313
+ }
314
+
315
+ .simplebar-hide-scrollbar {
316
+ position: fixed;
317
+ left: 0;
318
+ visibility: hidden;
319
+ overflow-y: scroll;
320
+ scrollbar-width: none;
321
+ -ms-overflow-style: none;
322
+ }
323
+
324
+
325
+ .zw-scroll-view[data-v-56dc828f] .simplebar-placeholder {
326
+ display: none;
327
+ }
328
+ .zw-scroll-view[data-v-56dc828f] .simplebar-track {
329
+ width: 4px;
330
+ background-color: rgb(var(--zw-color-n20));
331
+ pointer-events: initial;
332
+ }
333
+ .zw-scroll-view[data-v-56dc828f] .simplebar-scrollbar {
334
+ width: 4px;
335
+ }
336
+ .zw-scroll-view[data-v-56dc828f] .simplebar-scrollbar::before {
337
+ top: 0;
338
+ left: 0;
339
+ background-color: rgb(var(--zw-color-n5));
340
+ cursor: pointer;
341
+ height: 100%;
342
+ width: 100%;
343
+ opacity: 1;
344
+ border-radius: 0;
345
+ }
346
+
347
+
348
+ .zw-field-label[data-v-2be4d197] {
349
+ font-weight: var(--zw-font-weight-thin);
350
+ font-size: var(--zw-font-size-xxs);
351
+ line-height: var(--zw-line-height-xxs);
352
+ color: rgb(var(--zw-color-n70));
353
+ display: block;
354
+ }
355
+
356
+
357
+ .zw-range[data-v-4cc06850] {
358
+ width: 100%;
359
+ height: 32px;
360
+ background: none;
361
+ cursor: pointer;
362
+ flex-grow: 1;
363
+ -webkit-appearance: none;
364
+
365
+ --zw-range-track-background-color: transparent;
366
+ --zw-range-track-background-image: linear-gradient(to right, #B3B3B3 var(--zw-range-progress), #3B3B3B var(--zw-range-progress));
367
+ --zw-range-thumb-background: rgb(var(--zw-color-white));
368
+ --zw-range-thumb-box-shadow: -1px -1px 3px rgba(59, 59, 59, 0.35), 1px 1px 3px rgba(59, 59, 59, 0.35);
369
+ }
370
+ .zw-range[data-v-4cc06850]::-webkit-slider-runnable-track {
371
+ width: 100%;
372
+ height: 4px;
373
+ border: 0;
374
+ border-radius: 0;
375
+ background-size: 100%;
376
+ background-color: var(--zw-range-track-background-color);
377
+ background-image: var(--zw-range-track-background-image);
378
+ }
379
+ .zw-range[data-v-4cc06850]::-moz-range-track {
380
+ width: 100%;
381
+ height: 4px;
382
+ border: 0;
383
+ border-radius: 0;
384
+ background-size: 100%;
385
+ background-color: var(--zw-range-track-background-color);
386
+ background-image: var(--zw-range-track-background-image);
387
+ }
388
+ .zw-range[data-v-4cc06850]::-ms-track {
389
+ width: 100%;
390
+ height: 4px;
391
+ border: 0;
392
+ border-radius: 0;
393
+ background-size: 100%;
394
+ background-color: var(--zw-range-track-background-color);
395
+ background-image: var(--zw-range-track-background-image);
396
+ }
397
+ .zw-range[data-v-4cc06850]::-webkit-slider-thumb {
398
+ height: 13px;
399
+ width: 13px;
400
+ border-radius: 100%;
401
+ margin-top: -5px;
402
+ background: var(--zw-range-thumb-background);
403
+ box-shadow: var(--zw-range-thumb-box-shadow);
404
+ -webkit-appearance: none;
405
+ transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
406
+ }
407
+ .zw-range[data-v-4cc06850]::-moz-range-thumb {
408
+ height: 13px;
409
+ width: 13px;
410
+ border-radius: 100%;
411
+ margin-top: -5px;
412
+ background: var(--zw-range-thumb-background);
413
+ box-shadow: var(--zw-range-thumb-box-shadow);
414
+ -webkit-appearance: none;
415
+ transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
416
+ }
417
+ .zw-range[data-v-4cc06850]::-ms-thumb {
418
+ height: 13px;
419
+ width: 13px;
420
+ border-radius: 100%;
421
+ margin-top: -5px;
422
+ background: var(--zw-range-thumb-background);
423
+ box-shadow: var(--zw-range-thumb-box-shadow);
424
+ -webkit-appearance: none;
425
+ transition: box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
426
+ }
427
+
428
+ /* Browser hacks */
429
+ .zw-range[data-v-4cc06850]::-moz-focus-outer,
430
+ .zw-range[data-v-4cc06850]::-moz-range-thumb {
431
+ border: 0;
432
+ }
433
+
434
+ /* In IE don't know how it count margin for thumb */
435
+ /* but it works */
436
+ .zw-range[data-v-4cc06850]::-ms-thumb {
437
+ margin-top: -2px;
438
+ }
439
+
440
+ /* END browser hacks */
441
+ .zw-range[data-v-4cc06850]:focus {
442
+ outline: none;
443
+ }
444
+ .zw-range[data-v-4cc06850]:disabled {
445
+ cursor: not-allowed;
446
+ opacity: 0.6;
447
+ --zw-range-track-background-color: #3B3B3B;
448
+ --zw-range-track-background-image: linear-gradient(to right, #B3B3B3 var(--zw-range-progress), #3B3B3B var(--zw-range-progress));
449
+ }
450
+ .zw-range[data-v-4cc06850]:disabled {
451
+ --zw-range-thumb-background: #B3B3B3;
452
+ --zw-range-thumb-box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
453
+ }
454
+ .zw-range[data-v-4cc06850]:not(:disabled):hover {
455
+ --zw-range-thumb-box-shadow: 0 0 0 8px rgba(240, 240, 240, 0.15);
456
+ }
457
+ .zw-range[data-v-4cc06850]:not(:disabled):active {
458
+ --zw-range-thumb-box-shadow: 0 0 0 12px rgba(240, 240, 240, 0.15);
459
+ }
460
+
461
+
462
+ .zw-number-field[data-v-289baff8] {
463
+ --border-color: rgb(var(--zw-color-n60));
464
+ --text-color: rgb(var(--zw-color-n85));
465
+ --buttons-color: rgb(var(--zw-color-n70));
466
+
467
+ padding: 2px 4px;
468
+ border: solid 1px var(--border-color);
469
+ align-items: stretch;
470
+ display: flex;
471
+ }
472
+ .zw-number-field[data-v-289baff8]:hover {
473
+ --border-color: rgb(var(--zw-color-n80));
474
+ --text-color: rgb(var(--zw-color-n85));
475
+ }
476
+ .zw-number-field[data-v-289baff8]:focus,
477
+ .zw-number-field[data-v-289baff8]:focus-within {
478
+ --border-color: rgb(var(--zw-color-white));
479
+ --text-color: rgb(var(--zw-color-white));
480
+ }
481
+ .zw-number-field__input[data-v-289baff8] {
482
+ color: var(--text-color);
483
+ background-color: rgb(var(--zw-color-n15));
484
+ border: 0;
485
+ display: block;
486
+ width: 100%;
487
+ outline: none !important;
488
+ line-height: var(--zw-line-height-md);
489
+ font-size: var(--zw-font-size-xs);
490
+ -moz-appearance: textfield;
491
+ }
492
+ .zw-number-field__buttons[data-v-289baff8] {
493
+ display: none;
494
+ flex-direction: column;
495
+ height: 100%;
496
+ }
497
+ .zw-number-field:hover .zw-number-field__buttons[data-v-289baff8],
498
+ .zw-number-field:focus .zw-number-field__buttons[data-v-289baff8],
499
+ .zw-number-field:focus-within .zw-number-field__buttons[data-v-289baff8] {
500
+ display: flex;
501
+ }
502
+ .zw-number-field__input[data-v-289baff8]::placeholder {
503
+ color: var(--text-color);
504
+ }
505
+ .zw-number-field__input[data-v-289baff8]::-webkit-outer-spin-button,
506
+ .zw-number-field__input[data-v-289baff8]::-webkit-inner-spin-button {
507
+ color: var(--text-color);
508
+ -webkit-appearance: none;
509
+ }
510
+ .zw-number-field__controls[data-v-289baff8] {
511
+ min-width: var(--zw-offset-sm);
512
+ }
513
+ .zw-number-field--disabled[data-v-289baff8] {
514
+ opacity: 0.5;
515
+ }
516
+ .zw-number-field--disabled[data-v-289baff8],
517
+ .zw-number-field--disabled .zw-number-field__input[data-v-289baff8] {
518
+ cursor: not-allowed;
519
+ }
520
+ .zw-number-field__increment-button[data-v-289baff8],
521
+ .zw-number-field__decrement-button[data-v-289baff8] {
522
+ width: 100%;
523
+ height: 50%;
524
+ display: flex;
525
+ align-items: center;
526
+ justify-content: center;
527
+ }
528
+ .zw-number-field__increment-button[data-v-289baff8]::after,
529
+ .zw-number-field__decrement-button[data-v-289baff8]::after {
530
+ content: "";
531
+ border-left: 3px solid transparent;
532
+ border-right: 3px solid transparent;
533
+ }
534
+ .zw-number-field__increment-button[data-v-289baff8]::after {
535
+ border-bottom: 3px solid var(--buttons-color);
536
+ }
537
+ .zw-number-field__decrement-button[data-v-289baff8]::after {
538
+ border-top: 3px solid var(--buttons-color);
539
+ }
540
+ .zw-number-field__increment-button[data-v-289baff8]:hover,
541
+ .zw-number-field__decrement-button[data-v-289baff8]:hover {
542
+ background-color: rgb(var(--zw-color-n20));
543
+ --buttons-color: rgb(var(--zw-color-white));
544
+ }
545
+ .zw-number-field__units[data-v-289baff8] {
546
+ color: rgb(var(--zw-color-n70));
547
+ font-size: var(--zw-font-size-xs);
548
+ line-height: var(--zw-line-height-md);
549
+ text-align: center;
550
+ display: inline-block;
551
+ width: 100%;
552
+ }
553
+ .zw-number-field:hover .zw-number-field__units[data-v-289baff8],
554
+ .zw-number-field:focus .zw-number-field__units[data-v-289baff8] {
555
+ display: none;
556
+ }
557
+
558
+
559
+ .zw-modal[data-v-0a3c1c80] {
560
+ border-radius: 2px;
561
+ box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
562
+ background-color: rgb(var(--zw-color-n15));
563
+ max-height: var(--zw-modal-max-height);
564
+ max-width: var(--zw-modal-max-width);
565
+ z-index: 1000;
566
+ will-change: transform;
567
+ }
568
+ .zw-modal--enter-active[data-v-0a3c1c80] {
569
+ transition: opacity 0.15s ease-out;
570
+ }
571
+ .zw-modal--enter[data-v-0a3c1c80],
572
+ .zw-modal--leave-to[data-v-0a3c1c80] {
573
+ opacity: 0;
574
+ }
575
+ .zw-modal--leave-active[data-v-0a3c1c80] {
576
+ transition: opacity 0.1s ease-in;
577
+ }
578
+
579
+ /* Scrollbar overrides in modal */
580
+ .zw-modal[data-v-0a3c1c80] .simplebar-offset,
581
+ .zw-modal[data-v-0a3c1c80] .simplebar-mask {
582
+ position: initial;
583
+ }
584
+ .zw-modal[data-v-0a3c1c80] .simplebar-content {
585
+ max-height: var(--zw-modal-max-height);
586
+ padding: 0 !important;
587
+ }
588
+ .zw-modal[data-v-0a3c1c80] .simplebar-content-wrapper {
589
+ overscroll-behavior: contain;
590
+ }
591
+
592
+
593
+ .zw-field[data-v-49291160] {
594
+ display: flex;
595
+ flex-direction: column;
596
+ }
597
+ .zw-field__input[data-v-49291160] {
598
+ --border-color: rgb(var(--zw-color-n60));
599
+ --text-color: rgb(var(--zw-color-n85));
600
+
601
+ border: 1px solid var(--border-color);
602
+ background-color: transparent;
603
+ color: var(--text-color);
604
+ font-size: var(--zw-font-size-xxs);
605
+ outline: none;
606
+ padding: 6px;
607
+ line-height: var(--zw-line-height-xxs);
608
+ }
609
+ .zw-field__input[data-v-49291160]:hover {
610
+ --border-color: rgb(var(--zw-color-n80));
611
+ --text-color: rgb(var(--zw-color-n85));
612
+ }
613
+ .zw-field__input[data-v-49291160]:focus,
614
+ .zw-field__input[data-v-49291160]:focus-within {
615
+ --border-color: rgb(var(--zw-color-white));
616
+ --text-color: rgb(var(--zw-color-white));
617
+ }
618
+ .zw-field__label[data-v-49291160] {
619
+ display: inline-block;
620
+ font-size: var(--zw-font-size-xxs);
621
+ padding-bottom: var(--zw-offset-xxs);
622
+ line-height: var(--zw-line-height-xxs);
623
+ }
624
+ .zw-field__label--error[data-v-49291160] {
625
+ font-size: var(--zw-font-size-xxs);
626
+ margin: var(--zw-offset-xxs) 0 0;
627
+ color: rgb(var(--zw-color-red));
628
+ }
629
+
630
+
631
+ .zw-checkbox[data-v-f7eea800] {
632
+ display: inline-flex;
633
+ align-items: center;
634
+ position: relative;
635
+ cursor: pointer;
636
+ padding: var(--zw-offset-xxs) var(--zw-offset-xxs) var(--zw-offset-xxs) 0;
637
+ }
638
+ .zw-checkbox__field + .zw-checkbox__indicator[data-v-f7eea800] {
639
+ color: var(--zw-color-n200);
640
+ box-shadow: inset 0 0 0 2px currentColor;
641
+ }
642
+ .zw-checkbox:hover .zw-checkbox__indicator[data-v-f7eea800] {
643
+ box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
644
+ }
645
+ .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-f7eea800] {
646
+ color: rgb(var(--zw-color-green))
647
+ }
648
+ .zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator[data-v-f7eea800] {
649
+ background-color: rgb(var(--zw-color-green));
650
+ }
651
+ .zw-checkbox .zw-checkbox__indicator[data-v-f7eea800]::after {
652
+ content: "";
653
+ display: block;
654
+ height: 16px;
655
+ transform: scale(0.6);
656
+ transition: transform 0.2s ease-out;
657
+ width: 16px;
658
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyNiIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0uMyAxNGMtLjItLjItLjMtLjUtLjMtLjdzLjEtLjUuMy0uN2wxLjQtMS40Yy40LS40IDEtLjQgMS40IDBsLjEuMSA1LjUgNS45Yy4yLjIuNS4yLjcgMEwyMi44IDMuM2guMWMuNC0uNCAxLS40IDEuNCAwbDEuNCAxLjRjLjQuNC40IDEgMCAxLjRsLTE2IDE2LjZjLS4yLjItLjQuMy0uNy4zLS4zIDAtLjUtLjEtLjctLjNMLjUgMTQuMy4zIDE0eiIvPgo8L3N2Zz4K);
659
+ background-repeat: no-repeat;
660
+ background-size: 16px;
661
+ background-position: center center;
662
+ }
663
+ .zw-checkbox__field:not(:checked) + .zw-checkbox__indicator[data-v-f7eea800]::after {
664
+ transform: scale(0);
665
+ }
666
+ .zw-checkbox__field[data-v-f7eea800] {
667
+ position: absolute;
668
+ opacity: 0;
669
+ height: 0;
670
+ width: 0;
671
+ }
672
+ .zw-checkbox__label[data-v-f7eea800] {
673
+ font-size: var(--zw-font-size-xs);
674
+ }
675
+
676
+
677
+ .zw-dropdown__activator[data-v-4865ea7a] {
678
+ width: 100%;
679
+ }
680
+ .zw-dropdown__activator-title[data-v-4865ea7a] {
681
+ margin-right: var(--zw-offset-xs);
682
+ }
683
+ .zw-dropdown__activator-arrow[data-v-4865ea7a] {
684
+ margin-left: auto;
685
+ }
686
+ .zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-4865ea7a] {
687
+ transform: rotateX(180deg);
688
+ }
689
+ .zw-dropdown__activator--gray[data-v-4865ea7a] {
690
+ background-color: rgb(var(--zw-color-n20));
691
+ font-size: var(--zw-font-size-xxs);
692
+ color: rgb(var(--zw-color-white));
693
+ }
694
+
695
+
696
+ .zw-dropdown__option[data-v-10a0f0b7] {
697
+ width: 100%;
698
+ display: block;
699
+ color: rgb(var(--zw-color-white));
700
+ padding-top: var(--zw-offset-xxs);
701
+ padding-right: var(--zw-offset-sm);
702
+ padding-left: calc(var(--zw-offset-sm) + var(--zw-option-offset, 0px));
703
+ padding-bottom: var(--zw-offset-xxs);
704
+ text-align: left;
705
+ transition: 0.1s background-color ease-out;
706
+ will-change: background-color;
707
+ }
708
+ .zw-dropdown__option[data-v-10a0f0b7]:hover,
709
+ .zw-dropdown__option[data-v-10a0f0b7]:focus,
710
+ .zw-dropdown__option--active[data-v-10a0f0b7] {
711
+ background-color: rgb(var(--zw-color-n30));
712
+ }
713
+
714
+
715
+ .zw-dropdown__group[data-v-207aa7a6] {
716
+ padding-top: var(--zw-offset-xs);
717
+ padding-bottom: var(--zw-offset-xs);
718
+ --zw-option-offset: var(--zw-offset-xs);
719
+ }
720
+ .zw-dropdown__group-title[data-v-207aa7a6] {
721
+ color: var(--zw-color-n70);
722
+ font-weight: var(--zw-font-weight-semibold);
723
+ padding-left: var(--zw-offset-sm);
724
+ padding-right: var(--zw-offset-sm);
725
+ margin-top: 0;
726
+ margin-bottom: var(--zw-offset-xs);
727
+ }
728
+
729
+
730
+ .zw-dropdown__divider[data-v-72e4c372] {
731
+ padding: 0 var(--zw-offset-sm);
732
+ }
733
+ .zw-dropdown__divider[data-v-72e4c372]::before {
734
+ content: "";
735
+ display: block;
736
+ border-bottom: 1px solid rgb(var(--zw-color-n30));
737
+ }
738
+
739
+
740
+ .zw-dropdown__menu {
741
+ padding-top: var(--zw-offset-xs);
742
+ padding-bottom: var(--zw-offset-xs);
743
+ }
744
+
745
+
746
+ .zw-dropdown[data-v-35f81e22] {
747
+ position: relative;
748
+ font-size: var(--zw-font-size-xs);
749
+ line-height: var(--zw-line-height-xxs);
750
+ }
751
+
752
+
753
+ .zw-style-preset-control[data-v-0f6b31b1] {
754
+ display: flex;
755
+ align-items: center;
756
+ }
757
+ .zw-style-preset-control__dropdown[data-v-0f6b31b1] {
758
+ width: 96px;
759
+ }
760
+ .zw-style-preset-control__reset[data-v-0f6b31b1] {
761
+ color: rgb(var(--zw-color-n70));
762
+ }
763
+ .zw-style-preset-control__reset[data-v-0f6b31b1]:not(:disabled):hover,
764
+ .zw-style-preset-control__reset[data-v-0f6b31b1]:not(:disabled):focus,
765
+ .zw-style-preset-control__reset[data-v-0f6b31b1]:not(:disabled):focus-within {
766
+ color: rgb(var(--zw-color-white));
767
+ }
768
+
769
+
770
+ .zw-font-family-control[data-v-2e95c716] {
771
+ width: 96px;
772
+ }
773
+ .zw-font-family-control__option[data-v-2e95c716] {
774
+ font-weight: 400;
775
+ font-family: var(--zw-font-family-option);
776
+ width: 150px;
777
+ }
778
+
779
+
780
+ .zw-font-size-control[data-v-a2e458ce] {
781
+ width: 64px;
782
+ }
783
+
784
+
785
+ .zw-alignment-control__modal[data-v-9713d430] {
786
+ padding: var(--zw-offset-xxs);
787
+ }
788
+ .zw-alignment-control__toggle[data-v-9713d430] {
789
+ flex-direction: column;
790
+ }
791
+
792
+
793
+ .zw-line-height-control__modal[data-v-b87c3724] {
794
+ padding: var(--zw-offset-sm);
795
+ }
796
+ .zw-line-height-control__row[data-v-b87c3724] {
797
+ display: flex;
798
+ align-items: center;
799
+ }
800
+ .zw-line-height-control__range[data-v-b87c3724] {
801
+ width: 156px;
802
+ }
803
+ .zw-line-height-control__field[data-v-b87c3724] {
804
+ width: 52px;
805
+ margin-left: var(--zw-offset-sm);
806
+ }
807
+
808
+
809
+ .zw-list-control__option[data-v-305d852b] {
810
+ padding: 0 var(--zw-offset-xs);
811
+ display: flex;
812
+ }
813
+
814
+
815
+ .zw-link-modal-header[data-v-1b67b282] {
816
+ display: flex;
817
+ align-items: center;
818
+ justify-content: space-between;
819
+ padding: var(--zw-offset-sm);
820
+ border-bottom: 2px solid rgb(var(--zw-color-n5));
821
+ }
822
+ .zw-link-modal-header__title[data-v-1b67b282] {
823
+ text-transform: uppercase;
824
+ font-weight: var(--zw-font-weight-semibold);
825
+ font-size: var(--zw-font-size-xxs);
826
+ color: rgb(var(--zw-color-white));
827
+ }
828
+ .zw-link-modal-header__unlink-icon[data-v-1b67b282] {
829
+ margin-right: var(--zw-offset-xxs);
830
+ }
831
+ .zw-link-modal-header__unlink-button[data-v-1b67b282] {
832
+ color: rgb(var(--zw-color-n80));
833
+ font-size: var(--zw-font-size-xxs);
834
+ transition: 0.1s opacity ease-out;
835
+ will-change: opacity;
836
+ }
837
+ .zw-link-modal-header__unlink-button[data-v-1b67b282]:disabled {
838
+ opacity: 0.35;
839
+ }
840
+ .zw-link-modal-header__unlink-button[data-v-1b67b282]:hover {
841
+ color: rgb(var(--zw-color-white));
842
+ }
843
+
844
+
845
+ .zw-link-modal__apply[data-v-77b6c3ac] {
846
+ display: flex;
847
+ justify-content: flex-end;
848
+ }
849
+
850
+
851
+ .zw-link-modal[data-v-30870bdc] {
852
+ width: 266px;
853
+ }
854
+ .zw-link-modal__body[data-v-30870bdc] {
855
+ padding: var(--zw-offset-sm);
856
+ }
857
+ [data-v-30870bdc] .zw-link-modal-dropdown__option {
858
+ width: 234px;
859
+ }
860
+
861
+
862
+ .zw-toolbar[data-v-05accea6] {
863
+ border-radius: 2px;
864
+ background-color: rgb(var(--zw-color-n15));
865
+ color: rgb(var(--zw-color-n70));
866
+ z-index: 999999;
867
+ }
868
+ .zw-toolbar[data-v-05accea6]::before,
869
+ .zw-toolbar[data-v-05accea6]::after {
870
+ content: "";
871
+ display: block;
872
+ width: 100%;
873
+ height: calc(var(--zw-toolbar-offset-y) + 4px);
874
+ position: absolute;
875
+ --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
876
+ }
877
+ .zw-toolbar[data-v-05accea6]::before {
878
+ top: var(--zw-toolbar-safe-zone);
879
+ }
880
+ .zw-toolbar[data-v-05accea6]::after {
881
+ bottom: var(--zw-toolbar-safe-zone);
882
+ }
883
+ .zw-toolbar--enter-active[data-v-05accea6],
884
+ .zw-toolbar--leave-active[data-v-05accea6] {
885
+ transition: opacity 150ms ease-out;
886
+ }
887
+ .zw-toolbar--leave-active[data-v-05accea6] {
888
+ transition: opacity 0s ease-in;
889
+ }
890
+ .zw-toolbar--enter[data-v-05accea6],
891
+ .zw-toolbar--leave-to[data-v-05accea6] {
892
+ opacity: 0;
893
+ }
894
+
895
+ .zw-wysiwyg {
896
+ --zw-color-n5: 13, 13, 13; /* #0D0D0D; */
897
+ --zw-color-n15: 38, 38, 38; /* #262626; */
898
+ --zw-color-n20: 59, 59, 59; /* #3B3B3B; */
899
+ --zw-color-n30: 77, 77, 77; /* #4D4D4D; */
900
+ --zw-color-n60: 153, 153, 153; /* #999999 */
901
+ --zw-color-n70: 179, 179, 179; /* #B3B3B3 */
902
+ --zw-color-n80: 196, 196, 196; /* #C4C4C4 */
903
+ --zw-color-n85: 217, 217, 217; /* #D9D9D9 */
904
+ --zw-color-n90: 230, 230, 230; /* #E6E6E6 */
905
+ --zw-color-n200: 194, 200, 209; /* #C2C8D1 */
906
+ --zw-color-black: 0, 0, 0;
907
+ --zw-color-white: 255, 255, 255;
908
+ --zw-color-green: 59, 180, 74; /* #3BB44A */
909
+ --zw-color-red: 234, 58, 58; /* #EA3A3A */
910
+
911
+ --zw-offset-xxs: 4px;
912
+ --zw-offset-xs: 8px;
913
+ --zw-offset-xsm: 12px;
914
+ --zw-offset-sm: 16px;
915
+ --zw-offset-md: 24px;
916
+
917
+ --zw-font-weight-thin: 400;
918
+ --zw-font-weight-semibold: 500;
919
+
920
+ --zw-font-size-xxs: 12px;
921
+ --zw-font-size-xs: 14px;
922
+
923
+ --zw-line-height-xxs: 1.21;
924
+ --zw-line-height-md: 1.72;
925
+ }
926
+
927
+ /*
928
+ $builder-N5: #0D0D0D;
929
+ $builder-N10: #1A1A1A;
930
+ $builder-N15: #262626;
931
+ $builder-N20: #3B3B3B;
932
+ $builder-N30: #4D4D4D;
933
+ $builder-N40: #666;
934
+ $builder-N50: #808080;
935
+ $builder-N60: #999;
936
+ $builder-N70: #B3B3B3;
937
+ $builder-N80: #C4C4C4;
938
+ $builder-N85: #D9D9D9;
939
+ $builder-N90: #E6E6E6;
940
+ $builder-N94: #F0F0F0;
941
+ $builder-N96: #F5F5F5;
942
+ $builder-N98: #FAFAFA;
943
+ $builder-N200: #C2C8D1;
944
+ $builder-R50: #EA3A3A;
945
+
946
+ $font-size-xxs: 12px;
947
+ $font-size-xs: 14px;
948
+ $font-size-sm: 16px;
949
+ $font-size-md: 18px;
950
+ $font-size-lmd: 20px;
951
+ $font-size-lg: 24px;
952
+
953
+ $font-height--xxs: 1.2;
954
+ $font-height--xs: 1.33;
955
+ $font-height--sm: 1.43;
956
+ $font-height--md: 1.72;
957
+ */
958
+
959
+ .zw-wysiwyg [contenteditable] {
960
+ outline: none;
961
+ }
962
+
963
+ .zw-wysiwyg__placeholder:first-child:last-child::before {
964
+ content: attr(data-placeholder);
965
+ color: rgb(var(--zw-color-n70));
966
+ float: left;
967
+ height: 0;
968
+ pointer-events: none;
969
+ }
970
+
971
+ .zw-style {
972
+ font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
973
+ font-family: var(--zw-font-family, var(--zw-preset-font-family));
974
+ color: var(--zw-font-color, var(--zw-preset-color));
975
+ font-style: var(--zw-font-style, var(--zw-preset-font-style));
976
+ text-decoration: var(--zw-text-decoration, var(--zw-preset-text-decoration));
977
+ background-color: var(--zw-background-color, var(--zw-preset-background-color));
978
+ }
979
+
980
+ @media (min-width: 1200px) {
981
+
982
+ .zw-style {
983
+ font-size: var(--zw-font-size-desktop, var(--zw-preset-desktop-font-size));
984
+ text-align: var(--zw-text-align-desktop, var(--zw-preset-desktop-text-align));
985
+ line-height: var(--zw-line-height-desktop, var(--zw-preset-desktop-line-height));
986
+ }
987
+ }
988
+
989
+ @media (min-width: 769px) and (max-width: 1199.98px) {
990
+
991
+ .zw-style {
992
+ font-size: var(--zw-font-size-tablet, var(--zw-preset-tablet-font-size));
993
+ text-align: var(--zw-text-align-tablet, var(--zw-preset-tablet-text-align));
994
+ line-height: var(--zw-line-height-tablet, var(--zw-preset-tablet-line-height));
995
+ }
996
+ }
997
+
998
+ @media (max-width: 768.98px) {
999
+
1000
+ .zw-style {
1001
+ font-size: var(--zw-font-size-mobile, var(--zw-preset-mobile-font-size));
1002
+ text-align: var(--zw-text-align-mobile, var(--zw-preset-mobile-text-align));
1003
+ line-height: var(--zw-line-height-mobile, var(--zw-preset-mobile-line-height));
1004
+ }
1005
+ }
1006
+
1007
+ /* ProseMirror styles */
1008
+
1009
+ .ProseMirror {
1010
+ position: relative;
1011
+ }
1012
+
1013
+ .ProseMirror {
1014
+ word-wrap: break-word;
1015
+ white-space: pre-wrap;
1016
+ white-space: break-spaces;
1017
+ -webkit-font-variant-ligatures: none;
1018
+ font-variant-ligatures: none;
1019
+ font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
1020
+ }
1021
+
1022
+ .ProseMirror [contenteditable="false"] {
1023
+ white-space: normal;
1024
+ }
1025
+
1026
+ .ProseMirror [contenteditable="false"] [contenteditable="true"] {
1027
+ white-space: pre-wrap;
1028
+ }
1029
+
1030
+ .ProseMirror pre {
1031
+ white-space: pre-wrap;
1032
+ }
1033
+
1034
+ img.ProseMirror-separator {
1035
+ display: inline !important;
1036
+ border: none !important;
1037
+ margin: 0 !important;
1038
+ width: 1px !important;
1039
+ height: 1px !important;
1040
+ }
1041
+
1042
+ .ProseMirror-gapcursor {
1043
+ display: none;
1044
+ pointer-events: none;
1045
+ position: absolute;
1046
+ margin: 0;
1047
+ }
1048
+
1049
+ .ProseMirror-gapcursor::after {
1050
+ content: "";
1051
+ display: block;
1052
+ position: absolute;
1053
+ top: -2px;
1054
+ width: 20px;
1055
+ border-top: 1px solid #000;
1056
+ animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
1057
+ }
1058
+
1059
+ @keyframes ProseMirror-cursor-blink {
1060
+
1061
+ to {
1062
+ visibility: hidden;
1063
+ }
1064
+ }
1065
+
1066
+ .ProseMirror-hideselection *::selection {
1067
+ background: transparent;
1068
+ }
1069
+
1070
+ .ProseMirror-hideselection *::-moz-selection {
1071
+ background: transparent;
1072
+ }
1073
+
1074
+ .ProseMirror-hideselection * {
1075
+ caret-color: transparent;
1076
+ }
1077
+
1078
+ .ProseMirror-focused .ProseMirror-gapcursor {
1079
+ display: block;
1080
+ }
1081
+
1082
+ .tippy-box[data-animation=fade][data-state=hidden] {
1083
+ opacity: 0
1084
+ }
1085
+
1086
+ .zw-text--truncate {
1087
+ white-space: nowrap;
1088
+ overflow: hidden;
1089
+ text-overflow: ellipsis;
1090
+ max-width: 100%;
1091
+ }
1092
+
1093
+ .zw-position--relative {
1094
+ position: relative;
1095
+ }
1096
+
1097
+ .zw-margin-bottom--xxs {
1098
+ margin-bottom: var(--zw-offset-xxs);
1099
+ }
1100
+
1101
+ .zw-margin-bottom--xs {
1102
+ margin-bottom: var(--zw-offset-xs);
1103
+ }
1104
+
1105
+ .zw-margin-bottom--sm {
1106
+ margin-bottom: var(--zw-offset-sm);
1107
+ }
1108
+
1109
+ .zw-margin-bottom--md {
1110
+ margin-bottom: var(--zw-offset-md);
1111
+ }
1112
+
1113
+ .zw-margin-right--xs {
1114
+ margin-right: var(--zw-offset-xs);
1115
+ }
1116
+
1117
+
1118
+