@mekari/pixel3-popover 0.0.5 → 0.0.6-dev.1

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/index.css DELETED
@@ -1,540 +0,0 @@
1
- /* ../../node_modules/.pnpm/vue-sonner@1.0.2/node_modules/vue-sonner/lib/index.css */
2
- html[dir=ltr],
3
- [data-sonner-toaster][dir=ltr] {
4
- --toast-icon-margin-start: -3px;
5
- --toast-icon-margin-end: 4px;
6
- --toast-svg-margin-start: -1px;
7
- --toast-svg-margin-end: 0px;
8
- --toast-button-margin-start: auto;
9
- --toast-button-margin-end: 0;
10
- --toast-close-button-start: 0;
11
- --toast-close-button-end: unset;
12
- --toast-close-button-transform: translate(-35%, -35%);
13
- }
14
- html[dir=rtl],
15
- [data-sonner-toaster][dir=rtl] {
16
- --toast-icon-margin-start: 4px;
17
- --toast-icon-margin-end: -3px;
18
- --toast-svg-margin-start: 0px;
19
- --toast-svg-margin-end: -1px;
20
- --toast-button-margin-start: 0;
21
- --toast-button-margin-end: auto;
22
- --toast-close-button-start: unset;
23
- --toast-close-button-end: 0;
24
- --toast-close-button-transform: translate(35%, -35%);
25
- }
26
- [data-sonner-toaster] {
27
- position: fixed;
28
- width: var(--width);
29
- font-family:
30
- ui-sans-serif,
31
- system-ui,
32
- -apple-system,
33
- BlinkMacSystemFont,
34
- Segoe UI,
35
- Roboto,
36
- Helvetica Neue,
37
- Arial,
38
- Noto Sans,
39
- sans-serif,
40
- Apple Color Emoji,
41
- Segoe UI Emoji,
42
- Segoe UI Symbol,
43
- Noto Color Emoji;
44
- --gray1: hsl(0, 0%, 99%);
45
- --gray2: hsl(0, 0%, 97.3%);
46
- --gray3: hsl(0, 0%, 95.1%);
47
- --gray4: hsl(0, 0%, 93%);
48
- --gray5: hsl(0, 0%, 90.9%);
49
- --gray6: hsl(0, 0%, 88.7%);
50
- --gray7: hsl(0, 0%, 85.8%);
51
- --gray8: hsl(0, 0%, 78%);
52
- --gray9: hsl(0, 0%, 56.1%);
53
- --gray10: hsl(0, 0%, 52.3%);
54
- --gray11: hsl(0, 0%, 43.5%);
55
- --gray12: hsl(0, 0%, 9%);
56
- --border-radius: 8px;
57
- box-sizing: border-box;
58
- padding: 0;
59
- margin: 0;
60
- list-style: none;
61
- outline: none;
62
- z-index: 999999999;
63
- }
64
- [data-sonner-toaster][data-x-position=right] {
65
- right: max(var(--offset), env(safe-area-inset-right));
66
- }
67
- [data-sonner-toaster][data-x-position=left] {
68
- left: max(var(--offset), env(safe-area-inset-left));
69
- }
70
- [data-sonner-toaster][data-x-position=center] {
71
- left: 50%;
72
- transform: translate(-50%);
73
- }
74
- [data-sonner-toaster][data-y-position=top] {
75
- top: max(var(--offset), env(safe-area-inset-top));
76
- }
77
- [data-sonner-toaster][data-y-position=bottom] {
78
- bottom: max(var(--offset), env(safe-area-inset-bottom));
79
- }
80
- [data-sonner-toast] {
81
- --y: translateY(100%);
82
- --lift-amount: calc(var(--lift) * var(--gap));
83
- z-index: var(--z-index);
84
- position: absolute;
85
- opacity: 0;
86
- transform: var(--y);
87
- touch-action: none;
88
- will-change:
89
- transform,
90
- opacity,
91
- height;
92
- transition:
93
- transform .4s,
94
- opacity .4s,
95
- height .4s,
96
- box-shadow .2s;
97
- box-sizing: border-box;
98
- outline: none;
99
- overflow-wrap: anywhere;
100
- }
101
- [data-sonner-toast][data-styled=true] {
102
- padding: 16px;
103
- background: var(--normal-bg);
104
- border: 1px solid var(--normal-border);
105
- color: var(--normal-text);
106
- border-radius: var(--border-radius);
107
- box-shadow: 0 4px 12px #0000001a;
108
- width: var(--width);
109
- font-size: 13px;
110
- display: flex;
111
- align-items: center;
112
- gap: 6px;
113
- }
114
- [data-sonner-toast]:focus-visible {
115
- box-shadow: 0 4px 12px #0000001a, 0 0 0 2px #0003;
116
- }
117
- [data-sonner-toast][data-y-position=top] {
118
- top: 0;
119
- --y: translateY(-100%);
120
- --lift: 1;
121
- --lift-amount: calc(1 * var(--gap));
122
- }
123
- [data-sonner-toast][data-y-position=bottom] {
124
- bottom: 0;
125
- --y: translateY(100%);
126
- --lift: -1;
127
- --lift-amount: calc(var(--lift) * var(--gap));
128
- }
129
- [data-sonner-toast] [data-description] {
130
- font-weight: 400;
131
- line-height: 1.4;
132
- color: inherit;
133
- }
134
- [data-sonner-toast] [data-title] {
135
- font-weight: 500;
136
- line-height: 1.5;
137
- color: inherit;
138
- }
139
- [data-sonner-toast] [data-icon] {
140
- display: flex;
141
- height: 20px;
142
- width: 20px;
143
- position: relative;
144
- justify-content: flex-start;
145
- align-items: center;
146
- flex-shrink: 0;
147
- margin-left: var(--toast-icon-margin-start);
148
- margin-right: var(--toast-icon-margin-end);
149
- }
150
- [data-sonner-toast][data-promise=true] [data-icon] > svg {
151
- opacity: 0;
152
- transform: scale(.8);
153
- transform-origin: center;
154
- animation: sonner-fade-in .3s ease forwards;
155
- }
156
- [data-sonner-toast] [data-icon] > * {
157
- flex-shrink: 0;
158
- }
159
- [data-sonner-toast] [data-icon] svg {
160
- margin-left: var(--toast-svg-margin-start);
161
- margin-right: var(--toast-svg-margin-end);
162
- }
163
- [data-sonner-toast] [data-content] {
164
- display: flex;
165
- flex-direction: column;
166
- gap: 2px;
167
- }
168
- [data-sonner-toast] [data-button] {
169
- border-radius: 4px;
170
- padding-left: 8px;
171
- padding-right: 8px;
172
- height: 24px;
173
- font-size: 12px;
174
- color: var(--normal-bg);
175
- background: var(--normal-text);
176
- margin-left: var(--toast-button-margin-start);
177
- margin-right: var(--toast-button-margin-end);
178
- border: none;
179
- cursor: pointer;
180
- outline: none;
181
- transition: opacity .4s, box-shadow .2s;
182
- }
183
- [data-sonner-toast] [data-button]:focus-visible {
184
- box-shadow: 0 0 0 2px #0006;
185
- }
186
- [data-sonner-toast] [data-button]:first-of-type {
187
- margin-left: var(--toast-button-margin-start);
188
- margin-right: var(--toast-button-margin-end);
189
- }
190
- [data-sonner-toast] [data-cancel] {
191
- color: var(--normal-text);
192
- background: rgba(0, 0, 0, .08);
193
- }
194
- [data-sonner-toast][data-theme=dark] [data-cancel] {
195
- background: rgba(255, 255, 255, .3);
196
- }
197
- [data-sonner-toast] [data-close-button] {
198
- position: absolute;
199
- left: var(--toast-close-button-start);
200
- right: var(--toast-close-button-end);
201
- top: 0;
202
- height: 20px;
203
- width: 20px;
204
- display: flex;
205
- justify-content: center;
206
- align-items: center;
207
- padding: 0;
208
- background: var(--gray1);
209
- color: var(--gray12);
210
- border: 1px solid var(--gray4);
211
- transform: var(--toast-close-button-transform);
212
- border-radius: 50%;
213
- opacity: 0;
214
- cursor: pointer;
215
- z-index: 1;
216
- transition:
217
- opacity .1s,
218
- background .2s,
219
- border-color .2s;
220
- }
221
- [data-sonner-toast] [data-close-button]:focus-visible {
222
- box-shadow: 0 4px 12px #0000001a, 0 0 0 2px #0003;
223
- }
224
- [data-sonner-toast] [data-disabled=true] {
225
- cursor: not-allowed;
226
- }
227
- [data-sonner-toast]:hover [data-close-button] {
228
- opacity: 1;
229
- }
230
- [data-sonner-toast]:focus [data-close-button] {
231
- opacity: 1;
232
- }
233
- [data-sonner-toast]:focus-within [data-close-button] {
234
- opacity: 1;
235
- }
236
- [data-sonner-toast]:hover [data-close-button]:hover {
237
- background: var(--gray2);
238
- border-color: var(--gray5);
239
- }
240
- [data-sonner-toast][data-swiping=true]:before {
241
- content: "";
242
- position: absolute;
243
- left: 0;
244
- right: 0;
245
- height: 100%;
246
- }
247
- [data-sonner-toast][data-y-position=top][data-swiping=true]:before {
248
- bottom: 50%;
249
- transform: scaleY(3) translateY(50%);
250
- }
251
- [data-sonner-toast][data-y-position=bottom][data-swiping=true]:before {
252
- top: 50%;
253
- transform: scaleY(3) translateY(-50%);
254
- }
255
- [data-sonner-toast][data-swiping=false][data-removed=true]:before {
256
- content: "";
257
- position: absolute;
258
- top: 0;
259
- right: 0;
260
- bottom: 0;
261
- left: 0;
262
- transform: scaleY(2);
263
- }
264
- [data-sonner-toast]:after {
265
- content: "";
266
- position: absolute;
267
- left: 0;
268
- height: calc(var(--gap) + 1px);
269
- bottom: 100%;
270
- width: 100%;
271
- }
272
- [data-sonner-toast][data-mounted=true] {
273
- --y: translateY(0);
274
- opacity: 1;
275
- }
276
- [data-sonner-toast][data-expanded=false][data-front=false] {
277
- --scale: var(--toasts-before) * .05 + 1;
278
- --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
279
- height: var(--front-toast-height);
280
- }
281
- [data-sonner-toast] > * {
282
- transition: opacity .4s;
283
- }
284
- [data-sonner-toast][data-expanded=false][data-front=false][data-styled=true] > * {
285
- opacity: 0;
286
- }
287
- [data-sonner-toast][data-visible=false] {
288
- opacity: 0;
289
- pointer-events: none;
290
- }
291
- [data-sonner-toast][data-mounted=true][data-expanded=true] {
292
- --y: translateY(calc(var(--lift) * var(--offset)));
293
- height: var(--initial-height);
294
- }
295
- [data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false] {
296
- --y: translateY(calc(var(--lift) * -100%));
297
- opacity: 0;
298
- }
299
- [data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true] {
300
- --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
301
- opacity: 0;
302
- }
303
- [data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false] {
304
- --y: translateY(40%);
305
- opacity: 0;
306
- transition: transform .5s, opacity .2s;
307
- }
308
- [data-sonner-toast][data-removed=true][data-front=false]:before {
309
- height: calc(var(--initial-height) + 20%);
310
- }
311
- [data-sonner-toast][data-swiping=true] {
312
- transform: var(--y) translateY(var(--swipe-amount, 0px));
313
- transition: none;
314
- }
315
- [data-sonner-toast][data-swipe-out=true][data-y-position=bottom],
316
- [data-sonner-toast][data-swipe-out=true][data-y-position=top] {
317
- animation: swipe-out .2s ease-out forwards;
318
- }
319
- @keyframes swipe-out {
320
- 0% {
321
- transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));
322
- opacity: 1;
323
- }
324
- to {
325
- transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));
326
- opacity: 0;
327
- }
328
- }
329
- @media (max-width: 600px) {
330
- [data-sonner-toaster] {
331
- position: fixed;
332
- --mobile-offset: 16px;
333
- right: var(--mobile-offset);
334
- left: var(--mobile-offset);
335
- width: 100%;
336
- }
337
- [data-sonner-toaster] [data-sonner-toast] {
338
- left: 0;
339
- right: 0;
340
- width: calc(100% - 32px);
341
- }
342
- [data-sonner-toaster][data-x-position=left] {
343
- left: var(--mobile-offset);
344
- }
345
- [data-sonner-toaster][data-y-position=bottom] {
346
- bottom: 20px;
347
- }
348
- [data-sonner-toaster][data-y-position=top] {
349
- top: 20px;
350
- }
351
- [data-sonner-toaster][data-x-position=center] {
352
- left: var(--mobile-offset);
353
- right: var(--mobile-offset);
354
- transform: none;
355
- }
356
- }
357
- [data-sonner-toaster][data-theme=light] {
358
- --normal-bg: #fff;
359
- --normal-border: var(--gray4);
360
- --normal-text: var(--gray12);
361
- --success-bg: hsl(143, 85%, 96%);
362
- --success-border: hsl(145, 92%, 91%);
363
- --success-text: hsl(140, 100%, 27%);
364
- --info-bg: hsl(208, 100%, 97%);
365
- --info-border: hsl(221, 91%, 91%);
366
- --info-text: hsl(210, 92%, 45%);
367
- --warning-bg: hsl(49, 100%, 97%);
368
- --warning-border: hsl(49, 91%, 91%);
369
- --warning-text: hsl(31, 92%, 45%);
370
- --error-bg: hsl(359, 100%, 97%);
371
- --error-border: hsl(359, 100%, 94%);
372
- --error-text: hsl(360, 100%, 45%);
373
- }
374
- [data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true] {
375
- --normal-bg: #000;
376
- --normal-border: hsl(0, 0%, 20%);
377
- --normal-text: var(--gray1);
378
- }
379
- [data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true] {
380
- --normal-bg: #fff;
381
- --normal-border: var(--gray3);
382
- --normal-text: var(--gray12);
383
- }
384
- [data-sonner-toaster][data-theme=dark] {
385
- --normal-bg: #000;
386
- --normal-border: hsl(0, 0%, 20%);
387
- --normal-text: var(--gray1);
388
- --success-bg: hsl(150, 100%, 6%);
389
- --success-border: hsl(147, 100%, 12%);
390
- --success-text: hsl(150, 86%, 65%);
391
- --info-bg: hsl(215, 100%, 6%);
392
- --info-border: hsl(223, 100%, 12%);
393
- --info-text: hsl(216, 87%, 65%);
394
- --warning-bg: hsl(64, 100%, 6%);
395
- --warning-border: hsl(60, 100%, 12%);
396
- --warning-text: hsl(46, 87%, 65%);
397
- --error-bg: hsl(358, 76%, 10%);
398
- --error-border: hsl(357, 89%, 16%);
399
- --error-text: hsl(358, 100%, 81%);
400
- }
401
- [data-rich-colors=true] [data-sonner-toast][data-type=success],
402
- [data-rich-colors=true] [data-sonner-toast][data-type=success] [data-close-button] {
403
- background: var(--success-bg);
404
- border-color: var(--success-border);
405
- color: var(--success-text);
406
- }
407
- [data-rich-colors=true] [data-sonner-toast][data-type=info],
408
- [data-rich-colors=true] [data-sonner-toast][data-type=info] [data-close-button] {
409
- background: var(--info-bg);
410
- border-color: var(--info-border);
411
- color: var(--info-text);
412
- }
413
- [data-rich-colors=true] [data-sonner-toast][data-type=warning],
414
- [data-rich-colors=true] [data-sonner-toast][data-type=warning] [data-close-button] {
415
- background: var(--warning-bg);
416
- border-color: var(--warning-border);
417
- color: var(--warning-text);
418
- }
419
- [data-rich-colors=true] [data-sonner-toast][data-type=error],
420
- [data-rich-colors=true] [data-sonner-toast][data-type=error] [data-close-button] {
421
- background: var(--error-bg);
422
- border-color: var(--error-border);
423
- color: var(--error-text);
424
- }
425
- .sonner-loading-wrapper {
426
- --size: 16px;
427
- height: var(--size);
428
- width: var(--size);
429
- top: 0;
430
- right: 0;
431
- bottom: 0;
432
- left: 0;
433
- z-index: 10;
434
- }
435
- .sonner-loading-wrapper[data-visible=false] {
436
- display: none;
437
- transform-origin: center;
438
- animation: sonner-fade-out .2s ease forwards;
439
- }
440
- .sonner-spinner {
441
- position: relative;
442
- top: 50%;
443
- left: 50%;
444
- height: var(--size);
445
- width: var(--size);
446
- }
447
- .sonner-loading-bar {
448
- animation: sonner-spin 1.2s linear infinite;
449
- background: var(--gray11);
450
- border-radius: 6px;
451
- height: 8%;
452
- left: -10%;
453
- position: absolute;
454
- top: -3.9%;
455
- width: 24%;
456
- }
457
- .sonner-loading-bar:nth-child(1) {
458
- animation-delay: -1.2s;
459
- transform: rotate(.0001deg) translate(146%);
460
- }
461
- .sonner-loading-bar:nth-child(2) {
462
- animation-delay: -1.1s;
463
- transform: rotate(30deg) translate(146%);
464
- }
465
- .sonner-loading-bar:nth-child(3) {
466
- animation-delay: -1s;
467
- transform: rotate(60deg) translate(146%);
468
- }
469
- .sonner-loading-bar:nth-child(4) {
470
- animation-delay: -.9s;
471
- transform: rotate(90deg) translate(146%);
472
- }
473
- .sonner-loading-bar:nth-child(5) {
474
- animation-delay: -.8s;
475
- transform: rotate(120deg) translate(146%);
476
- }
477
- .sonner-loading-bar:nth-child(6) {
478
- animation-delay: -.7s;
479
- transform: rotate(150deg) translate(146%);
480
- }
481
- .sonner-loading-bar:nth-child(7) {
482
- animation-delay: -.6s;
483
- transform: rotate(180deg) translate(146%);
484
- }
485
- .sonner-loading-bar:nth-child(8) {
486
- animation-delay: -.5s;
487
- transform: rotate(210deg) translate(146%);
488
- }
489
- .sonner-loading-bar:nth-child(9) {
490
- animation-delay: -.4s;
491
- transform: rotate(240deg) translate(146%);
492
- }
493
- .sonner-loading-bar:nth-child(10) {
494
- animation-delay: -.3s;
495
- transform: rotate(270deg) translate(146%);
496
- }
497
- .sonner-loading-bar:nth-child(11) {
498
- animation-delay: -.2s;
499
- transform: rotate(300deg) translate(146%);
500
- }
501
- .sonner-loading-bar:nth-child(12) {
502
- animation-delay: -.1s;
503
- transform: rotate(330deg) translate(146%);
504
- }
505
- @keyframes sonner-fade-in {
506
- 0% {
507
- opacity: 0;
508
- transform: scale(.8);
509
- }
510
- to {
511
- opacity: 1;
512
- transform: scale(1);
513
- }
514
- }
515
- @keyframes sonner-fade-out {
516
- 0% {
517
- opacity: 1;
518
- transform: scale(1);
519
- }
520
- to {
521
- opacity: 0;
522
- transform: scale(.8);
523
- }
524
- }
525
- @keyframes sonner-spin {
526
- 0% {
527
- opacity: 1;
528
- }
529
- to {
530
- opacity: .15;
531
- }
532
- }
533
- @media (prefers-reduced-motion) {
534
- [data-sonner-toast],
535
- [data-sonner-toast] > *,
536
- .sonner-loading-bar {
537
- transition: none !important;
538
- animation: none !important;
539
- }
540
- }