@measured/puck 0.20.0-canary.f768aab9 → 0.20.1-canary.d7404af9
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/README.md +9 -9
- package/dist/chunk-AMBEQM6V.mjs +9069 -0
- package/dist/{chunk-H6KSTNLT.mjs → chunk-NFK5JVZW.mjs} +367 -408
- package/dist/index.css +415 -330
- package/dist/index.d.mts +21 -12
- package/dist/index.d.ts +21 -12
- package/dist/index.js +3237 -2639
- package/dist/index.mjs +29 -8455
- package/dist/no-external.css +1978 -0
- package/dist/no-external.d.mts +4 -0
- package/dist/no-external.d.ts +4 -0
- package/dist/no-external.js +9953 -0
- package/dist/no-external.mjs +56 -0
- package/dist/rsc.d.mts +2 -2
- package/dist/rsc.d.ts +2 -2
- package/dist/rsc.js +139 -72
- package/dist/rsc.mjs +109 -2
- package/dist/{walk-tree-BOSl1o0G.d.mts → walk-tree-CiAkCQEp.d.mts} +181 -99
- package/dist/{walk-tree-BOSl1o0G.d.ts → walk-tree-CiAkCQEp.d.ts} +181 -99
- package/package.json +3 -2
package/dist/index.css
CHANGED
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
/*
|
|
137
|
+
/* bundle/core.css */
|
|
138
138
|
#frame-root {
|
|
139
139
|
height: 1px;
|
|
140
140
|
min-height: 100vh;
|
|
@@ -144,8 +144,10 @@
|
|
|
144
144
|
z-index: 0;
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
+
/* bundle/index.css */
|
|
148
|
+
|
|
147
149
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
|
|
148
|
-
.
|
|
150
|
+
.ActionBar {
|
|
149
151
|
align-items: center;
|
|
150
152
|
cursor: default;
|
|
151
153
|
display: flex;
|
|
@@ -161,7 +163,7 @@
|
|
|
161
163
|
font-family: var(--puck-font-family);
|
|
162
164
|
min-height: 26px;
|
|
163
165
|
}
|
|
164
|
-
.
|
|
166
|
+
.ActionBar-label {
|
|
165
167
|
color: var(--puck-color-grey-08);
|
|
166
168
|
font-size: var(--puck-font-size-xxxs);
|
|
167
169
|
font-weight: 500;
|
|
@@ -172,13 +174,13 @@
|
|
|
172
174
|
text-overflow: ellipsis;
|
|
173
175
|
white-space: nowrap;
|
|
174
176
|
}
|
|
175
|
-
.
|
|
177
|
+
.ActionBar-action + .ActionBar-label {
|
|
176
178
|
padding-inline-start: 0;
|
|
177
179
|
}
|
|
178
|
-
.
|
|
180
|
+
.ActionBar-label + .ActionBar-action {
|
|
179
181
|
margin-inline-start: -4px;
|
|
180
182
|
}
|
|
181
|
-
.
|
|
183
|
+
.ActionBar-group {
|
|
182
184
|
align-items: center;
|
|
183
185
|
border-inline-start: 0.5px solid var(--puck-color-grey-05);
|
|
184
186
|
display: flex;
|
|
@@ -186,13 +188,13 @@
|
|
|
186
188
|
padding-inline-start: 4px;
|
|
187
189
|
padding-inline-end: 4px;
|
|
188
190
|
}
|
|
189
|
-
.
|
|
191
|
+
.ActionBar-group:first-of-type {
|
|
190
192
|
border-inline-start: 0;
|
|
191
193
|
}
|
|
192
|
-
.
|
|
194
|
+
.ActionBar-group:empty {
|
|
193
195
|
display: none;
|
|
194
196
|
}
|
|
195
|
-
.
|
|
197
|
+
.ActionBar-action {
|
|
196
198
|
background: transparent;
|
|
197
199
|
border: none;
|
|
198
200
|
color: var(--puck-color-grey-08);
|
|
@@ -207,32 +209,32 @@
|
|
|
207
209
|
justify-content: center;
|
|
208
210
|
transition: color 50ms ease-in;
|
|
209
211
|
}
|
|
210
|
-
.
|
|
212
|
+
.ActionBar-action svg {
|
|
211
213
|
max-width: none !important;
|
|
212
214
|
}
|
|
213
|
-
.
|
|
215
|
+
.ActionBar-action:focus-visible {
|
|
214
216
|
outline: 2px solid var(--puck-color-azure-05);
|
|
215
217
|
outline-offset: -2px;
|
|
216
218
|
}
|
|
217
219
|
@media (hover: hover) and (pointer: fine) {
|
|
218
|
-
.
|
|
220
|
+
.ActionBar-action:hover {
|
|
219
221
|
color: var(--puck-color-azure-06);
|
|
220
222
|
transition: none;
|
|
221
223
|
}
|
|
222
224
|
}
|
|
223
|
-
.
|
|
225
|
+
.ActionBar-action:active {
|
|
224
226
|
color: var(--puck-color-azure-07);
|
|
225
227
|
transition: none;
|
|
226
228
|
}
|
|
227
|
-
.
|
|
229
|
+
.ActionBar-group * {
|
|
228
230
|
margin: 0;
|
|
229
231
|
}
|
|
230
232
|
|
|
231
233
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
|
|
232
|
-
.
|
|
234
|
+
.InputWrapper + .InputWrapper {
|
|
233
235
|
margin-top: 12px;
|
|
234
236
|
}
|
|
235
|
-
.
|
|
237
|
+
.Input-label {
|
|
236
238
|
align-items: center;
|
|
237
239
|
color: var(--puck-color-grey-04);
|
|
238
240
|
display: flex;
|
|
@@ -240,17 +242,17 @@
|
|
|
240
242
|
font-size: var(--puck-font-size-xxs);
|
|
241
243
|
font-weight: 600;
|
|
242
244
|
}
|
|
243
|
-
.
|
|
245
|
+
.Input-labelIcon {
|
|
244
246
|
color: var(--puck-color-grey-07);
|
|
245
247
|
display: flex;
|
|
246
248
|
margin-inline-end: 4px;
|
|
247
249
|
padding-inline-start: 4px;
|
|
248
250
|
}
|
|
249
|
-
.
|
|
251
|
+
.Input-disabledIcon {
|
|
250
252
|
color: var(--puck-color-grey-05);
|
|
251
253
|
margin-inline-start: auto;
|
|
252
254
|
}
|
|
253
|
-
.
|
|
255
|
+
.Input-input {
|
|
254
256
|
background: var(--puck-color-white);
|
|
255
257
|
border-width: 1px;
|
|
256
258
|
border-style: solid;
|
|
@@ -258,13 +260,18 @@
|
|
|
258
260
|
border-radius: 4px;
|
|
259
261
|
box-sizing: border-box;
|
|
260
262
|
font-family: inherit;
|
|
261
|
-
font-size:
|
|
263
|
+
font-size: 16px;
|
|
262
264
|
padding: 12px 15px;
|
|
263
265
|
transition: border-color 50ms ease-in;
|
|
264
266
|
width: 100%;
|
|
265
267
|
max-width: 100%;
|
|
266
268
|
}
|
|
267
|
-
|
|
269
|
+
@media (min-width: 458px) {
|
|
270
|
+
.Input-input {
|
|
271
|
+
font-size: 14px;
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
select.Input-input {
|
|
268
275
|
appearance: none;
|
|
269
276
|
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;
|
|
270
277
|
background-size: 12px;
|
|
@@ -273,29 +280,29 @@ select._Input-input_py9hf_26 {
|
|
|
273
280
|
background-color: var(--puck-color-white);
|
|
274
281
|
cursor: pointer;
|
|
275
282
|
}
|
|
276
|
-
select.
|
|
283
|
+
select.Input-input:dir(rtl) {
|
|
277
284
|
background-position: 12px calc(50% + 3px);
|
|
278
285
|
}
|
|
279
286
|
@media (hover: hover) and (pointer: fine) {
|
|
280
|
-
.
|
|
281
|
-
.
|
|
287
|
+
.Input:has(> input):hover .Input-input:not([readonly]),
|
|
288
|
+
.Input:has(> textarea):hover .Input-input:not([readonly]) {
|
|
282
289
|
border-color: var(--puck-color-grey-05);
|
|
283
290
|
transition: none;
|
|
284
291
|
}
|
|
285
|
-
.
|
|
292
|
+
.Input:has(> select):hover .Input-input:not([disabled]) {
|
|
286
293
|
background-color: var(--puck-color-azure-12);
|
|
287
294
|
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>");
|
|
288
295
|
border-color: var(--puck-color-grey-05);
|
|
289
296
|
transition: none;
|
|
290
297
|
}
|
|
291
298
|
}
|
|
292
|
-
.
|
|
299
|
+
.Input-input:focus {
|
|
293
300
|
border-color: var(--puck-color-grey-05);
|
|
294
301
|
outline: 2px solid var(--puck-color-azure-05);
|
|
295
302
|
transition: none;
|
|
296
303
|
}
|
|
297
|
-
.
|
|
298
|
-
.
|
|
304
|
+
.Input--readOnly > .Input-input,
|
|
305
|
+
.Input--readOnly > select.Input-input {
|
|
299
306
|
background-color: var(--puck-color-grey-11);
|
|
300
307
|
border-color: var(--puck-color-grey-09);
|
|
301
308
|
color: var(--puck-color-grey-04);
|
|
@@ -304,34 +311,34 @@ select._Input-input_py9hf_26:dir(rtl) {
|
|
|
304
311
|
outline: 0;
|
|
305
312
|
transition: none;
|
|
306
313
|
}
|
|
307
|
-
.
|
|
314
|
+
.Input-radioGroupItems {
|
|
308
315
|
display: flex;
|
|
309
316
|
border: 1px solid var(--puck-color-grey-09);
|
|
310
317
|
border-radius: 4px;
|
|
311
318
|
flex-wrap: wrap;
|
|
312
319
|
}
|
|
313
|
-
.
|
|
320
|
+
.Input-radio {
|
|
314
321
|
border-inline-end: 1px solid var(--puck-color-grey-09);
|
|
315
322
|
flex-grow: 1;
|
|
316
323
|
}
|
|
317
|
-
.
|
|
324
|
+
.Input-radio:first-of-type {
|
|
318
325
|
border-bottom-left-radius: 4px;
|
|
319
326
|
border-top-left-radius: 4px;
|
|
320
327
|
}
|
|
321
|
-
.
|
|
328
|
+
.Input-radio:first-of-type .Input-radioInner {
|
|
322
329
|
border-bottom-left-radius: 3px;
|
|
323
330
|
border-top-left-radius: 3px;
|
|
324
331
|
}
|
|
325
|
-
.
|
|
332
|
+
.Input-radio:last-of-type {
|
|
326
333
|
border-bottom-right-radius: 4px;
|
|
327
334
|
border-inline-end: 0;
|
|
328
335
|
border-top-right-radius: 4px;
|
|
329
336
|
}
|
|
330
|
-
.
|
|
337
|
+
.Input-radio:last-of-type .Input-radioInner {
|
|
331
338
|
border-bottom-right-radius: 3px;
|
|
332
339
|
border-top-right-radius: 3px;
|
|
333
340
|
}
|
|
334
|
-
.
|
|
341
|
+
.Input-radioInner {
|
|
335
342
|
background-color: var(--puck-color-white);
|
|
336
343
|
color: var(--puck-color-grey-04);
|
|
337
344
|
cursor: pointer;
|
|
@@ -340,32 +347,32 @@ select._Input-input_py9hf_26:dir(rtl) {
|
|
|
340
347
|
text-align: center;
|
|
341
348
|
transition: background-color 50ms ease-in;
|
|
342
349
|
}
|
|
343
|
-
.
|
|
350
|
+
.Input-radio:has(:focus-visible) {
|
|
344
351
|
outline: 2px solid var(--puck-color-azure-05);
|
|
345
352
|
outline-offset: 2px;
|
|
346
353
|
position: relative;
|
|
347
354
|
}
|
|
348
355
|
@media (hover: hover) and (pointer: fine) {
|
|
349
|
-
.
|
|
356
|
+
.Input-radioInner:hover {
|
|
350
357
|
background-color: var(--puck-color-azure-12);
|
|
351
358
|
transition: none;
|
|
352
359
|
}
|
|
353
360
|
}
|
|
354
|
-
.
|
|
361
|
+
.Input--readOnly .Input-radioInner {
|
|
355
362
|
background-color: var(--puck-color-white);
|
|
356
363
|
color: var(--puck-color-grey-04);
|
|
357
364
|
cursor: default;
|
|
358
365
|
}
|
|
359
|
-
.
|
|
366
|
+
.Input-radio .Input-radioInput:checked ~ .Input-radioInner {
|
|
360
367
|
background-color: var(--puck-color-azure-11);
|
|
361
368
|
color: var(--puck-color-azure-04);
|
|
362
369
|
font-weight: 500;
|
|
363
370
|
}
|
|
364
|
-
.
|
|
371
|
+
.Input--readOnly .Input-radioInput:checked ~ .Input-radioInner {
|
|
365
372
|
background-color: var(--puck-color-grey-11);
|
|
366
373
|
color: var(--puck-color-grey-04);
|
|
367
374
|
}
|
|
368
|
-
.
|
|
375
|
+
.Input-radio .Input-radioInput {
|
|
369
376
|
clip: rect(0 0 0 0);
|
|
370
377
|
clip-path: inset(100%);
|
|
371
378
|
height: 1px;
|
|
@@ -374,23 +381,23 @@ select._Input-input_py9hf_26:dir(rtl) {
|
|
|
374
381
|
white-space: nowrap;
|
|
375
382
|
width: 1px;
|
|
376
383
|
}
|
|
377
|
-
textarea.
|
|
384
|
+
textarea.Input-input {
|
|
378
385
|
margin-bottom: -4px;
|
|
379
386
|
}
|
|
380
387
|
|
|
381
388
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ArrayField/styles.module.css/#css-module-data */
|
|
382
|
-
.
|
|
389
|
+
.ArrayField {
|
|
383
390
|
display: flex;
|
|
384
391
|
flex-direction: column;
|
|
385
392
|
background: var(--puck-color-azure-11);
|
|
386
393
|
border: 1px solid var(--puck-color-grey-09);
|
|
387
394
|
border-radius: 4px;
|
|
388
395
|
}
|
|
389
|
-
.
|
|
396
|
+
.ArrayField--isDraggingFrom {
|
|
390
397
|
background-color: var(--puck-color-azure-11);
|
|
391
398
|
overflow: hidden;
|
|
392
399
|
}
|
|
393
|
-
.
|
|
400
|
+
.ArrayField-addButton {
|
|
394
401
|
background-color: var(--puck-color-white);
|
|
395
402
|
border: none;
|
|
396
403
|
border-radius: 3px;
|
|
@@ -404,63 +411,63 @@ textarea._Input-input_py9hf_26 {
|
|
|
404
411
|
text-align: left;
|
|
405
412
|
transition: background-color 50ms ease-in;
|
|
406
413
|
}
|
|
407
|
-
.
|
|
414
|
+
.ArrayField--hasItems > .ArrayField-addButton {
|
|
408
415
|
border-top: 1px solid var(--puck-color-grey-09);
|
|
409
416
|
border-top-left-radius: 0;
|
|
410
417
|
border-top-right-radius: 0;
|
|
411
418
|
}
|
|
412
|
-
.
|
|
419
|
+
.ArrayField-addButton:focus-visible {
|
|
413
420
|
outline: 2px solid var(--puck-color-azure-05);
|
|
414
421
|
outline-offset: 2px;
|
|
415
422
|
position: relative;
|
|
416
423
|
}
|
|
417
424
|
@media (hover: hover) and (pointer: fine) {
|
|
418
|
-
.
|
|
425
|
+
.ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:hover {
|
|
419
426
|
background: var(--puck-color-azure-12);
|
|
420
427
|
color: var(--puck-color-azure-04);
|
|
421
428
|
transition: none;
|
|
422
429
|
}
|
|
423
430
|
}
|
|
424
|
-
.
|
|
431
|
+
.ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:active {
|
|
425
432
|
background: var(--puck-color-azure-11);
|
|
426
433
|
color: var(--puck-color-azure-04);
|
|
427
434
|
transition: none;
|
|
428
435
|
}
|
|
429
|
-
.
|
|
436
|
+
.ArrayField-inner {
|
|
430
437
|
margin-top: -1px;
|
|
431
438
|
}
|
|
432
|
-
.
|
|
439
|
+
.ArrayFieldItem {
|
|
433
440
|
border-top-left-radius: 3px;
|
|
434
441
|
border-top-right-radius: 3px;
|
|
435
442
|
display: block;
|
|
436
443
|
position: relative;
|
|
437
444
|
}
|
|
438
|
-
.
|
|
445
|
+
.ArrayFieldItem {
|
|
439
446
|
border-top: 1px solid var(--puck-color-grey-09);
|
|
440
447
|
}
|
|
441
|
-
.
|
|
448
|
+
.ArrayFieldItem--isDragging {
|
|
442
449
|
border-top: transparent;
|
|
443
450
|
}
|
|
444
|
-
.
|
|
451
|
+
.ArrayFieldItem--isExpanded::before {
|
|
445
452
|
display: none;
|
|
446
453
|
}
|
|
447
|
-
.
|
|
454
|
+
.ArrayFieldItem--isExpanded {
|
|
448
455
|
border-bottom: 0;
|
|
449
456
|
outline-offset: 0px !important;
|
|
450
457
|
outline: 1px solid var(--puck-color-azure-07) !important;
|
|
451
458
|
z-index: 2;
|
|
452
459
|
}
|
|
453
|
-
.
|
|
460
|
+
.ArrayFieldItem--isDragging {
|
|
454
461
|
outline: 2px var(--puck-color-azure-09) solid !important;
|
|
455
462
|
}
|
|
456
|
-
.
|
|
463
|
+
.ArrayFieldItem--isDragging .ArrayFieldItem-summary:active {
|
|
457
464
|
background-color: var(--puck-color-white);
|
|
458
465
|
}
|
|
459
|
-
.
|
|
466
|
+
.ArrayFieldItem + .ArrayFieldItem {
|
|
460
467
|
border-top-left-radius: 0;
|
|
461
468
|
border-top-right-radius: 0;
|
|
462
469
|
}
|
|
463
|
-
.
|
|
470
|
+
.ArrayFieldItem-summary {
|
|
464
471
|
background: var(--puck-color-white);
|
|
465
472
|
color: var(--puck-color-grey-04);
|
|
466
473
|
cursor: pointer;
|
|
@@ -475,70 +482,70 @@ textarea._Input-input_py9hf_26 {
|
|
|
475
482
|
overflow: hidden;
|
|
476
483
|
transition: background-color 50ms ease-in;
|
|
477
484
|
}
|
|
478
|
-
.
|
|
485
|
+
.ArrayFieldItem:first-of-type > .ArrayFieldItem-summary {
|
|
479
486
|
border-top-left-radius: 3px;
|
|
480
487
|
border-top-right-radius: 3px;
|
|
481
488
|
}
|
|
482
|
-
.
|
|
489
|
+
.ArrayField--addDisabled > .ArrayField-inner > .ArrayFieldItem:last-of-type:not(.ArrayFieldItem--isExpanded) > .ArrayFieldItem-summary {
|
|
483
490
|
border-bottom-left-radius: 3px;
|
|
484
491
|
border-bottom-right-radius: 3px;
|
|
485
492
|
}
|
|
486
|
-
.
|
|
493
|
+
.ArrayField--addDisabled > .ArrayField-inner > .ArrayFieldItem--isExpanded:last-of-type {
|
|
487
494
|
border-bottom-left-radius: 3px;
|
|
488
495
|
border-bottom-right-radius: 3px;
|
|
489
496
|
}
|
|
490
|
-
.
|
|
497
|
+
.ArrayFieldItem-summary:focus-visible {
|
|
491
498
|
outline: 2px solid var(--puck-color-azure-05);
|
|
492
499
|
outline-offset: 2px;
|
|
493
500
|
}
|
|
494
501
|
@media (hover: hover) and (pointer: fine) {
|
|
495
|
-
.
|
|
502
|
+
.ArrayFieldItem-summary:hover {
|
|
496
503
|
background-color: var(--puck-color-azure-12);
|
|
497
504
|
transition: none;
|
|
498
505
|
}
|
|
499
506
|
}
|
|
500
|
-
.
|
|
507
|
+
.ArrayFieldItem-summary:active {
|
|
501
508
|
background-color: var(--puck-color-azure-11);
|
|
502
509
|
transition: none;
|
|
503
510
|
}
|
|
504
|
-
.
|
|
511
|
+
.ArrayFieldItem--isExpanded > .ArrayFieldItem-summary {
|
|
505
512
|
background: var(--puck-color-azure-11);
|
|
506
513
|
color: var(--puck-color-azure-04);
|
|
507
514
|
font-weight: 600;
|
|
508
515
|
transition: none;
|
|
509
516
|
}
|
|
510
|
-
.
|
|
517
|
+
.ArrayFieldItem-body {
|
|
511
518
|
background: var(--puck-color-white);
|
|
512
519
|
display: none;
|
|
513
520
|
}
|
|
514
|
-
.
|
|
521
|
+
.ArrayFieldItem--isExpanded > .ArrayFieldItem-body {
|
|
515
522
|
display: block;
|
|
516
523
|
}
|
|
517
|
-
.
|
|
524
|
+
.ArrayFieldItem-fieldset {
|
|
518
525
|
border: none;
|
|
519
526
|
border-top: 1px solid var(--puck-color-grey-09);
|
|
520
527
|
margin: 0;
|
|
521
528
|
min-width: 0;
|
|
522
529
|
padding: 16px 15px;
|
|
523
530
|
}
|
|
524
|
-
.
|
|
531
|
+
.ArrayFieldItem-rhs {
|
|
525
532
|
display: flex;
|
|
526
533
|
gap: 4px;
|
|
527
534
|
align-items: center;
|
|
528
535
|
}
|
|
529
|
-
.
|
|
536
|
+
.ArrayFieldItem-actions {
|
|
530
537
|
color: var(--puck-color-grey-04);
|
|
531
538
|
display: flex;
|
|
532
539
|
gap: 4px;
|
|
533
540
|
opacity: 0;
|
|
534
541
|
}
|
|
535
|
-
.
|
|
536
|
-
.
|
|
542
|
+
.ArrayFieldItem-summary:focus-within > .ArrayFieldItem-rhs > .ArrayFieldItem-actions,
|
|
543
|
+
.ArrayFieldItem-summary:hover > .ArrayFieldItem-rhs > .ArrayFieldItem-actions {
|
|
537
544
|
opacity: 1;
|
|
538
545
|
}
|
|
539
546
|
|
|
540
547
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
|
|
541
|
-
.
|
|
548
|
+
.IconButton {
|
|
542
549
|
align-items: center;
|
|
543
550
|
background: transparent;
|
|
544
551
|
border: none;
|
|
@@ -550,23 +557,23 @@ textarea._Input-input_py9hf_26 {
|
|
|
550
557
|
padding: 4px;
|
|
551
558
|
transition: background-color 50ms ease-in, color 50ms ease-in;
|
|
552
559
|
}
|
|
553
|
-
.
|
|
560
|
+
.IconButton:focus-visible {
|
|
554
561
|
outline: 2px solid var(--puck-color-azure-05);
|
|
555
562
|
outline-offset: -2px;
|
|
556
563
|
}
|
|
557
564
|
@media (hover: hover) and (pointer: fine) {
|
|
558
|
-
.
|
|
565
|
+
.IconButton:hover:not(.IconButton--disabled) {
|
|
559
566
|
background: var(--puck-color-azure-12);
|
|
560
567
|
color: var(--puck-color-azure-04);
|
|
561
568
|
cursor: pointer;
|
|
562
569
|
transition: none;
|
|
563
570
|
}
|
|
564
571
|
}
|
|
565
|
-
.
|
|
572
|
+
.IconButton:active {
|
|
566
573
|
background: var(--puck-color-azure-11);
|
|
567
574
|
transition: none;
|
|
568
575
|
}
|
|
569
|
-
.
|
|
576
|
+
.IconButton-title {
|
|
570
577
|
clip: rect(0 0 0 0);
|
|
571
578
|
clip-path: inset(100%);
|
|
572
579
|
height: 1px;
|
|
@@ -575,12 +582,12 @@ textarea._Input-input_py9hf_26 {
|
|
|
575
582
|
white-space: nowrap;
|
|
576
583
|
width: 1px;
|
|
577
584
|
}
|
|
578
|
-
.
|
|
585
|
+
.IconButton--disabled {
|
|
579
586
|
color: var(--puck-color-grey-07);
|
|
580
587
|
}
|
|
581
588
|
|
|
582
589
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */
|
|
583
|
-
@keyframes
|
|
590
|
+
@keyframes loader-animation {
|
|
584
591
|
0% {
|
|
585
592
|
transform: rotate(0deg) scale(1);
|
|
586
593
|
}
|
|
@@ -591,28 +598,28 @@ textarea._Input-input_py9hf_26 {
|
|
|
591
598
|
transform: rotate(360deg) scale(1);
|
|
592
599
|
}
|
|
593
600
|
}
|
|
594
|
-
.
|
|
601
|
+
.Loader {
|
|
595
602
|
background: transparent;
|
|
596
603
|
border-radius: 100%;
|
|
597
604
|
border: 2px solid currentColor;
|
|
598
605
|
border-bottom-color: transparent;
|
|
599
606
|
display: inline-block;
|
|
600
|
-
animation:
|
|
607
|
+
animation: loader-animation 1s 0s infinite linear;
|
|
601
608
|
animation-fill-mode: both;
|
|
602
609
|
}
|
|
603
610
|
|
|
604
611
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
|
|
605
|
-
.
|
|
612
|
+
.DragIcon {
|
|
606
613
|
color: var(--puck-color-grey-05);
|
|
607
614
|
cursor: grab;
|
|
608
615
|
padding: 4px;
|
|
609
616
|
border-radius: 4px;
|
|
610
617
|
}
|
|
611
|
-
.
|
|
618
|
+
.DragIcon--disabled {
|
|
612
619
|
cursor: no-drop;
|
|
613
620
|
}
|
|
614
621
|
@media (hover: hover) and (pointer: fine) {
|
|
615
|
-
.
|
|
622
|
+
.DragIcon:not(.DragIcon--disabled):hover {
|
|
616
623
|
color: var(--puck-color-azure-05);
|
|
617
624
|
background-color: var(--puck-color-azure-12);
|
|
618
625
|
}
|
|
@@ -632,10 +639,10 @@ textarea._Input-input_py9hf_26 {
|
|
|
632
639
|
}
|
|
633
640
|
|
|
634
641
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
|
|
635
|
-
.
|
|
642
|
+
.ExternalInput-actions {
|
|
636
643
|
display: flex;
|
|
637
644
|
}
|
|
638
|
-
.
|
|
645
|
+
.ExternalInput-button {
|
|
639
646
|
display: flex;
|
|
640
647
|
gap: 8px;
|
|
641
648
|
align-items: center;
|
|
@@ -653,16 +660,16 @@ textarea._Input-input_py9hf_26 {
|
|
|
653
660
|
overflow: hidden;
|
|
654
661
|
flex-grow: 1;
|
|
655
662
|
}
|
|
656
|
-
.
|
|
663
|
+
.ExternalInput--dataSelected .ExternalInput-button {
|
|
657
664
|
color: var(--puck-color-grey-03);
|
|
658
665
|
display: block;
|
|
659
666
|
border-top-right-radius: 0px;
|
|
660
667
|
border-bottom-right-radius: 0px;
|
|
661
668
|
}
|
|
662
|
-
.
|
|
669
|
+
.ExternalInput--readOnly .ExternalInput-button {
|
|
663
670
|
background-color: var(--puck-color-grey-11);
|
|
664
671
|
}
|
|
665
|
-
.
|
|
672
|
+
.ExternalInput-detachButton {
|
|
666
673
|
border: 1px solid var(--puck-color-grey-09);
|
|
667
674
|
border-top-right-radius: 4px;
|
|
668
675
|
border-bottom-right-radius: 4px;
|
|
@@ -677,28 +684,28 @@ textarea._Input-input_py9hf_26 {
|
|
|
677
684
|
transition: background-color 50ms ease-in, color 50ms ease-in;
|
|
678
685
|
margin-inline-start: -1px;
|
|
679
686
|
}
|
|
680
|
-
.
|
|
681
|
-
.
|
|
687
|
+
.ExternalInput-button:focus-visible,
|
|
688
|
+
.ExternalInput-detachButton:focus-visible {
|
|
682
689
|
outline: 2px solid var(--puck-color-azure-05);
|
|
683
690
|
outline-offset: 2px;
|
|
684
691
|
z-index: 1;
|
|
685
692
|
}
|
|
686
693
|
@media (hover: hover) and (pointer: fine) {
|
|
687
|
-
.
|
|
688
|
-
.
|
|
694
|
+
.ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-button:hover,
|
|
695
|
+
.ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:hover {
|
|
689
696
|
background: var(--puck-color-azure-12);
|
|
690
697
|
transition: none;
|
|
691
698
|
}
|
|
692
|
-
.
|
|
699
|
+
.ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:hover {
|
|
693
700
|
color: var(--puck-color-azure-04);
|
|
694
701
|
}
|
|
695
702
|
}
|
|
696
|
-
.
|
|
697
|
-
.
|
|
703
|
+
.ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-button:active,
|
|
704
|
+
.ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:active {
|
|
698
705
|
background: var(--puck-color-azure-11);
|
|
699
706
|
transition: none;
|
|
700
707
|
}
|
|
701
|
-
.
|
|
708
|
+
.ExternalInputModal {
|
|
702
709
|
color: var(--puck-color-black);
|
|
703
710
|
display: grid;
|
|
704
711
|
grid-template-rows: min-content minmax(128px, 100%) min-content;
|
|
@@ -707,35 +714,35 @@ textarea._Input-input_py9hf_26 {
|
|
|
707
714
|
min-height: 50dvh;
|
|
708
715
|
max-height: 90dvh;
|
|
709
716
|
}
|
|
710
|
-
.
|
|
717
|
+
.ExternalInputModal-grid {
|
|
711
718
|
display: flex;
|
|
712
719
|
flex-direction: column;
|
|
713
720
|
}
|
|
714
721
|
@media (min-width: 458px) {
|
|
715
|
-
.
|
|
722
|
+
.ExternalInputModal-grid {
|
|
716
723
|
display: grid;
|
|
717
724
|
grid-template-columns: 100%;
|
|
718
725
|
}
|
|
719
|
-
.
|
|
726
|
+
.ExternalInputModal--filtersToggled .ExternalInputModal-grid {
|
|
720
727
|
grid-template-columns: 25% 75%;
|
|
721
728
|
}
|
|
722
729
|
}
|
|
723
|
-
.
|
|
730
|
+
.ExternalInputModal-filters {
|
|
724
731
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
|
725
732
|
}
|
|
726
|
-
.
|
|
733
|
+
.ExternalInputModal--filtersToggled .ExternalInputModal-filters {
|
|
727
734
|
display: none;
|
|
728
735
|
}
|
|
729
736
|
@media (min-width: 458px) {
|
|
730
|
-
.
|
|
737
|
+
.ExternalInputModal-filters {
|
|
731
738
|
border-inline-end: 1px solid var(--puck-color-grey-09);
|
|
732
739
|
display: none;
|
|
733
740
|
}
|
|
734
|
-
.
|
|
741
|
+
.ExternalInputModal--filtersToggled .ExternalInputModal-filters {
|
|
735
742
|
display: block;
|
|
736
743
|
}
|
|
737
744
|
}
|
|
738
|
-
.
|
|
745
|
+
.ExternalInputModal-masthead {
|
|
739
746
|
background-color: var(--puck-color-grey-12);
|
|
740
747
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
|
741
748
|
display: flex;
|
|
@@ -743,13 +750,13 @@ textarea._Input-input_py9hf_26 {
|
|
|
743
750
|
gap: 24px;
|
|
744
751
|
padding: 24px;
|
|
745
752
|
}
|
|
746
|
-
.
|
|
753
|
+
.ExternalInputModal-tableWrapper {
|
|
747
754
|
position: relative;
|
|
748
755
|
overflow-x: auto;
|
|
749
756
|
overflow-y: auto;
|
|
750
757
|
flex-grow: 1;
|
|
751
758
|
}
|
|
752
|
-
.
|
|
759
|
+
.ExternalInputModal-table {
|
|
753
760
|
border-collapse: unset;
|
|
754
761
|
border-spacing: 0px;
|
|
755
762
|
color: var(--puck-color-grey-02);
|
|
@@ -757,51 +764,51 @@ textarea._Input-input_py9hf_26 {
|
|
|
757
764
|
z-index: 0;
|
|
758
765
|
min-width: 100%;
|
|
759
766
|
}
|
|
760
|
-
.
|
|
767
|
+
.ExternalInputModal-thead {
|
|
761
768
|
background-color: var(--puck-color-white);
|
|
762
769
|
position: sticky;
|
|
763
770
|
top: 0;
|
|
764
771
|
z-index: 1;
|
|
765
772
|
}
|
|
766
|
-
.
|
|
773
|
+
.ExternalInputModal-th {
|
|
767
774
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
|
768
775
|
color: var(--puck-color-grey-04);
|
|
769
776
|
font-weight: 500;
|
|
770
777
|
font-size: 14px;
|
|
771
778
|
padding: 16px 24px;
|
|
772
779
|
}
|
|
773
|
-
.
|
|
780
|
+
.ExternalInputModal-td {
|
|
774
781
|
border-bottom: 1px solid var(--puck-color-grey-10);
|
|
775
782
|
padding: 16px 24px;
|
|
776
783
|
}
|
|
777
|
-
.
|
|
784
|
+
.ExternalInputModal-tr .ExternalInputModal-td:first-of-type {
|
|
778
785
|
font-weight: 500;
|
|
779
786
|
width: 1%;
|
|
780
787
|
white-space: nowrap;
|
|
781
788
|
}
|
|
782
789
|
@media (hover: hover) and (pointer: fine) {
|
|
783
|
-
.
|
|
790
|
+
.ExternalInputModal-tbody .ExternalInputModal-tr:hover {
|
|
784
791
|
background: var(--puck-color-azure-12);
|
|
785
792
|
color: var(--puck-color-azure-04);
|
|
786
793
|
cursor: pointer;
|
|
787
794
|
position: relative;
|
|
788
795
|
margin-inline-start: -5px;
|
|
789
796
|
}
|
|
790
|
-
.
|
|
797
|
+
.ExternalInputModal-tbody .ExternalInputModal-tr:hover .ExternalInputModal-td:first-of-type {
|
|
791
798
|
border-inline-start: 4px solid var(--puck-color-azure-04);
|
|
792
799
|
padding-inline-start: 20px;
|
|
793
800
|
}
|
|
794
801
|
}
|
|
795
|
-
.
|
|
802
|
+
.ExternalInputModal-tbody .ExternalInputModal-tr:last-of-type .ExternalInputModal-td {
|
|
796
803
|
border-bottom: none;
|
|
797
804
|
}
|
|
798
|
-
.
|
|
805
|
+
.ExternalInputModal-tableWrapper {
|
|
799
806
|
display: none;
|
|
800
807
|
}
|
|
801
|
-
.
|
|
808
|
+
.ExternalInputModal--hasData .ExternalInputModal-tableWrapper {
|
|
802
809
|
display: block;
|
|
803
810
|
}
|
|
804
|
-
.
|
|
811
|
+
.ExternalInputModal-loadingBanner {
|
|
805
812
|
display: none;
|
|
806
813
|
background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
|
|
807
814
|
padding: 64px;
|
|
@@ -813,21 +820,21 @@ textarea._Input-input_py9hf_26 {
|
|
|
813
820
|
right: 0;
|
|
814
821
|
bottom: 0;
|
|
815
822
|
}
|
|
816
|
-
.
|
|
823
|
+
.ExternalInputModal--isLoading .ExternalInputModal-loadingBanner {
|
|
817
824
|
display: flex;
|
|
818
825
|
}
|
|
819
|
-
.
|
|
826
|
+
.ExternalInputModal-searchForm {
|
|
820
827
|
display: flex;
|
|
821
828
|
flex-wrap: wrap;
|
|
822
829
|
gap: 12px;
|
|
823
830
|
flex-grow: 1;
|
|
824
831
|
}
|
|
825
832
|
@media (min-width: 458px) {
|
|
826
|
-
.
|
|
833
|
+
.ExternalInputModal-searchForm {
|
|
827
834
|
flex-wrap: nowrap;
|
|
828
835
|
}
|
|
829
836
|
}
|
|
830
|
-
.
|
|
837
|
+
.ExternalInputModal-search {
|
|
831
838
|
display: flex;
|
|
832
839
|
background: var(--puck-color-white);
|
|
833
840
|
border-width: 1px;
|
|
@@ -837,18 +844,18 @@ textarea._Input-input_py9hf_26 {
|
|
|
837
844
|
flex-grow: 1;
|
|
838
845
|
transition: border-color 50ms ease-in;
|
|
839
846
|
}
|
|
840
|
-
.
|
|
847
|
+
.ExternalInputModal-search:focus-within {
|
|
841
848
|
border-color: var(--puck-color-grey-05);
|
|
842
849
|
outline: 2px solid var(--puck-color-azure-05);
|
|
843
850
|
transition: none;
|
|
844
851
|
}
|
|
845
852
|
@media (hover: hover) and (pointer: fine) {
|
|
846
|
-
.
|
|
853
|
+
.ExternalInputModal-search:hover {
|
|
847
854
|
border-color: var(--puck-color-grey-05);
|
|
848
855
|
transition: none;
|
|
849
856
|
}
|
|
850
857
|
}
|
|
851
|
-
.
|
|
858
|
+
.ExternalInputModal-searchIcon {
|
|
852
859
|
align-items: center;
|
|
853
860
|
background: var(--puck-color-grey-12);
|
|
854
861
|
border-bottom-left-radius: 4px;
|
|
@@ -860,17 +867,17 @@ textarea._Input-input_py9hf_26 {
|
|
|
860
867
|
padding: 12px 15px;
|
|
861
868
|
transition: color 50ms ease-in;
|
|
862
869
|
}
|
|
863
|
-
.
|
|
870
|
+
.ExternalInputModal-search:focus-within .ExternalInputModal-searchIcon {
|
|
864
871
|
color: var(--puck-color-grey-04);
|
|
865
872
|
transition: none;
|
|
866
873
|
}
|
|
867
874
|
@media (hover: hover) and (pointer: fine) {
|
|
868
|
-
.
|
|
875
|
+
.ExternalInputModal-search:hover .ExternalInputModal-searchIcon {
|
|
869
876
|
color: var(--puck-color-grey-04);
|
|
870
877
|
transition: none;
|
|
871
878
|
}
|
|
872
879
|
}
|
|
873
|
-
.
|
|
880
|
+
.ExternalInputModal-searchIconText {
|
|
874
881
|
clip: rect(0 0 0 0);
|
|
875
882
|
clip-path: inset(100%);
|
|
876
883
|
height: 1px;
|
|
@@ -879,7 +886,7 @@ textarea._Input-input_py9hf_26 {
|
|
|
879
886
|
white-space: nowrap;
|
|
880
887
|
width: 1px;
|
|
881
888
|
}
|
|
882
|
-
.
|
|
889
|
+
.ExternalInputModal-searchInput {
|
|
883
890
|
border: none;
|
|
884
891
|
border-radius: 4px;
|
|
885
892
|
background: var(--puck-color-white);
|
|
@@ -888,35 +895,35 @@ textarea._Input-input_py9hf_26 {
|
|
|
888
895
|
padding: 12px 15px;
|
|
889
896
|
width: 100%;
|
|
890
897
|
}
|
|
891
|
-
.
|
|
898
|
+
.ExternalInputModal-searchInput:focus {
|
|
892
899
|
outline: 0;
|
|
893
900
|
}
|
|
894
|
-
.
|
|
901
|
+
.ExternalInputModal-searchActions {
|
|
895
902
|
display: flex;
|
|
896
903
|
gap: 8px;
|
|
897
904
|
height: 44px;
|
|
898
905
|
width: 100%;
|
|
899
906
|
}
|
|
900
907
|
@media (min-width: 458px) {
|
|
901
|
-
.
|
|
908
|
+
.ExternalInputModal-searchActions {
|
|
902
909
|
width: auto;
|
|
903
910
|
}
|
|
904
911
|
}
|
|
905
|
-
.
|
|
912
|
+
.ExternalInputModal-searchActionIcon {
|
|
906
913
|
align-self: center;
|
|
907
914
|
}
|
|
908
|
-
.
|
|
915
|
+
.ExternalInputModal-footerContainer {
|
|
909
916
|
background-color: var(--puck-color-grey-12);
|
|
910
917
|
border-top: 1px solid var(--puck-color-grey-09);
|
|
911
918
|
color: var(--puck-color-grey-04);
|
|
912
919
|
padding: 16px;
|
|
913
920
|
}
|
|
914
|
-
.
|
|
921
|
+
.ExternalInputModal-footer {
|
|
915
922
|
font-weight: 500;
|
|
916
923
|
font-size: 14px;
|
|
917
924
|
text-align: right;
|
|
918
925
|
}
|
|
919
|
-
.
|
|
926
|
+
.ExternalInputModal-field {
|
|
920
927
|
color: var(--puck-color-grey-04);
|
|
921
928
|
margin: 16px;
|
|
922
929
|
margin-bottom: 12px;
|
|
@@ -924,7 +931,7 @@ textarea._Input-input_py9hf_26 {
|
|
|
924
931
|
}
|
|
925
932
|
|
|
926
933
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
|
|
927
|
-
.
|
|
934
|
+
.Modal {
|
|
928
935
|
background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
|
|
929
936
|
display: none;
|
|
930
937
|
justify-content: center;
|
|
@@ -937,10 +944,10 @@ textarea._Input-input_py9hf_26 {
|
|
|
937
944
|
z-index: 1;
|
|
938
945
|
padding: 32px;
|
|
939
946
|
}
|
|
940
|
-
.
|
|
947
|
+
.Modal--isOpen {
|
|
941
948
|
display: flex;
|
|
942
949
|
}
|
|
943
|
-
.
|
|
950
|
+
.Modal-inner {
|
|
944
951
|
width: 100%;
|
|
945
952
|
max-width: 1024px;
|
|
946
953
|
border-radius: 8px;
|
|
@@ -952,44 +959,44 @@ textarea._Input-input_py9hf_26 {
|
|
|
952
959
|
}
|
|
953
960
|
|
|
954
961
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
|
|
955
|
-
.
|
|
962
|
+
.Heading {
|
|
956
963
|
display: block;
|
|
957
964
|
color: var(--puck-color-black);
|
|
958
965
|
font-weight: 700;
|
|
959
966
|
margin: 0;
|
|
960
967
|
}
|
|
961
|
-
.
|
|
968
|
+
.Heading b {
|
|
962
969
|
font-weight: 700;
|
|
963
970
|
}
|
|
964
|
-
.
|
|
971
|
+
.Heading--xxxxl {
|
|
965
972
|
font-size: var(--puck-font-size-xxxxl);
|
|
966
973
|
letter-spacing: 0.08ch;
|
|
967
974
|
font-weight: 800;
|
|
968
975
|
}
|
|
969
|
-
.
|
|
976
|
+
.Heading--xxxl {
|
|
970
977
|
font-size: var(--puck-font-size-xxxl);
|
|
971
978
|
}
|
|
972
|
-
.
|
|
979
|
+
.Heading--xxl {
|
|
973
980
|
font-size: var(--puck-font-size-xxl);
|
|
974
981
|
}
|
|
975
|
-
.
|
|
982
|
+
.Heading--xl {
|
|
976
983
|
font-size: var(--puck-font-size-xl);
|
|
977
984
|
}
|
|
978
|
-
.
|
|
985
|
+
.Heading--l {
|
|
979
986
|
font-size: var(--puck-font-size-l);
|
|
980
987
|
}
|
|
981
|
-
.
|
|
988
|
+
.Heading--m {
|
|
982
989
|
font-size: var(--puck-font-size-m);
|
|
983
990
|
}
|
|
984
|
-
.
|
|
991
|
+
.Heading--s {
|
|
985
992
|
font-size: var(--puck-font-size-s);
|
|
986
993
|
}
|
|
987
|
-
.
|
|
994
|
+
.Heading--xs {
|
|
988
995
|
font-size: var(--puck-font-size-xs);
|
|
989
996
|
}
|
|
990
997
|
|
|
991
998
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
|
|
992
|
-
.
|
|
999
|
+
.Button {
|
|
993
1000
|
appearance: none;
|
|
994
1001
|
background: none;
|
|
995
1002
|
border: 1px solid transparent;
|
|
@@ -1011,81 +1018,81 @@ textarea._Input-input_py9hf_26 {
|
|
|
1011
1018
|
white-space: nowrap;
|
|
1012
1019
|
margin: 0;
|
|
1013
1020
|
}
|
|
1014
|
-
.
|
|
1015
|
-
.
|
|
1021
|
+
.Button:hover,
|
|
1022
|
+
.Button:active {
|
|
1016
1023
|
transition: none;
|
|
1017
1024
|
}
|
|
1018
|
-
.
|
|
1025
|
+
.Button--medium {
|
|
1019
1026
|
min-height: 34px;
|
|
1020
1027
|
padding-bottom: 7px;
|
|
1021
1028
|
padding-inline-start: 19px;
|
|
1022
1029
|
padding-inline-end: 19px;
|
|
1023
1030
|
padding-top: 7px;
|
|
1024
1031
|
}
|
|
1025
|
-
.
|
|
1032
|
+
.Button--large {
|
|
1026
1033
|
padding-bottom: 11px;
|
|
1027
1034
|
padding-inline-start: 19px;
|
|
1028
1035
|
padding-inline-end: 19px;
|
|
1029
1036
|
padding-top: 11px;
|
|
1030
1037
|
}
|
|
1031
|
-
.
|
|
1038
|
+
.Button-icon {
|
|
1032
1039
|
margin-top: 2px;
|
|
1033
1040
|
}
|
|
1034
|
-
.
|
|
1041
|
+
.Button--primary {
|
|
1035
1042
|
background: var(--puck-color-azure-04);
|
|
1036
1043
|
}
|
|
1037
|
-
.
|
|
1044
|
+
.Button:focus-visible {
|
|
1038
1045
|
outline: 2px solid var(--puck-color-azure-05);
|
|
1039
1046
|
outline-offset: 2px;
|
|
1040
1047
|
}
|
|
1041
1048
|
@media (hover: hover) and (pointer: fine) {
|
|
1042
|
-
.
|
|
1049
|
+
.Button--primary:hover {
|
|
1043
1050
|
background-color: var(--puck-color-azure-03);
|
|
1044
1051
|
}
|
|
1045
1052
|
}
|
|
1046
|
-
.
|
|
1053
|
+
.Button--primary:active {
|
|
1047
1054
|
background-color: var(--puck-color-azure-02);
|
|
1048
1055
|
}
|
|
1049
|
-
.
|
|
1056
|
+
.Button--secondary {
|
|
1050
1057
|
border: 1px solid currentColor;
|
|
1051
1058
|
color: currentColor;
|
|
1052
1059
|
}
|
|
1053
1060
|
@media (hover: hover) and (pointer: fine) {
|
|
1054
|
-
.
|
|
1061
|
+
.Button--secondary:hover {
|
|
1055
1062
|
background-color: var(--puck-color-azure-12);
|
|
1056
1063
|
color: var(--puck-color-black);
|
|
1057
1064
|
}
|
|
1058
1065
|
}
|
|
1059
|
-
.
|
|
1066
|
+
.Button--secondary:active {
|
|
1060
1067
|
background-color: var(--puck-color-azure-11);
|
|
1061
1068
|
color: var(--puck-color-black);
|
|
1062
1069
|
}
|
|
1063
|
-
.
|
|
1070
|
+
.Button--flush {
|
|
1064
1071
|
border-radius: 0;
|
|
1065
1072
|
}
|
|
1066
|
-
.
|
|
1067
|
-
.
|
|
1073
|
+
.Button--disabled,
|
|
1074
|
+
.Button--disabled:hover {
|
|
1068
1075
|
background-color: var(--puck-color-grey-07);
|
|
1069
1076
|
color: var(--puck-color-grey-03);
|
|
1070
1077
|
cursor: not-allowed;
|
|
1071
1078
|
}
|
|
1072
|
-
.
|
|
1079
|
+
.Button--fullWidth {
|
|
1073
1080
|
justify-content: center;
|
|
1074
1081
|
width: 100%;
|
|
1075
1082
|
}
|
|
1076
|
-
.
|
|
1083
|
+
.Button-spinner {
|
|
1077
1084
|
padding-inline-start: 8px;
|
|
1078
1085
|
}
|
|
1079
1086
|
|
|
1080
1087
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ObjectField/styles.module.css/#css-module-data */
|
|
1081
|
-
.
|
|
1088
|
+
.ObjectField {
|
|
1082
1089
|
display: flex;
|
|
1083
1090
|
flex-direction: column;
|
|
1084
1091
|
background-color: var(--puck-color-white);
|
|
1085
1092
|
border: 1px solid var(--puck-color-grey-09);
|
|
1086
1093
|
border-radius: 4px;
|
|
1087
1094
|
}
|
|
1088
|
-
.
|
|
1095
|
+
.ObjectField-fieldset {
|
|
1089
1096
|
border: none;
|
|
1090
1097
|
margin: 0;
|
|
1091
1098
|
min-width: 0;
|
|
@@ -1093,16 +1100,16 @@ textarea._Input-input_py9hf_26 {
|
|
|
1093
1100
|
}
|
|
1094
1101
|
|
|
1095
1102
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
|
|
1096
|
-
.
|
|
1103
|
+
.Drawer {
|
|
1097
1104
|
display: flex;
|
|
1098
1105
|
flex-direction: column;
|
|
1099
1106
|
font-family: var(--puck-font-family);
|
|
1100
1107
|
gap: 12px;
|
|
1101
1108
|
}
|
|
1102
|
-
.
|
|
1109
|
+
.Drawer-draggable {
|
|
1103
1110
|
position: relative;
|
|
1104
1111
|
}
|
|
1105
|
-
.
|
|
1112
|
+
.Drawer-draggableBg {
|
|
1106
1113
|
position: absolute;
|
|
1107
1114
|
top: 0;
|
|
1108
1115
|
right: 0;
|
|
@@ -1111,7 +1118,7 @@ textarea._Input-input_py9hf_26 {
|
|
|
1111
1118
|
pointer-events: none;
|
|
1112
1119
|
z-index: -1;
|
|
1113
1120
|
}
|
|
1114
|
-
.
|
|
1121
|
+
.DrawerItem-draggable {
|
|
1115
1122
|
background: var(--puck-color-white);
|
|
1116
1123
|
cursor: grab;
|
|
1117
1124
|
padding: 12px;
|
|
@@ -1123,54 +1130,58 @@ textarea._Input-input_py9hf_26 {
|
|
|
1123
1130
|
align-items: center;
|
|
1124
1131
|
transition: background-color 50ms ease-in, color 50ms ease-in;
|
|
1125
1132
|
}
|
|
1126
|
-
.
|
|
1133
|
+
.DrawerItem--disabled .DrawerItem-draggable {
|
|
1127
1134
|
background: var(--puck-color-grey-11);
|
|
1128
1135
|
color: var(--puck-color-grey-05);
|
|
1129
1136
|
cursor: not-allowed;
|
|
1130
1137
|
}
|
|
1131
|
-
.
|
|
1138
|
+
.DrawerItem:focus-visible {
|
|
1132
1139
|
outline: 0;
|
|
1133
1140
|
}
|
|
1134
|
-
.
|
|
1141
|
+
.Drawer:not(.Drawer--isDraggingFrom) .DrawerItem:focus-visible .DrawerItem-draggable {
|
|
1135
1142
|
border-radius: 4px;
|
|
1136
1143
|
outline: 2px solid var(--puck-color-azure-05);
|
|
1137
1144
|
outline-offset: 2px;
|
|
1138
1145
|
}
|
|
1139
1146
|
@media (hover: hover) and (pointer: fine) {
|
|
1140
|
-
.
|
|
1147
|
+
.Drawer:not(.Drawer--isDraggingFrom) .DrawerItem:not(.DrawerItem--disabled) .DrawerItem-draggable:hover {
|
|
1141
1148
|
background-color: var(--puck-color-azure-12);
|
|
1142
1149
|
color: var(--puck-color-azure-04);
|
|
1143
1150
|
transition: none;
|
|
1144
1151
|
}
|
|
1145
1152
|
}
|
|
1146
|
-
.
|
|
1153
|
+
.DrawerItem-name {
|
|
1147
1154
|
overflow-x: hidden;
|
|
1148
1155
|
text-overflow: ellipsis;
|
|
1149
1156
|
white-space: nowrap;
|
|
1150
1157
|
}
|
|
1151
1158
|
|
|
1152
1159
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
|
|
1153
|
-
.
|
|
1160
|
+
.DraggableComponent {
|
|
1154
1161
|
position: absolute;
|
|
1155
1162
|
pointer-events: none;
|
|
1156
1163
|
--overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
|
|
1157
1164
|
}
|
|
1158
|
-
.
|
|
1159
|
-
cursor: pointer;
|
|
1165
|
+
.DraggableComponent-overlayWrapper {
|
|
1160
1166
|
height: 100%;
|
|
1161
1167
|
width: 100%;
|
|
1162
1168
|
top: 0;
|
|
1163
|
-
outline: 2px var(--puck-color-azure-09) solid;
|
|
1164
|
-
outline-offset: -2px;
|
|
1165
1169
|
position: absolute;
|
|
1166
1170
|
pointer-events: none;
|
|
1167
1171
|
box-sizing: border-box;
|
|
1168
1172
|
z-index: 1;
|
|
1169
1173
|
}
|
|
1170
|
-
.
|
|
1174
|
+
.DraggableComponent-overlay {
|
|
1175
|
+
cursor: pointer;
|
|
1176
|
+
height: 100%;
|
|
1177
|
+
outline: 2px var(--puck-color-azure-09) solid;
|
|
1178
|
+
outline-offset: -2px;
|
|
1179
|
+
width: 100%;
|
|
1180
|
+
}
|
|
1181
|
+
.DraggableComponent:focus-visible > .DraggableComponent-overlayWrapper {
|
|
1171
1182
|
outline: 1px solid var(--puck-color-azure-05);
|
|
1172
1183
|
}
|
|
1173
|
-
.
|
|
1184
|
+
.DraggableComponent-loadingOverlay {
|
|
1174
1185
|
background: var(--puck-color-white);
|
|
1175
1186
|
color: var(--puck-color-grey-03);
|
|
1176
1187
|
border-radius: 4px;
|
|
@@ -1185,29 +1196,27 @@ textarea._Input-input_py9hf_26 {
|
|
|
1185
1196
|
opacity: 0.8;
|
|
1186
1197
|
z-index: 1;
|
|
1187
1198
|
}
|
|
1188
|
-
.
|
|
1199
|
+
.DraggableComponent--hover > .DraggableComponent-overlayWrapper > .DraggableComponent-overlay {
|
|
1189
1200
|
background: var(--overlay-background);
|
|
1190
|
-
}
|
|
1191
|
-
._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
|
|
1192
1201
|
outline: 2px var(--puck-color-azure-09) solid;
|
|
1193
1202
|
}
|
|
1194
|
-
.
|
|
1203
|
+
.DraggableComponent--isSelected > .DraggableComponent-overlayWrapper > .DraggableComponent-overlay {
|
|
1195
1204
|
outline-color: var(--puck-color-azure-07);
|
|
1196
1205
|
}
|
|
1197
|
-
.
|
|
1206
|
+
.DraggableComponent:has(.DraggableComponent--hover > .DraggableComponent-overlayWrapper) > .DraggableComponent-overlayWrapper {
|
|
1198
1207
|
display: none;
|
|
1199
1208
|
}
|
|
1200
|
-
.
|
|
1209
|
+
.DraggableComponent-actionsOverlay {
|
|
1201
1210
|
position: sticky;
|
|
1202
1211
|
opacity: 0;
|
|
1203
1212
|
pointer-events: none;
|
|
1204
1213
|
z-index: 2;
|
|
1205
1214
|
}
|
|
1206
|
-
.
|
|
1215
|
+
.DraggableComponent--isSelected .DraggableComponent-actionsOverlay {
|
|
1207
1216
|
opacity: 1;
|
|
1208
1217
|
pointer-events: auto;
|
|
1209
1218
|
}
|
|
1210
|
-
.
|
|
1219
|
+
.DraggableComponent-actions {
|
|
1211
1220
|
position: absolute;
|
|
1212
1221
|
width: auto;
|
|
1213
1222
|
cursor: grab;
|
|
@@ -1255,7 +1264,7 @@ textarea._Input-input_py9hf_26 {
|
|
|
1255
1264
|
}
|
|
1256
1265
|
|
|
1257
1266
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
|
|
1258
|
-
.
|
|
1267
|
+
.DropZone {
|
|
1259
1268
|
--resize-animation-ms: 150ms;
|
|
1260
1269
|
position: relative;
|
|
1261
1270
|
height: 100%;
|
|
@@ -1263,84 +1272,111 @@ textarea._Input-input_py9hf_26 {
|
|
|
1263
1272
|
outline-offset: -2px;
|
|
1264
1273
|
width: 100%;
|
|
1265
1274
|
}
|
|
1266
|
-
.
|
|
1275
|
+
.DropZone--hasChildren {
|
|
1267
1276
|
min-height: 0;
|
|
1268
1277
|
}
|
|
1269
|
-
.
|
|
1278
|
+
.DropZone:empty {
|
|
1270
1279
|
min-height: var(--min-empty-height);
|
|
1271
1280
|
}
|
|
1272
|
-
[data-puck-entry]:not([data-puck-dragging]) .
|
|
1281
|
+
[data-puck-entry]:not([data-puck-dragging]) .DropZone {
|
|
1273
1282
|
transition: min-height var(--resize-animation-ms) ease-in;
|
|
1274
1283
|
}
|
|
1275
|
-
.
|
|
1276
|
-
.
|
|
1284
|
+
.DropZone--isAreaSelected,
|
|
1285
|
+
.DropZone--hoveringOverArea:not(.DropZone--isRootZone) {
|
|
1277
1286
|
background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
|
|
1278
1287
|
outline: 2px dashed var(--puck-color-azure-08);
|
|
1279
1288
|
}
|
|
1280
|
-
.
|
|
1289
|
+
.DropZone:empty {
|
|
1281
1290
|
background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
|
|
1282
1291
|
outline: 2px dashed var(--puck-color-azure-08);
|
|
1283
1292
|
}
|
|
1284
|
-
.
|
|
1293
|
+
.DropZone--isDestination {
|
|
1285
1294
|
outline: 2px dashed var(--puck-color-azure-04) !important;
|
|
1286
1295
|
}
|
|
1287
|
-
.
|
|
1296
|
+
.DropZone--isDestination:not(.DropZone--isRootZone) {
|
|
1288
1297
|
background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
|
|
1289
1298
|
}
|
|
1290
|
-
.
|
|
1299
|
+
.DropZone-item {
|
|
1291
1300
|
position: relative;
|
|
1292
1301
|
}
|
|
1293
|
-
.
|
|
1302
|
+
.DropZone-hitbox {
|
|
1294
1303
|
position: absolute;
|
|
1295
1304
|
bottom: -12px;
|
|
1296
1305
|
height: 24px;
|
|
1297
1306
|
width: 100%;
|
|
1298
1307
|
z-index: 1;
|
|
1299
1308
|
}
|
|
1300
|
-
[data-puck-dragging] .
|
|
1309
|
+
[data-puck-dragging] .DropZone--isEnabled {
|
|
1301
1310
|
outline: 2px dashed var(--puck-color-azure-06);
|
|
1302
1311
|
}
|
|
1303
|
-
.
|
|
1312
|
+
.DropZone > *:not([data-puck-component]) {
|
|
1304
1313
|
opacity: 0;
|
|
1305
1314
|
}
|
|
1306
|
-
body:has(.
|
|
1315
|
+
body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
|
|
1307
1316
|
opacity: 0 !important;
|
|
1308
1317
|
}
|
|
1309
1318
|
|
|
1319
|
+
/* lib/overlay-portal/styles.css */
|
|
1320
|
+
[data-puck-overlay-portal],
|
|
1321
|
+
[data-puck-overlay-portal] * {
|
|
1322
|
+
pointer-events: auto !important;
|
|
1323
|
+
}
|
|
1324
|
+
[data-puck-overlay-portal]:hover {
|
|
1325
|
+
outline: 2px var(--puck-color-azure-09) dashed;
|
|
1326
|
+
outline-offset: 2px;
|
|
1327
|
+
}
|
|
1328
|
+
[data-puck-overlay-portal]:focus-within {
|
|
1329
|
+
outline: 2px var(--puck-color-azure-07) solid;
|
|
1330
|
+
outline-offset: 2px;
|
|
1331
|
+
}
|
|
1332
|
+
|
|
1333
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
|
|
1334
|
+
.InlineTextField {
|
|
1335
|
+
cursor: text;
|
|
1336
|
+
display: inline-block;
|
|
1337
|
+
}
|
|
1338
|
+
[data-dnd-dragging] .InlineTextField {
|
|
1339
|
+
cursor: none;
|
|
1340
|
+
caret-color: transparent;
|
|
1341
|
+
}
|
|
1342
|
+
[data-dnd-dragging] .InlineTextField::selection {
|
|
1343
|
+
display: none;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1310
1346
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
|
|
1311
|
-
.
|
|
1347
|
+
.SidebarSection {
|
|
1312
1348
|
display: flex;
|
|
1313
1349
|
position: relative;
|
|
1314
1350
|
flex-direction: column;
|
|
1315
1351
|
color: var(--puck-color-black);
|
|
1316
1352
|
}
|
|
1317
|
-
.
|
|
1353
|
+
.SidebarSection:last-of-type {
|
|
1318
1354
|
flex-grow: 1;
|
|
1319
1355
|
}
|
|
1320
|
-
.
|
|
1356
|
+
.SidebarSection-title {
|
|
1321
1357
|
background: var(--puck-color-white);
|
|
1322
1358
|
padding: 16px;
|
|
1323
1359
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
|
1324
1360
|
border-top: 1px solid var(--puck-color-grey-09);
|
|
1325
1361
|
overflow-x: auto;
|
|
1326
1362
|
}
|
|
1327
|
-
.
|
|
1363
|
+
.SidebarSection--noBorderTop > .SidebarSection-title {
|
|
1328
1364
|
border-top: 0px;
|
|
1329
1365
|
}
|
|
1330
|
-
.
|
|
1366
|
+
.SidebarSection-content {
|
|
1331
1367
|
padding: 16px;
|
|
1332
1368
|
}
|
|
1333
|
-
.
|
|
1369
|
+
.SidebarSection--noPadding > .SidebarSection-content {
|
|
1334
1370
|
padding: 0px;
|
|
1335
1371
|
}
|
|
1336
|
-
.
|
|
1372
|
+
.SidebarSection--noPadding > .SidebarSection-content:last-child {
|
|
1337
1373
|
padding-bottom: 4px;
|
|
1338
1374
|
}
|
|
1339
|
-
.
|
|
1375
|
+
.SidebarSection:last-of-type .SidebarSection-content {
|
|
1340
1376
|
border-bottom: none;
|
|
1341
1377
|
flex-grow: 1;
|
|
1342
1378
|
}
|
|
1343
|
-
.
|
|
1379
|
+
.SidebarSection-breadcrumbLabel {
|
|
1344
1380
|
background: none;
|
|
1345
1381
|
border: 0;
|
|
1346
1382
|
border-radius: 2px;
|
|
@@ -1351,34 +1387,34 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1351
1387
|
padding: 0;
|
|
1352
1388
|
transition: color 50ms ease-in;
|
|
1353
1389
|
}
|
|
1354
|
-
.
|
|
1390
|
+
.SidebarSection-breadcrumbLabel:focus-visible {
|
|
1355
1391
|
outline: 2px solid var(--puck-color-azure-05);
|
|
1356
1392
|
outline-offset: 2px;
|
|
1357
1393
|
}
|
|
1358
1394
|
@media (hover: hover) and (pointer: fine) {
|
|
1359
|
-
.
|
|
1395
|
+
.SidebarSection-breadcrumbLabel:hover {
|
|
1360
1396
|
color: var(--puck-color-azure-03);
|
|
1361
1397
|
transition: none;
|
|
1362
1398
|
}
|
|
1363
1399
|
}
|
|
1364
|
-
.
|
|
1400
|
+
.SidebarSection-breadcrumbLabel:active {
|
|
1365
1401
|
color: var(--puck-color-azure-02);
|
|
1366
1402
|
transition: none;
|
|
1367
1403
|
}
|
|
1368
|
-
.
|
|
1404
|
+
.SidebarSection-breadcrumbs {
|
|
1369
1405
|
align-items: center;
|
|
1370
1406
|
display: flex;
|
|
1371
1407
|
gap: 4px;
|
|
1372
1408
|
}
|
|
1373
|
-
.
|
|
1409
|
+
.SidebarSection-breadcrumb {
|
|
1374
1410
|
align-items: center;
|
|
1375
1411
|
display: flex;
|
|
1376
1412
|
gap: 4px;
|
|
1377
1413
|
}
|
|
1378
|
-
.
|
|
1414
|
+
.SidebarSection-heading {
|
|
1379
1415
|
padding-inline-end: 16px;
|
|
1380
1416
|
}
|
|
1381
|
-
.
|
|
1417
|
+
.SidebarSection-loadingOverlay {
|
|
1382
1418
|
background: var(--puck-color-white);
|
|
1383
1419
|
display: flex;
|
|
1384
1420
|
justify-content: center;
|
|
@@ -1394,23 +1430,25 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1394
1430
|
}
|
|
1395
1431
|
|
|
1396
1432
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
|
|
1397
|
-
.
|
|
1433
|
+
.Puck {
|
|
1398
1434
|
--puck-space-px: 16px;
|
|
1399
1435
|
font-family: var(--puck-font-family);
|
|
1400
1436
|
overflow-x: hidden;
|
|
1401
1437
|
}
|
|
1402
1438
|
@media (min-width: 766px) {
|
|
1403
|
-
.
|
|
1439
|
+
.Puck {
|
|
1404
1440
|
overflow-x: auto;
|
|
1405
1441
|
}
|
|
1406
1442
|
}
|
|
1407
|
-
.
|
|
1443
|
+
.Puck-portal {
|
|
1408
1444
|
position: relative;
|
|
1409
1445
|
z-index: 2;
|
|
1410
1446
|
}
|
|
1411
|
-
.
|
|
1447
|
+
.PuckLayout-inner {
|
|
1412
1448
|
--puck-frame-width: auto;
|
|
1413
1449
|
--puck-side-bar-width: 0px;
|
|
1450
|
+
--puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
|
|
1451
|
+
--puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
|
|
1414
1452
|
display: grid;
|
|
1415
1453
|
grid-template-areas: "header header header" "left editor right";
|
|
1416
1454
|
grid-template-columns: 0 var(--puck-frame-width) 0;
|
|
@@ -1419,79 +1457,63 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1419
1457
|
position: relative;
|
|
1420
1458
|
z-index: 0;
|
|
1421
1459
|
}
|
|
1422
|
-
.
|
|
1460
|
+
.PuckLayout--mounted .PuckLayout-inner {
|
|
1423
1461
|
--puck-side-bar-width: 186px;
|
|
1424
1462
|
}
|
|
1425
|
-
.
|
|
1426
|
-
grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
|
|
1463
|
+
.PuckLayout--leftSideBarVisible .PuckLayout-inner {
|
|
1464
|
+
grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) 0;
|
|
1427
1465
|
}
|
|
1428
|
-
.
|
|
1429
|
-
grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
|
|
1466
|
+
.PuckLayout--rightSideBarVisible .PuckLayout-inner {
|
|
1467
|
+
grid-template-columns: 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
|
|
1430
1468
|
}
|
|
1431
|
-
.
|
|
1432
|
-
grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
|
|
1469
|
+
.PuckLayout--leftSideBarVisible.PuckLayout--rightSideBarVisible .PuckLayout-inner {
|
|
1470
|
+
grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) var(--puck-right-side-bar-width);
|
|
1433
1471
|
}
|
|
1434
1472
|
@media (min-width: 458px) {
|
|
1435
|
-
.
|
|
1473
|
+
.PuckLayout-mounted .PuckLayout-inner {
|
|
1436
1474
|
--puck-frame-width: minmax(266px, auto);
|
|
1437
1475
|
}
|
|
1438
1476
|
}
|
|
1439
1477
|
@media (min-width: 638px) {
|
|
1440
|
-
.
|
|
1478
|
+
.PuckLayout .PuckLayout-inner {
|
|
1441
1479
|
--puck-side-bar-width: minmax(186px, 250px);
|
|
1442
1480
|
}
|
|
1443
1481
|
}
|
|
1444
1482
|
@media (min-width: 766px) {
|
|
1445
|
-
.
|
|
1483
|
+
.PuckLayout .PuckLayout-inner {
|
|
1446
1484
|
--puck-frame-width: auto;
|
|
1447
1485
|
}
|
|
1448
1486
|
}
|
|
1449
1487
|
@media (min-width: 990px) {
|
|
1450
|
-
.
|
|
1488
|
+
.PuckLayout .PuckLayout-inner {
|
|
1451
1489
|
--puck-side-bar-width: 256px;
|
|
1452
1490
|
}
|
|
1453
1491
|
}
|
|
1454
1492
|
@media (min-width: 1198px) {
|
|
1455
|
-
.
|
|
1493
|
+
.PuckLayout .PuckLayout-inner {
|
|
1456
1494
|
--puck-side-bar-width: 274px;
|
|
1457
1495
|
}
|
|
1458
1496
|
}
|
|
1459
1497
|
@media (min-width: 1398px) {
|
|
1460
|
-
.
|
|
1498
|
+
.PuckLayout .PuckLayout-inner {
|
|
1461
1499
|
--puck-side-bar-width: 290px;
|
|
1462
1500
|
}
|
|
1463
1501
|
}
|
|
1464
1502
|
@media (min-width: 1598px) {
|
|
1465
|
-
.
|
|
1503
|
+
.PuckLayout .PuckLayout-inner {
|
|
1466
1504
|
--puck-side-bar-width: 320px;
|
|
1467
1505
|
}
|
|
1468
1506
|
}
|
|
1469
|
-
._PuckLayout-leftSideBar_dnlfp_115 {
|
|
1470
|
-
background: var(--puck-color-grey-12);
|
|
1471
|
-
border-inline-end: 1px solid var(--puck-color-grey-09);
|
|
1472
|
-
display: flex;
|
|
1473
|
-
flex-direction: column;
|
|
1474
|
-
grid-area: left;
|
|
1475
|
-
overflow-y: auto;
|
|
1476
|
-
}
|
|
1477
|
-
._PuckLayout-rightSideBar_dnlfp_124 {
|
|
1478
|
-
background: var(--puck-color-white);
|
|
1479
|
-
border-inline-start: 1px solid var(--puck-color-grey-09);
|
|
1480
|
-
display: flex;
|
|
1481
|
-
flex-direction: column;
|
|
1482
|
-
grid-area: right;
|
|
1483
|
-
overflow-y: auto;
|
|
1484
|
-
}
|
|
1485
1507
|
|
|
1486
1508
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
|
|
1487
|
-
.
|
|
1509
|
+
.PuckFields {
|
|
1488
1510
|
position: relative;
|
|
1489
1511
|
font-family: var(--puck-font-family);
|
|
1490
1512
|
}
|
|
1491
|
-
.
|
|
1513
|
+
.PuckFields--isLoading {
|
|
1492
1514
|
min-height: 48px;
|
|
1493
1515
|
}
|
|
1494
|
-
.
|
|
1516
|
+
.PuckFields-loadingOverlay {
|
|
1495
1517
|
background: var(--puck-color-white);
|
|
1496
1518
|
display: flex;
|
|
1497
1519
|
justify-content: flex-end;
|
|
@@ -1505,40 +1527,40 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1505
1527
|
box-sizing: border-box;
|
|
1506
1528
|
opacity: 0.8;
|
|
1507
1529
|
}
|
|
1508
|
-
.
|
|
1530
|
+
.PuckFields-loadingOverlayInner {
|
|
1509
1531
|
display: flex;
|
|
1510
1532
|
padding: 16px;
|
|
1511
1533
|
position: sticky;
|
|
1512
1534
|
top: 0;
|
|
1513
1535
|
}
|
|
1514
|
-
.
|
|
1536
|
+
.PuckFields-field * {
|
|
1515
1537
|
box-sizing: border-box;
|
|
1516
1538
|
}
|
|
1517
|
-
.
|
|
1539
|
+
.PuckFields--wrapFields .PuckFields-field {
|
|
1518
1540
|
color: var(--puck-color-grey-04);
|
|
1519
1541
|
padding: 16px;
|
|
1520
1542
|
padding-bottom: 12px;
|
|
1521
1543
|
display: block;
|
|
1522
1544
|
}
|
|
1523
|
-
.
|
|
1545
|
+
.PuckFields--wrapFields .PuckFields-field + .PuckFields-field {
|
|
1524
1546
|
border-top: 1px solid var(--puck-color-grey-09);
|
|
1525
1547
|
margin-top: 8px;
|
|
1526
1548
|
}
|
|
1527
1549
|
|
|
1528
1550
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
|
|
1529
|
-
.
|
|
1551
|
+
.ComponentList {
|
|
1530
1552
|
max-width: 100%;
|
|
1531
1553
|
}
|
|
1532
|
-
.
|
|
1554
|
+
.ComponentList--isExpanded + .ComponentList {
|
|
1533
1555
|
margin-top: 12px;
|
|
1534
1556
|
}
|
|
1535
|
-
.
|
|
1557
|
+
.ComponentList-content {
|
|
1536
1558
|
display: none;
|
|
1537
1559
|
}
|
|
1538
|
-
.
|
|
1560
|
+
.ComponentList--isExpanded > .ComponentList-content {
|
|
1539
1561
|
display: block;
|
|
1540
1562
|
}
|
|
1541
|
-
.
|
|
1563
|
+
.ComponentList-title {
|
|
1542
1564
|
background-color: transparent;
|
|
1543
1565
|
border: 0;
|
|
1544
1566
|
color: var(--puck-color-grey-05);
|
|
@@ -1555,38 +1577,38 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1555
1577
|
border-radius: 4px;
|
|
1556
1578
|
width: 100%;
|
|
1557
1579
|
}
|
|
1558
|
-
.
|
|
1580
|
+
.ComponentList-title:focus-visible {
|
|
1559
1581
|
outline: 2px solid var(--puck-color-azure-05);
|
|
1560
1582
|
outline-offset: 2px;
|
|
1561
1583
|
}
|
|
1562
1584
|
@media (hover: hover) and (pointer: fine) {
|
|
1563
|
-
.
|
|
1585
|
+
.ComponentList-title:hover {
|
|
1564
1586
|
background-color: var(--puck-color-azure-11);
|
|
1565
1587
|
color: var(--puck-color-azure-04);
|
|
1566
1588
|
transition: none;
|
|
1567
1589
|
}
|
|
1568
1590
|
}
|
|
1569
|
-
.
|
|
1591
|
+
.ComponentList-title:active {
|
|
1570
1592
|
background-color: var(--puck-color-azure-10);
|
|
1571
1593
|
transition: none;
|
|
1572
1594
|
}
|
|
1573
|
-
.
|
|
1595
|
+
.ComponentList-titleIcon {
|
|
1574
1596
|
margin-inline-start: auto;
|
|
1575
1597
|
}
|
|
1576
1598
|
|
|
1577
1599
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
|
|
1578
|
-
.
|
|
1600
|
+
.PuckPreview {
|
|
1579
1601
|
position: relative;
|
|
1580
1602
|
height: 100%;
|
|
1581
1603
|
}
|
|
1582
|
-
.
|
|
1604
|
+
.PuckPreview-frame {
|
|
1583
1605
|
border: none;
|
|
1584
1606
|
height: 100%;
|
|
1585
1607
|
width: 100%;
|
|
1586
1608
|
}
|
|
1587
1609
|
|
|
1588
1610
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
|
|
1589
|
-
.
|
|
1611
|
+
.LayerTree {
|
|
1590
1612
|
color: var(--puck-color-grey-03);
|
|
1591
1613
|
font-family: var(--puck-font-family);
|
|
1592
1614
|
font-size: var(--puck-font-size-xxs);
|
|
@@ -1595,30 +1617,30 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1595
1617
|
list-style: none;
|
|
1596
1618
|
padding: 0;
|
|
1597
1619
|
}
|
|
1598
|
-
.
|
|
1620
|
+
.LayerTree-zoneTitle {
|
|
1599
1621
|
color: var(--puck-color-grey-05);
|
|
1600
1622
|
font-size: var(--puck-font-size-xxxs);
|
|
1601
1623
|
text-transform: uppercase;
|
|
1602
1624
|
}
|
|
1603
|
-
.
|
|
1625
|
+
.LayerTree-helper {
|
|
1604
1626
|
text-align: center;
|
|
1605
1627
|
color: var(--puck-color-grey-07);
|
|
1606
1628
|
margin: 8px 4px;
|
|
1607
1629
|
}
|
|
1608
|
-
.
|
|
1630
|
+
.Layer {
|
|
1609
1631
|
position: relative;
|
|
1610
1632
|
border: 1px solid transparent;
|
|
1611
1633
|
border-radius: 4px;
|
|
1612
1634
|
}
|
|
1613
|
-
.
|
|
1635
|
+
.Layer-inner {
|
|
1614
1636
|
border: 1px solid transparent;
|
|
1615
1637
|
border-radius: 4px;
|
|
1616
1638
|
transition: color 50ms ease-in;
|
|
1617
1639
|
}
|
|
1618
|
-
.
|
|
1640
|
+
.Layer--containsZone > .Layer-inner {
|
|
1619
1641
|
padding-inline-start: 0;
|
|
1620
1642
|
}
|
|
1621
|
-
.
|
|
1643
|
+
.Layer-clickable {
|
|
1622
1644
|
align-items: center;
|
|
1623
1645
|
background: none;
|
|
1624
1646
|
border: 0;
|
|
@@ -1631,65 +1653,65 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1631
1653
|
padding-inline-end: 4px;
|
|
1632
1654
|
width: 100%;
|
|
1633
1655
|
}
|
|
1634
|
-
.
|
|
1656
|
+
.Layer-clickable:focus-visible {
|
|
1635
1657
|
outline: 2px solid var(--puck-color-azure-05);
|
|
1636
1658
|
outline-offset: 2px;
|
|
1637
1659
|
position: relative;
|
|
1638
1660
|
z-index: 1;
|
|
1639
1661
|
}
|
|
1640
1662
|
@media (hover: hover) and (pointer: fine) {
|
|
1641
|
-
.
|
|
1663
|
+
.Layer:not(.Layer--isSelected) > .Layer-inner:hover {
|
|
1642
1664
|
border-color: var(--puck-color-azure-10);
|
|
1643
1665
|
background: var(--puck-color-azure-11);
|
|
1644
1666
|
color: var(--puck-color-azure-04);
|
|
1645
1667
|
transition: none;
|
|
1646
1668
|
}
|
|
1647
1669
|
}
|
|
1648
|
-
.
|
|
1670
|
+
.Layer--isSelected {
|
|
1649
1671
|
border-color: var(--puck-color-azure-08);
|
|
1650
1672
|
}
|
|
1651
|
-
.
|
|
1673
|
+
.Layer--isSelected > .Layer-inner {
|
|
1652
1674
|
background: var(--puck-color-azure-10);
|
|
1653
1675
|
}
|
|
1654
|
-
.
|
|
1655
|
-
.
|
|
1676
|
+
.Layer--isSelected > .Layer-inner > .Layer-clickable > .Layer-chevron,
|
|
1677
|
+
.Layer--childIsSelected > .Layer-inner > .Layer-clickable > .Layer-chevron {
|
|
1656
1678
|
transform: scaleY(-1);
|
|
1657
1679
|
}
|
|
1658
|
-
.
|
|
1680
|
+
.Layer-zones {
|
|
1659
1681
|
display: none;
|
|
1660
1682
|
margin-inline-start: 12px;
|
|
1661
1683
|
}
|
|
1662
|
-
.
|
|
1663
|
-
.
|
|
1684
|
+
.Layer--isSelected > .Layer-zones,
|
|
1685
|
+
.Layer--childIsSelected > .Layer-zones {
|
|
1664
1686
|
display: block;
|
|
1665
1687
|
}
|
|
1666
|
-
.
|
|
1688
|
+
.Layer-zones > .LayerTree {
|
|
1667
1689
|
margin-inline-start: 12px;
|
|
1668
1690
|
}
|
|
1669
|
-
.
|
|
1670
|
-
.
|
|
1691
|
+
.Layer-title,
|
|
1692
|
+
.LayerTree-zoneTitle {
|
|
1671
1693
|
display: flex;
|
|
1672
1694
|
gap: 8px;
|
|
1673
1695
|
align-items: center;
|
|
1674
1696
|
margin: 8px 4px;
|
|
1675
1697
|
overflow-x: hidden;
|
|
1676
1698
|
}
|
|
1677
|
-
.
|
|
1699
|
+
.Layer-name {
|
|
1678
1700
|
overflow-x: hidden;
|
|
1679
1701
|
text-overflow: ellipsis;
|
|
1680
1702
|
white-space: nowrap;
|
|
1681
1703
|
}
|
|
1682
|
-
.
|
|
1704
|
+
.Layer-icon {
|
|
1683
1705
|
color: var(--puck-color-rose-07);
|
|
1684
1706
|
margin-top: 4px;
|
|
1685
1707
|
}
|
|
1686
|
-
.
|
|
1708
|
+
.Layer-zoneIcon {
|
|
1687
1709
|
color: var(--puck-color-grey-08);
|
|
1688
1710
|
margin-top: 4px;
|
|
1689
1711
|
}
|
|
1690
1712
|
|
|
1691
1713
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
|
|
1692
|
-
.
|
|
1714
|
+
.ViewportControls {
|
|
1693
1715
|
display: flex;
|
|
1694
1716
|
background: var(--puck-color-grey-11);
|
|
1695
1717
|
box-sizing: border-box;
|
|
@@ -1702,12 +1724,12 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1702
1724
|
padding-inline-end: var(--puck-space-px);
|
|
1703
1725
|
z-index: 1;
|
|
1704
1726
|
}
|
|
1705
|
-
.
|
|
1727
|
+
.ViewportControls-divider {
|
|
1706
1728
|
border-inline-end: 1px solid var(--puck-color-grey-09);
|
|
1707
1729
|
margin-inline-start: 8px;
|
|
1708
1730
|
margin-inline-end: 8px;
|
|
1709
1731
|
}
|
|
1710
|
-
.
|
|
1732
|
+
.ViewportControls-zoomSelect {
|
|
1711
1733
|
appearance: none;
|
|
1712
1734
|
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;
|
|
1713
1735
|
background-size: 10px;
|
|
@@ -1718,15 +1740,15 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1718
1740
|
padding: 0;
|
|
1719
1741
|
width: 96px;
|
|
1720
1742
|
}
|
|
1721
|
-
.
|
|
1743
|
+
.ViewportControls-zoomSelect:dir(rtl) {
|
|
1722
1744
|
background-position: 12px calc(50% + 3px);
|
|
1723
1745
|
}
|
|
1724
|
-
.
|
|
1746
|
+
.ViewportButton--isActive .ViewportButton-inner {
|
|
1725
1747
|
color: var(--puck-color-azure-04);
|
|
1726
1748
|
}
|
|
1727
1749
|
|
|
1728
1750
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
|
|
1729
|
-
.
|
|
1751
|
+
.PuckCanvas {
|
|
1730
1752
|
background: var(--puck-color-grey-11);
|
|
1731
1753
|
display: flex;
|
|
1732
1754
|
grid-area: editor;
|
|
@@ -1735,15 +1757,15 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1735
1757
|
overflow: auto;
|
|
1736
1758
|
}
|
|
1737
1759
|
@media (min-width: 1198px) {
|
|
1738
|
-
.
|
|
1760
|
+
.PuckCanvas {
|
|
1739
1761
|
padding: calc(var(--puck-space-px) * 1.5);
|
|
1740
1762
|
padding-top: var(--puck-space-px);
|
|
1741
1763
|
}
|
|
1742
|
-
.
|
|
1764
|
+
.PuckCanvas:not(.PuckCanvas:has(.PuckCanvas-controls)) {
|
|
1743
1765
|
padding-top: calc(var(--puck-space-px) * 1.5);
|
|
1744
1766
|
}
|
|
1745
1767
|
}
|
|
1746
|
-
.
|
|
1768
|
+
.PuckCanvas-inner {
|
|
1747
1769
|
display: flex;
|
|
1748
1770
|
height: 100%;
|
|
1749
1771
|
justify-content: center;
|
|
@@ -1751,7 +1773,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1751
1773
|
position: relative;
|
|
1752
1774
|
width: 100%;
|
|
1753
1775
|
}
|
|
1754
|
-
.
|
|
1776
|
+
.PuckCanvas-root {
|
|
1755
1777
|
background: white;
|
|
1756
1778
|
border: 1px solid var(--puck-color-grey-09);
|
|
1757
1779
|
box-sizing: content-box;
|
|
@@ -1764,20 +1786,20 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1764
1786
|
opacity: 0;
|
|
1765
1787
|
}
|
|
1766
1788
|
@media (min-width: 1198px) {
|
|
1767
|
-
.
|
|
1789
|
+
.PuckCanvas-root {
|
|
1768
1790
|
min-width: unset;
|
|
1769
1791
|
}
|
|
1770
1792
|
}
|
|
1771
1793
|
@media (prefers-reduced-motion: reduce) {
|
|
1772
|
-
.
|
|
1794
|
+
.PuckCanvas-root {
|
|
1773
1795
|
transition: none !important;
|
|
1774
1796
|
}
|
|
1775
1797
|
}
|
|
1776
|
-
.
|
|
1798
|
+
.PuckCanvas--ready .PuckCanvas-root {
|
|
1777
1799
|
pointer-events: unset;
|
|
1778
1800
|
opacity: 1;
|
|
1779
1801
|
}
|
|
1780
|
-
.
|
|
1802
|
+
.PuckCanvas-loader {
|
|
1781
1803
|
align-items: center;
|
|
1782
1804
|
color: var(--puck-color-grey-06);
|
|
1783
1805
|
display: flex;
|
|
@@ -1786,17 +1808,17 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1786
1808
|
transition: opacity 250ms ease-out;
|
|
1787
1809
|
opacity: 0;
|
|
1788
1810
|
}
|
|
1789
|
-
.
|
|
1811
|
+
.PuckCanvas--showLoader .PuckCanvas-loader {
|
|
1790
1812
|
opacity: 1;
|
|
1791
1813
|
}
|
|
1792
|
-
.
|
|
1814
|
+
.PuckCanvas--showLoader.PuckCanvas--ready .PuckCanvas-loader {
|
|
1793
1815
|
opacity: 0;
|
|
1794
1816
|
height: 0;
|
|
1795
1817
|
transition: none;
|
|
1796
1818
|
}
|
|
1797
1819
|
|
|
1798
1820
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
|
|
1799
|
-
.
|
|
1821
|
+
.MenuBar {
|
|
1800
1822
|
background-color: var(--puck-color-white);
|
|
1801
1823
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
|
1802
1824
|
display: none;
|
|
@@ -1808,11 +1830,11 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1808
1830
|
top: 100%;
|
|
1809
1831
|
z-index: 2;
|
|
1810
1832
|
}
|
|
1811
|
-
.
|
|
1833
|
+
.MenuBar--menuOpen {
|
|
1812
1834
|
display: block;
|
|
1813
1835
|
}
|
|
1814
1836
|
@media (min-width: 638px) {
|
|
1815
|
-
.
|
|
1837
|
+
.MenuBar {
|
|
1816
1838
|
border: none;
|
|
1817
1839
|
display: block;
|
|
1818
1840
|
margin-top: 0;
|
|
@@ -1821,7 +1843,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1821
1843
|
position: static;
|
|
1822
1844
|
}
|
|
1823
1845
|
}
|
|
1824
|
-
.
|
|
1846
|
+
.MenuBar-inner {
|
|
1825
1847
|
align-items: center;
|
|
1826
1848
|
display: flex;
|
|
1827
1849
|
flex-wrap: wrap;
|
|
@@ -1829,18 +1851,18 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1829
1851
|
justify-content: flex-end;
|
|
1830
1852
|
}
|
|
1831
1853
|
@media (min-width: 638px) {
|
|
1832
|
-
.
|
|
1854
|
+
.MenuBar-inner {
|
|
1833
1855
|
display: flex;
|
|
1834
1856
|
flex-direction: row;
|
|
1835
1857
|
flex-wrap: nowrap;
|
|
1836
1858
|
}
|
|
1837
1859
|
}
|
|
1838
|
-
.
|
|
1860
|
+
.MenuBar-history {
|
|
1839
1861
|
display: flex;
|
|
1840
1862
|
}
|
|
1841
1863
|
|
|
1842
1864
|
/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
|
|
1843
|
-
.
|
|
1865
|
+
.PuckHeader {
|
|
1844
1866
|
background: var(--puck-color-white);
|
|
1845
1867
|
border-bottom: 1px solid var(--puck-color-grey-09);
|
|
1846
1868
|
color: var(--puck-color-black);
|
|
@@ -1848,7 +1870,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1848
1870
|
position: relative;
|
|
1849
1871
|
max-width: 100vw;
|
|
1850
1872
|
}
|
|
1851
|
-
.
|
|
1873
|
+
.PuckHeader-inner {
|
|
1852
1874
|
align-items: end;
|
|
1853
1875
|
display: grid;
|
|
1854
1876
|
gap: var(--puck-space-px);
|
|
@@ -1857,39 +1879,102 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
|
|
|
1857
1879
|
grid-template-rows: auto;
|
|
1858
1880
|
padding: var(--puck-space-px);
|
|
1859
1881
|
}
|
|
1860
|
-
.
|
|
1882
|
+
.PuckHeader-toggle {
|
|
1861
1883
|
color: var(--puck-color-grey-05);
|
|
1862
1884
|
display: flex;
|
|
1863
1885
|
margin-inline-start: -4px;
|
|
1864
1886
|
padding-top: 2px;
|
|
1865
1887
|
}
|
|
1866
|
-
.
|
|
1867
|
-
.
|
|
1888
|
+
.PuckHeader--rightSideBarVisible .PuckHeader-rightSideBarToggle,
|
|
1889
|
+
.PuckHeader--leftSideBarVisible .PuckHeader-leftSideBarToggle {
|
|
1868
1890
|
color: var(--puck-color-black);
|
|
1869
1891
|
}
|
|
1870
|
-
.
|
|
1892
|
+
.PuckHeader-title {
|
|
1871
1893
|
align-self: center;
|
|
1872
1894
|
}
|
|
1873
|
-
.
|
|
1895
|
+
.PuckHeader-path {
|
|
1874
1896
|
font-family: var(--puck-font-family-monospaced);
|
|
1875
1897
|
font-size: var(--puck-font-size-xxs);
|
|
1876
1898
|
font-weight: normal;
|
|
1877
1899
|
word-break: break-all;
|
|
1878
1900
|
}
|
|
1879
|
-
.
|
|
1901
|
+
.PuckHeader-tools {
|
|
1880
1902
|
display: flex;
|
|
1881
1903
|
gap: 16px;
|
|
1882
1904
|
justify-content: flex-end;
|
|
1883
1905
|
}
|
|
1884
|
-
.
|
|
1906
|
+
.PuckHeader-menuButton {
|
|
1885
1907
|
color: var(--puck-color-grey-05);
|
|
1886
1908
|
margin-inline-start: -4px;
|
|
1887
1909
|
}
|
|
1888
|
-
.
|
|
1910
|
+
.PuckHeader--menuOpen .PuckHeader-menuButton {
|
|
1889
1911
|
color: var(--puck-color-black);
|
|
1890
1912
|
}
|
|
1891
1913
|
@media (min-width: 638px) {
|
|
1892
|
-
.
|
|
1914
|
+
.PuckHeader-menuButton {
|
|
1893
1915
|
display: none;
|
|
1894
1916
|
}
|
|
1895
1917
|
}
|
|
1918
|
+
|
|
1919
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
|
|
1920
|
+
@media (min-width: 766px) {
|
|
1921
|
+
.ResizeHandle {
|
|
1922
|
+
position: absolute;
|
|
1923
|
+
width: 5px;
|
|
1924
|
+
height: 100%;
|
|
1925
|
+
cursor: col-resize;
|
|
1926
|
+
z-index: 10;
|
|
1927
|
+
background: transparent;
|
|
1928
|
+
top: 0;
|
|
1929
|
+
}
|
|
1930
|
+
.ResizeHandle:hover {
|
|
1931
|
+
background: rgba(0, 0, 0, 0.1);
|
|
1932
|
+
}
|
|
1933
|
+
.ResizeHandle--left {
|
|
1934
|
+
right: -3px;
|
|
1935
|
+
}
|
|
1936
|
+
.ResizeHandle--right {
|
|
1937
|
+
left: -3px;
|
|
1938
|
+
}
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1941
|
+
/* components/Puck/components/ResizeHandle/styles.css */
|
|
1942
|
+
[data-resize-overlay] {
|
|
1943
|
+
position: fixed;
|
|
1944
|
+
top: 0;
|
|
1945
|
+
left: 0;
|
|
1946
|
+
right: 0;
|
|
1947
|
+
bottom: 0;
|
|
1948
|
+
z-index: 9999;
|
|
1949
|
+
cursor: col-resize;
|
|
1950
|
+
}
|
|
1951
|
+
|
|
1952
|
+
/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
|
|
1953
|
+
.Sidebar {
|
|
1954
|
+
position: relative;
|
|
1955
|
+
display: flex;
|
|
1956
|
+
flex-direction: column;
|
|
1957
|
+
overflow-y: auto;
|
|
1958
|
+
}
|
|
1959
|
+
.Sidebar--left {
|
|
1960
|
+
background: var(--puck-color-grey-12);
|
|
1961
|
+
border-inline-end: 1px solid var(--puck-color-grey-09);
|
|
1962
|
+
grid-area: left;
|
|
1963
|
+
}
|
|
1964
|
+
.Sidebar--right {
|
|
1965
|
+
background: var(--puck-color-white);
|
|
1966
|
+
border-inline-start: 1px solid var(--puck-color-grey-09);
|
|
1967
|
+
grid-area: right;
|
|
1968
|
+
}
|
|
1969
|
+
.Sidebar-resizeHandle {
|
|
1970
|
+
position: absolute;
|
|
1971
|
+
height: 100%;
|
|
1972
|
+
}
|
|
1973
|
+
.Sidebar--left + .Sidebar-resizeHandle {
|
|
1974
|
+
grid-area: left;
|
|
1975
|
+
justify-self: end;
|
|
1976
|
+
}
|
|
1977
|
+
.Sidebar--right + .Sidebar-resizeHandle {
|
|
1978
|
+
grid-area: right;
|
|
1979
|
+
justify-self: start;
|
|
1980
|
+
}
|