react-ecosistema-unp 1.7.3 → 1.7.6
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
|
-
.container-ecosistema-unp{margin:0 auto;width:min(
|
|
1
|
+
.container-ecosistema-unp{margin:0 auto;width:min(1000px,92%);max-width:100%;box-sizing:border-box;padding:0 .5rem;transition:width .3s ease}@media (max-width: 1600px){.container-ecosistema-unp{width:min(950px,90%)}}@media (max-width: 1333px){.container-ecosistema-unp{width:min(900px,88%)}}@media (max-width: 1176px){.container-ecosistema-unp{width:min(850px,92%)}}@media (max-width: 1024px){.container-ecosistema-unp{width:min(800px,95%)}}@media (max-width: 900px){.container-ecosistema-unp{width:90%}}@media (max-width: 768px){.container-ecosistema-unp{width:95%;padding:0 1rem}}@media (max-width: 480px){.container-ecosistema-unp{width:100%;padding:0 .75rem}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--modal-gap: 10px;--modal-padding: 1.25rem;--modal-primary-width: 42%;--half-available: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) / 2);--primary-30: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) * .4);--secondary-70: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) * .6)}body.
|
|
1
|
+
:root{--modal-gap: 10px;--modal-padding: 1.25rem;--modal-primary-width: 42%;--half-available: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) / 2);--primary-30: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) * .4);--secondary-70: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) * .6)}body.eco_modal_open{overflow:hidden}.eco_modal_overlay{position:fixed;background:#00000080;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:row;justify-content:flex-start;transition:opacity .4s ease,visibility .4s ease;opacity:0;visibility:hidden;z-index:1000;gap:var(--modal-gap);box-sizing:border-box;padding:0}.eco_modal_overlay.eco_modal_primary_left{justify-content:flex-start}.eco_modal_overlay.eco_modal_primary_right{justify-content:flex-end}.eco_modal_overlay.eco_modal_primary_center{justify-content:center}.eco_modal_overlay.eco_modal_secondary_overlay{background:transparent!important;pointer-events:none}.eco_modal_overlay.eco_modal_show{opacity:1;visibility:visible}.eco_modal_overlay.eco_modal_hide{opacity:0;visibility:hidden}.eco_modal_container{height:95vh;background:#fff;box-shadow:0 4px 8px #0003;position:relative;transition:left .4s ease,right .4s ease,width .4s ease,height .4s ease,border-radius .3s ease,transform .4s ease,opacity .4s ease;pointer-events:auto;display:flex;flex-direction:column;margin:var(--modal-padding);border-radius:.9rem}.eco_modal_container.primary{z-index:1001}.eco_modal_container.secondary{z-index:1002;flex:1 1 auto;min-width:0}.eco_modal_container.primary:not(.eco_modal_centered):not(.eco_modal_maximized){width:var(--modal-primary-width, 42%)!important;flex-shrink:0}.eco_modal_container.primary.eco_modal_centered:not(.eco_modal_maximized){width:var(--modal-primary-width, 50%)!important;flex-shrink:0}.eco_modal_container.eco_modal_primary_left.eco_modal_show{transform:translate(0)}.eco_modal_container.eco_modal_primary_right{transform:translate(100%)}.eco_modal_container.eco_modal_primary_right.eco_modal_show{transform:translate(0)}.eco_modal_container.eco_modal_primary_center{transform:scale(.8);opacity:0}.eco_modal_container.eco_modal_primary_center.eco_modal_show{transform:scale(1);opacity:1}.eco_modal_container.secondary-left{transform:translateY(-100%)}.eco_modal_container.secondary-left.eco_modal_show{transform:translateY(0)}.eco_modal_container.secondary-right{transform:translateY(100%)}.eco_modal_container.secondary-right.eco_modal_show{transform:translateY(0)}.eco_modal_header{display:flex;justify-content:space-between;align-items:center;padding:10px 30px;color:#fff;font-weight:500;font-size:16px;border-radius:12px 12px 0 0;flex-shrink:0}.eco_modal_body{flex-grow:1;overflow-y:auto;border-radius:0 0 12px 12px}.eco_modal_close_button,.eco_modal_max_button{background:none;border:none;font-size:1.5em;cursor:pointer;color:#fff}.eco_modal_close_button:disabled,.eco_modal_max_button:disabled{opacity:.5;cursor:not-allowed}.eco_modal_close_button:hover:not(:disabled),.eco_modal_max_button:hover:not(:disabled),.eco_modal_icon_header:hover{color:#d36269}.eco_modal_max_button{margin-bottom:1px}.eco_modal_body::-webkit-scrollbar{width:10px}.eco_modal_body::-webkit-scrollbar-track{background:transparent}.eco_modal_body::-webkit-scrollbar-thumb{background-color:#303d50;border-radius:10px;border:3px solid transparent;background-clip:padding-box}.eco_modal_container.eco_modal_maximized{position:fixed!important;z-index:1003!important}.eco_modal_container.eco_modal_maximized.eco_modal_primary_left,.eco_modal_container.eco_modal_maximized.eco_modal_primary_right{width:calc(100vw - 2 * var(--modal-padding))!important;transform:none!important}.eco_modal_container.eco_modal_maximized.eco_modal_primary_center{left:50%!important;right:auto!important;width:calc(100vw - 2 * var(--modal-padding))!important;transform:translate(-50%)!important}.eco_modal_container.eco_modal_maximized.secondary{width:calc(100vw - 2 * var(--modal-padding))!important;transform:none!important}.eco_modal_two_modals_50 .eco_modal_container:not(.eco_modal_maximized){position:fixed!important;height:95vh;transform:none!important;opacity:1!important;border-radius:12px}.eco_modal_two_modals_50.eco_modal_primary_right .eco_modal_container:not(.eco_modal_maximized).eco_modal_primary_right{right:0!important;left:auto!important;width:var(--half-available)!important}.eco_modal_two_modals_50.eco_modal_primary_right .eco_modal_container:not(.eco_modal_maximized).secondary{left:0!important;right:auto!important;width:var(--half-available)!important}.eco_modal_two_modals_50.eco_modal_primary_left .eco_modal_container:not(.eco_modal_maximized).eco_modal_primary_left{left:0!important;right:auto!important;width:var(--half-available)!important}.eco_modal_two_modals_50.eco_modal_primary_left .eco_modal_container:not(.eco_modal_maximized).secondary{right:0!important;left:auto!important;width:var(--half-available)!important}.eco_modal_two_modals_50 .eco_modal_overlay{gap:var(--modal-gap)}.eco_modal_two_modals_large .eco_modal_container:not(.eco_modal_maximized){position:fixed!important;height:95vh;transform:none!important;opacity:1!important;border-radius:12px}.eco_modal_two_modals_large.eco_modal_primary_right .eco_modal_container:not(.eco_modal_maximized).eco_modal_primary_right{right:0!important;left:auto!important;width:var(--primary-30)!important}.eco_modal_two_modals_large.eco_modal_primary_right .eco_modal_container:not(.eco_modal_maximized).secondary{left:0!important;right:auto!important;width:var(--secondary-70)!important}.eco_modal_two_modals_large.eco_modal_primary_left .eco_modal_container:not(.eco_modal_maximized).eco_modal_primary_left{left:0!important;right:auto!important;width:var(--primary-30)!important}.eco_modal_two_modals_large.eco_modal_primary_left .eco_modal_container:not(.eco_modal_maximized).secondary{right:0!important;left:auto!important;width:var(--secondary-70)!important}.eco_modal_two_modals_large .eco_modal_overlay{gap:var(--modal-gap)}@media (max-width: 992px){.eco_modal_two_modals_50 .eco_modal_container:not(.eco_modal_maximized){position:static!important;width:100%!important}}@media (max-width: 1920px){:root{--modal-primary-width: 40% !important}}@media (max-width: 1800px){:root{--modal-primary-width: 42.5% !important}}@media (max-width: 1650px){:root{--modal-primary-width: 45% !important}}@media (max-width: 1500px){:root{--modal-primary-width: 50% !important}}@media (max-width: 1425px){:root{--modal-primary-width: 55% !important}}@media (max-width: 1275px){:root{--modal-primary-width: 57.5% !important}}@media (max-width: 1150px){:root{--modal-primary-width: 60% !important}}@media (max-width: 992px){:root{--modal-primary-width: 70% !important}}@media (max-width: 768px){:root{--modal-primary-width: 85% !important}}
|
|
@@ -1,97 +1,97 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as m, useRef as q, useEffect as
|
|
1
|
+
import { jsx as t, jsxs as i } from "react/jsx-runtime";
|
|
2
|
+
import { useState as m, useRef as q, useEffect as u } from "react";
|
|
3
3
|
import { R as I } from "../../../index-BrykDZgK.js";
|
|
4
4
|
import { q as M, r as A } from "../../../index-069JzHFQ.js";
|
|
5
5
|
import '../../../assets/EcoModalStyles.css';/* empty css */
|
|
6
6
|
const V = ({
|
|
7
|
-
show:
|
|
8
|
-
onHide:
|
|
9
|
-
title:
|
|
10
|
-
children:
|
|
11
|
-
closeModalOut:
|
|
12
|
-
isMaximized:
|
|
13
|
-
onToggleMaximize:
|
|
14
|
-
showMaximizeButton:
|
|
15
|
-
modalType:
|
|
16
|
-
primaryPosition:
|
|
17
|
-
disableClose:
|
|
18
|
-
hasSecondaryModalOpen:
|
|
19
|
-
otherModalOpen:
|
|
20
|
-
widthPercent:
|
|
21
|
-
headerBgColor:
|
|
22
|
-
hasBody:
|
|
7
|
+
show: r,
|
|
8
|
+
onHide: f,
|
|
9
|
+
title: N,
|
|
10
|
+
children: S,
|
|
11
|
+
closeModalOut: k,
|
|
12
|
+
isMaximized: l,
|
|
13
|
+
onToggleMaximize: p,
|
|
14
|
+
showMaximizeButton: E = !1,
|
|
15
|
+
modalType: o = "primary",
|
|
16
|
+
primaryPosition: s = "right",
|
|
17
|
+
disableClose: h = !1,
|
|
18
|
+
hasSecondaryModalOpen: R = !1,
|
|
19
|
+
otherModalOpen: _ = !1,
|
|
20
|
+
widthPercent: y,
|
|
21
|
+
headerBgColor: j = "#303D50",
|
|
22
|
+
hasBody: D = !0
|
|
23
23
|
}) => {
|
|
24
|
-
const [
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}), [
|
|
24
|
+
const [b, v] = m(!1), [c, n] = m(!1), [g, w] = m(!1), a = q(null);
|
|
25
|
+
u(() => (w(!0), o === "secondary" && !a.current && (a.current = document.createElement("div"), a.current.className = "modal_portal_container", document.body.appendChild(a.current)), () => {
|
|
26
|
+
w(!1), a.current && (document.body.removeChild(a.current), a.current = null);
|
|
27
|
+
}), [o]), u(() => {
|
|
28
28
|
const e = document.body;
|
|
29
|
-
return
|
|
30
|
-
|
|
29
|
+
return r ? (v(!0), e.classList.add("eco_modal_open")) : (n(!0), setTimeout(() => {
|
|
30
|
+
g && (v(!1), n(!1)), e.classList.remove("eco_modal_open");
|
|
31
31
|
}, 200)), () => {
|
|
32
|
-
e.classList.remove("
|
|
32
|
+
e.classList.remove("eco_modal_open");
|
|
33
33
|
};
|
|
34
|
-
}, [
|
|
34
|
+
}, [r, g]), u(() => {
|
|
35
35
|
const e = document.body;
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
o === "primary" && (e.classList.remove("eco_modal_primary_right", "eco_modal_primary_left"), e.classList.add(
|
|
37
|
+
s === "left" ? "eco_modal_primary_left" : "eco_modal_primary_right"
|
|
38
38
|
));
|
|
39
39
|
const d = () => {
|
|
40
|
-
if (!(
|
|
41
|
-
e.classList.remove("
|
|
40
|
+
if (!(r && _ && !l)) {
|
|
41
|
+
e.classList.remove("eco_modal_two_modals_50", "eco_modal_two_modals_large");
|
|
42
42
|
return;
|
|
43
43
|
}
|
|
44
|
-
window.innerWidth >= 1200 ? (e.classList.add("
|
|
44
|
+
window.innerWidth >= 1200 ? (e.classList.add("eco_modal_two_modals_large"), e.classList.remove("eco_modal_two_modals_50")) : (e.classList.add("eco_modal_two_modals_50"), e.classList.remove("eco_modal_two_modals_large"));
|
|
45
45
|
};
|
|
46
46
|
return d(), window.addEventListener("resize", d), () => {
|
|
47
|
-
|
|
47
|
+
o === "primary" && e.classList.remove("eco_modal_primary_right", "eco_modal_primary_left"), e.classList.remove("eco_modal_two_modals_50", "eco_modal_two_modals_large"), window.removeEventListener("resize", d);
|
|
48
48
|
};
|
|
49
|
-
}, [s, r,
|
|
50
|
-
const $ = () =>
|
|
51
|
-
const e = ["
|
|
52
|
-
return
|
|
49
|
+
}, [o, s, r, _, l]);
|
|
50
|
+
const $ = () => o === "primary" ? s === "center" ? "eco_modal_primary_center" : `eco_modal_primary_${s}` : `eco_modal_secondary_${s === "left" ? "right" : "left"}`, x = () => {
|
|
51
|
+
const e = ["eco_modal_overlay"];
|
|
52
|
+
return o === "primary" ? e.push(`eco_modal_primary_${s}`) : e.push("eco_modal_secondary_overlay"), b && !c && e.push("eco_modal_show"), c && e.push("eco_modal_hide"), e.join(" ");
|
|
53
53
|
}, W = () => {
|
|
54
|
-
const e = ["
|
|
55
|
-
return
|
|
56
|
-
},
|
|
57
|
-
!
|
|
58
|
-
|
|
54
|
+
const e = ["eco_modal_container", o, $()];
|
|
55
|
+
return b && !c && e.push("eco_modal_show"), c && e.push("eco_modal_hide"), l && e.push("eco_modal_maximized"), s === "center" && e.push("eco_modal_centered"), e.join(" ");
|
|
56
|
+
}, C = o === "primary" ? h || R : h, z = o === "primary" && r && _, F = () => {
|
|
57
|
+
!C && o === "primary" && k && (n(!0), setTimeout(() => {
|
|
58
|
+
f(), n(!1);
|
|
59
59
|
}, 200));
|
|
60
60
|
}, O = () => {
|
|
61
61
|
const e = {};
|
|
62
|
-
return
|
|
63
|
-
},
|
|
62
|
+
return o === "primary" && !l && y && (e["--modal-primary-width"] = `${y}%`), e;
|
|
63
|
+
}, L = /* @__PURE__ */ t("div", { className: x(), onClick: F, children: /* @__PURE__ */ i(
|
|
64
64
|
"div",
|
|
65
65
|
{
|
|
66
66
|
className: W(),
|
|
67
67
|
style: O(),
|
|
68
68
|
onClick: (e) => e.stopPropagation(),
|
|
69
69
|
children: [
|
|
70
|
-
/* @__PURE__ */
|
|
70
|
+
/* @__PURE__ */ i(
|
|
71
71
|
"div",
|
|
72
72
|
{
|
|
73
|
-
className: "
|
|
74
|
-
style: { backgroundColor:
|
|
73
|
+
className: "eco_modal_header",
|
|
74
|
+
style: { backgroundColor: j },
|
|
75
75
|
children: [
|
|
76
|
-
/* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
|
|
76
|
+
/* @__PURE__ */ t("span", { children: N }),
|
|
77
|
+
/* @__PURE__ */ i("div", { style: { display: "flex", gap: 10 }, children: [
|
|
78
|
+
E && p && /* @__PURE__ */ t(
|
|
79
79
|
"button",
|
|
80
80
|
{
|
|
81
|
-
className: "
|
|
82
|
-
onClick:
|
|
81
|
+
className: "eco_modal_max_button",
|
|
82
|
+
onClick: p,
|
|
83
83
|
type: "button",
|
|
84
84
|
disabled: z,
|
|
85
|
-
children:
|
|
85
|
+
children: l ? /* @__PURE__ */ t(M, { size: 14, className: "eco_modal_icon_header" }) : /* @__PURE__ */ t(A, { size: 14, className: "eco_modal_icon_header" })
|
|
86
86
|
}
|
|
87
87
|
),
|
|
88
|
-
/* @__PURE__ */
|
|
88
|
+
/* @__PURE__ */ t(
|
|
89
89
|
"button",
|
|
90
90
|
{
|
|
91
|
-
className: "
|
|
92
|
-
onClick:
|
|
91
|
+
className: "eco_modal_close_button",
|
|
92
|
+
onClick: f,
|
|
93
93
|
type: "button",
|
|
94
|
-
disabled:
|
|
94
|
+
disabled: C,
|
|
95
95
|
children: "×"
|
|
96
96
|
}
|
|
97
97
|
)
|
|
@@ -99,18 +99,18 @@ const V = ({
|
|
|
99
99
|
]
|
|
100
100
|
}
|
|
101
101
|
),
|
|
102
|
-
/* @__PURE__ */
|
|
102
|
+
/* @__PURE__ */ t(
|
|
103
103
|
"div",
|
|
104
104
|
{
|
|
105
|
-
className: "
|
|
106
|
-
style: { padding:
|
|
107
|
-
children:
|
|
105
|
+
className: "eco_modal_body",
|
|
106
|
+
style: { padding: D ? "1rem" : "0rem" },
|
|
107
|
+
children: S
|
|
108
108
|
}
|
|
109
109
|
)
|
|
110
110
|
]
|
|
111
111
|
}
|
|
112
112
|
) });
|
|
113
|
-
return
|
|
113
|
+
return o === "secondary" && a.current ? I.createPortal(L, a.current) : L;
|
|
114
114
|
};
|
|
115
115
|
export {
|
|
116
116
|
V as EcoModal
|