@axos-web-dev/shared-components 2.0.0-dev.14 → 2.0.0-dev.14-modal-iFrame.2
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/CallToActionBar/index.js +4 -1
- package/dist/Comparison/Comparison.js +10 -1
- package/dist/ContentBanner/index.js +10 -1
- package/dist/HeroBanner/HeroBanner.js +8 -2
- package/dist/HeroBanner/LargeHeroBanner.js +4 -1
- package/dist/IconBillboard/IconBillboardSet.js +4 -1
- package/dist/ImageLink/ImageLinkSet.js +10 -1
- package/dist/Interstitial/Interstitial.d.ts +3 -0
- package/dist/Interstitial/Interstitial.js +37 -1
- package/dist/Interstitial/Interstitial.module.js +16 -10
- package/dist/NavigationMenu/AxosBank/MobileMenu/MobileMenu.module.js +27 -27
- package/dist/NavigationMenu/AxosBank/index.js +9 -1
- package/dist/StepItemSet/StepItemSet.js +10 -1
- package/dist/assets/Interstitial/Interstitial.css +43 -23
- package/dist/assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css +353 -353
- package/package.json +148 -148
|
@@ -127,7 +127,8 @@ const CallToActionBar = ({
|
|
|
127
127
|
variant,
|
|
128
128
|
displayText,
|
|
129
129
|
targetUrl,
|
|
130
|
-
type
|
|
130
|
+
type,
|
|
131
|
+
marketingIntersitial
|
|
131
132
|
}) => type === "Button" ? /* @__PURE__ */ jsx(
|
|
132
133
|
Button,
|
|
133
134
|
{
|
|
@@ -135,6 +136,7 @@ const CallToActionBar = ({
|
|
|
135
136
|
color: getVariant(variant),
|
|
136
137
|
size: "medium",
|
|
137
138
|
rounded: "medium",
|
|
139
|
+
marketingIntersitial,
|
|
138
140
|
children: displayText
|
|
139
141
|
},
|
|
140
142
|
id2
|
|
@@ -143,6 +145,7 @@ const CallToActionBar = ({
|
|
|
143
145
|
{
|
|
144
146
|
targetUrl,
|
|
145
147
|
variant: getVariant(variant),
|
|
148
|
+
marketingIntersitial,
|
|
146
149
|
children: displayText
|
|
147
150
|
},
|
|
148
151
|
id2
|
|
@@ -191,13 +191,21 @@ const Comparison = ({
|
|
|
191
191
|
table && /* @__PURE__ */ jsx(Fragment, { children: table })
|
|
192
192
|
] }) }),
|
|
193
193
|
callToActionRow && /* @__PURE__ */ jsx("div", { className: clsx(comparison_buttons, "push_up"), children: callToActionRow.map(
|
|
194
|
-
({
|
|
194
|
+
({
|
|
195
|
+
id: id2,
|
|
196
|
+
variant,
|
|
197
|
+
displayText,
|
|
198
|
+
targetUrl,
|
|
199
|
+
type,
|
|
200
|
+
marketingIntersitial
|
|
201
|
+
}) => type === "Button" ? /* @__PURE__ */ jsx(
|
|
195
202
|
Button,
|
|
196
203
|
{
|
|
197
204
|
targetUrl,
|
|
198
205
|
color: getVariant(variant),
|
|
199
206
|
size: "medium",
|
|
200
207
|
rounded: "medium",
|
|
208
|
+
marketingIntersitial,
|
|
201
209
|
children: displayText
|
|
202
210
|
},
|
|
203
211
|
id2
|
|
@@ -206,6 +214,7 @@ const Comparison = ({
|
|
|
206
214
|
{
|
|
207
215
|
targetUrl,
|
|
208
216
|
variant: getVariant(variant),
|
|
217
|
+
marketingIntersitial,
|
|
209
218
|
children: displayText
|
|
210
219
|
},
|
|
211
220
|
id2
|
|
@@ -69,13 +69,21 @@ const ContentBanner = ({
|
|
|
69
69
|
bodyCopy && /* @__PURE__ */ jsx("div", { className: `${body_copy}`, children: bodyCopy })
|
|
70
70
|
] }),
|
|
71
71
|
Array.isArray(callToActionRow) && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow?.map(
|
|
72
|
-
({
|
|
72
|
+
({
|
|
73
|
+
id: id2,
|
|
74
|
+
variant: variant2,
|
|
75
|
+
displayText,
|
|
76
|
+
targetUrl,
|
|
77
|
+
type,
|
|
78
|
+
marketingIntersitial
|
|
79
|
+
}) => type === "Button" ? /* @__PURE__ */ jsx(
|
|
73
80
|
Button,
|
|
74
81
|
{
|
|
75
82
|
targetUrl,
|
|
76
83
|
color: getVariant(variant2),
|
|
77
84
|
size: "medium",
|
|
78
85
|
rounded: "medium",
|
|
86
|
+
marketingIntersitial,
|
|
79
87
|
children: displayText
|
|
80
88
|
},
|
|
81
89
|
id2
|
|
@@ -85,6 +93,7 @@ const ContentBanner = ({
|
|
|
85
93
|
targetUrl,
|
|
86
94
|
variant: getVariant(variant2),
|
|
87
95
|
className: `${link}`,
|
|
96
|
+
marketingIntersitial,
|
|
88
97
|
children: displayText
|
|
89
98
|
},
|
|
90
99
|
id2
|
|
@@ -118,7 +118,8 @@ const HeroBanner = ({
|
|
|
118
118
|
targetUrl,
|
|
119
119
|
type,
|
|
120
120
|
icon,
|
|
121
|
-
newTab
|
|
121
|
+
newTab,
|
|
122
|
+
marketingIntersitial
|
|
122
123
|
}) => type === "Button" ? /* @__PURE__ */ jsxs(
|
|
123
124
|
Button,
|
|
124
125
|
{
|
|
@@ -128,6 +129,7 @@ const HeroBanner = ({
|
|
|
128
129
|
rounded: "medium",
|
|
129
130
|
square: icon !== void 0,
|
|
130
131
|
newTab,
|
|
132
|
+
marketingIntersitial,
|
|
131
133
|
children: [
|
|
132
134
|
typeof icon !== "undefined" ? /* @__PURE__ */ jsx("div", { className: clsx(selection_section_icon), children: /* @__PURE__ */ jsx(
|
|
133
135
|
"span",
|
|
@@ -154,6 +156,7 @@ const HeroBanner = ({
|
|
|
154
156
|
variant: getVariant(variant2),
|
|
155
157
|
goBack: bannerType === "Logout",
|
|
156
158
|
newTab,
|
|
159
|
+
marketingIntersitial,
|
|
157
160
|
children: displayText
|
|
158
161
|
},
|
|
159
162
|
id2
|
|
@@ -201,7 +204,8 @@ const HeroBanner = ({
|
|
|
201
204
|
displayText,
|
|
202
205
|
targetUrl,
|
|
203
206
|
type,
|
|
204
|
-
newTab
|
|
207
|
+
newTab,
|
|
208
|
+
marketingIntersitial
|
|
205
209
|
}) => type === "Button" ? /* @__PURE__ */ jsxs(
|
|
206
210
|
Button,
|
|
207
211
|
{
|
|
@@ -211,6 +215,7 @@ const HeroBanner = ({
|
|
|
211
215
|
rounded: "medium",
|
|
212
216
|
square: true,
|
|
213
217
|
newTab,
|
|
218
|
+
marketingIntersitial,
|
|
214
219
|
children: [
|
|
215
220
|
typeof icon !== "undefined" ? /* @__PURE__ */ jsx("div", { className: selection_section_icon, children: /* @__PURE__ */ jsx(
|
|
216
221
|
"span",
|
|
@@ -239,6 +244,7 @@ const HeroBanner = ({
|
|
|
239
244
|
size: "large",
|
|
240
245
|
square: true,
|
|
241
246
|
newTab,
|
|
247
|
+
marketingIntersitial,
|
|
242
248
|
children: [
|
|
243
249
|
typeof icon !== "undefined" ? /* @__PURE__ */ jsx(
|
|
244
250
|
"div",
|
|
@@ -144,7 +144,8 @@ const LargeHeroBanner = ({
|
|
|
144
144
|
displayText,
|
|
145
145
|
targetUrl,
|
|
146
146
|
type,
|
|
147
|
-
newTab
|
|
147
|
+
newTab,
|
|
148
|
+
marketingIntersitial
|
|
148
149
|
}) => type === "Button" ? /* @__PURE__ */ jsx(
|
|
149
150
|
Button,
|
|
150
151
|
{
|
|
@@ -153,6 +154,7 @@ const LargeHeroBanner = ({
|
|
|
153
154
|
size: "large",
|
|
154
155
|
rounded: "medium",
|
|
155
156
|
newTab,
|
|
157
|
+
marketingIntersitial,
|
|
156
158
|
children: displayText
|
|
157
159
|
},
|
|
158
160
|
id2
|
|
@@ -162,6 +164,7 @@ const LargeHeroBanner = ({
|
|
|
162
164
|
targetUrl,
|
|
163
165
|
variant: getVariant(variant2),
|
|
164
166
|
newTab,
|
|
167
|
+
marketingIntersitial,
|
|
165
168
|
children: displayText
|
|
166
169
|
},
|
|
167
170
|
id2
|
|
@@ -54,7 +54,8 @@ const IconBillboardSet = ({
|
|
|
54
54
|
displayText,
|
|
55
55
|
targetUrl,
|
|
56
56
|
type,
|
|
57
|
-
newTab
|
|
57
|
+
newTab,
|
|
58
|
+
marketingIntersitial
|
|
58
59
|
}) => type === "Button" ? /* @__PURE__ */ jsx(
|
|
59
60
|
Button,
|
|
60
61
|
{
|
|
@@ -63,6 +64,7 @@ const IconBillboardSet = ({
|
|
|
63
64
|
size: "medium",
|
|
64
65
|
rounded: "medium",
|
|
65
66
|
newTab,
|
|
67
|
+
marketingIntersitial,
|
|
66
68
|
children: displayText
|
|
67
69
|
},
|
|
68
70
|
id2
|
|
@@ -72,6 +74,7 @@ const IconBillboardSet = ({
|
|
|
72
74
|
targetUrl,
|
|
73
75
|
variant: getVariant(variant2),
|
|
74
76
|
newTab,
|
|
77
|
+
marketingIntersitial,
|
|
75
78
|
children: displayText
|
|
76
79
|
},
|
|
77
80
|
id2
|
|
@@ -137,13 +137,21 @@ const ImageLinkSet = (props) => {
|
|
|
137
137
|
const additionalDetails = props?.additionalDetails || callToActionRow && callToActionRow.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
138
138
|
props?.additionalDetails,
|
|
139
139
|
callToActionRow && callToActionRow?.length > 0 && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow?.map(
|
|
140
|
-
({
|
|
140
|
+
({
|
|
141
|
+
id,
|
|
142
|
+
variant,
|
|
143
|
+
displayText,
|
|
144
|
+
targetUrl,
|
|
145
|
+
type,
|
|
146
|
+
marketingIntersitial
|
|
147
|
+
}) => type === "Button" ? /* @__PURE__ */ jsx(
|
|
141
148
|
Button,
|
|
142
149
|
{
|
|
143
150
|
targetUrl,
|
|
144
151
|
color: getVariant(variant),
|
|
145
152
|
size: "medium",
|
|
146
153
|
rounded: "medium",
|
|
154
|
+
marketingIntersitial,
|
|
147
155
|
children: displayText
|
|
148
156
|
},
|
|
149
157
|
id
|
|
@@ -152,6 +160,7 @@ const ImageLinkSet = (props) => {
|
|
|
152
160
|
{
|
|
153
161
|
targetUrl,
|
|
154
162
|
variant: getVariant(variant),
|
|
163
|
+
marketingIntersitial,
|
|
155
164
|
children: displayText
|
|
156
165
|
},
|
|
157
166
|
id
|
|
@@ -6,6 +6,9 @@ import { FC, ReactNode } from 'react';
|
|
|
6
6
|
|
|
7
7
|
export interface interstitialProps {
|
|
8
8
|
id?: string;
|
|
9
|
+
width?: string | number | undefined;
|
|
10
|
+
height?: string | number | undefined;
|
|
11
|
+
iFrameUrl?: string;
|
|
9
12
|
variant?: SecondaryTypes;
|
|
10
13
|
image?: ImageInterface;
|
|
11
14
|
callToActionRow?: ChevronProps[];
|
|
@@ -10,6 +10,9 @@ import { marketing_tile, int_headline, interstitial_list } from "./Interstitial-
|
|
|
10
10
|
import css from "./Interstitial.module.js";
|
|
11
11
|
const Interstitial = ({
|
|
12
12
|
id,
|
|
13
|
+
width,
|
|
14
|
+
height,
|
|
15
|
+
iFrameUrl,
|
|
13
16
|
image,
|
|
14
17
|
headline,
|
|
15
18
|
bodyCopy,
|
|
@@ -25,7 +28,40 @@ const Interstitial = ({
|
|
|
25
28
|
{
|
|
26
29
|
className: `${marketing_tile} ${css.overlay} ${isOpen ? "active" : ""} interstitial`,
|
|
27
30
|
id: `modal_${id}`,
|
|
28
|
-
children: /* @__PURE__ */ jsxs(
|
|
31
|
+
children: iFrameUrl ? /* @__PURE__ */ jsxs(
|
|
32
|
+
"div",
|
|
33
|
+
{
|
|
34
|
+
id: `modal_${id}`,
|
|
35
|
+
className: `${css.modal_iframe} ${isOpen ? "active" : ""}`,
|
|
36
|
+
role: "dialog",
|
|
37
|
+
"aria-modal": "true",
|
|
38
|
+
tabIndex: -1,
|
|
39
|
+
style: {
|
|
40
|
+
width: width ? width : "95%",
|
|
41
|
+
height: height ? height : "95%"
|
|
42
|
+
},
|
|
43
|
+
children: [
|
|
44
|
+
/* @__PURE__ */ jsx(
|
|
45
|
+
"button",
|
|
46
|
+
{
|
|
47
|
+
className: css.close_button,
|
|
48
|
+
onClick: onClose,
|
|
49
|
+
"aria-label": "Close modal",
|
|
50
|
+
children: "×"
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ jsx("div", { className: css.modal_content_iframe, children: /* @__PURE__ */ jsx(
|
|
54
|
+
"iframe",
|
|
55
|
+
{
|
|
56
|
+
src: iFrameUrl,
|
|
57
|
+
title: "Schedule form",
|
|
58
|
+
width: "100%",
|
|
59
|
+
height: "100%"
|
|
60
|
+
}
|
|
61
|
+
) })
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
) : /* @__PURE__ */ jsxs(
|
|
29
65
|
"div",
|
|
30
66
|
{
|
|
31
67
|
id: `modal_${id}`,
|
|
@@ -1,20 +1,24 @@
|
|
|
1
|
-
import '../assets/Interstitial/Interstitial.css';const overlay = "
|
|
2
|
-
const modal = "
|
|
3
|
-
const vanish = "
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
1
|
+
import '../assets/Interstitial/Interstitial.css';const overlay = "_overlay_px71y_24";
|
|
2
|
+
const modal = "_modal_px71y_40";
|
|
3
|
+
const vanish = "_vanish_px71y_1";
|
|
4
|
+
const modal_iframe = "_modal_iframe_px71y_51";
|
|
5
|
+
const appear = "_appear_px71y_1";
|
|
6
|
+
const close_button = "_close_button_px71y_66";
|
|
7
|
+
const modal_content = "_modal_content_px71y_81";
|
|
8
|
+
const modal_content_iframe = "_modal_content_iframe_px71y_85";
|
|
9
|
+
const img_area = "_img_area_px71y_90";
|
|
10
|
+
const body_copy = "_body_copy_px71y_100";
|
|
11
|
+
const btns = "_btns_px71y_114";
|
|
12
|
+
const white_modal = "_white_modal_px71y_159";
|
|
11
13
|
const css = {
|
|
12
14
|
overlay,
|
|
13
15
|
modal,
|
|
14
16
|
vanish,
|
|
17
|
+
modal_iframe,
|
|
15
18
|
appear,
|
|
16
19
|
close_button,
|
|
17
20
|
modal_content,
|
|
21
|
+
modal_content_iframe,
|
|
18
22
|
img_area,
|
|
19
23
|
body_copy,
|
|
20
24
|
btns,
|
|
@@ -29,6 +33,8 @@ export {
|
|
|
29
33
|
img_area,
|
|
30
34
|
modal,
|
|
31
35
|
modal_content,
|
|
36
|
+
modal_content_iframe,
|
|
37
|
+
modal_iframe,
|
|
32
38
|
overlay,
|
|
33
39
|
vanish,
|
|
34
40
|
white_modal
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css';const overlay = "
|
|
2
|
-
const drawer = "
|
|
3
|
-
const mobileNavRow = "
|
|
4
|
-
const loginTrigger = "
|
|
5
|
-
const hamburger = "
|
|
6
|
-
const loginDrawerTitle = "
|
|
7
|
-
const loginDrawerContent = "
|
|
8
|
-
const header = "
|
|
9
|
-
const back = "
|
|
10
|
-
const close = "
|
|
11
|
-
const levelContainer = "
|
|
12
|
-
const level = "
|
|
13
|
-
const levelTitle = "
|
|
14
|
-
const menu = "
|
|
15
|
-
const menuItem = "
|
|
16
|
-
const loginAccordion = "
|
|
17
|
-
const loginAccordionList = "
|
|
18
|
-
const loginAccordionGroup = "
|
|
19
|
-
const loginAccordionHeading = "
|
|
20
|
-
const loginAccordionGroupList = "
|
|
21
|
-
const loginHeading = "
|
|
22
|
-
const chevron = "
|
|
23
|
-
const chevronIcon = "
|
|
24
|
-
const quickLinks = "
|
|
25
|
-
const quickLink = "
|
|
26
|
-
const sr_only = "
|
|
27
|
-
const loginAccordionOverlay = "
|
|
1
|
+
import '../../../assets/NavigationMenu/AxosBank/MobileMenu/MobileMenu.css';const overlay = "_overlay_hbh7s_1";
|
|
2
|
+
const drawer = "_drawer_hbh7s_9";
|
|
3
|
+
const mobileNavRow = "_mobileNavRow_hbh7s_29";
|
|
4
|
+
const loginTrigger = "_loginTrigger_hbh7s_35";
|
|
5
|
+
const hamburger = "_hamburger_hbh7s_51";
|
|
6
|
+
const loginDrawerTitle = "_loginDrawerTitle_hbh7s_73";
|
|
7
|
+
const loginDrawerContent = "_loginDrawerContent_hbh7s_79";
|
|
8
|
+
const header = "_header_hbh7s_85";
|
|
9
|
+
const back = "_back_hbh7s_96";
|
|
10
|
+
const close = "_close_hbh7s_104";
|
|
11
|
+
const levelContainer = "_levelContainer_hbh7s_115";
|
|
12
|
+
const level = "_level_hbh7s_115";
|
|
13
|
+
const levelTitle = "_levelTitle_hbh7s_131";
|
|
14
|
+
const menu = "_menu_hbh7s_136";
|
|
15
|
+
const menuItem = "_menuItem_hbh7s_152";
|
|
16
|
+
const loginAccordion = "_loginAccordion_hbh7s_168";
|
|
17
|
+
const loginAccordionList = "_loginAccordionList_hbh7s_172";
|
|
18
|
+
const loginAccordionGroup = "_loginAccordionGroup_hbh7s_178";
|
|
19
|
+
const loginAccordionHeading = "_loginAccordionHeading_hbh7s_215";
|
|
20
|
+
const loginAccordionGroupList = "_loginAccordionGroupList_hbh7s_225";
|
|
21
|
+
const loginHeading = "_loginHeading_hbh7s_269";
|
|
22
|
+
const chevron = "_chevron_hbh7s_279";
|
|
23
|
+
const chevronIcon = "_chevronIcon_hbh7s_284";
|
|
24
|
+
const quickLinks = "_quickLinks_hbh7s_295";
|
|
25
|
+
const quickLink = "_quickLink_hbh7s_295";
|
|
26
|
+
const sr_only = "_sr_only_hbh7s_319";
|
|
27
|
+
const loginAccordionOverlay = "_loginAccordionOverlay_hbh7s_344";
|
|
28
28
|
const styles = {
|
|
29
29
|
overlay,
|
|
30
30
|
drawer,
|
|
@@ -499,7 +499,15 @@ function NavBar({
|
|
|
499
499
|
"li",
|
|
500
500
|
{
|
|
501
501
|
className: `${styles.signin_subheader} ${signin_subheader}`,
|
|
502
|
-
children: /* @__PURE__ */ jsx(
|
|
502
|
+
children: /* @__PURE__ */ jsx(
|
|
503
|
+
"a",
|
|
504
|
+
{
|
|
505
|
+
href: resolveUrl(
|
|
506
|
+
"{AXOSBANK}/commercial/lending/commercial-portal"
|
|
507
|
+
),
|
|
508
|
+
children: "Commercial Loan Portal"
|
|
509
|
+
}
|
|
510
|
+
)
|
|
503
511
|
}
|
|
504
512
|
)
|
|
505
513
|
] })
|
|
@@ -98,13 +98,21 @@ const StepItemSet = ({
|
|
|
98
98
|
{
|
|
99
99
|
className: `flex middle center push_up_32 text_center ${bs_btns}`,
|
|
100
100
|
children: callToActionRow.map(
|
|
101
|
-
({
|
|
101
|
+
({
|
|
102
|
+
id: id2,
|
|
103
|
+
variant: variant2,
|
|
104
|
+
displayText,
|
|
105
|
+
targetUrl,
|
|
106
|
+
type,
|
|
107
|
+
marketingIntersitial
|
|
108
|
+
}) => type === "Button" ? /* @__PURE__ */ jsx(
|
|
102
109
|
Button,
|
|
103
110
|
{
|
|
104
111
|
targetUrl,
|
|
105
112
|
color: getVariant(variant2),
|
|
106
113
|
size: "large",
|
|
107
114
|
rounded: "medium",
|
|
115
|
+
marketingIntersitial,
|
|
108
116
|
children: displayText
|
|
109
117
|
},
|
|
110
118
|
id2
|
|
@@ -113,6 +121,7 @@ const StepItemSet = ({
|
|
|
113
121
|
{
|
|
114
122
|
targetUrl,
|
|
115
123
|
variant: getVariant(variant2),
|
|
124
|
+
marketingIntersitial,
|
|
116
125
|
children: displayText
|
|
117
126
|
},
|
|
118
127
|
id2
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _appear_px71y_1 {
|
|
2
2
|
0% {
|
|
3
3
|
opacity: 0;
|
|
4
4
|
transform: scale(0.9);
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
transform: scale(1);
|
|
9
9
|
}
|
|
10
10
|
}
|
|
11
|
-
@keyframes
|
|
11
|
+
@keyframes _vanish_px71y_1 {
|
|
12
12
|
0% {
|
|
13
13
|
display: block;
|
|
14
14
|
opacity: 1;
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.
|
|
24
|
+
._overlay_px71y_24 {
|
|
25
25
|
position: fixed;
|
|
26
26
|
top: 0;
|
|
27
27
|
left: 0;
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
justify-content: center;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.
|
|
36
|
+
._overlay_px71y_24.active {
|
|
37
37
|
display: flex;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
.
|
|
41
|
-
animation:
|
|
40
|
+
._modal_px71y_40 {
|
|
41
|
+
animation: _vanish_px71y_1 0.45s ease;
|
|
42
42
|
background: #fff;
|
|
43
43
|
border-radius: 16px;
|
|
44
44
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
@@ -48,11 +48,22 @@
|
|
|
48
48
|
overflow: hidden;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.
|
|
52
|
-
animation:
|
|
51
|
+
._modal_iframe_px71y_51 {
|
|
52
|
+
animation: _vanish_px71y_1 0.45s ease;
|
|
53
|
+
background: #fff;
|
|
54
|
+
border-radius: 16px;
|
|
55
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
56
|
+
position: relative;
|
|
57
|
+
transition: transform 0.45s ease;
|
|
58
|
+
overflow: hidden;
|
|
53
59
|
}
|
|
54
60
|
|
|
55
|
-
.
|
|
61
|
+
._modal_px71y_40.active,
|
|
62
|
+
._modal_iframe_px71y_51.active {
|
|
63
|
+
animation: _appear_px71y_1 0.45s ease;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
._close_button_px71y_66 {
|
|
56
67
|
position: absolute;
|
|
57
68
|
background-color: rgba(255, 255, 255, 0.3);
|
|
58
69
|
border-radius: 8px;
|
|
@@ -67,35 +78,40 @@
|
|
|
67
78
|
width: 32px;
|
|
68
79
|
}
|
|
69
80
|
|
|
70
|
-
.
|
|
81
|
+
._modal_content_px71y_81 {
|
|
82
|
+
padding: 16px 24px 24px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
._modal_content_iframe_px71y_85 {
|
|
71
86
|
padding: 16px 24px 24px;
|
|
87
|
+
height: 100%;
|
|
72
88
|
}
|
|
73
89
|
|
|
74
|
-
.
|
|
90
|
+
._img_area_px71y_90 {
|
|
75
91
|
background-position: center center;
|
|
76
92
|
background-size: cover;
|
|
77
93
|
height: 418px;
|
|
78
94
|
}
|
|
79
95
|
|
|
80
|
-
body:has(.
|
|
96
|
+
body:has(._overlay_px71y_24.active) {
|
|
81
97
|
overflow-y: hidden;
|
|
82
98
|
}
|
|
83
99
|
|
|
84
|
-
.
|
|
100
|
+
._body_copy_px71y_100 {
|
|
85
101
|
margin-top: 8px;
|
|
86
102
|
}
|
|
87
103
|
|
|
88
|
-
.
|
|
104
|
+
._body_copy_px71y_100 > * {
|
|
89
105
|
color: #333d46;
|
|
90
106
|
}
|
|
91
107
|
|
|
92
|
-
.
|
|
108
|
+
._body_copy_px71y_100 > p {
|
|
93
109
|
text-align: center;
|
|
94
110
|
font-size: 16px;
|
|
95
111
|
line-height: 1.5;
|
|
96
112
|
}
|
|
97
113
|
|
|
98
|
-
.
|
|
114
|
+
._btns_px71y_114 {
|
|
99
115
|
display: flex;
|
|
100
116
|
align-items: center;
|
|
101
117
|
gap: 2rem;
|
|
@@ -105,38 +121,42 @@ body:has(._overlay_e4cra_24.active) {
|
|
|
105
121
|
justify-content: center;
|
|
106
122
|
}
|
|
107
123
|
|
|
108
|
-
.
|
|
124
|
+
._btns_px71y_114:empty {
|
|
109
125
|
display: none;
|
|
110
126
|
}
|
|
111
127
|
|
|
112
|
-
.
|
|
128
|
+
._modal_content_px71y_81:nth-child(2) h2 {
|
|
113
129
|
margin-top: 31px;
|
|
114
130
|
}
|
|
115
131
|
|
|
116
132
|
@media (max-width: 1023px) {
|
|
117
|
-
.
|
|
133
|
+
._btns_px71y_114 {
|
|
118
134
|
flex-direction: column-reverse;
|
|
119
135
|
}
|
|
136
|
+
._modal_iframe_px71y_51 {
|
|
137
|
+
width: 95% !important;
|
|
138
|
+
height: 95% !important;
|
|
139
|
+
}
|
|
120
140
|
}
|
|
121
141
|
|
|
122
142
|
@media (max-width: 832px) {
|
|
123
|
-
.
|
|
143
|
+
._img_area_px71y_90 {
|
|
124
144
|
height: calc(12.25rem + ((1vw - 3.75px) * 48.5777));
|
|
125
145
|
}
|
|
126
146
|
}
|
|
127
147
|
|
|
128
148
|
@media (max-width: 500px) {
|
|
129
|
-
.
|
|
149
|
+
._modal_px71y_40 {
|
|
130
150
|
width: calc(100% - 1rem);
|
|
131
151
|
}
|
|
132
|
-
.
|
|
152
|
+
._overlay_px71y_24.active {
|
|
133
153
|
align-items: flex-start;
|
|
134
154
|
overflow-y: scroll;
|
|
135
155
|
padding-top: 40px;
|
|
136
156
|
}
|
|
137
157
|
}
|
|
138
158
|
|
|
139
|
-
.
|
|
159
|
+
._white_modal_px71y_159 {
|
|
140
160
|
color: #1e3860;
|
|
141
161
|
padding-bottom: 40px;
|
|
142
162
|
}
|