@measured/puck 0.14.0-canary.cc7d391 → 0.14.0-canary.d944288
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.
- package/dist/{Config-ab049d49.d.ts → Config-Bgx_Bij_.d.ts} +23 -3
- package/dist/index.css +408 -334
- package/dist/index.d.ts +39 -7
- package/dist/index.js +1530 -682
- package/dist/rsc.d.ts +1 -1
- package/package.json +5 -3
package/dist/index.css
CHANGED
@@ -136,8 +136,8 @@
|
|
136
136
|
|
137
137
|
/* styles.css */
|
138
138
|
|
139
|
-
/*
|
140
|
-
.
|
139
|
+
/* components/Button/Button.module.css */
|
140
|
+
.Button_Button {
|
141
141
|
appearance: none;
|
142
142
|
background: none;
|
143
143
|
border: 1px solid transparent;
|
@@ -159,81 +159,83 @@
|
|
159
159
|
white-space: nowrap;
|
160
160
|
margin: 0;
|
161
161
|
}
|
162
|
-
.
|
163
|
-
.
|
162
|
+
.Button_Button:hover,
|
163
|
+
.Button_Button:active {
|
164
164
|
transition: none;
|
165
165
|
}
|
166
|
-
.
|
166
|
+
.Button_Button--medium {
|
167
167
|
min-height: 34px;
|
168
168
|
padding-bottom: 7px;
|
169
169
|
padding-left: 19px;
|
170
170
|
padding-right: 19px;
|
171
171
|
padding-top: 7px;
|
172
172
|
}
|
173
|
-
.
|
173
|
+
.Button_Button--large {
|
174
174
|
padding-bottom: 11px;
|
175
175
|
padding-left: 19px;
|
176
176
|
padding-right: 19px;
|
177
177
|
padding-top: 11px;
|
178
178
|
}
|
179
|
-
.
|
179
|
+
.Button_Button-icon {
|
180
180
|
margin-top: 2px;
|
181
181
|
}
|
182
|
-
.
|
182
|
+
.Button_Button--primary {
|
183
183
|
background: var(--puck-color-azure-04);
|
184
184
|
}
|
185
|
-
.
|
185
|
+
.Button_Button:focus-visible {
|
186
186
|
outline: 2px solid var(--puck-color-azure-05);
|
187
187
|
outline-offset: 2px;
|
188
188
|
}
|
189
189
|
@media (hover: hover) and (pointer: fine) {
|
190
|
-
.
|
190
|
+
.Button_Button--primary:hover {
|
191
191
|
background-color: var(--puck-color-azure-03);
|
192
192
|
}
|
193
193
|
}
|
194
|
-
.
|
194
|
+
.Button_Button--primary:active {
|
195
195
|
background-color: var(--puck-color-azure-02);
|
196
196
|
}
|
197
|
-
.
|
198
|
-
border: 1px solid
|
199
|
-
color:
|
197
|
+
.Button_Button--secondary {
|
198
|
+
border: 1px solid currentColor;
|
199
|
+
color: currentColor;
|
200
200
|
}
|
201
201
|
@media (hover: hover) and (pointer: fine) {
|
202
|
-
.
|
202
|
+
.Button_Button--secondary:hover {
|
203
203
|
background-color: var(--puck-color-azure-12);
|
204
|
+
color: var(--puck-color-black);
|
204
205
|
}
|
205
206
|
}
|
206
|
-
.
|
207
|
+
.Button_Button--secondary:active {
|
207
208
|
background-color: var(--puck-color-azure-11);
|
209
|
+
color: var(--puck-color-black);
|
208
210
|
}
|
209
|
-
.
|
211
|
+
.Button_Button--flush {
|
210
212
|
border-radius: 0;
|
211
213
|
}
|
212
|
-
.
|
213
|
-
.
|
214
|
+
.Button_Button--disabled,
|
215
|
+
.Button_Button--disabled:hover {
|
214
216
|
background-color: var(--puck-color-grey-07);
|
215
217
|
color: var(--puck-color-grey-03);
|
216
218
|
cursor: not-allowed;
|
217
219
|
}
|
218
|
-
.
|
220
|
+
.Button_Button--fullWidth {
|
219
221
|
justify-content: center;
|
220
222
|
width: 100%;
|
221
223
|
}
|
222
|
-
.
|
224
|
+
.Button_Button-spinner {
|
223
225
|
padding-left: 8px;
|
224
226
|
}
|
225
227
|
|
226
|
-
/*
|
227
|
-
.
|
228
|
+
/* components/Drawer/styles.module.css */
|
229
|
+
.styles_Drawer {
|
228
230
|
font-family: var(--puck-font-family);
|
229
231
|
}
|
230
|
-
.
|
232
|
+
.styles_DrawerItem-default .styles_DrawerItem-draggableWrapper {
|
231
233
|
padding-bottom: 12px;
|
232
234
|
}
|
233
|
-
.
|
235
|
+
.styles_DrawerItem:last-of-type .styles_DrawerItem-default .styles_DrawerItem-draggableWrapper {
|
234
236
|
padding-bottom: 0;
|
235
237
|
}
|
236
|
-
.
|
238
|
+
.styles_DrawerItem-draggable {
|
237
239
|
background: var(--puck-color-white);
|
238
240
|
padding: 12px;
|
239
241
|
display: flex;
|
@@ -245,77 +247,78 @@
|
|
245
247
|
cursor: grab;
|
246
248
|
transition: background-color 50ms ease-in, color 50ms ease-in;
|
247
249
|
}
|
248
|
-
.
|
250
|
+
.styles_DrawerItem:focus-visible {
|
249
251
|
outline: 0;
|
250
252
|
}
|
251
|
-
.
|
253
|
+
.styles_Drawer:not(.styles_Drawer--isDraggingFrom) .styles_DrawerItem:focus-visible .styles_DrawerItem-draggable {
|
252
254
|
border-radius: 4px;
|
253
255
|
outline: 2px solid var(--puck-color-azure-05);
|
254
256
|
outline-offset: 2px;
|
255
257
|
}
|
256
258
|
@media (hover: hover) and (pointer: fine) {
|
257
|
-
.
|
259
|
+
.styles_Drawer:not(.styles_Drawer--isDraggingFrom) .styles_DrawerItem-draggable:hover {
|
258
260
|
background-color: var(--puck-color-azure-12);
|
259
261
|
color: var(--puck-color-azure-04);
|
260
262
|
transition: none;
|
261
263
|
}
|
262
264
|
}
|
263
|
-
.
|
265
|
+
.styles_DrawerItem-name {
|
264
266
|
overflow-x: hidden;
|
265
267
|
text-overflow: ellipsis;
|
266
268
|
white-space: nowrap;
|
267
269
|
}
|
268
270
|
|
269
|
-
/*
|
270
|
-
.
|
271
|
+
/* components/DragIcon/styles.module.css */
|
272
|
+
.styles_DragIcon {
|
271
273
|
color: var(--puck-color-grey-05);
|
272
274
|
cursor: grab;
|
273
275
|
padding: 4px;
|
274
276
|
border-radius: 4px;
|
275
277
|
}
|
276
278
|
@media (hover: hover) and (pointer: fine) {
|
277
|
-
.
|
279
|
+
.styles_DragIcon:hover {
|
278
280
|
color: var(--puck-color-azure-05);
|
279
281
|
background-color: var(--puck-color-azure-12);
|
280
282
|
}
|
281
283
|
}
|
282
284
|
|
283
|
-
/*
|
284
|
-
.
|
285
|
-
outline-offset: 0px !important;
|
285
|
+
/* components/DraggableComponent/styles.module.css */
|
286
|
+
.styles_DraggableComponent {
|
286
287
|
pointer-events: auto;
|
288
|
+
--overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
|
287
289
|
}
|
288
|
-
.
|
289
|
-
outline: 2px solid var(--puck-color-azure-05);
|
290
|
-
}
|
291
|
-
._DraggableComponent--isDragging_1vpvt_10 {
|
290
|
+
.styles_DraggableComponent--isDragging {
|
292
291
|
background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
|
293
|
-
outline: 2px var(--puck-color-azure-09) solid !important;
|
294
292
|
overflow: hidden;
|
295
293
|
}
|
296
|
-
.
|
294
|
+
.styles_DraggableComponent-contents {
|
297
295
|
position: relative;
|
298
296
|
pointer-events: none;
|
299
297
|
z-index: 0;
|
300
298
|
}
|
301
|
-
.
|
302
|
-
.
|
299
|
+
.styles_DraggableComponent-contents::before,
|
300
|
+
.styles_DraggableComponent-contents::after {
|
303
301
|
content: " ";
|
304
302
|
display: table;
|
305
303
|
}
|
306
|
-
.
|
307
|
-
display: none;
|
308
|
-
background: color-mix(in srgb, var(--puck-color-azure-08) 30%, transparent);
|
304
|
+
.styles_DraggableComponent-overlay {
|
309
305
|
cursor: pointer;
|
310
306
|
height: 100%;
|
311
307
|
width: 100%;
|
312
308
|
top: 0;
|
309
|
+
outline-offset: -2px;
|
313
310
|
position: absolute;
|
314
|
-
z-index: 0;
|
315
311
|
pointer-events: none;
|
316
312
|
box-sizing: border-box;
|
313
|
+
z-index: 1;
|
314
|
+
}
|
315
|
+
.styles_DraggableComponent:focus-visible > .styles_DraggableComponent-overlay {
|
316
|
+
outline: 1px solid var(--puck-color-azure-05);
|
317
|
+
}
|
318
|
+
.styles_DraggableComponent--isDragging > .styles_DraggableComponent-overlay {
|
319
|
+
outline: 1px var(--puck-color-azure-09) solid !important;
|
317
320
|
}
|
318
|
-
.
|
321
|
+
.styles_DraggableComponent-loadingOverlay {
|
319
322
|
background: var(--puck-color-white);
|
320
323
|
color: var(--puck-color-grey-03);
|
321
324
|
border-radius: 4px;
|
@@ -330,40 +333,34 @@
|
|
330
333
|
opacity: 0.8;
|
331
334
|
z-index: 1;
|
332
335
|
}
|
333
|
-
.
|
334
|
-
|
336
|
+
.styles_DraggableComponent:hover:not(.styles_DraggableComponent--isLocked) > .styles_DraggableComponent-overlay {
|
337
|
+
background: var(--overlay-background);
|
335
338
|
pointer-events: none;
|
336
339
|
}
|
337
|
-
.
|
338
|
-
|
340
|
+
.styles_DraggableComponent--forceHover > .styles_DraggableComponent-overlay {
|
341
|
+
background: var(--overlay-background);
|
339
342
|
pointer-events: none;
|
340
343
|
}
|
341
|
-
.
|
344
|
+
.styles_DraggableComponent:not(.styles_DraggableComponent--isSelected):hover > .styles_DraggableComponent-overlay {
|
342
345
|
outline: 2px var(--puck-color-azure-09) solid !important;
|
343
346
|
}
|
344
|
-
.
|
345
|
-
display: block;
|
346
|
-
background: transparent;
|
347
|
+
.styles_DraggableComponent--indicativeHover > .styles_DraggableComponent-overlay {
|
347
348
|
pointer-events: none;
|
348
349
|
}
|
349
|
-
.
|
350
|
+
.styles_DraggableComponent:not(.styles_DraggableComponent--isSelected):has(.styles_DraggableComponent:hover > .styles_DraggableComponent-overlay) > .styles_DraggableComponent-overlay {
|
350
351
|
display: none;
|
351
352
|
}
|
352
|
-
.
|
353
|
+
.styles_DraggableComponent--isSelected > .styles_DraggableComponent-overlay {
|
353
354
|
outline: 2px var(--puck-color-azure-07) solid !important;
|
354
355
|
}
|
355
|
-
.
|
356
|
-
background: none;
|
356
|
+
.styles_DraggableComponent--isSelected > .styles_DraggableComponent-actionsOverlay {
|
357
357
|
display: block;
|
358
358
|
position: sticky;
|
359
|
-
|
360
|
-
z-index: 1;
|
359
|
+
z-index: 2;
|
361
360
|
}
|
362
|
-
.
|
361
|
+
.styles_DraggableComponent-actions {
|
363
362
|
position: absolute;
|
364
|
-
right: 6.5px;
|
365
363
|
width: auto;
|
366
|
-
top: -48px;
|
367
364
|
padding: 4px;
|
368
365
|
border-top-left-radius: 8px;
|
369
366
|
border-top-right-radius: 8px;
|
@@ -376,11 +373,12 @@
|
|
376
373
|
gap: 4px;
|
377
374
|
pointer-events: auto;
|
378
375
|
box-sizing: border-box;
|
376
|
+
transform-origin: right top;
|
379
377
|
}
|
380
|
-
.
|
378
|
+
.styles_DraggableComponent--isSelected > .styles_DraggableComponent-actionsOverlay > .styles_DraggableComponent-actions {
|
381
379
|
display: flex;
|
382
380
|
}
|
383
|
-
.
|
381
|
+
.styles_DraggableComponent-actionsLabel {
|
384
382
|
color: var(--puck-color-grey-08);
|
385
383
|
display: flex;
|
386
384
|
font-size: var(--puck-font-size-xxxs);
|
@@ -390,11 +388,11 @@
|
|
390
388
|
padding-left: 8px;
|
391
389
|
padding-right: 16px;
|
392
390
|
margin-right: 8px;
|
393
|
-
border-right:
|
391
|
+
border-right: 0.5px solid var(--puck-color-grey-05);
|
394
392
|
text-overflow: ellipsis;
|
395
393
|
white-space: nowrap;
|
396
394
|
}
|
397
|
-
.
|
395
|
+
.styles_DraggableComponent-action {
|
398
396
|
background: transparent;
|
399
397
|
border: none;
|
400
398
|
color: var(--puck-color-grey-08);
|
@@ -407,23 +405,23 @@
|
|
407
405
|
justify-content: center;
|
408
406
|
transition: color 50ms ease-in;
|
409
407
|
}
|
410
|
-
.
|
408
|
+
.styles_DraggableComponent-action:focus-visible {
|
411
409
|
outline: 2px solid var(--puck-color-azure-05);
|
412
410
|
outline-offset: -2px;
|
413
411
|
}
|
414
412
|
@media (hover: hover) and (pointer: fine) {
|
415
|
-
.
|
413
|
+
.styles_DraggableComponent-action:hover {
|
416
414
|
color: var(--puck-color-azure-06);
|
417
415
|
transition: none;
|
418
416
|
}
|
419
417
|
}
|
420
|
-
.
|
418
|
+
.styles_DraggableComponent-action:active {
|
421
419
|
color: var(--puck-color-azure-07);
|
422
420
|
transition: none;
|
423
421
|
}
|
424
422
|
|
425
|
-
/*
|
426
|
-
.
|
423
|
+
/* components/DropZone/styles.module.css */
|
424
|
+
.styles_DropZone {
|
427
425
|
margin-left: auto;
|
428
426
|
margin-right: auto;
|
429
427
|
position: relative;
|
@@ -431,42 +429,36 @@
|
|
431
429
|
outline-offset: -1px;
|
432
430
|
width: 100%;
|
433
431
|
}
|
434
|
-
.
|
435
|
-
zoom: 1.33;
|
436
|
-
}
|
437
|
-
._DropZone--zoomEnabled_utidm_10 ._DropZone-renderWrapper_utidm_14 {
|
438
|
-
zoom: 0.75;
|
439
|
-
}
|
440
|
-
._DropZone-content_utidm_18 {
|
432
|
+
.styles_DropZone-content {
|
441
433
|
min-height: 128px;
|
442
434
|
height: 100%;
|
443
435
|
}
|
444
|
-
.
|
436
|
+
.styles_DropZone--userIsDragging .styles_DropZone-content {
|
445
437
|
pointer-events: all;
|
446
438
|
}
|
447
|
-
.
|
439
|
+
.styles_DropZone--userIsDragging:not(.styles_DropZone--draggingOverArea):not(.styles_DropZone--draggingNewComponent) > .styles_DropZone-content {
|
448
440
|
pointer-events: none;
|
449
441
|
}
|
450
|
-
.
|
451
|
-
.
|
452
|
-
.
|
453
|
-
background: var(--puck-color-azure-
|
442
|
+
.styles_DropZone--isAreaSelected,
|
443
|
+
.styles_DropZone--draggingOverArea:not(:has(.styles_DropZone--hoveringOverArea)),
|
444
|
+
.styles_DropZone--hoveringOverArea:not(.styles_DropZone--isDisabled):not(.styles_DropZone--isRootZone):not(.styles_DropZone--hasChildren) {
|
445
|
+
background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
|
454
446
|
outline: 2px dashed var(--puck-color-azure-08);
|
455
447
|
}
|
456
|
-
.
|
457
|
-
background: var(--puck-color-azure-
|
448
|
+
.styles_DropZone:not(.styles_DropZone--hasChildren) {
|
449
|
+
background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
|
458
450
|
outline: 2px dashed var(--puck-color-azure-08);
|
459
451
|
}
|
460
|
-
.
|
452
|
+
.styles_DropZone--isDestination {
|
461
453
|
outline: 2px dashed var(--puck-color-azure-04) !important;
|
462
454
|
}
|
463
|
-
.
|
455
|
+
.styles_DropZone--isDestination:not(.styles_DropZone--isRootZone) {
|
464
456
|
background: var(--puck-color-azure-10) !important;
|
465
457
|
}
|
466
|
-
.
|
458
|
+
.styles_DropZone-item {
|
467
459
|
position: relative;
|
468
460
|
}
|
469
|
-
.
|
461
|
+
.styles_DropZone-hitbox {
|
470
462
|
position: absolute;
|
471
463
|
bottom: -12px;
|
472
464
|
height: 24px;
|
@@ -474,36 +466,36 @@
|
|
474
466
|
z-index: 1;
|
475
467
|
}
|
476
468
|
|
477
|
-
/*
|
478
|
-
.
|
469
|
+
/* components/IconButton/IconButton.module.css */
|
470
|
+
.IconButton_IconButton {
|
479
471
|
align-items: center;
|
480
472
|
background: transparent;
|
481
473
|
border: none;
|
482
474
|
border-radius: 4px;
|
483
475
|
color: currentColor;
|
484
|
-
cursor: pointer;
|
485
476
|
display: flex;
|
486
477
|
font-family: var(--puck-font-family);
|
487
478
|
justify-content: center;
|
488
479
|
padding: 4px;
|
489
480
|
transition: background-color 50ms ease-in, color 50ms ease-in;
|
490
481
|
}
|
491
|
-
.
|
482
|
+
.IconButton_IconButton:focus-visible {
|
492
483
|
outline: 2px solid var(--puck-color-azure-05);
|
493
484
|
outline-offset: -2px;
|
494
485
|
}
|
495
486
|
@media (hover: hover) and (pointer: fine) {
|
496
|
-
.
|
487
|
+
.IconButton_IconButton:hover:not(.IconButton_IconButton--disabled) {
|
497
488
|
background: var(--puck-color-azure-12);
|
498
489
|
color: var(--puck-color-azure-04);
|
490
|
+
cursor: pointer;
|
499
491
|
transition: none;
|
500
492
|
}
|
501
493
|
}
|
502
|
-
.
|
494
|
+
.IconButton_IconButton:active {
|
503
495
|
background: var(--puck-color-azure-11);
|
504
496
|
transition: none;
|
505
497
|
}
|
506
|
-
.
|
498
|
+
.IconButton_IconButton-title {
|
507
499
|
clip: rect(0 0 0 0);
|
508
500
|
clip-path: inset(100%);
|
509
501
|
height: 1px;
|
@@ -512,41 +504,44 @@
|
|
512
504
|
white-space: nowrap;
|
513
505
|
width: 1px;
|
514
506
|
}
|
507
|
+
.IconButton_IconButton--disabled {
|
508
|
+
color: var(--puck-color-grey-07);
|
509
|
+
}
|
515
510
|
|
516
|
-
/*
|
517
|
-
.
|
511
|
+
/* components/SidebarSection/styles.module.css */
|
512
|
+
.styles_SidebarSection {
|
518
513
|
display: flex;
|
519
514
|
position: relative;
|
520
515
|
flex-direction: column;
|
521
516
|
color: var(--puck-color-black);
|
522
517
|
}
|
523
|
-
.
|
518
|
+
.styles_SidebarSection:last-of-type {
|
524
519
|
flex-grow: 1;
|
525
520
|
}
|
526
|
-
.
|
521
|
+
.styles_SidebarSection-title {
|
527
522
|
background: var(--puck-color-white);
|
528
523
|
padding: 16px;
|
529
524
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
530
525
|
border-top: 1px solid var(--puck-color-grey-09);
|
531
526
|
overflow-x: auto;
|
532
527
|
}
|
533
|
-
.
|
528
|
+
.styles_SidebarSection--noBorderTop > .styles_SidebarSection-title {
|
534
529
|
border-top: 0px;
|
535
530
|
}
|
536
|
-
.
|
531
|
+
.styles_SidebarSection-content {
|
537
532
|
padding: 16px;
|
538
533
|
}
|
539
|
-
.
|
534
|
+
.styles_SidebarSection--noPadding > .styles_SidebarSection-content {
|
540
535
|
padding: 0px;
|
541
536
|
}
|
542
|
-
.
|
537
|
+
.styles_SidebarSection--noPadding > .styles_SidebarSection-content:last-child {
|
543
538
|
padding-bottom: 4px;
|
544
539
|
}
|
545
|
-
.
|
540
|
+
.styles_SidebarSection:last-of-type .styles_SidebarSection-content {
|
546
541
|
border-bottom: none;
|
547
542
|
flex-grow: 1;
|
548
543
|
}
|
549
|
-
.
|
544
|
+
.styles_SidebarSection-breadcrumbLabel {
|
550
545
|
background: none;
|
551
546
|
border: 0;
|
552
547
|
border-radius: 2px;
|
@@ -557,34 +552,34 @@
|
|
557
552
|
padding: 0;
|
558
553
|
transition: color 50ms ease-in;
|
559
554
|
}
|
560
|
-
.
|
555
|
+
.styles_SidebarSection-breadcrumbLabel:focus-visible {
|
561
556
|
outline: 2px solid var(--puck-color-azure-05);
|
562
557
|
outline-offset: 2px;
|
563
558
|
}
|
564
559
|
@media (hover: hover) and (pointer: fine) {
|
565
|
-
.
|
560
|
+
.styles_SidebarSection-breadcrumbLabel:hover {
|
566
561
|
color: var(--puck-color-azure-03);
|
567
562
|
transition: none;
|
568
563
|
}
|
569
564
|
}
|
570
|
-
.
|
565
|
+
.styles_SidebarSection-breadcrumbLabel:active {
|
571
566
|
color: var(--puck-color-azure-02);
|
572
567
|
transition: none;
|
573
568
|
}
|
574
|
-
.
|
569
|
+
.styles_SidebarSection-breadcrumbs {
|
575
570
|
align-items: center;
|
576
571
|
display: flex;
|
577
572
|
gap: 4px;
|
578
573
|
}
|
579
|
-
.
|
574
|
+
.styles_SidebarSection-breadcrumb {
|
580
575
|
align-items: center;
|
581
576
|
display: flex;
|
582
577
|
gap: 4px;
|
583
578
|
}
|
584
|
-
.
|
579
|
+
.styles_SidebarSection-heading {
|
585
580
|
padding-right: 16px;
|
586
581
|
}
|
587
|
-
.
|
582
|
+
.styles_SidebarSection-loadingOverlay {
|
588
583
|
background: var(--puck-color-white);
|
589
584
|
display: flex;
|
590
585
|
justify-content: center;
|
@@ -599,45 +594,45 @@
|
|
599
594
|
opacity: 0.8;
|
600
595
|
}
|
601
596
|
|
602
|
-
/*
|
603
|
-
.
|
597
|
+
/* components/Heading/styles.module.css */
|
598
|
+
.styles_Heading {
|
604
599
|
display: block;
|
605
600
|
color: var(--puck-color-black);
|
606
601
|
font-weight: 700;
|
607
602
|
margin: 0;
|
608
603
|
}
|
609
|
-
.
|
604
|
+
.styles_Heading b {
|
610
605
|
font-weight: 700;
|
611
606
|
}
|
612
|
-
.
|
607
|
+
.styles_Heading--xxxxl {
|
613
608
|
font-size: var(--puck-font-size-xxxxl);
|
614
609
|
letter-spacing: 0.08ch;
|
615
610
|
font-weight: 800;
|
616
611
|
}
|
617
|
-
.
|
612
|
+
.styles_Heading--xxxl {
|
618
613
|
font-size: var(--puck-font-size-xxxl);
|
619
614
|
}
|
620
|
-
.
|
615
|
+
.styles_Heading--xxl {
|
621
616
|
font-size: var(--puck-font-size-xxl);
|
622
617
|
}
|
623
|
-
.
|
618
|
+
.styles_Heading--xl {
|
624
619
|
font-size: var(--puck-font-size-xl);
|
625
620
|
}
|
626
|
-
.
|
621
|
+
.styles_Heading--l {
|
627
622
|
font-size: var(--puck-font-size-l);
|
628
623
|
}
|
629
|
-
.
|
624
|
+
.styles_Heading--m {
|
630
625
|
font-size: var(--puck-font-size-m);
|
631
626
|
}
|
632
|
-
.
|
627
|
+
.styles_Heading--s {
|
633
628
|
font-size: var(--puck-font-size-s);
|
634
629
|
}
|
635
|
-
.
|
630
|
+
.styles_Heading--xs {
|
636
631
|
font-size: var(--puck-font-size-xs);
|
637
632
|
}
|
638
633
|
|
639
|
-
/*
|
640
|
-
.
|
634
|
+
/* components/MenuBar/styles.module.css */
|
635
|
+
.styles_MenuBar {
|
641
636
|
background-color: var(--puck-color-white);
|
642
637
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
643
638
|
display: none;
|
@@ -649,11 +644,11 @@
|
|
649
644
|
top: 100%;
|
650
645
|
z-index: 2;
|
651
646
|
}
|
652
|
-
.
|
647
|
+
.styles_MenuBar--menuOpen {
|
653
648
|
display: block;
|
654
649
|
}
|
655
650
|
@media (min-width: 638px) {
|
656
|
-
.
|
651
|
+
.styles_MenuBar {
|
657
652
|
border: none;
|
658
653
|
display: block;
|
659
654
|
margin-top: 0;
|
@@ -662,7 +657,7 @@
|
|
662
657
|
position: static;
|
663
658
|
}
|
664
659
|
}
|
665
|
-
.
|
660
|
+
.styles_MenuBar-inner {
|
666
661
|
align-items: center;
|
667
662
|
display: flex;
|
668
663
|
flex-wrap: wrap;
|
@@ -670,18 +665,18 @@
|
|
670
665
|
justify-content: flex-end;
|
671
666
|
}
|
672
667
|
@media (min-width: 638px) {
|
673
|
-
.
|
668
|
+
.styles_MenuBar-inner {
|
674
669
|
display: flex;
|
675
670
|
flex-direction: row;
|
676
671
|
flex-wrap: nowrap;
|
677
672
|
}
|
678
673
|
}
|
679
|
-
.
|
674
|
+
.styles_MenuBar-history {
|
680
675
|
display: flex;
|
681
676
|
}
|
682
677
|
|
683
|
-
/*
|
684
|
-
.
|
678
|
+
/* components/Puck/styles.module.css */
|
679
|
+
.styles_Puck {
|
685
680
|
--puck-frame-width: auto;
|
686
681
|
--puck-side-bar-width: 186px;
|
687
682
|
--puck-space-px: 16px;
|
@@ -691,57 +686,57 @@
|
|
691
686
|
grid-template-areas: "header header header" "left editor right";
|
692
687
|
grid-template-columns: 0 var(--puck-frame-width) 0;
|
693
688
|
grid-template-rows: min-content auto;
|
694
|
-
height:
|
689
|
+
height: 100dvh;
|
695
690
|
left: 0;
|
696
691
|
position: fixed;
|
697
692
|
right: 0;
|
698
693
|
top: 0;
|
699
694
|
}
|
700
|
-
.
|
695
|
+
.styles_Puck--leftSideBarVisible {
|
701
696
|
grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
|
702
697
|
}
|
703
|
-
.
|
698
|
+
.styles_Puck--rightSideBarVisible {
|
704
699
|
grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
|
705
700
|
}
|
706
|
-
.
|
701
|
+
.styles_Puck--leftSideBarVisible.styles_Puck--rightSideBarVisible {
|
707
702
|
grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
|
708
703
|
}
|
709
704
|
@media (min-width: 458px) {
|
710
|
-
.
|
705
|
+
.styles_Puck {
|
711
706
|
--puck-frame-width: minmax(266px, auto);
|
712
707
|
}
|
713
708
|
}
|
714
709
|
@media (min-width: 638px) {
|
715
|
-
.
|
710
|
+
.styles_Puck {
|
716
711
|
--puck-side-bar-width: minmax(186px, 250px);
|
717
712
|
}
|
718
713
|
}
|
719
714
|
@media (min-width: 766px) {
|
720
|
-
.
|
715
|
+
.styles_Puck {
|
721
716
|
--puck-frame-width: auto;
|
722
717
|
}
|
723
718
|
}
|
724
719
|
@media (min-width: 990px) {
|
725
|
-
.
|
720
|
+
.styles_Puck {
|
726
721
|
--puck-side-bar-width: 256px;
|
727
722
|
}
|
728
723
|
}
|
729
724
|
@media (min-width: 1198px) {
|
730
|
-
.
|
725
|
+
.styles_Puck {
|
731
726
|
--puck-side-bar-width: 274px;
|
732
727
|
}
|
733
728
|
}
|
734
729
|
@media (min-width: 1398px) {
|
735
|
-
.
|
730
|
+
.styles_Puck {
|
736
731
|
--puck-side-bar-width: 290px;
|
737
732
|
}
|
738
733
|
}
|
739
734
|
@media (min-width: 1598px) {
|
740
|
-
.
|
735
|
+
.styles_Puck {
|
741
736
|
--puck-side-bar-width: 320px;
|
742
737
|
}
|
743
738
|
}
|
744
|
-
.
|
739
|
+
.styles_Puck-header {
|
745
740
|
background: var(--puck-color-white);
|
746
741
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
747
742
|
color: var(--puck-color-black);
|
@@ -749,7 +744,7 @@
|
|
749
744
|
position: relative;
|
750
745
|
max-width: 100vw;
|
751
746
|
}
|
752
|
-
.
|
747
|
+
.styles_Puck-headerInner {
|
753
748
|
align-items: end;
|
754
749
|
display: grid;
|
755
750
|
gap: var(--puck-space-px);
|
@@ -758,43 +753,43 @@
|
|
758
753
|
grid-template-rows: auto;
|
759
754
|
padding: var(--puck-space-px);
|
760
755
|
}
|
761
|
-
.
|
756
|
+
.styles_Puck-headerToggle {
|
762
757
|
color: var(--puck-color-grey-05);
|
763
758
|
display: flex;
|
764
759
|
margin-left: -4px;
|
765
760
|
padding-top: 2px;
|
766
761
|
}
|
767
|
-
.
|
768
|
-
.
|
762
|
+
.styles_Puck--rightSideBarVisible .styles_Puck-rightSideBarToggle,
|
763
|
+
.styles_Puck--leftSideBarVisible .styles_Puck-leftSideBarToggle {
|
769
764
|
color: var(--puck-color-black);
|
770
765
|
}
|
771
|
-
.
|
766
|
+
.styles_Puck-headerTitle {
|
772
767
|
align-self: center;
|
773
768
|
}
|
774
|
-
.
|
769
|
+
.styles_Puck-headerPath {
|
775
770
|
font-family: var(--puck-font-family-monospaced);
|
776
771
|
font-size: var(--puck-font-size-xxs);
|
777
772
|
font-weight: normal;
|
778
773
|
word-break: break-all;
|
779
774
|
}
|
780
|
-
.
|
775
|
+
.styles_Puck-headerTools {
|
781
776
|
display: flex;
|
782
777
|
gap: 16px;
|
783
778
|
justify-content: flex-end;
|
784
779
|
}
|
785
|
-
.
|
780
|
+
.styles_Puck-menuButton {
|
786
781
|
color: var(--puck-color-grey-05);
|
787
782
|
margin-left: -4px;
|
788
783
|
}
|
789
|
-
.
|
784
|
+
.styles_Puck--menuOpen .styles_Puck-menuButton {
|
790
785
|
color: var(--puck-color-black);
|
791
786
|
}
|
792
787
|
@media (min-width: 638px) {
|
793
|
-
.
|
788
|
+
.styles_Puck-menuButton {
|
794
789
|
display: none;
|
795
790
|
}
|
796
791
|
}
|
797
|
-
.
|
792
|
+
.styles_Puck-leftSideBar {
|
798
793
|
background: var(--puck-color-grey-12);
|
799
794
|
border-right: 1px solid var(--puck-color-grey-09);
|
800
795
|
display: flex;
|
@@ -802,25 +797,7 @@
|
|
802
797
|
grid-area: left;
|
803
798
|
overflow-y: auto;
|
804
799
|
}
|
805
|
-
.
|
806
|
-
display: flex;
|
807
|
-
flex-direction: column;
|
808
|
-
grid-area: editor;
|
809
|
-
overflow: auto;
|
810
|
-
position: relative;
|
811
|
-
}
|
812
|
-
._Puck-root_1mnww_176 {
|
813
|
-
border: 1px solid var(--puck-color-grey-09);
|
814
|
-
box-shadow: 0 0 0 calc(var(--puck-space-px) * 1.5) var(--puck-color-grey-11);
|
815
|
-
margin: var(--puck-space-px);
|
816
|
-
min-width: 321px;
|
817
|
-
}
|
818
|
-
@media (min-width: 1198px) {
|
819
|
-
._Puck-root_1mnww_176 {
|
820
|
-
margin: calc(var(--puck-space-px) * 1.5);
|
821
|
-
}
|
822
|
-
}
|
823
|
-
._Puck-rightSideBar_1mnww_122 {
|
800
|
+
.styles_Puck-rightSideBar {
|
824
801
|
background: var(--puck-color-white);
|
825
802
|
border-left: 1px solid var(--puck-color-grey-09);
|
826
803
|
display: flex;
|
@@ -829,45 +806,45 @@
|
|
829
806
|
overflow-y: auto;
|
830
807
|
}
|
831
808
|
|
832
|
-
/*
|
833
|
-
.
|
809
|
+
/* components/InputOrGroup/styles.module.css */
|
810
|
+
.styles_Input {
|
834
811
|
color: var(--puck-color-grey-04);
|
835
812
|
padding: 16px;
|
836
813
|
padding-bottom: 12px;
|
837
814
|
display: block;
|
838
815
|
}
|
839
|
-
.
|
816
|
+
.styles_Input .styles_Input {
|
840
817
|
padding: 0px;
|
841
818
|
}
|
842
|
-
.
|
819
|
+
.styles_Input * {
|
843
820
|
box-sizing: border-box;
|
844
821
|
}
|
845
|
-
.
|
822
|
+
.styles_Input + .styles_Input {
|
846
823
|
border-top: 1px solid var(--puck-color-grey-09);
|
847
824
|
margin-top: 8px;
|
848
825
|
}
|
849
|
-
.
|
826
|
+
.styles_Input .styles_Input + .styles_Input {
|
850
827
|
border-top: 0px;
|
851
828
|
margin-top: 12px;
|
852
829
|
}
|
853
|
-
.
|
830
|
+
.styles_Input-label {
|
854
831
|
align-items: center;
|
855
832
|
display: flex;
|
856
833
|
padding-bottom: 12px;
|
857
834
|
font-size: var(--puck-font-size-xxs);
|
858
835
|
font-weight: 600;
|
859
836
|
}
|
860
|
-
.
|
837
|
+
.styles_Input-labelIcon {
|
861
838
|
color: var(--puck-color-grey-07);
|
862
839
|
display: flex;
|
863
840
|
margin-right: 4px;
|
864
841
|
padding-left: 4px;
|
865
842
|
}
|
866
|
-
.
|
843
|
+
.styles_Input-disabledIcon {
|
867
844
|
color: var(--puck-color-grey-05);
|
868
845
|
margin-left: auto;
|
869
846
|
}
|
870
|
-
.
|
847
|
+
.styles_Input-input {
|
871
848
|
background: var(--puck-color-white);
|
872
849
|
border-width: 1px;
|
873
850
|
border-style: solid;
|
@@ -879,7 +856,7 @@
|
|
879
856
|
transition: border-color 50ms ease-in;
|
880
857
|
width: 100%;
|
881
858
|
}
|
882
|
-
select.
|
859
|
+
select.styles_Input-input {
|
883
860
|
appearance: none;
|
884
861
|
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
|
885
862
|
background-size: 12px;
|
@@ -889,25 +866,25 @@ select._Input-input_1qi5b_46 {
|
|
889
866
|
cursor: pointer;
|
890
867
|
}
|
891
868
|
@media (hover: hover) and (pointer: fine) {
|
892
|
-
.
|
893
|
-
.
|
869
|
+
.styles_Input:has(> input):hover .styles_Input-input:not([readonly]),
|
870
|
+
.styles_Input:has(> textarea):hover .styles_Input-input:not([readonly]) {
|
894
871
|
border-color: var(--puck-color-grey-05);
|
895
872
|
transition: none;
|
896
873
|
}
|
897
|
-
.
|
874
|
+
.styles_Input:has(> select):hover .styles_Input-input:not([disabled]) {
|
898
875
|
background-color: var(--puck-color-azure-12);
|
899
876
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
|
900
877
|
border-color: var(--puck-color-grey-05);
|
901
878
|
transition: none;
|
902
879
|
}
|
903
880
|
}
|
904
|
-
.
|
881
|
+
.styles_Input-input:focus {
|
905
882
|
border-color: var(--puck-color-grey-05);
|
906
883
|
outline: 2px solid var(--puck-color-azure-05);
|
907
884
|
transition: none;
|
908
885
|
}
|
909
|
-
.
|
910
|
-
.
|
886
|
+
.styles_Input--readOnly > .styles_Input-input,
|
887
|
+
.styles_Input--readOnly > select.styles_Input-input {
|
911
888
|
background-color: var(--puck-color-grey-11);
|
912
889
|
border-color: var(--puck-color-grey-09);
|
913
890
|
color: var(--puck-color-grey-04);
|
@@ -916,34 +893,34 @@ select._Input-input_1qi5b_46 {
|
|
916
893
|
outline: 0;
|
917
894
|
transition: none;
|
918
895
|
}
|
919
|
-
.
|
896
|
+
.styles_Input-radioGroupItems {
|
920
897
|
display: flex;
|
921
898
|
border: 1px solid var(--puck-color-grey-09);
|
922
899
|
border-radius: 4px;
|
923
900
|
flex-wrap: wrap;
|
924
901
|
}
|
925
|
-
.
|
902
|
+
.styles_Input-radio {
|
926
903
|
border-right: 1px solid var(--puck-color-grey-09);
|
927
904
|
flex-grow: 1;
|
928
905
|
}
|
929
|
-
.
|
906
|
+
.styles_Input-radio:first-of-type {
|
930
907
|
border-bottom-left-radius: 4px;
|
931
908
|
border-top-left-radius: 4px;
|
932
909
|
}
|
933
|
-
.
|
910
|
+
.styles_Input-radio:first-of-type .styles_Input-radioInner {
|
934
911
|
border-bottom-left-radius: 3px;
|
935
912
|
border-top-left-radius: 3px;
|
936
913
|
}
|
937
|
-
.
|
914
|
+
.styles_Input-radio:last-of-type {
|
938
915
|
border-bottom-right-radius: 4px;
|
939
916
|
border-right: 0;
|
940
917
|
border-top-right-radius: 4px;
|
941
918
|
}
|
942
|
-
.
|
919
|
+
.styles_Input-radio:last-of-type .styles_Input-radioInner {
|
943
920
|
border-bottom-right-radius: 3px;
|
944
921
|
border-top-right-radius: 3px;
|
945
922
|
}
|
946
|
-
.
|
923
|
+
.styles_Input-radioInner {
|
947
924
|
background-color: var(--puck-color-white);
|
948
925
|
color: var(--puck-color-grey-04);
|
949
926
|
cursor: pointer;
|
@@ -952,32 +929,32 @@ select._Input-input_1qi5b_46 {
|
|
952
929
|
text-align: center;
|
953
930
|
transition: background-color 50ms ease-in;
|
954
931
|
}
|
955
|
-
.
|
932
|
+
.styles_Input-radio:has(:focus-visible) {
|
956
933
|
outline: 2px solid var(--puck-color-azure-05);
|
957
934
|
outline-offset: 2px;
|
958
935
|
position: relative;
|
959
936
|
}
|
960
937
|
@media (hover: hover) and (pointer: fine) {
|
961
|
-
.
|
938
|
+
.styles_Input-radioInner:hover {
|
962
939
|
background-color: var(--puck-color-azure-12);
|
963
940
|
transition: none;
|
964
941
|
}
|
965
942
|
}
|
966
|
-
.
|
943
|
+
.styles_Input--readOnly .styles_Input-radioInner {
|
967
944
|
background-color: var(--puck-color-white);
|
968
945
|
color: var(--puck-color-grey-04);
|
969
946
|
cursor: default;
|
970
947
|
}
|
971
|
-
.
|
948
|
+
.styles_Input-radio .styles_Input-radioInput:checked ~ .styles_Input-radioInner {
|
972
949
|
background-color: var(--puck-color-azure-11);
|
973
950
|
color: var(--puck-color-azure-04);
|
974
951
|
font-weight: 500;
|
975
952
|
}
|
976
|
-
.
|
953
|
+
.styles_Input--readOnly .styles_Input-radioInput:checked ~ .styles_Input-radioInner {
|
977
954
|
background-color: var(--puck-color-grey-11);
|
978
955
|
color: var(--puck-color-grey-04);
|
979
956
|
}
|
980
|
-
.
|
957
|
+
.styles_Input-radio .styles_Input-radioInput {
|
981
958
|
clip: rect(0 0 0 0);
|
982
959
|
clip-path: inset(100%);
|
983
960
|
height: 1px;
|
@@ -986,22 +963,22 @@ select._Input-input_1qi5b_46 {
|
|
986
963
|
white-space: nowrap;
|
987
964
|
width: 1px;
|
988
965
|
}
|
989
|
-
textarea.
|
966
|
+
textarea.styles_Input-input {
|
990
967
|
margin-bottom: -4px;
|
991
968
|
}
|
992
969
|
|
993
|
-
/*
|
994
|
-
.
|
970
|
+
/* components/InputOrGroup/fields/ArrayField/styles.module.css */
|
971
|
+
.styles_ArrayField {
|
995
972
|
display: flex;
|
996
973
|
flex-direction: column;
|
997
974
|
background-color: var(--puck-color-grey-09);
|
998
975
|
border: 1px solid var(--puck-color-grey-09);
|
999
976
|
border-radius: 4px;
|
1000
977
|
}
|
1001
|
-
.
|
978
|
+
.styles_ArrayField--isDraggingFrom {
|
1002
979
|
background-color: var(--puck-color-azure-11);
|
1003
980
|
}
|
1004
|
-
.
|
981
|
+
.styles_ArrayField-addButton {
|
1005
982
|
background-color: var(--puck-color-white);
|
1006
983
|
border: none;
|
1007
984
|
border-radius: 4px;
|
@@ -1015,54 +992,54 @@ textarea._Input-input_1qi5b_46 {
|
|
1015
992
|
text-align: left;
|
1016
993
|
transition: background-color 50ms ease-in;
|
1017
994
|
}
|
1018
|
-
.
|
995
|
+
.styles_ArrayField--hasItems > .styles_ArrayField-addButton {
|
1019
996
|
border-top-left-radius: 0;
|
1020
997
|
border-top-right-radius: 0;
|
1021
998
|
}
|
1022
|
-
.
|
999
|
+
.styles_ArrayField-addButton:focus-visible {
|
1023
1000
|
outline: 2px solid var(--puck-color-azure-05);
|
1024
1001
|
outline-offset: 2px;
|
1025
1002
|
position: relative;
|
1026
1003
|
}
|
1027
1004
|
@media (hover: hover) and (pointer: fine) {
|
1028
|
-
.
|
1005
|
+
.styles_ArrayField:not(.styles_ArrayField--isDraggingFrom) > .styles_ArrayField-addButton:hover {
|
1029
1006
|
background: var(--puck-color-azure-12);
|
1030
1007
|
color: var(--puck-color-azure-04);
|
1031
1008
|
transition: none;
|
1032
1009
|
}
|
1033
1010
|
}
|
1034
|
-
.
|
1011
|
+
.styles_ArrayField:not(.styles_ArrayField--isDraggingFrom) > .styles_ArrayField-addButton:active {
|
1035
1012
|
background: var(--puck-color-azure-11);
|
1036
1013
|
color: var(--puck-color-azure-04);
|
1037
1014
|
transition: none;
|
1038
1015
|
}
|
1039
|
-
.
|
1016
|
+
.styles_ArrayFieldItem {
|
1040
1017
|
background: var(--puck-color-white);
|
1041
1018
|
border-top-left-radius: 4px;
|
1042
1019
|
border-top-right-radius: 4px;
|
1043
1020
|
display: block;
|
1044
1021
|
margin-bottom: 1px;
|
1045
1022
|
}
|
1046
|
-
.
|
1023
|
+
.styles_ArrayField--isDraggingFrom > .styles_ArrayFieldItem:not(.styles_ArrayFieldItem--isDragging) {
|
1047
1024
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
1048
1025
|
margin-bottom: 0;
|
1049
1026
|
}
|
1050
|
-
.
|
1027
|
+
.styles_ArrayFieldItem--isExpanded {
|
1051
1028
|
border-bottom: 0;
|
1052
1029
|
outline-offset: 0px !important;
|
1053
1030
|
outline: 1px solid var(--puck-color-azure-07) !important;
|
1054
1031
|
}
|
1055
|
-
.
|
1032
|
+
.styles_ArrayFieldItem--isDragging {
|
1056
1033
|
box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
|
1057
1034
|
}
|
1058
|
-
.
|
1035
|
+
.styles_ArrayFieldItem--isDragging .styles_ArrayFieldItem-summary:active {
|
1059
1036
|
background-color: var(--puck-color-white);
|
1060
1037
|
}
|
1061
|
-
.
|
1038
|
+
.styles_ArrayFieldItem + .styles_ArrayFieldItem {
|
1062
1039
|
border-top-left-radius: 0;
|
1063
1040
|
border-top-right-radius: 0;
|
1064
1041
|
}
|
1065
|
-
.
|
1042
|
+
.styles_ArrayFieldItem-summary {
|
1066
1043
|
color: var(--puck-color-grey-04);
|
1067
1044
|
cursor: pointer;
|
1068
1045
|
display: flex;
|
@@ -1076,67 +1053,67 @@ textarea._Input-input_1qi5b_46 {
|
|
1076
1053
|
overflow: hidden;
|
1077
1054
|
transition: background-color 50ms ease-in;
|
1078
1055
|
}
|
1079
|
-
.
|
1056
|
+
.styles_ArrayFieldItem--readOnly > .styles_ArrayFieldItem-summary {
|
1080
1057
|
background-color: var(--puck-color-grey-12);
|
1081
1058
|
color: var(--puck-color-grey-06);
|
1082
1059
|
}
|
1083
|
-
.
|
1060
|
+
.styles_ArrayFieldItem:first-of-type > .styles_ArrayFieldItem-summary {
|
1084
1061
|
border-top-left-radius: 4px;
|
1085
1062
|
border-top-right-radius: 4px;
|
1086
1063
|
}
|
1087
|
-
.
|
1064
|
+
.styles_ArrayFieldItem-summary:focus-visible {
|
1088
1065
|
outline: 2px solid var(--puck-color-azure-05);
|
1089
1066
|
outline-offset: 2px;
|
1090
1067
|
}
|
1091
1068
|
@media (hover: hover) and (pointer: fine) {
|
1092
|
-
.
|
1069
|
+
.styles_ArrayFieldItem-summary:hover {
|
1093
1070
|
background-color: var(--puck-color-azure-12);
|
1094
1071
|
transition: none;
|
1095
1072
|
}
|
1096
1073
|
}
|
1097
|
-
.
|
1074
|
+
.styles_ArrayFieldItem-summary:active {
|
1098
1075
|
background-color: var(--puck-color-azure-11);
|
1099
1076
|
transition: none;
|
1100
1077
|
}
|
1101
|
-
.
|
1078
|
+
.styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-summary {
|
1102
1079
|
background: var(--puck-color-azure-11);
|
1103
1080
|
color: var(--puck-color-azure-04);
|
1104
1081
|
font-weight: 600;
|
1105
1082
|
transition: none;
|
1106
1083
|
}
|
1107
|
-
.
|
1084
|
+
.styles_ArrayFieldItem-body {
|
1108
1085
|
display: none;
|
1109
1086
|
}
|
1110
|
-
.
|
1087
|
+
.styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-body {
|
1111
1088
|
display: block;
|
1112
1089
|
}
|
1113
|
-
.
|
1090
|
+
.styles_ArrayFieldItem-fieldset {
|
1114
1091
|
border: none;
|
1115
1092
|
border-top: 1px solid var(--puck-color-grey-09);
|
1116
1093
|
margin: 0;
|
1117
1094
|
padding: 16px 15px;
|
1118
1095
|
}
|
1119
|
-
.
|
1096
|
+
.styles_ArrayFieldItem-rhs {
|
1120
1097
|
display: flex;
|
1121
1098
|
gap: 4px;
|
1122
1099
|
align-items: center;
|
1123
1100
|
}
|
1124
|
-
.
|
1101
|
+
.styles_ArrayFieldItem-actions {
|
1125
1102
|
color: var(--puck-color-grey-04);
|
1126
1103
|
display: flex;
|
1127
1104
|
gap: 4px;
|
1128
1105
|
opacity: 0;
|
1129
1106
|
}
|
1130
|
-
.
|
1131
|
-
.
|
1107
|
+
.styles_ArrayFieldItem-summary:focus-within > .styles_ArrayFieldItem-rhs > .styles_ArrayFieldItem-actions,
|
1108
|
+
.styles_ArrayFieldItem-summary:hover > .styles_ArrayFieldItem-rhs > .styles_ArrayFieldItem-actions {
|
1132
1109
|
opacity: 1;
|
1133
1110
|
}
|
1134
1111
|
|
1135
|
-
/*
|
1136
|
-
.
|
1112
|
+
/* components/ExternalInput/styles.module.css */
|
1113
|
+
.styles_ExternalInput-actions {
|
1137
1114
|
display: flex;
|
1138
1115
|
}
|
1139
|
-
.
|
1116
|
+
.styles_ExternalInput-button {
|
1140
1117
|
display: flex;
|
1141
1118
|
gap: 8px;
|
1142
1119
|
align-items: center;
|
@@ -1155,13 +1132,13 @@ textarea._Input-input_1qi5b_46 {
|
|
1155
1132
|
overflow: hidden;
|
1156
1133
|
flex-grow: 1;
|
1157
1134
|
}
|
1158
|
-
.
|
1135
|
+
.styles_ExternalInput--dataSelected .styles_ExternalInput-button {
|
1159
1136
|
color: var(--puck-color-grey-03);
|
1160
1137
|
display: block;
|
1161
1138
|
border-top-right-radius: 0px;
|
1162
1139
|
border-bottom-right-radius: 0px;
|
1163
1140
|
}
|
1164
|
-
.
|
1141
|
+
.styles_ExternalInput-detachButton {
|
1165
1142
|
border: 1px solid var(--puck-color-grey-09);
|
1166
1143
|
border-top-right-radius: 4px;
|
1167
1144
|
border-bottom-right-radius: 4px;
|
@@ -1177,65 +1154,65 @@ textarea._Input-input_1qi5b_46 {
|
|
1177
1154
|
transition: background-color 50ms ease-in, color 50ms ease-in;
|
1178
1155
|
margin-left: -1px;
|
1179
1156
|
}
|
1180
|
-
.
|
1181
|
-
.
|
1157
|
+
.styles_ExternalInput-button:focus-visible,
|
1158
|
+
.styles_ExternalInput-detachButton:focus-visible {
|
1182
1159
|
outline: 2px solid var(--puck-color-azure-05);
|
1183
1160
|
outline-offset: 2px;
|
1184
1161
|
z-index: 1;
|
1185
1162
|
}
|
1186
1163
|
@media (hover: hover) and (pointer: fine) {
|
1187
|
-
.
|
1188
|
-
.
|
1164
|
+
.styles_ExternalInput-button:hover,
|
1165
|
+
.styles_ExternalInput-detachButton:hover {
|
1189
1166
|
background: var(--puck-color-azure-12);
|
1190
1167
|
transition: none;
|
1191
1168
|
}
|
1192
|
-
.
|
1169
|
+
.styles_ExternalInput-detachButton:hover {
|
1193
1170
|
color: var(--puck-color-azure-04);
|
1194
1171
|
}
|
1195
1172
|
}
|
1196
|
-
.
|
1197
|
-
.
|
1173
|
+
.styles_ExternalInput-button:active,
|
1174
|
+
.styles_ExternalInput-detachButton:active {
|
1198
1175
|
background: var(--puck-color-azure-11);
|
1199
1176
|
transition: none;
|
1200
1177
|
}
|
1201
|
-
.
|
1178
|
+
.styles_ExternalInputModal {
|
1202
1179
|
color: var(--puck-color-black);
|
1203
1180
|
display: grid;
|
1204
1181
|
grid-template-rows: min-content minmax(128px, 100%) min-content;
|
1205
1182
|
grid-template-columns: 100%;
|
1206
1183
|
position: relative;
|
1207
|
-
min-height:
|
1208
|
-
max-height:
|
1184
|
+
min-height: 50dvh;
|
1185
|
+
max-height: 90dvh;
|
1209
1186
|
}
|
1210
|
-
.
|
1187
|
+
.styles_ExternalInputModal-grid {
|
1211
1188
|
display: flex;
|
1212
1189
|
flex-direction: column;
|
1213
1190
|
}
|
1214
1191
|
@media (min-width: 458px) {
|
1215
|
-
.
|
1192
|
+
.styles_ExternalInputModal-grid {
|
1216
1193
|
display: grid;
|
1217
1194
|
grid-template-columns: 100%;
|
1218
1195
|
}
|
1219
|
-
.
|
1196
|
+
.styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-grid {
|
1220
1197
|
grid-template-columns: 25% 75%;
|
1221
1198
|
}
|
1222
1199
|
}
|
1223
|
-
.
|
1200
|
+
.styles_ExternalInputModal-filters {
|
1224
1201
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
1225
1202
|
}
|
1226
|
-
.
|
1203
|
+
.styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-filters {
|
1227
1204
|
display: none;
|
1228
1205
|
}
|
1229
1206
|
@media (min-width: 458px) {
|
1230
|
-
.
|
1207
|
+
.styles_ExternalInputModal-filters {
|
1231
1208
|
border-right: 1px solid var(--puck-color-grey-09);
|
1232
1209
|
display: none;
|
1233
1210
|
}
|
1234
|
-
.
|
1211
|
+
.styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-filters {
|
1235
1212
|
display: block;
|
1236
1213
|
}
|
1237
1214
|
}
|
1238
|
-
.
|
1215
|
+
.styles_ExternalInputModal-masthead {
|
1239
1216
|
background-color: var(--puck-color-grey-12);
|
1240
1217
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
1241
1218
|
display: flex;
|
@@ -1243,13 +1220,13 @@ textarea._Input-input_1qi5b_46 {
|
|
1243
1220
|
gap: 24px;
|
1244
1221
|
padding: 24px;
|
1245
1222
|
}
|
1246
|
-
.
|
1223
|
+
.styles_ExternalInputModal-tableWrapper {
|
1247
1224
|
position: relative;
|
1248
1225
|
overflow-x: auto;
|
1249
1226
|
overflow-y: auto;
|
1250
1227
|
flex-grow: 1;
|
1251
1228
|
}
|
1252
|
-
.
|
1229
|
+
.styles_ExternalInputModal-table {
|
1253
1230
|
border-collapse: unset;
|
1254
1231
|
border-spacing: 0px;
|
1255
1232
|
color: var(--puck-color-grey-02);
|
@@ -1257,51 +1234,51 @@ textarea._Input-input_1qi5b_46 {
|
|
1257
1234
|
z-index: 0;
|
1258
1235
|
min-width: 100%;
|
1259
1236
|
}
|
1260
|
-
.
|
1237
|
+
.styles_ExternalInputModal-thead {
|
1261
1238
|
background-color: var(--puck-color-white);
|
1262
1239
|
position: sticky;
|
1263
1240
|
top: 0;
|
1264
1241
|
z-index: 1;
|
1265
1242
|
}
|
1266
|
-
.
|
1243
|
+
.styles_ExternalInputModal-th {
|
1267
1244
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
1268
1245
|
color: var(--puck-color-grey-04);
|
1269
1246
|
font-weight: 500;
|
1270
1247
|
font-size: 14px;
|
1271
1248
|
padding: 16px 24px;
|
1272
1249
|
}
|
1273
|
-
.
|
1250
|
+
.styles_ExternalInputModal-td {
|
1274
1251
|
border-bottom: 1px solid var(--puck-color-grey-10);
|
1275
1252
|
padding: 16px 24px;
|
1276
1253
|
}
|
1277
|
-
.
|
1254
|
+
.styles_ExternalInputModal-tr .styles_ExternalInputModal-td:first-of-type {
|
1278
1255
|
font-weight: 500;
|
1279
1256
|
width: 1%;
|
1280
1257
|
white-space: nowrap;
|
1281
1258
|
}
|
1282
1259
|
@media (hover: hover) and (pointer: fine) {
|
1283
|
-
.
|
1260
|
+
.styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:hover {
|
1284
1261
|
background: var(--puck-color-azure-12);
|
1285
1262
|
color: var(--puck-color-azure-04);
|
1286
1263
|
cursor: pointer;
|
1287
1264
|
position: relative;
|
1288
1265
|
margin-left: -5px;
|
1289
1266
|
}
|
1290
|
-
.
|
1267
|
+
.styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:hover .styles_ExternalInputModal-td:first-of-type {
|
1291
1268
|
border-left: 4px solid var(--puck-color-azure-04);
|
1292
1269
|
padding-left: 20px;
|
1293
1270
|
}
|
1294
1271
|
}
|
1295
|
-
.
|
1272
|
+
.styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:last-of-type .styles_ExternalInputModal-td {
|
1296
1273
|
border-bottom: none;
|
1297
1274
|
}
|
1298
|
-
.
|
1275
|
+
.styles_ExternalInputModal-tableWrapper {
|
1299
1276
|
display: none;
|
1300
1277
|
}
|
1301
|
-
.
|
1278
|
+
.styles_ExternalInputModal--hasData .styles_ExternalInputModal-tableWrapper {
|
1302
1279
|
display: block;
|
1303
1280
|
}
|
1304
|
-
.
|
1281
|
+
.styles_ExternalInputModal-loadingBanner {
|
1305
1282
|
display: none;
|
1306
1283
|
background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
|
1307
1284
|
padding: 64px;
|
@@ -1313,21 +1290,21 @@ textarea._Input-input_1qi5b_46 {
|
|
1313
1290
|
right: 0;
|
1314
1291
|
bottom: 0;
|
1315
1292
|
}
|
1316
|
-
.
|
1293
|
+
.styles_ExternalInputModal--isLoading .styles_ExternalInputModal-loadingBanner {
|
1317
1294
|
display: flex;
|
1318
1295
|
}
|
1319
|
-
.
|
1296
|
+
.styles_ExternalInputModal-searchForm {
|
1320
1297
|
display: flex;
|
1321
1298
|
flex-wrap: wrap;
|
1322
1299
|
gap: 12px;
|
1323
1300
|
flex-grow: 1;
|
1324
1301
|
}
|
1325
1302
|
@media (min-width: 458px) {
|
1326
|
-
.
|
1303
|
+
.styles_ExternalInputModal-searchForm {
|
1327
1304
|
flex-wrap: nowrap;
|
1328
1305
|
}
|
1329
1306
|
}
|
1330
|
-
.
|
1307
|
+
.styles_ExternalInputModal-search {
|
1331
1308
|
display: flex;
|
1332
1309
|
background: var(--puck-color-white);
|
1333
1310
|
border-width: 1px;
|
@@ -1337,18 +1314,18 @@ textarea._Input-input_1qi5b_46 {
|
|
1337
1314
|
flex-grow: 1;
|
1338
1315
|
transition: border-color 50ms ease-in;
|
1339
1316
|
}
|
1340
|
-
.
|
1317
|
+
.styles_ExternalInputModal-search:focus-within {
|
1341
1318
|
border-color: var(--puck-color-grey-05);
|
1342
1319
|
outline: 2px solid var(--puck-color-azure-05);
|
1343
1320
|
transition: none;
|
1344
1321
|
}
|
1345
1322
|
@media (hover: hover) and (pointer: fine) {
|
1346
|
-
.
|
1323
|
+
.styles_ExternalInputModal-search:hover {
|
1347
1324
|
border-color: var(--puck-color-grey-05);
|
1348
1325
|
transition: none;
|
1349
1326
|
}
|
1350
1327
|
}
|
1351
|
-
.
|
1328
|
+
.styles_ExternalInputModal-searchIcon {
|
1352
1329
|
align-items: center;
|
1353
1330
|
background: var(--puck-color-grey-12);
|
1354
1331
|
border-bottom-left-radius: 4px;
|
@@ -1360,17 +1337,17 @@ textarea._Input-input_1qi5b_46 {
|
|
1360
1337
|
padding: 12px 15px;
|
1361
1338
|
transition: color 50ms ease-in;
|
1362
1339
|
}
|
1363
|
-
.
|
1340
|
+
.styles_ExternalInputModal-search:focus-within .styles_ExternalInputModal-searchIcon {
|
1364
1341
|
color: var(--puck-color-grey-04);
|
1365
1342
|
transition: none;
|
1366
1343
|
}
|
1367
1344
|
@media (hover: hover) and (pointer: fine) {
|
1368
|
-
.
|
1345
|
+
.styles_ExternalInputModal-search:hover .styles_ExternalInputModal-searchIcon {
|
1369
1346
|
color: var(--puck-color-grey-04);
|
1370
1347
|
transition: none;
|
1371
1348
|
}
|
1372
1349
|
}
|
1373
|
-
.
|
1350
|
+
.styles_ExternalInputModal-searchIconText {
|
1374
1351
|
clip: rect(0 0 0 0);
|
1375
1352
|
clip-path: inset(100%);
|
1376
1353
|
height: 1px;
|
@@ -1379,7 +1356,7 @@ textarea._Input-input_1qi5b_46 {
|
|
1379
1356
|
white-space: nowrap;
|
1380
1357
|
width: 1px;
|
1381
1358
|
}
|
1382
|
-
.
|
1359
|
+
.styles_ExternalInputModal-searchInput {
|
1383
1360
|
border: none;
|
1384
1361
|
border-radius: 4px;
|
1385
1362
|
background: var(--puck-color-white);
|
@@ -1388,24 +1365,24 @@ textarea._Input-input_1qi5b_46 {
|
|
1388
1365
|
padding: 12px 15px;
|
1389
1366
|
width: 100%;
|
1390
1367
|
}
|
1391
|
-
.
|
1368
|
+
.styles_ExternalInputModal-searchInput:focus {
|
1392
1369
|
outline: 0;
|
1393
1370
|
}
|
1394
|
-
.
|
1371
|
+
.styles_ExternalInputModal-searchActions {
|
1395
1372
|
display: flex;
|
1396
1373
|
gap: 8px;
|
1397
1374
|
height: 44px;
|
1398
1375
|
width: 100%;
|
1399
1376
|
}
|
1400
1377
|
@media (min-width: 458px) {
|
1401
|
-
.
|
1378
|
+
.styles_ExternalInputModal-searchActions {
|
1402
1379
|
width: auto;
|
1403
1380
|
}
|
1404
1381
|
}
|
1405
|
-
.
|
1382
|
+
.styles_ExternalInputModal-searchActionIcon {
|
1406
1383
|
align-self: center;
|
1407
1384
|
}
|
1408
|
-
.
|
1385
|
+
.styles_ExternalInputModal-footer {
|
1409
1386
|
background-color: var(--puck-color-grey-12);
|
1410
1387
|
border-top: 1px solid var(--puck-color-grey-09);
|
1411
1388
|
color: var(--puck-color-grey-04);
|
@@ -1415,8 +1392,8 @@ textarea._Input-input_1qi5b_46 {
|
|
1415
1392
|
text-align: right;
|
1416
1393
|
}
|
1417
1394
|
|
1418
|
-
/*
|
1419
|
-
.
|
1395
|
+
/* components/Modal/styles.module.css */
|
1396
|
+
.styles_Modal {
|
1420
1397
|
background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
|
1421
1398
|
display: none;
|
1422
1399
|
justify-content: center;
|
@@ -1429,10 +1406,10 @@ textarea._Input-input_1qi5b_46 {
|
|
1429
1406
|
z-index: 1;
|
1430
1407
|
padding: 32px;
|
1431
1408
|
}
|
1432
|
-
.
|
1409
|
+
.styles_Modal--isOpen {
|
1433
1410
|
display: flex;
|
1434
1411
|
}
|
1435
|
-
.
|
1412
|
+
.styles_Modal-inner {
|
1436
1413
|
width: 100%;
|
1437
1414
|
max-width: 1024px;
|
1438
1415
|
border-radius: 8px;
|
@@ -1440,29 +1417,29 @@ textarea._Input-input_1qi5b_46 {
|
|
1440
1417
|
background: var(--puck-color-white);
|
1441
1418
|
display: flex;
|
1442
1419
|
flex-direction: column;
|
1443
|
-
max-height:
|
1420
|
+
max-height: 90dvh;
|
1444
1421
|
}
|
1445
1422
|
|
1446
|
-
/*
|
1447
|
-
.
|
1423
|
+
/* components/InputOrGroup/fields/ObjectField/styles.module.css */
|
1424
|
+
.styles_ObjectField {
|
1448
1425
|
display: flex;
|
1449
1426
|
flex-direction: column;
|
1450
1427
|
background-color: var(--puck-color-white);
|
1451
1428
|
border: 1px solid var(--puck-color-grey-09);
|
1452
1429
|
border-radius: 4px;
|
1453
1430
|
}
|
1454
|
-
.
|
1431
|
+
.styles_ObjectField-fieldset {
|
1455
1432
|
border: none;
|
1456
1433
|
margin: 0;
|
1457
1434
|
padding: 16px 15px;
|
1458
1435
|
}
|
1459
1436
|
|
1460
|
-
/*
|
1461
|
-
.
|
1437
|
+
/* components/Puck/components/Fields/styles.module.css */
|
1438
|
+
.styles_PuckFields {
|
1462
1439
|
position: relative;
|
1463
1440
|
font-family: var(--puck-font-family);
|
1464
1441
|
}
|
1465
|
-
.
|
1442
|
+
.styles_PuckFields-loadingOverlay {
|
1466
1443
|
background: var(--puck-color-white);
|
1467
1444
|
display: flex;
|
1468
1445
|
justify-content: center;
|
@@ -1477,20 +1454,20 @@ textarea._Input-input_1qi5b_46 {
|
|
1477
1454
|
opacity: 0.8;
|
1478
1455
|
}
|
1479
1456
|
|
1480
|
-
/*
|
1481
|
-
.
|
1457
|
+
/* components/ComponentList/styles.module.css */
|
1458
|
+
.styles_ComponentList {
|
1482
1459
|
max-width: 100%;
|
1483
1460
|
}
|
1484
|
-
.
|
1461
|
+
.styles_ComponentList--isExpanded + .styles_ComponentList {
|
1485
1462
|
margin-top: 12px;
|
1486
1463
|
}
|
1487
|
-
.
|
1464
|
+
.styles_ComponentList-content {
|
1488
1465
|
display: none;
|
1489
1466
|
}
|
1490
|
-
.
|
1467
|
+
.styles_ComponentList--isExpanded > .styles_ComponentList-content {
|
1491
1468
|
display: block;
|
1492
1469
|
}
|
1493
|
-
.
|
1470
|
+
.styles_ComponentList-title {
|
1494
1471
|
background-color: transparent;
|
1495
1472
|
border: 0;
|
1496
1473
|
color: var(--puck-color-grey-05);
|
@@ -1507,27 +1484,37 @@ textarea._Input-input_1qi5b_46 {
|
|
1507
1484
|
border-radius: 4px;
|
1508
1485
|
width: 100%;
|
1509
1486
|
}
|
1510
|
-
.
|
1487
|
+
.styles_ComponentList-title:focus-visible {
|
1511
1488
|
outline: 2px solid var(--puck-color-azure-05);
|
1512
1489
|
outline-offset: 2px;
|
1513
1490
|
}
|
1514
1491
|
@media (hover: hover) and (pointer: fine) {
|
1515
|
-
.
|
1492
|
+
.styles_ComponentList-title:hover {
|
1516
1493
|
background-color: var(--puck-color-azure-11);
|
1517
1494
|
color: var(--puck-color-azure-04);
|
1518
1495
|
transition: none;
|
1519
1496
|
}
|
1520
1497
|
}
|
1521
|
-
.
|
1498
|
+
.styles_ComponentList-title:active {
|
1522
1499
|
background-color: var(--puck-color-azure-10);
|
1523
1500
|
transition: none;
|
1524
1501
|
}
|
1525
|
-
.
|
1502
|
+
.styles_ComponentList-titleIcon {
|
1526
1503
|
margin-left: auto;
|
1527
1504
|
}
|
1528
1505
|
|
1529
|
-
/*
|
1530
|
-
.
|
1506
|
+
/* components/Puck/components/Preview/styles.module.css */
|
1507
|
+
.styles_PuckPreview {
|
1508
|
+
height: 100%;
|
1509
|
+
}
|
1510
|
+
.styles_PuckPreview-frame {
|
1511
|
+
border: none;
|
1512
|
+
height: 100%;
|
1513
|
+
width: 100%;
|
1514
|
+
}
|
1515
|
+
|
1516
|
+
/* components/LayerTree/styles.module.css */
|
1517
|
+
.styles_LayerTree {
|
1531
1518
|
color: var(--puck-color-grey-03);
|
1532
1519
|
font-family: var(--puck-font-family);
|
1533
1520
|
font-size: var(--puck-font-size-xxs);
|
@@ -1536,30 +1523,30 @@ textarea._Input-input_1qi5b_46 {
|
|
1536
1523
|
list-style: none;
|
1537
1524
|
padding: 0;
|
1538
1525
|
}
|
1539
|
-
.
|
1526
|
+
.styles_LayerTree-zoneTitle {
|
1540
1527
|
color: var(--puck-color-grey-05);
|
1541
1528
|
font-size: var(--puck-font-size-xxxs);
|
1542
1529
|
text-transform: uppercase;
|
1543
1530
|
}
|
1544
|
-
.
|
1531
|
+
.styles_LayerTree-helper {
|
1545
1532
|
text-align: center;
|
1546
1533
|
color: var(--puck-color-grey-07);
|
1547
1534
|
margin: 8px 4px;
|
1548
1535
|
}
|
1549
|
-
.
|
1536
|
+
.styles_Layer {
|
1550
1537
|
position: relative;
|
1551
1538
|
border: 1px solid transparent;
|
1552
1539
|
border-radius: 4px;
|
1553
1540
|
}
|
1554
|
-
.
|
1541
|
+
.styles_Layer-inner {
|
1555
1542
|
border: 1px solid transparent;
|
1556
1543
|
border-radius: 4px;
|
1557
1544
|
transition: color 50ms ease-in;
|
1558
1545
|
}
|
1559
|
-
.
|
1546
|
+
.styles_Layer--containsZone > .styles_Layer-inner {
|
1560
1547
|
padding-left: 0;
|
1561
1548
|
}
|
1562
|
-
.
|
1549
|
+
.styles_Layer-clickable {
|
1563
1550
|
align-items: center;
|
1564
1551
|
background: none;
|
1565
1552
|
border: 0;
|
@@ -1572,59 +1559,146 @@ textarea._Input-input_1qi5b_46 {
|
|
1572
1559
|
padding-right: 4px;
|
1573
1560
|
width: 100%;
|
1574
1561
|
}
|
1575
|
-
.
|
1562
|
+
.styles_Layer-clickable:focus-visible {
|
1576
1563
|
outline: 2px solid var(--puck-color-azure-05);
|
1577
1564
|
outline-offset: 2px;
|
1578
1565
|
position: relative;
|
1579
1566
|
z-index: 1;
|
1580
1567
|
}
|
1581
1568
|
@media (hover: hover) and (pointer: fine) {
|
1582
|
-
.
|
1569
|
+
.styles_Layer:not(.styles_Layer--isSelected) > .styles_Layer-inner:hover {
|
1583
1570
|
border-color: var(--puck-color-azure-10);
|
1584
1571
|
background: var(--puck-color-azure-11);
|
1585
1572
|
color: var(--puck-color-azure-04);
|
1586
1573
|
transition: none;
|
1587
1574
|
}
|
1588
1575
|
}
|
1589
|
-
.
|
1576
|
+
.styles_Layer--isSelected {
|
1590
1577
|
border-color: var(--puck-color-azure-08);
|
1591
1578
|
}
|
1592
|
-
.
|
1579
|
+
.styles_Layer--isSelected > .styles_Layer-inner {
|
1593
1580
|
background: var(--puck-color-azure-10);
|
1594
1581
|
}
|
1595
|
-
.
|
1596
|
-
.
|
1582
|
+
.styles_Layer--isSelected > .styles_Layer-inner > .styles_Layer-clickable > .styles_Layer-chevron,
|
1583
|
+
.styles_Layer--childIsSelected > .styles_Layer-inner > .styles_Layer-clickable > .styles_Layer-chevron {
|
1597
1584
|
transform: scaleY(-1);
|
1598
1585
|
}
|
1599
|
-
.
|
1586
|
+
.styles_Layer-zones {
|
1600
1587
|
display: none;
|
1601
1588
|
margin-left: 12px;
|
1602
1589
|
}
|
1603
|
-
.
|
1604
|
-
.
|
1590
|
+
.styles_Layer--isSelected > .styles_Layer-zones,
|
1591
|
+
.styles_Layer--childIsSelected > .styles_Layer-zones {
|
1605
1592
|
display: block;
|
1606
1593
|
}
|
1607
|
-
.
|
1594
|
+
.styles_Layer-zones > .styles_LayerTree {
|
1608
1595
|
margin-left: 12px;
|
1609
1596
|
}
|
1610
|
-
.
|
1611
|
-
.
|
1597
|
+
.styles_Layer-title,
|
1598
|
+
.styles_LayerTree-zoneTitle {
|
1612
1599
|
display: flex;
|
1613
1600
|
gap: 8px;
|
1614
1601
|
align-items: center;
|
1615
1602
|
margin: 8px 4px;
|
1616
1603
|
overflow-x: hidden;
|
1617
1604
|
}
|
1618
|
-
.
|
1605
|
+
.styles_Layer-name {
|
1619
1606
|
overflow-x: hidden;
|
1620
1607
|
text-overflow: ellipsis;
|
1621
1608
|
white-space: nowrap;
|
1622
1609
|
}
|
1623
|
-
.
|
1610
|
+
.styles_Layer-icon {
|
1624
1611
|
color: var(--puck-color-rose-07);
|
1625
1612
|
margin-top: 4px;
|
1626
1613
|
}
|
1627
|
-
.
|
1614
|
+
.styles_Layer-zoneIcon {
|
1628
1615
|
color: var(--puck-color-grey-08);
|
1629
1616
|
margin-top: 4px;
|
1630
1617
|
}
|
1618
|
+
|
1619
|
+
/* components/ViewportControls/styles.module.css */
|
1620
|
+
.styles_ViewportControls {
|
1621
|
+
display: flex;
|
1622
|
+
background: var(--puck-color-grey-11);
|
1623
|
+
box-sizing: border-box;
|
1624
|
+
border-left: 2px solid var(--puck-color-grey-11);
|
1625
|
+
justify-content: center;
|
1626
|
+
gap: 8px;
|
1627
|
+
min-width: 358px;
|
1628
|
+
padding-bottom: 16px;
|
1629
|
+
padding-left: var(--puck-space-px);
|
1630
|
+
padding-right: var(--puck-space-px);
|
1631
|
+
z-index: 1;
|
1632
|
+
}
|
1633
|
+
.styles_ViewportControls-divider {
|
1634
|
+
border-right: 1px solid var(--puck-color-grey-09);
|
1635
|
+
margin-left: 8px;
|
1636
|
+
margin-right: 8px;
|
1637
|
+
}
|
1638
|
+
.styles_ViewportControls-zoomSelect {
|
1639
|
+
appearance: none;
|
1640
|
+
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
|
1641
|
+
background-size: 10px;
|
1642
|
+
background-position: calc(100% - 12px) calc(50% + 3px);
|
1643
|
+
background-repeat: no-repeat;
|
1644
|
+
border: 0;
|
1645
|
+
font-size: var(--puck-font-size-xxxs);
|
1646
|
+
width: 96px;
|
1647
|
+
}
|
1648
|
+
.styles_ViewportButton--isActive .styles_ViewportButton-inner {
|
1649
|
+
color: var(--puck-color-azure-04);
|
1650
|
+
}
|
1651
|
+
|
1652
|
+
/* components/Puck/components/Canvas/styles.module.css */
|
1653
|
+
.styles_PuckCanvas {
|
1654
|
+
background: var(--puck-color-grey-11);
|
1655
|
+
display: flex;
|
1656
|
+
grid-area: editor;
|
1657
|
+
flex-direction: column;
|
1658
|
+
padding: var(--puck-space-px);
|
1659
|
+
overflow: auto;
|
1660
|
+
}
|
1661
|
+
@media (min-width: 1198px) {
|
1662
|
+
.styles_PuckCanvas {
|
1663
|
+
padding: calc(var(--puck-space-px) * 1.5);
|
1664
|
+
padding-top: var(--puck-space-px);
|
1665
|
+
}
|
1666
|
+
.styles_PuckCanvas:not(.styles_PuckCanvas:has(.styles_PuckCanvas-controls)) {
|
1667
|
+
padding-top: calc(var(--puck-space-px) * 1.5);
|
1668
|
+
}
|
1669
|
+
}
|
1670
|
+
.styles_PuckCanvas-inner {
|
1671
|
+
box-sizing: border-box;
|
1672
|
+
display: flex;
|
1673
|
+
height: 100%;
|
1674
|
+
justify-content: center;
|
1675
|
+
min-width: 358px;
|
1676
|
+
overflow: hidden;
|
1677
|
+
position: relative;
|
1678
|
+
width: 100%;
|
1679
|
+
}
|
1680
|
+
.styles_PuckCanvas-root {
|
1681
|
+
background: white;
|
1682
|
+
border: 1px solid var(--puck-color-grey-09);
|
1683
|
+
box-sizing: border-box;
|
1684
|
+
min-width: 321px;
|
1685
|
+
position: absolute;
|
1686
|
+
transform-origin: top;
|
1687
|
+
top: 0;
|
1688
|
+
bottom: 0;
|
1689
|
+
opacity: 0;
|
1690
|
+
}
|
1691
|
+
@media (min-width: 1198px) {
|
1692
|
+
.styles_PuckCanvas-root {
|
1693
|
+
min-width: unset;
|
1694
|
+
}
|
1695
|
+
}
|
1696
|
+
@media (prefers-reduced-motion: reduce) {
|
1697
|
+
.styles_PuckCanvas-root {
|
1698
|
+
transition: none !important;
|
1699
|
+
}
|
1700
|
+
}
|
1701
|
+
.styles_PuckCanvas--ready .styles_PuckCanvas-root {
|
1702
|
+
opacity: 1;
|
1703
|
+
transition: opacity 150ms ease-out;
|
1704
|
+
}
|