ml-ui-lib 1.0.34 → 1.0.36
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.
|
@@ -28,6 +28,65 @@
|
|
|
28
28
|
border: 1px solid #5d5d5d;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
.shimmer {
|
|
32
|
+
position: relative;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.shimmer::before {
|
|
37
|
+
content: "";
|
|
38
|
+
position: absolute;
|
|
39
|
+
inset: 0;
|
|
40
|
+
|
|
41
|
+
/* default shimmer gradient */
|
|
42
|
+
background: linear-gradient(120deg,
|
|
43
|
+
transparent 30%,
|
|
44
|
+
rgba(255, 255, 255, 0.5) 50%,
|
|
45
|
+
transparent 70%);
|
|
46
|
+
|
|
47
|
+
transform: translateX(-100%);
|
|
48
|
+
will-change: transform;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Variant-specific shimmer: transparent-red */
|
|
52
|
+
.btn-transparent-red.shimmer::before {
|
|
53
|
+
background: linear-gradient(120deg,
|
|
54
|
+
transparent 30%,
|
|
55
|
+
rgba(255, 0, 0, 0.5) 50%,
|
|
56
|
+
transparent 70%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.btn-default.shimmer::before {
|
|
60
|
+
background: linear-gradient(120deg,
|
|
61
|
+
transparent 30%,
|
|
62
|
+
rgba(0, 0, 0, 0.5) 50%,
|
|
63
|
+
transparent 70%);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.btn-transparent-white.shimmer::before {
|
|
67
|
+
background: linear-gradient(120deg,
|
|
68
|
+
transparent 30%,
|
|
69
|
+
rgba(255, 255, 255, 0.5) 50%,
|
|
70
|
+
transparent 70%);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Run ONCE when hovered */
|
|
74
|
+
.shimmer:hover::before {
|
|
75
|
+
animation: shimmer 0.7s ease-out forwards;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@keyframes shimmer {
|
|
79
|
+
0% {
|
|
80
|
+
transform: translateX(-100%);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
100% {
|
|
84
|
+
transform: translateX(100%);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
31
90
|
.btn-white {
|
|
32
91
|
background: #ffffff;
|
|
33
92
|
color: #5d5d5d;
|
|
@@ -52,6 +111,12 @@
|
|
|
52
111
|
border: 1px solid #fff;
|
|
53
112
|
}
|
|
54
113
|
|
|
114
|
+
.btn-transparent-red {
|
|
115
|
+
background: transparent;
|
|
116
|
+
color: #ff0000;
|
|
117
|
+
border: 1px solid #ff0000;
|
|
118
|
+
}
|
|
119
|
+
|
|
55
120
|
/* Loading spinner */
|
|
56
121
|
.btn-loader {
|
|
57
122
|
display: flex;
|
|
@@ -135,7 +200,7 @@
|
|
|
135
200
|
} */
|
|
136
201
|
|
|
137
202
|
.btn-next::after {
|
|
138
|
-
content: "
|
|
203
|
+
content: "➜";
|
|
139
204
|
position: absolute;
|
|
140
205
|
top: 50%;
|
|
141
206
|
right: -25px;
|
|
@@ -172,11 +237,11 @@
|
|
|
172
237
|
} */
|
|
173
238
|
|
|
174
239
|
.btn-previous::after {
|
|
175
|
-
content: "
|
|
240
|
+
content: "➜";
|
|
176
241
|
position: absolute;
|
|
177
242
|
top: 50%;
|
|
178
243
|
left: -25px;
|
|
179
|
-
transform: translateY(-50%);
|
|
244
|
+
transform: translateY(-50%) scaleX(-1);
|
|
180
245
|
opacity: 0;
|
|
181
246
|
transition: all 0.25s ease;
|
|
182
247
|
font-size: 16px;
|
|
@@ -251,6 +316,42 @@
|
|
|
251
316
|
font-size: 16px;
|
|
252
317
|
}
|
|
253
318
|
|
|
319
|
+
.btn-action-search::after {
|
|
320
|
+
content: "\1F50D";
|
|
321
|
+
position: absolute;
|
|
322
|
+
top: 50%;
|
|
323
|
+
right: -25px;
|
|
324
|
+
transform: translateY(-50%);
|
|
325
|
+
opacity: 0;
|
|
326
|
+
transition: all 0.25s ease;
|
|
327
|
+
font-size: 16px;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.btn-action-phone::after {
|
|
331
|
+
content: "☎";
|
|
332
|
+
position: absolute;
|
|
333
|
+
top: 50%;
|
|
334
|
+
right: -25px;
|
|
335
|
+
transform: translateY(-50%);
|
|
336
|
+
opacity: 0;
|
|
337
|
+
transition: all 0.25s ease;
|
|
338
|
+
font-size: 16px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.btn-action-download::after {
|
|
342
|
+
content: "▼";
|
|
343
|
+
position: absolute;
|
|
344
|
+
top: 50%;
|
|
345
|
+
right: -25px;
|
|
346
|
+
transform: translateY(-50%);
|
|
347
|
+
opacity: 0;
|
|
348
|
+
transition: all 0.25s ease;
|
|
349
|
+
font-size: 15px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.btn-action-download:hover .btn-label,
|
|
353
|
+
.btn-action-phone:hover .btn-label,
|
|
354
|
+
.btn-action-search:hover .btn-label,
|
|
254
355
|
.btn-action-cancel:hover .btn-label,
|
|
255
356
|
.btn-action-info:hover .btn-label,
|
|
256
357
|
.btn-action-add:hover .btn-label,
|
|
@@ -260,9 +361,20 @@
|
|
|
260
361
|
}
|
|
261
362
|
|
|
262
363
|
.btn-action-info:hover::after {
|
|
263
|
-
|
|
364
|
+
padding: 5px 15px !important;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.btn-action-search:hover::after {
|
|
368
|
+
padding: 5px 7px !important;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.btn-action-download:hover::after {
|
|
372
|
+
padding: 5px 10px !important;
|
|
264
373
|
}
|
|
265
374
|
|
|
375
|
+
.btn-action-download:hover::after,
|
|
376
|
+
.btn-action-phone:hover::after,
|
|
377
|
+
.btn-action-search:hover::after,
|
|
266
378
|
.btn-action-cancel:hover::after,
|
|
267
379
|
.btn-action-info:hover::after,
|
|
268
380
|
.btn-action-add:hover::after,
|
|
@@ -273,4 +385,4 @@
|
|
|
273
385
|
border-radius: 25px;
|
|
274
386
|
border: solid 1px #aeaeae;
|
|
275
387
|
padding: 5px 12px;
|
|
276
|
-
}
|
|
388
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import "./Button.css";
|
|
3
3
|
type ButtonAnimation = "default" | "loading" | "next" | "previous" | "see-more" | "view-more";
|
|
4
|
-
export type ButtonAction = "add" | "cancel" | "delete" | "info";
|
|
4
|
+
export type ButtonAction = "add" | "cancel" | "delete" | "info" | "search" | "phone" | "download";
|
|
5
5
|
export interface ButtonProps {
|
|
6
6
|
label: string;
|
|
7
|
-
variant?: "default" | "white" | "red" | "black" | "transparent-white";
|
|
7
|
+
variant?: "default" | "white" | "red" | "black" | "transparent-white" | "transparent-red";
|
|
8
8
|
onClick?: () => void;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
animationStyle?: ButtonAnimation;
|
|
@@ -12,7 +12,7 @@ export const Button = ({ label, variant = "default", onClick, disabled = false,
|
|
|
12
12
|
actionClass = `btn-action-${action}`;
|
|
13
13
|
}
|
|
14
14
|
return (_jsx("button", { className: `
|
|
15
|
-
btn btn-${variant}
|
|
15
|
+
btn btn-${variant} shimmer
|
|
16
16
|
${animationStyle === "next" || action ? "btn-next" : ""}
|
|
17
17
|
${animationStyle === "previous" ? "btn-previous" : ""}
|
|
18
18
|
${actionClass}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
flex-wrap: wrap;
|
|
10
10
|
justify-content: space-between;
|
|
11
11
|
align-items: flex-start;
|
|
12
|
-
max-width:
|
|
12
|
+
max-width: 1550px;
|
|
13
13
|
margin: 0 auto;
|
|
14
14
|
gap: 2rem;
|
|
15
15
|
}
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
.footer-columns {
|
|
24
24
|
display: grid;
|
|
25
|
-
grid-template-columns:
|
|
25
|
+
grid-template-columns: auto 15% 15% 15%;
|
|
26
26
|
gap: 2rem;
|
|
27
27
|
flex: 1;
|
|
28
28
|
}
|
|
@@ -102,8 +102,8 @@
|
|
|
102
102
|
width: 100%;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
/* ========== Desktop (≥
|
|
106
|
-
@media (min-width:
|
|
105
|
+
/* ========== Desktop (≥1570px): 5 columns ========== */
|
|
106
|
+
@media (min-width: 1570px) {
|
|
107
107
|
.footer {
|
|
108
108
|
padding: 20px 70px;
|
|
109
109
|
}
|
|
@@ -114,16 +114,16 @@
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.footer-columns {
|
|
117
|
-
grid-template-columns: repeat(
|
|
117
|
+
grid-template-columns: repeat(5, 1fr);
|
|
118
118
|
display: grid;
|
|
119
|
-
grid-template-columns:
|
|
119
|
+
grid-template-columns: auto 15% 15% 15% 15%;
|
|
120
120
|
gap: 2rem;
|
|
121
121
|
flex: 1 1 auto;
|
|
122
122
|
/* optional if inside flex parent */
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.footer-logo {
|
|
126
|
-
width:
|
|
126
|
+
width: 85%;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.socials-items {
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
|
|
140
140
|
.app-items {
|
|
141
141
|
display: flex;
|
|
142
|
-
|
|
142
|
+
flex-direction: column;
|
|
143
143
|
flex-wrap: wrap;
|
|
144
144
|
justify-content: center;
|
|
145
145
|
gap: 15px;
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
gap: 10px;
|
|
156
156
|
justify-content: space-between;
|
|
157
157
|
width: 50%;
|
|
158
|
-
margin: 0px
|
|
158
|
+
margin: -125px 10px 0px 0px;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
.emblem-item {
|
|
@@ -170,32 +170,53 @@
|
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
172
|
|
|
173
|
-
/* ==========
|
|
174
|
-
@media (max-width:
|
|
173
|
+
/* ========== Desktop (≥993px): 4 columns ========== */
|
|
174
|
+
@media (min-width: 993px) and (max-width: 1570px) {
|
|
175
175
|
.footer {
|
|
176
176
|
padding: 10px 50px;
|
|
177
177
|
}
|
|
178
178
|
|
|
179
|
+
.footer-container {
|
|
180
|
+
width: 1200px;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.footer-logo {
|
|
184
|
+
width: 430px;
|
|
185
|
+
}
|
|
186
|
+
|
|
179
187
|
.footer-logo img {
|
|
180
188
|
width: 450px;
|
|
181
189
|
height: 80px;
|
|
182
190
|
}
|
|
183
191
|
|
|
184
192
|
.footer-columns {
|
|
185
|
-
grid-template-columns:
|
|
193
|
+
grid-template-columns: auto 15% 15% 15%;
|
|
186
194
|
grid-template-rows: auto auto;
|
|
187
195
|
}
|
|
188
196
|
|
|
197
|
+
.footer-column-2,
|
|
198
|
+
.footer-column-3 {
|
|
199
|
+
grid-column: 3;
|
|
200
|
+
grid-row: 1;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.footer-column-3 {
|
|
204
|
+
margin-top: 14rem;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
189
208
|
.socials-and-apps {
|
|
190
|
-
grid-column: 1 / -1;
|
|
191
|
-
text-align: center;
|
|
209
|
+
/* grid-column: 1 / -1;
|
|
210
|
+
text-align: center; */
|
|
211
|
+
grid-column: 4;
|
|
212
|
+
grid-row: 1;
|
|
192
213
|
}
|
|
193
214
|
|
|
194
215
|
.socials-items {
|
|
195
216
|
display: flex;
|
|
196
217
|
flex-direction: row;
|
|
197
218
|
gap: 15px;
|
|
198
|
-
justify-content:
|
|
219
|
+
justify-content: start
|
|
199
220
|
/* justify-content: space-between; */
|
|
200
221
|
}
|
|
201
222
|
|
|
@@ -218,8 +239,8 @@
|
|
|
218
239
|
display: flex;
|
|
219
240
|
flex-direction: row;
|
|
220
241
|
gap: 20px;
|
|
221
|
-
justify-content:
|
|
222
|
-
margin: 0px
|
|
242
|
+
justify-content: flex-start;
|
|
243
|
+
margin: -97px 0px 0px 0px;
|
|
223
244
|
}
|
|
224
245
|
|
|
225
246
|
.emblem-item {
|
|
@@ -240,11 +261,415 @@
|
|
|
240
261
|
}
|
|
241
262
|
}
|
|
242
263
|
|
|
264
|
+
/* ========== Tablet (≤1050px): 1–3 on top, 4 below ========== */
|
|
265
|
+
@media (min-width: 1090px) and (max-width: 1350px) {
|
|
266
|
+
.footer {
|
|
267
|
+
padding: 10px 50px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.footer-container {
|
|
271
|
+
width: 1015px;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
/* .footer-container {
|
|
275
|
+
|
|
276
|
+
} */
|
|
277
|
+
|
|
278
|
+
.footer-logo img {
|
|
279
|
+
width: 450px;
|
|
280
|
+
height: 80px;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.footer-columns {
|
|
284
|
+
grid-template-columns: auto 20% 20%;
|
|
285
|
+
grid-template-rows: auto auto;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
.footer-logo {
|
|
290
|
+
/* grid-column: 1 / -1; */
|
|
291
|
+
width: 435px;
|
|
292
|
+
grid-column: 1;
|
|
293
|
+
grid-row: 1;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.footer-column-2,
|
|
297
|
+
.footer-column-3 {
|
|
298
|
+
grid-column: 3;
|
|
299
|
+
grid-row: 1;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.footer-column-3 {
|
|
303
|
+
margin-top: 14rem;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.socials-and-apps {
|
|
307
|
+
/* grid-column: 3;
|
|
308
|
+
grid-row: 1; */
|
|
309
|
+
grid-column: 2 / -1;
|
|
310
|
+
grid-row: 2;
|
|
311
|
+
text-align: start;
|
|
312
|
+
margin-top: -50px;
|
|
313
|
+
|
|
314
|
+
display: flex;
|
|
315
|
+
flex-direction: column;
|
|
316
|
+
gap: 0px;
|
|
317
|
+
justify-content: flex-end;
|
|
318
|
+
align-items: flex-start;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
|
|
322
|
+
.socials-items {
|
|
323
|
+
display: flex;
|
|
324
|
+
flex-direction: row;
|
|
325
|
+
gap: 15px;
|
|
326
|
+
justify-content: start
|
|
327
|
+
/* justify-content: space-between; */
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.socials-items img {
|
|
331
|
+
height: 35px;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
h4 {
|
|
335
|
+
margin: 10px 0px;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.app-items {
|
|
339
|
+
display: flex;
|
|
340
|
+
flex-wrap: wrap;
|
|
341
|
+
flex-direction: row;
|
|
342
|
+
justify-content: center;
|
|
343
|
+
gap: 15px;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.app-items img {
|
|
347
|
+
width: 130px;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.emblems {
|
|
351
|
+
display: flex;
|
|
352
|
+
gap: 20px;
|
|
353
|
+
margin: 0px auto;
|
|
354
|
+
grid-column: 1;
|
|
355
|
+
grid-row: 1;
|
|
356
|
+
margin-top: 19rem;
|
|
357
|
+
left: 0px;
|
|
358
|
+
flex-wrap: wrap;
|
|
359
|
+
align-items: center;
|
|
360
|
+
max-width: 530px;
|
|
361
|
+
margin-left: 0px;
|
|
362
|
+
margin-top: 20rem;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.emblem-item {
|
|
366
|
+
display: flex;
|
|
367
|
+
flex-direction: column;
|
|
368
|
+
align-items: center;
|
|
369
|
+
gap: 10px;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.emblem-item img {
|
|
373
|
+
width: 60px;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.others {
|
|
377
|
+
display: flex;
|
|
378
|
+
flex-direction: column-reverse;
|
|
379
|
+
align-items: center;
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
|
|
384
|
+
@media (min-width: 940px) and (max-width: 1090px) {
|
|
385
|
+
.footer {
|
|
386
|
+
padding: 10px 50px;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.footer-container {
|
|
390
|
+
width: 888px;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.footer-logo img {
|
|
394
|
+
width: 450px;
|
|
395
|
+
height: 80px;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.footer-columns {
|
|
399
|
+
grid-template-columns: 33.33% 33.33% 33.33%;
|
|
400
|
+
grid-template-rows: auto auto;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
|
|
404
|
+
.footer-logo {
|
|
405
|
+
grid-column: 1 / -1;
|
|
406
|
+
width: 435px;
|
|
407
|
+
/* grid-column: 1; */
|
|
408
|
+
grid-row: 2;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.footer-column-1 {
|
|
412
|
+
grid-column: 1;
|
|
413
|
+
grid-row: 1;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.footer-column-2,
|
|
417
|
+
.footer-column-3 {
|
|
418
|
+
grid-column: 2;
|
|
419
|
+
grid-row: 1;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.footer-column-3 {
|
|
423
|
+
margin-top: 14rem;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.socials-and-apps {
|
|
427
|
+
/* grid-column: 3;
|
|
428
|
+
grid-row: 1; */
|
|
429
|
+
grid-column: 3;
|
|
430
|
+
grid-row: 1;
|
|
431
|
+
text-align: start;
|
|
432
|
+
margin-top: 0px;
|
|
433
|
+
|
|
434
|
+
display: flex;
|
|
435
|
+
flex-direction: column;
|
|
436
|
+
gap: 0px;
|
|
437
|
+
justify-content: start;
|
|
438
|
+
align-items: flex-start;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
|
|
442
|
+
.socials-items {
|
|
443
|
+
display: flex;
|
|
444
|
+
flex-direction: row;
|
|
445
|
+
gap: 15px;
|
|
446
|
+
justify-content: start
|
|
447
|
+
/* justify-content: space-between; */
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.socials-items img {
|
|
451
|
+
height: 35px;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
h4 {
|
|
455
|
+
margin: 10px 0px;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.app-items {
|
|
459
|
+
display: flex;
|
|
460
|
+
flex-wrap: wrap;
|
|
461
|
+
flex-direction: column;
|
|
462
|
+
justify-content: start;
|
|
463
|
+
gap: 15px;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.app-items img {
|
|
467
|
+
width: 130px;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.emblems {
|
|
471
|
+
grid-column: 3;
|
|
472
|
+
grid-row: 2;
|
|
473
|
+
display: flex;
|
|
474
|
+
gap: 20px;
|
|
475
|
+
margin: 0px auto;
|
|
476
|
+
margin-top: 19rem;
|
|
477
|
+
left: 0px;
|
|
478
|
+
flex-wrap: wrap;
|
|
479
|
+
align-items: center;
|
|
480
|
+
max-width: 553px;
|
|
481
|
+
width: 500px;
|
|
482
|
+
margin-left: -195px;
|
|
483
|
+
margin-top: 10rem;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.emblem-item {
|
|
487
|
+
display: flex;
|
|
488
|
+
flex-direction: column;
|
|
489
|
+
align-items: center;
|
|
490
|
+
gap: 10px;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.emblem-item img {
|
|
494
|
+
width: 60px;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.others {
|
|
498
|
+
display: flex;
|
|
499
|
+
flex-direction: column-reverse;
|
|
500
|
+
align-items: center;
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
|
|
505
|
+
@media (max-width: 940px) {
|
|
506
|
+
.footer {
|
|
507
|
+
padding: 10px 50px;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
.footer-container {
|
|
511
|
+
width: 730px;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.footer-logo img {
|
|
515
|
+
width: 450px;
|
|
516
|
+
height: 80px;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.footer-columns {
|
|
520
|
+
grid-template-columns: 33.33% 33.33% 33.33%;
|
|
521
|
+
grid-template-rows: auto auto;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
|
|
525
|
+
.footer-logo {
|
|
526
|
+
grid-column: 1 / -1;
|
|
527
|
+
width: 435px;
|
|
528
|
+
/* grid-column: 1; */
|
|
529
|
+
grid-row: 2;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.footer-column-1 {
|
|
533
|
+
grid-column: 1;
|
|
534
|
+
grid-row: 1;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.footer-column-2,
|
|
538
|
+
.footer-column-3 {
|
|
539
|
+
grid-column: 2;
|
|
540
|
+
grid-row: 1;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.footer-column-3 {
|
|
544
|
+
margin-top: 14rem;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
.socials-and-apps {
|
|
548
|
+
/* grid-column: 3;
|
|
549
|
+
grid-row: 1; */
|
|
550
|
+
grid-column: 3;
|
|
551
|
+
grid-row: 1;
|
|
552
|
+
text-align: start;
|
|
553
|
+
margin-top: 0px;
|
|
554
|
+
|
|
555
|
+
display: flex;
|
|
556
|
+
flex-direction: column;
|
|
557
|
+
gap: 0px;
|
|
558
|
+
justify-content: start;
|
|
559
|
+
align-items: flex-start;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
|
|
563
|
+
.socials-items {
|
|
564
|
+
display: flex;
|
|
565
|
+
flex-direction: row;
|
|
566
|
+
gap: 15px;
|
|
567
|
+
justify-content: start
|
|
568
|
+
/* justify-content: space-between; */
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.socials-items img {
|
|
572
|
+
height: 35px;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
h4 {
|
|
576
|
+
margin: 10px 0px;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.app-items {
|
|
580
|
+
display: flex;
|
|
581
|
+
flex-wrap: wrap;
|
|
582
|
+
flex-direction: column;
|
|
583
|
+
justify-content: start;
|
|
584
|
+
gap: 15px;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.app-items img {
|
|
588
|
+
width: 130px;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
.emblems {
|
|
592
|
+
grid-column: 3;
|
|
593
|
+
grid-row: 2;
|
|
594
|
+
|
|
595
|
+
display: flex;
|
|
596
|
+
gap: 20px;
|
|
597
|
+
margin: 0px auto;
|
|
598
|
+
margin-top: 19rem;
|
|
599
|
+
left: 0px;
|
|
600
|
+
flex-wrap: wrap;
|
|
601
|
+
align-items: center;
|
|
602
|
+
max-width: 553px;
|
|
603
|
+
width: 220px;
|
|
604
|
+
margin-left: -70px;
|
|
605
|
+
margin-top: 1rem;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.emblem-item {
|
|
609
|
+
display: flex;
|
|
610
|
+
flex-direction: column;
|
|
611
|
+
align-items: center;
|
|
612
|
+
gap: 10px;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.emblem-item img {
|
|
616
|
+
width: 60px;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.others {
|
|
620
|
+
display: flex;
|
|
621
|
+
flex-direction: column-reverse;
|
|
622
|
+
align-items: center;
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
@media (max-width: 830px) {
|
|
627
|
+
.footer-container {
|
|
628
|
+
width: 610px;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.footer-logo {
|
|
632
|
+
grid-column: 1 / -1;
|
|
633
|
+
width: 610px;
|
|
634
|
+
/* grid-column: 1; */
|
|
635
|
+
grid-row: 2;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.emblems {
|
|
639
|
+
grid-column: 1 / -1;
|
|
640
|
+
grid-row: 3;
|
|
641
|
+
display: flex;
|
|
642
|
+
gap: 20px;
|
|
643
|
+
margin: 0px auto;
|
|
644
|
+
left: 0px;
|
|
645
|
+
flex-wrap: wrap;
|
|
646
|
+
align-items: center;
|
|
647
|
+
width: 260px;
|
|
648
|
+
justify-content: space-between;
|
|
649
|
+
}
|
|
650
|
+
}
|
|
651
|
+
|
|
243
652
|
@media (max-width: 700px) {
|
|
653
|
+
.footer-container {
|
|
654
|
+
width: 490px;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.footer-logo {
|
|
658
|
+
width: 535px;
|
|
659
|
+
}
|
|
660
|
+
|
|
244
661
|
.emblems {
|
|
245
662
|
display: grid;
|
|
246
663
|
grid-template-columns: repeat(3, 1fr);
|
|
247
664
|
}
|
|
665
|
+
|
|
666
|
+
.emblems img {
|
|
667
|
+
width: 70px;
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.socials-items {
|
|
671
|
+
gap: 7px;
|
|
672
|
+
}
|
|
248
673
|
}
|
|
249
674
|
|
|
250
675
|
/* ========== Mobile (≤576px): 1 | 2–3 merged | 4 below ========== */
|
|
@@ -253,22 +678,33 @@
|
|
|
253
678
|
padding: 10px 20px;
|
|
254
679
|
}
|
|
255
680
|
|
|
681
|
+
.footer-container {
|
|
682
|
+
width: 340px;
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
.footer-logo {
|
|
686
|
+
width: 350px;
|
|
687
|
+
}
|
|
688
|
+
|
|
256
689
|
.footer-logo img {
|
|
257
690
|
width: 300px;
|
|
258
691
|
height: 50px;
|
|
259
692
|
}
|
|
260
693
|
|
|
261
694
|
.footer-columns {
|
|
262
|
-
|
|
263
|
-
grid-template-
|
|
264
|
-
|
|
265
|
-
|
|
695
|
+
grid-template-columns: 50% 50%;
|
|
696
|
+
grid-template-rows: auto auto auto;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
/* Logo full width */
|
|
700
|
+
.footer-logo {
|
|
701
|
+
grid-column: 1 / -1;
|
|
702
|
+
grid-row: 3;
|
|
266
703
|
}
|
|
267
704
|
|
|
268
|
-
/* Column 1
|
|
705
|
+
/* Column 1 = left */
|
|
269
706
|
.footer-column-1 {
|
|
270
707
|
grid-column: 1;
|
|
271
|
-
grid-row: 1;
|
|
272
708
|
}
|
|
273
709
|
|
|
274
710
|
/* Column 2: vertical stack of Company + Help & Legal */
|
|
@@ -278,14 +714,6 @@
|
|
|
278
714
|
grid-row: 1;
|
|
279
715
|
}
|
|
280
716
|
|
|
281
|
-
/* stack them vertically using flex column */
|
|
282
|
-
.footer-column-2,
|
|
283
|
-
.footer-column-3 {
|
|
284
|
-
display: flex;
|
|
285
|
-
flex-direction: column;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
/* prevent overlap by adding natural spacing */
|
|
289
717
|
.footer-column-3 {
|
|
290
718
|
margin-top: 14rem;
|
|
291
719
|
}
|
|
@@ -295,6 +723,7 @@
|
|
|
295
723
|
grid-column: 1 / span 2;
|
|
296
724
|
grid-row: 2;
|
|
297
725
|
text-align: center;
|
|
726
|
+
align-items: center;
|
|
298
727
|
}
|
|
299
728
|
|
|
300
729
|
/* .footer-column {
|
|
@@ -308,10 +737,13 @@
|
|
|
308
737
|
|
|
309
738
|
.emblems {
|
|
310
739
|
margin: 20px auto;
|
|
740
|
+
grid-column: 1 / -1;
|
|
741
|
+
grid-row: 4;
|
|
311
742
|
}
|
|
312
743
|
|
|
313
744
|
.socials-items {
|
|
314
745
|
padding: 15px;
|
|
746
|
+
gap: 40px;
|
|
315
747
|
justify-content: space-around;
|
|
316
748
|
}
|
|
317
749
|
}
|
|
@@ -15,7 +15,7 @@ export const Footer = ({ footerItems, logoSrc = '', logoAlt = 'M Lhuillier Logo'
|
|
|
15
15
|
{ url: '/images/google-play.svg', link: 'https://play.google.com/store/apps/details?id=com.mlhuillier.mlwallet&pli=1' },
|
|
16
16
|
{ url: '/images/app-gallery.svg', link: 'https://appgallery.huawei.com/app/C102221791?source=qrCodeShare&referrer=PCWebAG&callType=SHARE&shareTo=qrcode&shareFrom=appmarket&reportEventLabel=appdetailpage' },
|
|
17
17
|
];
|
|
18
|
-
return (_jsx("footer", { className: `footer ${className}`, style: { backgroundColor, color: textColor }, children: _jsxs("div", { style: {
|
|
18
|
+
return (_jsx("footer", { className: `footer ${className}`, style: { backgroundColor, color: textColor }, children: _jsxs("div", { style: { margin: '0 auto' }, children: [_jsx("div", { className: "footer-container", children: _jsxs("div", { className: "footer-columns", children: [_jsxs("div", { className: "footer-logo", children: [_jsx("a", { href: "/", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { display: 'block' } }) }), _jsx("span", { children: "FINANCIAL SERVICES, INC." }), _jsx("br", {}), _jsx("span", { children: "M.Lhuillier Financial Services, Inc. is regulated by the Bangko Sentral ng Pilipinas (BSP). For inquiries or assistance, you may reach us via:" }), _jsx("span", { children: _jsxs("ul", { children: [_jsx("li", { children: "Email: customercare@mlhuillier.com" }), _jsx("li", { children: "Or through our official Social media channels: consumeraaffairs@bsp.gov.ph" })] }) })] }), footerItems.map((group, i) => {
|
|
19
19
|
// Format the display name
|
|
20
20
|
const displayName = group.name
|
|
21
21
|
.split('-')
|
|
@@ -27,6 +27,6 @@ export const Footer = ({ footerItems, logoSrc = '', logoAlt = 'M Lhuillier Logo'
|
|
|
27
27
|
{ name: 'ig', link: 'https://www.instagram.com/mlhuillier_official/' },
|
|
28
28
|
{ name: 'x', link: 'https://x.com/KaMLhuillier' },
|
|
29
29
|
{ name: 'yt', link: 'https://www.youtube.com/user/MLhuillierInc' },
|
|
30
|
-
].map((icon) => (_jsx("a", { href: icon.link, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { src: `/icons/${icon.name}.svg`, alt: icon.name }) }, icon.name))) })] }), _jsxs("div", { className: "apps", children: [_jsx("h4", { children: "Get the MCash App" }), _jsx("div", { className: "app-items", children: appLinksArr.map((item, index) => (_jsx("a", { href: item.link, children: _jsx("img", { src: item.url, alt: "App download" }) }, index))) })] })] })
|
|
30
|
+
].map((icon) => (_jsx("a", { href: icon.link, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { src: `/icons/${icon.name}.svg`, alt: icon.name }) }, icon.name))) })] }), _jsxs("div", { className: "apps", children: [_jsx("h4", { children: "Get the MCash App" }), _jsx("div", { className: "app-items", children: appLinksArr.map((item, index) => (_jsx("a", { href: item.link, children: _jsx("img", { src: item.url, alt: "App download" }) }, index))) })] })] }), _jsx("div", { className: 'emblems', children: empblemArr.map((item, index) => (_jsxs("div", { className: "emblem-item", children: [_jsx("img", { src: item.url, alt: item.name }), _jsx("span", { children: item.name })] }, index))) })] }) }), _jsx("div", { className: 'others' }), _jsxs("div", { className: "footer-bottom", children: [_jsxs("p", { children: ["Copyright \u00A9 ", new Date().getFullYear(), " M.Lhuillier Financial Services, Inc."] }), " ", _jsx("p", { children: "All rights reserved." })] })] }) }));
|
|
31
31
|
};
|
|
32
32
|
export default Footer;
|