ml-ui-lib 1.0.35 → 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}
|