@floegence/floe-webapp-core 0.36.71 → 0.36.72
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/floe.css +16 -13
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/floe.css
CHANGED
|
@@ -429,6 +429,9 @@
|
|
|
429
429
|
.floe-floating-presence {
|
|
430
430
|
--floe-floating-enter-duration: 140ms;
|
|
431
431
|
--floe-floating-exit-duration: 110ms;
|
|
432
|
+
--floe-floating-presence-x: 0;
|
|
433
|
+
--floe-floating-presence-y: 0;
|
|
434
|
+
--floe-floating-presence-scale: 1;
|
|
432
435
|
--floe-floating-enter-x: 0;
|
|
433
436
|
--floe-floating-enter-y: 0;
|
|
434
437
|
--floe-floating-exit-x: 0;
|
|
@@ -436,31 +439,30 @@
|
|
|
436
439
|
--floe-floating-enter-scale: 0.98;
|
|
437
440
|
--floe-floating-exit-scale: 0.985;
|
|
438
441
|
opacity: 1;
|
|
439
|
-
|
|
440
|
-
scale: 1;
|
|
442
|
+
transform: translate(var(--floe-floating-presence-x), var(--floe-floating-presence-y)) scale(var(--floe-floating-presence-scale));
|
|
441
443
|
transform-origin: var(--floe-floating-origin, center);
|
|
442
444
|
transition:
|
|
443
445
|
opacity var(--floe-floating-enter-duration) ease-out,
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
will-change: opacity, translate, scale;
|
|
446
|
+
transform var(--floe-floating-enter-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
447
|
+
will-change: opacity, transform;
|
|
447
448
|
}
|
|
448
449
|
|
|
449
450
|
.floe-floating-presence[data-floating-presence='entering'] {
|
|
450
451
|
opacity: 0;
|
|
451
|
-
|
|
452
|
-
|
|
452
|
+
--floe-floating-presence-x: var(--floe-floating-enter-x);
|
|
453
|
+
--floe-floating-presence-y: var(--floe-floating-enter-y);
|
|
454
|
+
--floe-floating-presence-scale: var(--floe-floating-enter-scale);
|
|
453
455
|
}
|
|
454
456
|
|
|
455
457
|
.floe-floating-presence[data-floating-presence='exiting'] {
|
|
456
458
|
opacity: 0;
|
|
457
459
|
pointer-events: none;
|
|
458
|
-
|
|
459
|
-
|
|
460
|
+
--floe-floating-presence-x: var(--floe-floating-exit-x);
|
|
461
|
+
--floe-floating-presence-y: var(--floe-floating-exit-y);
|
|
462
|
+
--floe-floating-presence-scale: var(--floe-floating-exit-scale);
|
|
460
463
|
transition:
|
|
461
464
|
opacity var(--floe-floating-exit-duration) ease-in,
|
|
462
|
-
|
|
463
|
-
scale var(--floe-floating-exit-duration) cubic-bezier(0.4, 0, 1, 1);
|
|
465
|
+
transform var(--floe-floating-exit-duration) cubic-bezier(0.4, 0, 1, 1);
|
|
464
466
|
}
|
|
465
467
|
|
|
466
468
|
.floe-floating-presence--suspended {
|
|
@@ -563,8 +565,9 @@
|
|
|
563
565
|
@media (prefers-reduced-motion: reduce) {
|
|
564
566
|
.floe-floating-presence {
|
|
565
567
|
transition: opacity 1ms linear;
|
|
566
|
-
|
|
567
|
-
|
|
568
|
+
--floe-floating-presence-x: 0 !important;
|
|
569
|
+
--floe-floating-presence-y: 0 !important;
|
|
570
|
+
--floe-floating-presence-scale: 1 !important;
|
|
568
571
|
will-change: opacity;
|
|
569
572
|
}
|
|
570
573
|
}
|