@ldmjs/ui 1.0.60 → 1.0.61
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/README.md +2 -6
- package/dist/css/index.css +1 -1
- package/dist/index.js +64 -96
- package/dist/lib/toastification.js +1 -0
- package/dist/scss/_animations.scss +390 -0
- package/dist/scss/_inputs.scss +9 -1
- package/dist/scss/_toasted.scss +411 -15
- package/dist/scss/index.scss +1 -0
- package/package.json +1 -2
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
// Bounce Animation taken from https://github.com/fkhadra/react-toastify
|
|
2
|
+
$trans-cubic-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
3
|
+
@mixin timing-function {
|
|
4
|
+
animation-timing-function: $trans-cubic-bezier;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@keyframes bounceInRight {
|
|
8
|
+
from,
|
|
9
|
+
60%,
|
|
10
|
+
75%,
|
|
11
|
+
90%,
|
|
12
|
+
to {
|
|
13
|
+
@include timing-function;
|
|
14
|
+
}
|
|
15
|
+
from {
|
|
16
|
+
opacity: 0;
|
|
17
|
+
transform: translate3d(3000px, 0, 0);
|
|
18
|
+
}
|
|
19
|
+
60% {
|
|
20
|
+
opacity: 1;
|
|
21
|
+
transform: translate3d(-25px, 0, 0);
|
|
22
|
+
}
|
|
23
|
+
75% {
|
|
24
|
+
transform: translate3d(10px, 0, 0);
|
|
25
|
+
}
|
|
26
|
+
90% {
|
|
27
|
+
transform: translate3d(-5px, 0, 0);
|
|
28
|
+
}
|
|
29
|
+
to {
|
|
30
|
+
transform: none;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes bounceOutRight {
|
|
35
|
+
40% {
|
|
36
|
+
opacity: 1;
|
|
37
|
+
transform: translate3d(-20px, 0, 0);
|
|
38
|
+
}
|
|
39
|
+
to {
|
|
40
|
+
opacity: 0;
|
|
41
|
+
transform: translate3d(1000px, 0, 0);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@keyframes bounceInLeft {
|
|
46
|
+
from,
|
|
47
|
+
60%,
|
|
48
|
+
75%,
|
|
49
|
+
90%,
|
|
50
|
+
to {
|
|
51
|
+
@include timing-function;
|
|
52
|
+
}
|
|
53
|
+
0% {
|
|
54
|
+
opacity: 0;
|
|
55
|
+
transform: translate3d(-3000px, 0, 0);
|
|
56
|
+
}
|
|
57
|
+
60% {
|
|
58
|
+
opacity: 1;
|
|
59
|
+
transform: translate3d(25px, 0, 0);
|
|
60
|
+
}
|
|
61
|
+
75% {
|
|
62
|
+
transform: translate3d(-10px, 0, 0);
|
|
63
|
+
}
|
|
64
|
+
90% {
|
|
65
|
+
transform: translate3d(5px, 0, 0);
|
|
66
|
+
}
|
|
67
|
+
to {
|
|
68
|
+
transform: none;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes bounceOutLeft {
|
|
73
|
+
20% {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
transform: translate3d(20px, 0, 0);
|
|
76
|
+
}
|
|
77
|
+
to {
|
|
78
|
+
opacity: 0;
|
|
79
|
+
transform: translate3d(-2000px, 0, 0);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@keyframes bounceInUp {
|
|
84
|
+
from,
|
|
85
|
+
60%,
|
|
86
|
+
75%,
|
|
87
|
+
90%,
|
|
88
|
+
to {
|
|
89
|
+
@include timing-function;
|
|
90
|
+
}
|
|
91
|
+
from {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
transform: translate3d(0, 3000px, 0);
|
|
94
|
+
}
|
|
95
|
+
60% {
|
|
96
|
+
opacity: 1;
|
|
97
|
+
transform: translate3d(0, -20px, 0);
|
|
98
|
+
}
|
|
99
|
+
75% {
|
|
100
|
+
transform: translate3d(0, 10px, 0);
|
|
101
|
+
}
|
|
102
|
+
90% {
|
|
103
|
+
transform: translate3d(0, -5px, 0);
|
|
104
|
+
}
|
|
105
|
+
to {
|
|
106
|
+
transform: translate3d(0, 0, 0);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@keyframes bounceOutUp {
|
|
111
|
+
20% {
|
|
112
|
+
transform: translate3d(0, -10px, 0);
|
|
113
|
+
}
|
|
114
|
+
40%,
|
|
115
|
+
45% {
|
|
116
|
+
opacity: 1;
|
|
117
|
+
transform: translate3d(0, 20px, 0);
|
|
118
|
+
}
|
|
119
|
+
to {
|
|
120
|
+
opacity: 0;
|
|
121
|
+
transform: translate3d(0, -2000px, 0);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@keyframes bounceInDown {
|
|
126
|
+
from,
|
|
127
|
+
60%,
|
|
128
|
+
75%,
|
|
129
|
+
90%,
|
|
130
|
+
to {
|
|
131
|
+
@include timing-function;
|
|
132
|
+
}
|
|
133
|
+
0% {
|
|
134
|
+
opacity: 0;
|
|
135
|
+
transform: translate3d(0, -3000px, 0);
|
|
136
|
+
}
|
|
137
|
+
60% {
|
|
138
|
+
opacity: 1;
|
|
139
|
+
transform: translate3d(0, 25px, 0);
|
|
140
|
+
}
|
|
141
|
+
75% {
|
|
142
|
+
transform: translate3d(0, -10px, 0);
|
|
143
|
+
}
|
|
144
|
+
90% {
|
|
145
|
+
transform: translate3d(0, 5px, 0);
|
|
146
|
+
}
|
|
147
|
+
to {
|
|
148
|
+
transform: none;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@keyframes bounceOutDown {
|
|
153
|
+
20% {
|
|
154
|
+
transform: translate3d(0, 10px, 0);
|
|
155
|
+
}
|
|
156
|
+
40%,
|
|
157
|
+
45% {
|
|
158
|
+
opacity: 1;
|
|
159
|
+
transform: translate3d(0, -20px, 0);
|
|
160
|
+
}
|
|
161
|
+
to {
|
|
162
|
+
opacity: 0;
|
|
163
|
+
transform: translate3d(0, 2000px, 0);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
/* ----------------------------------------------
|
|
168
|
+
* Modified version from Animista
|
|
169
|
+
* Animista is Licensed under FreeBSD License.
|
|
170
|
+
* See http://animista.net/license for more info.
|
|
171
|
+
* w: http://animista.net, t: @cssanimista
|
|
172
|
+
* ---------------------------------------------- */
|
|
173
|
+
|
|
174
|
+
@keyframes fadeOutTop {
|
|
175
|
+
0% {
|
|
176
|
+
transform: translateY(0);
|
|
177
|
+
opacity: 1;
|
|
178
|
+
}
|
|
179
|
+
100% {
|
|
180
|
+
transform: translateY(-50px);
|
|
181
|
+
opacity: 0;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@keyframes fadeOutLeft {
|
|
186
|
+
0% {
|
|
187
|
+
transform: translateX(0);
|
|
188
|
+
opacity: 1;
|
|
189
|
+
}
|
|
190
|
+
100% {
|
|
191
|
+
transform: translateX(-50px);
|
|
192
|
+
opacity: 0;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
@keyframes fadeOutBottom {
|
|
197
|
+
0% {
|
|
198
|
+
transform: translateY(0);
|
|
199
|
+
opacity: 1;
|
|
200
|
+
}
|
|
201
|
+
100% {
|
|
202
|
+
transform: translateY(50px);
|
|
203
|
+
opacity: 0;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
@keyframes fadeOutRight {
|
|
208
|
+
0% {
|
|
209
|
+
transform: translateX(0);
|
|
210
|
+
opacity: 1;
|
|
211
|
+
}
|
|
212
|
+
100% {
|
|
213
|
+
transform: translateX(50px);
|
|
214
|
+
opacity: 0;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
@keyframes fadeInLeft {
|
|
219
|
+
0% {
|
|
220
|
+
transform: translateX(-50px);
|
|
221
|
+
opacity: 0;
|
|
222
|
+
}
|
|
223
|
+
100% {
|
|
224
|
+
transform: translateX(0);
|
|
225
|
+
opacity: 1;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@keyframes fadeInRight {
|
|
230
|
+
0% {
|
|
231
|
+
transform: translateX(50px);
|
|
232
|
+
opacity: 0;
|
|
233
|
+
}
|
|
234
|
+
100% {
|
|
235
|
+
transform: translateX(0);
|
|
236
|
+
opacity: 1;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
@keyframes fadeInTop {
|
|
241
|
+
0% {
|
|
242
|
+
transform: translateY(-50px);
|
|
243
|
+
opacity: 0;
|
|
244
|
+
}
|
|
245
|
+
100% {
|
|
246
|
+
transform: translateY(0);
|
|
247
|
+
opacity: 1;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
@keyframes fadeInBottom {
|
|
252
|
+
0% {
|
|
253
|
+
transform: translateY(50px);
|
|
254
|
+
opacity: 0;
|
|
255
|
+
}
|
|
256
|
+
100% {
|
|
257
|
+
transform: translateY(0);
|
|
258
|
+
opacity: 1;
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* ----------------------------------------------
|
|
263
|
+
* Modified version from Animista
|
|
264
|
+
* Animista is Licensed under FreeBSD License.
|
|
265
|
+
* See http://animista.net/license for more info.
|
|
266
|
+
* w: http://animista.net, t: @cssanimista
|
|
267
|
+
* ---------------------------------------------- */
|
|
268
|
+
|
|
269
|
+
@keyframes slideInBlurredLeft {
|
|
270
|
+
0% {
|
|
271
|
+
transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
|
|
272
|
+
transform-origin: 100% 50%;
|
|
273
|
+
filter: blur(40px);
|
|
274
|
+
opacity: 0;
|
|
275
|
+
}
|
|
276
|
+
100% {
|
|
277
|
+
transform: translateX(0) scaleY(1) scaleX(1);
|
|
278
|
+
transform-origin: 50% 50%;
|
|
279
|
+
filter: blur(0);
|
|
280
|
+
opacity: 1;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
@keyframes slideInBlurredTop {
|
|
285
|
+
0% {
|
|
286
|
+
transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
|
|
287
|
+
transform-origin: 50% 0%;
|
|
288
|
+
filter: blur(240px);
|
|
289
|
+
opacity: 0;
|
|
290
|
+
}
|
|
291
|
+
100% {
|
|
292
|
+
transform: translateY(0) scaleY(1) scaleX(1);
|
|
293
|
+
transform-origin: 50% 50%;
|
|
294
|
+
filter: blur(0);
|
|
295
|
+
opacity: 1;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
@keyframes slideInBlurredRight {
|
|
300
|
+
0% {
|
|
301
|
+
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
|
|
302
|
+
transform-origin: 0% 50%;
|
|
303
|
+
filter: blur(40px);
|
|
304
|
+
opacity: 0;
|
|
305
|
+
}
|
|
306
|
+
100% {
|
|
307
|
+
transform: translateX(0) scaleY(1) scaleX(1);
|
|
308
|
+
transform-origin: 50% 50%;
|
|
309
|
+
filter: blur(0);
|
|
310
|
+
opacity: 1;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
@keyframes slideInBlurredBottom {
|
|
315
|
+
0% {
|
|
316
|
+
transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
|
|
317
|
+
transform-origin: 50% 100%;
|
|
318
|
+
filter: blur(240px);
|
|
319
|
+
opacity: 0;
|
|
320
|
+
}
|
|
321
|
+
100% {
|
|
322
|
+
transform: translateY(0) scaleY(1) scaleX(1);
|
|
323
|
+
transform-origin: 50% 50%;
|
|
324
|
+
filter: blur(0);
|
|
325
|
+
opacity: 1;
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
@keyframes slideOutBlurredTop {
|
|
330
|
+
0% {
|
|
331
|
+
transform: translateY(0) scaleY(1) scaleX(1);
|
|
332
|
+
transform-origin: 50% 0%;
|
|
333
|
+
filter: blur(0);
|
|
334
|
+
opacity: 1;
|
|
335
|
+
}
|
|
336
|
+
100% {
|
|
337
|
+
transform: translateY(-1000px) scaleY(2) scaleX(0.2);
|
|
338
|
+
transform-origin: 50% 0%;
|
|
339
|
+
filter: blur(240px);
|
|
340
|
+
opacity: 0;
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
@keyframes slideOutBlurredBottom {
|
|
345
|
+
0% {
|
|
346
|
+
transform: translateY(0) scaleY(1) scaleX(1);
|
|
347
|
+
transform-origin: 50% 50%;
|
|
348
|
+
filter: blur(0);
|
|
349
|
+
opacity: 1;
|
|
350
|
+
}
|
|
351
|
+
100% {
|
|
352
|
+
transform: translateY(1000px) scaleY(2) scaleX(0.2);
|
|
353
|
+
transform-origin: 50% 100%;
|
|
354
|
+
filter: blur(240px);
|
|
355
|
+
opacity: 0;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
@keyframes slideOutBlurredLeft {
|
|
360
|
+
0% {
|
|
361
|
+
transform: translateX(0) scaleY(1) scaleX(1);
|
|
362
|
+
transform-origin: 50% 50%;
|
|
363
|
+
filter: blur(0);
|
|
364
|
+
opacity: 1;
|
|
365
|
+
}
|
|
366
|
+
100% {
|
|
367
|
+
transform: translateX(-1000px) scaleX(2) scaleY(0.2);
|
|
368
|
+
transform-origin: 100% 50%;
|
|
369
|
+
filter: blur(40px);
|
|
370
|
+
opacity: 0;
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
@keyframes slideOutBlurredRight {
|
|
375
|
+
0% {
|
|
376
|
+
transform: translateX(0) scaleY(1) scaleX(1);
|
|
377
|
+
transform-origin: 50% 50%;
|
|
378
|
+
filter: blur(0);
|
|
379
|
+
opacity: 1;
|
|
380
|
+
}
|
|
381
|
+
100% {
|
|
382
|
+
transform: translateX(1000px) scaleX(2) scaleY(0.2);
|
|
383
|
+
transform-origin: 0% 50%;
|
|
384
|
+
filter: blur(40px);
|
|
385
|
+
opacity: 0;
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
|
package/dist/scss/_inputs.scss
CHANGED
|
@@ -59,6 +59,11 @@ body {
|
|
|
59
59
|
}
|
|
60
60
|
.v-field.v-field--disabled {
|
|
61
61
|
opacity: 1;
|
|
62
|
+
|
|
63
|
+
.v-text-field__prefix,
|
|
64
|
+
.v-text-field__suffix {
|
|
65
|
+
color: var(--grey);
|
|
66
|
+
}
|
|
62
67
|
}
|
|
63
68
|
.v-field-label--floating {
|
|
64
69
|
color: var(--grey);
|
|
@@ -112,7 +117,10 @@ body {
|
|
|
112
117
|
&.v-input--disabled {
|
|
113
118
|
.v-field {
|
|
114
119
|
background-color: var(--grey-l-6);
|
|
115
|
-
color: var(--grey
|
|
120
|
+
color: var(--grey);
|
|
121
|
+
}
|
|
122
|
+
.v-input__details {
|
|
123
|
+
opacity: 1;
|
|
116
124
|
}
|
|
117
125
|
}
|
|
118
126
|
}
|