ml-ui-lib 1.0.35 → 1.0.37
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/components/Button/Button.css +117 -5
- package/dist/components/Button/Button.d.ts +2 -2
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Footer/Footer.css +18 -16
- package/dist/components/Footer/Footer.js +8 -1
- package/dist/components/Navbar/Navbar.css +1 -0
- package/package.json +1 -1
|
@@ -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}
|
|
@@ -68,6 +68,8 @@
|
|
|
68
68
|
text-align: center;
|
|
69
69
|
font-size: 0.85rem;
|
|
70
70
|
opacity: 0.7;
|
|
71
|
+
max-width: 1550px;
|
|
72
|
+
margin: 0 auto;
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
.socials h4 {
|
|
@@ -109,21 +111,21 @@
|
|
|
109
111
|
}
|
|
110
112
|
|
|
111
113
|
.footer-logo img {
|
|
112
|
-
width:
|
|
113
|
-
height:
|
|
114
|
+
width: 500px;
|
|
115
|
+
height: 95px;
|
|
114
116
|
}
|
|
115
117
|
|
|
116
118
|
.footer-columns {
|
|
117
119
|
grid-template-columns: repeat(5, 1fr);
|
|
118
120
|
display: grid;
|
|
119
|
-
grid-template-columns: auto
|
|
121
|
+
grid-template-columns: auto 12% 10% 10% 14%;
|
|
120
122
|
gap: 2rem;
|
|
121
123
|
flex: 1 1 auto;
|
|
122
124
|
/* optional if inside flex parent */
|
|
123
125
|
}
|
|
124
126
|
|
|
125
127
|
.footer-logo {
|
|
126
|
-
width:
|
|
128
|
+
width: 70%;
|
|
127
129
|
}
|
|
128
130
|
|
|
129
131
|
.socials-items {
|
|
@@ -154,7 +156,7 @@
|
|
|
154
156
|
flex-direction: row;
|
|
155
157
|
gap: 10px;
|
|
156
158
|
justify-content: space-between;
|
|
157
|
-
width:
|
|
159
|
+
width: 500px;
|
|
158
160
|
margin: -125px 10px 0px 0px;
|
|
159
161
|
}
|
|
160
162
|
|
|
@@ -173,7 +175,7 @@
|
|
|
173
175
|
/* ========== Desktop (≥993px): 4 columns ========== */
|
|
174
176
|
@media (min-width: 993px) and (max-width: 1570px) {
|
|
175
177
|
.footer {
|
|
176
|
-
padding: 10px 50px;
|
|
178
|
+
padding: 50px 50px 10px 50px;
|
|
177
179
|
}
|
|
178
180
|
|
|
179
181
|
.footer-container {
|
|
@@ -181,12 +183,12 @@
|
|
|
181
183
|
}
|
|
182
184
|
|
|
183
185
|
.footer-logo {
|
|
184
|
-
width:
|
|
186
|
+
width: 520px;
|
|
185
187
|
}
|
|
186
188
|
|
|
187
189
|
.footer-logo img {
|
|
188
|
-
width:
|
|
189
|
-
height:
|
|
190
|
+
width: 535px;
|
|
191
|
+
height: 115px;
|
|
190
192
|
}
|
|
191
193
|
|
|
192
194
|
.footer-columns {
|
|
@@ -264,7 +266,7 @@
|
|
|
264
266
|
/* ========== Tablet (≤1050px): 1–3 on top, 4 below ========== */
|
|
265
267
|
@media (min-width: 1090px) and (max-width: 1350px) {
|
|
266
268
|
.footer {
|
|
267
|
-
padding: 10px 50px;
|
|
269
|
+
padding: 50px 50px 10px 50px;
|
|
268
270
|
}
|
|
269
271
|
|
|
270
272
|
.footer-container {
|
|
@@ -383,7 +385,7 @@
|
|
|
383
385
|
|
|
384
386
|
@media (min-width: 940px) and (max-width: 1090px) {
|
|
385
387
|
.footer {
|
|
386
|
-
padding: 10px 50px;
|
|
388
|
+
padding: 50px 50px 10px 50px;
|
|
387
389
|
}
|
|
388
390
|
|
|
389
391
|
.footer-container {
|
|
@@ -464,7 +466,7 @@
|
|
|
464
466
|
}
|
|
465
467
|
|
|
466
468
|
.app-items img {
|
|
467
|
-
width:
|
|
469
|
+
width: 150px;
|
|
468
470
|
}
|
|
469
471
|
|
|
470
472
|
.emblems {
|
|
@@ -480,7 +482,7 @@
|
|
|
480
482
|
max-width: 553px;
|
|
481
483
|
width: 500px;
|
|
482
484
|
margin-left: -195px;
|
|
483
|
-
margin-top:
|
|
485
|
+
margin-top: 8rem;
|
|
484
486
|
}
|
|
485
487
|
|
|
486
488
|
.emblem-item {
|
|
@@ -504,7 +506,7 @@
|
|
|
504
506
|
|
|
505
507
|
@media (max-width: 940px) {
|
|
506
508
|
.footer {
|
|
507
|
-
padding: 10px 50px;
|
|
509
|
+
padding: 50px 50px 10px 50px;
|
|
508
510
|
}
|
|
509
511
|
|
|
510
512
|
.footer-container {
|
|
@@ -517,7 +519,7 @@
|
|
|
517
519
|
}
|
|
518
520
|
|
|
519
521
|
.footer-columns {
|
|
520
|
-
grid-template-columns:
|
|
522
|
+
grid-template-columns: 30% 30% 30%;
|
|
521
523
|
grid-template-rows: auto auto;
|
|
522
524
|
}
|
|
523
525
|
|
|
@@ -600,7 +602,7 @@
|
|
|
600
602
|
flex-wrap: wrap;
|
|
601
603
|
align-items: center;
|
|
602
604
|
max-width: 553px;
|
|
603
|
-
width:
|
|
605
|
+
width: 490px;
|
|
604
606
|
margin-left: -70px;
|
|
605
607
|
margin-top: 1rem;
|
|
606
608
|
}
|
|
@@ -15,7 +15,14 @@ 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: { margin: '0 auto' }, children: [_jsx("div", { className: "footer-container", children: _jsxs("div", { className: "footer-columns", children: [_jsxs("div", { className: "footer-logo", children: [
|
|
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: [_jsxs("div", { style: {
|
|
19
|
+
display: 'flex',
|
|
20
|
+
flexDirection: 'column',
|
|
21
|
+
alignItems: 'center'
|
|
22
|
+
}, children: [_jsx("a", { href: "/", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { display: 'block' } }) }), _jsx("span", { style: { marginTop: '-15px', }, children: "FINANCIAL SERVICES, INC." }), _jsx("span", { style: { marginTop: '0px', }, children: "B. Benedicto St, North Reclamation, Cebu City" }), " ", _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", { style: {
|
|
23
|
+
paddingLeft: '0.75rem',
|
|
24
|
+
margin: '10px 0px 0px -90px'
|
|
25
|
+
}, children: [_jsx("li", { children: "Phone: +63 947 999 0337" }), _jsxs("li", { children: ["Email: ", _jsx("a", { href: "mailto:customercare@mlhuillier.com", style: { color: 'rgb(44, 48, 122) !important' }, children: "customercare@mlhuillier.com" })] })] }) })] }), footerItems.map((group, i) => {
|
|
19
26
|
// Format the display name
|
|
20
27
|
const displayName = group.name
|
|
21
28
|
.split('-')
|