@cfx-dev/ui-components 5.0.18 → 5.0.20
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes cfxui__Flyout__backdrop-appearance__d9564{0%{opacity:0}to{opacity:1}}@keyframes cfxui__Flyout__backdrop-disappearance__bf898{0%{opacity:1}to{opacity:0}}@keyframes cfxui__Flyout__holder-appearance-rtl__3ccf2{0%{opacity:0;transform:translate(calc(var(--quant) * 2.5))}to{opacity:1;transform:translate(0)}}@keyframes cfxui__Flyout__holder-appearance-btu__84100{0%{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}to{opacity:1;transform:translateY(0)}}@keyframes cfxui__Flyout__holder-disappearance-ltr__965dd{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(calc(var(--quant) * 2.5))}}@keyframes cfxui__Flyout__holder-disappearance-utb__94b61{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}}.cfxui__Flyout__root__eba04{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{position:fixed;top:0;right:0;bottom:0;left:0}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{opacity:0;position:fixed;top:0;right:0;bottom:0;left:0}@media (min-width: 640px){.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{inset:0 0 0 calc(100vw - 420px);border-radius:var(--border-radius-medium) 0 0 var(--border-radius-medium)}}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--quant) * 2)}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009 .cfxui__Flyout__title__b235a{flex-grow:1;width:1px;display:flex;align-items:center;gap:calc(var(--quant) * 2);font-size:var(--font-size-xxlarge)}.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__backdrop__57f9e{opacity:0;pointer-events:none;animation:cfxui__Flyout__backdrop-disappearance__bf898 .2s ease}.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__holder__d80b5{opacity:0;transform:translate(calc(var(--quant) * 2.5));pointer-events:none;animation:cfxui__Flyout__holder-disappearance-utb__94b61 .2s ease}
|
|
1
|
+
@keyframes cfxui__Flyout__backdrop-appearance__d9564{0%{opacity:0}to{opacity:1}}@keyframes cfxui__Flyout__backdrop-disappearance__bf898{0%{opacity:1}to{opacity:0}}@keyframes cfxui__Flyout__holder-appearance-rtl__3ccf2{0%{opacity:0;transform:translate(calc(var(--quant) * 2.5))}to{opacity:1;transform:translate(0)}}@keyframes cfxui__Flyout__holder-appearance-btu__84100{0%{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}to{opacity:1;transform:translateY(0)}}@keyframes cfxui__Flyout__holder-disappearance-ltr__965dd{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(calc(var(--quant) * 2.5))}}@keyframes cfxui__Flyout__holder-disappearance-utb__94b61{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(var(--quant) * 2.5))}}.cfxui__Flyout__root__eba04{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;pointer-events:none}.cfxui__Flyout__root__eba04 .cfxui__Flyout__backdrop__57f9e{position:fixed;top:0;right:0;bottom:0;left:0}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{opacity:0;position:fixed;top:0;right:0;bottom:0;left:0}.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5 .cfxui__Flyout__content__04e42{width:100%;height:100%;overflow:hidden}@media (min-width: 640px){.cfxui__Flyout__root__eba04 .cfxui__Flyout__holder__d80b5{inset:0 0 0 calc(100vw - 420px);border-radius:var(--border-radius-medium) 0 0 var(--border-radius-medium)}}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--quant) * 2)}.cfxui__Flyout__root__eba04 .cfxui__Flyout__header__40009 .cfxui__Flyout__title__b235a{flex-grow:1;width:1px;display:flex;align-items:center;gap:calc(var(--quant) * 2);font-size:var(--font-size-xxlarge)}.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__backdrop__57f9e{opacity:0;pointer-events:none;animation:cfxui__Flyout__backdrop-disappearance__bf898 .2s ease}.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__holder__d80b5{opacity:0;transform:translate(calc(var(--quant) * 2.5));pointer-events:none;animation:cfxui__Flyout__holder-disappearance-utb__94b61 .2s ease}@media (min-width: 640px){.cfxui__Flyout__root__eba04.cfxui__Flyout__closed__aa9a7 .cfxui__Flyout__holder__d80b5{animation:cfxui__Flyout__holder-disappearance-ltr__965dd .2s ease}}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29{opacity:1}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__backdrop__57f9e{opacity:1;pointer-events:all;animation:cfxui__Flyout__backdrop-appearance__d9564 .2s ease;background-color:var(--color-overlay-backdrop-background)}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__mask__72713{opacity:1}.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{opacity:1;transform:translate(0);pointer-events:all;animation:cfxui__Flyout__holder-appearance-btu__84100 .2s ease;background:rgba(var(--color-bg),1);border-radius:0}@media (min-width: 640px){.cfxui__Flyout__root__eba04.cfxui__Flyout__active__14a29 .cfxui__Flyout__holder__d80b5{animation:cfxui__Flyout__holder-appearance-rtl__3ccf2 .2s ease}}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452{--offset-flyout: calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--quant) * 4);top:var(--offset-flyout, initial);bottom:var(--offset-flyout, initial);padding:calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc((100vw - (var(--width) - var(--offset-safezone) * 2) * 1) * .5) calc((100vh - (var(--height) - var(--offset-safezone) * 2) * 1) * .5 - var(--offset-flyout, initial)) calc(var(--quant) * 6);border-radius:var(--border-radius-large) 0 0 var(--border-radius-large);box-shadow:0 0 0 calc(var(--quant) * .25) var(--color-flyout-holder-border) inset,var(--shadow-large, initial)}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452 .cfxui__Flyout__mask__72713{--mask-right: var(--viewport-right, initial);--mask-right-offset: calc(var(--mask-right, initial) - var(--quant) * 4);position:fixed;top:0;right:0;bottom:0;left:0;mask:linear-gradient(90deg,#000 0%,#000 var(--mask-right-offset, initial),transparent var(--mask-right, initial),transparent 100%);opacity:0;pointer-events:none}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-medium__1fc09 .cfxui__Flyout__holder__d80b5{left:32vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-small__038a5 .cfxui__Flyout__holder__d80b5{left:48vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-xsmall__839e8 .cfxui__Flyout__holder__d80b5{left:64vw}.cfxui__Flyout__root__eba04.cfxui__Flyout__theme-legacy__a3452.cfxui__Flyout__size-xxsmall__33712 .cfxui__Flyout__holder__d80b5{left:80vw;padding:calc(var(--quant) * 5) calc(var(--quant) * 3.75)}
|
|
@@ -9,16 +9,16 @@ import { noop as C } from "../../utils/functional.js";
|
|
|
9
9
|
import "../../utils/hooks/useGlobalKeyboardEvent.js";
|
|
10
10
|
import { useKeyboardClose as v } from "../../utils/hooks/useKeyboardClose.js";
|
|
11
11
|
import { useOutlet as z } from "../../utils/hooks/useOutlet.js";
|
|
12
|
-
const O = "cfxui__Flyout__root__eba04", T = "cfxui__Flyout__backdrop__57f9e", L = "cfxui__Flyout__holder__d80b5", I = "
|
|
12
|
+
const O = "cfxui__Flyout__root__eba04", T = "cfxui__Flyout__backdrop__57f9e", L = "cfxui__Flyout__holder__d80b5", I = "cfxui__Flyout__content__04e42", E = "cfxui__Flyout__header__40009", S = "cfxui__Flyout__title__b235a", U = "cfxui__Flyout__closed__aa9a7", g = "cfxui__Flyout__active__14a29", H = "cfxui__Flyout__mask__72713", e = {
|
|
13
13
|
root: O,
|
|
14
14
|
backdrop: T,
|
|
15
15
|
holder: L,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
content: I,
|
|
17
|
+
header: E,
|
|
18
|
+
title: S,
|
|
19
|
+
closed: U,
|
|
19
20
|
"backdrop-disappearance": "cfxui__Flyout__backdrop-disappearance__bf898",
|
|
20
21
|
"holder-disappearance-utb": "cfxui__Flyout__holder-disappearance-utb__94b61",
|
|
21
|
-
content: U,
|
|
22
22
|
"holder-disappearance-ltr": "cfxui__Flyout__holder-disappearance-ltr__965dd",
|
|
23
23
|
active: g,
|
|
24
24
|
"backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
|
|
@@ -43,10 +43,9 @@ function w(i) {
|
|
|
43
43
|
maskClassName: f
|
|
44
44
|
} = i, h = z(Y), [y, x] = u.useState(!1);
|
|
45
45
|
u.useEffect(() => {
|
|
46
|
-
if (
|
|
47
|
-
x(!0);
|
|
46
|
+
if (o)
|
|
48
47
|
return;
|
|
49
|
-
|
|
48
|
+
x(!0);
|
|
50
49
|
const t = document.getElementById(j);
|
|
51
50
|
return t == null || t.classList.add(n), () => t == null ? void 0 : t.classList.remove(n);
|
|
52
51
|
}, [o]), v(s);
|