@fattureincloud/fic-design-system 1.0.4 → 1.0.6

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,626 @@
1
+ :root {
2
+ --toastify-color-light: #fff;
3
+ --toastify-color-dark: #121212;
4
+ --toastify-color-info: #3498db;
5
+ --toastify-color-success: #07bc0c;
6
+ --toastify-color-warning: #f1c40f;
7
+ --toastify-color-error: #e74c3c;
8
+ --toastify-color-transparent: rgba(255, 255, 255, 0.7);
9
+ --toastify-icon-color-info: var(--toastify-color-info);
10
+ --toastify-icon-color-success: var(--toastify-color-success);
11
+ --toastify-icon-color-warning: var(--toastify-color-warning);
12
+ --toastify-icon-color-error: var(--toastify-color-error);
13
+ --toastify-toast-width: 320px;
14
+ --toastify-toast-background: #fff;
15
+ --toastify-toast-min-height: 64px;
16
+ --toastify-toast-max-height: 800px;
17
+ --toastify-font-family: sans-serif;
18
+ --toastify-z-index: 9999;
19
+ --toastify-text-color-light: #757575;
20
+ --toastify-text-color-dark: #fff;
21
+ --toastify-text-color-info: #fff;
22
+ --toastify-text-color-success: #fff;
23
+ --toastify-text-color-warning: #fff;
24
+ --toastify-text-color-error: #fff;
25
+ --toastify-spinner-color: #616161;
26
+ --toastify-spinner-color-empty-area: #e0e0e0;
27
+ --toastify-color-progress-light: linear-gradient(
28
+ to right,
29
+ #4cd964,
30
+ #5ac8fa,
31
+ #007aff,
32
+ #34aadc,
33
+ #5856d6,
34
+ #ff2d55
35
+ );
36
+ --toastify-color-progress-dark: #bb86fc;
37
+ --toastify-color-progress-info: var(--toastify-color-info);
38
+ --toastify-color-progress-success: var(--toastify-color-success);
39
+ --toastify-color-progress-warning: var(--toastify-color-warning);
40
+ --toastify-color-progress-error: var(--toastify-color-error);
41
+ }
42
+
43
+ .Toastify__toast-container {
44
+ z-index: var(--toastify-z-index);
45
+ -webkit-transform: translate3d(0, 0, var(--toastify-z-index) px);
46
+ position: fixed;
47
+ padding: 4px;
48
+ width: var(--toastify-toast-width);
49
+ box-sizing: border-box;
50
+ color: #fff;
51
+ }
52
+ .Toastify__toast-container--top-left {
53
+ top: 1em;
54
+ left: 1em;
55
+ }
56
+ .Toastify__toast-container--top-center {
57
+ top: 1em;
58
+ left: 50%;
59
+ transform: translateX(-50%);
60
+ }
61
+ .Toastify__toast-container--top-right {
62
+ top: 1em;
63
+ right: 1em;
64
+ }
65
+ .Toastify__toast-container--bottom-left {
66
+ bottom: 1em;
67
+ left: 1em;
68
+ }
69
+ .Toastify__toast-container--bottom-center {
70
+ bottom: 1em;
71
+ left: 50%;
72
+ transform: translateX(-50%);
73
+ }
74
+ .Toastify__toast-container--bottom-right {
75
+ bottom: 1em;
76
+ right: 1em;
77
+ }
78
+
79
+ @media only screen and (max-width : 480px) {
80
+ .Toastify__toast-container {
81
+ width: 100vw;
82
+ padding: 0;
83
+ left: 0;
84
+ margin: 0;
85
+ }
86
+ .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
87
+ top: 0;
88
+ transform: translateX(0);
89
+ }
90
+ .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
91
+ bottom: 0;
92
+ transform: translateX(0);
93
+ }
94
+ .Toastify__toast-container--rtl {
95
+ right: 0;
96
+ left: initial;
97
+ }
98
+ }
99
+ .Toastify__toast {
100
+ position: relative;
101
+ min-height: var(--toastify-toast-min-height);
102
+ box-sizing: border-box;
103
+ margin-bottom: 1rem;
104
+ padding: 8px;
105
+ border-radius: 4px;
106
+ box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
107
+ display: -ms-flexbox;
108
+ display: flex;
109
+ -ms-flex-pack: justify;
110
+ justify-content: space-between;
111
+ max-height: var(--toastify-toast-max-height);
112
+ overflow: hidden;
113
+ font-family: var(--toastify-font-family);
114
+ cursor: pointer;
115
+ direction: ltr;
116
+ }
117
+ .Toastify__toast--rtl {
118
+ direction: rtl;
119
+ }
120
+ .Toastify__toast-body {
121
+ margin: auto 0;
122
+ -ms-flex: 1 1 auto;
123
+ flex: 1 1 auto;
124
+ padding: 6px;
125
+ display: -ms-flexbox;
126
+ display: flex;
127
+ -ms-flex-align: center;
128
+ align-items: center;
129
+ }
130
+ .Toastify__toast-body > div:last-child {
131
+ -ms-flex: 1;
132
+ flex: 1;
133
+ }
134
+ .Toastify__toast-icon {
135
+ -webkit-margin-end: 10px;
136
+ margin-inline-end: 10px;
137
+ width: 20px;
138
+ -ms-flex-negative: 0;
139
+ flex-shrink: 0;
140
+ display: -ms-flexbox;
141
+ display: flex;
142
+ }
143
+
144
+ .Toastify--animate {
145
+ animation-fill-mode: both;
146
+ animation-duration: 0.7s;
147
+ }
148
+
149
+ .Toastify--animate-icon {
150
+ animation-fill-mode: both;
151
+ animation-duration: 0.3s;
152
+ }
153
+
154
+ @media only screen and (max-width : 480px) {
155
+ .Toastify__toast {
156
+ margin-bottom: 0;
157
+ border-radius: 0;
158
+ }
159
+ }
160
+ .f {
161
+ --y: calc(var(--len) - var(--nth));
162
+ position: absolute;
163
+ bottom: 0;
164
+ right: 0;
165
+ width: 100%;
166
+ transform: translate3d(0, calc(var(--y) * -40%), 0) scale(calc(1 - 0.05 * var(--y)));
167
+ transition: all 0.3s;
168
+ min-height: 80px;
169
+ }
170
+
171
+ .Toastify__toast-theme--dark {
172
+ background: var(--toastify-color-dark);
173
+ color: var(--toastify-text-color-dark);
174
+ }
175
+ .Toastify__toast-theme--light {
176
+ background: var(--toastify-color-light);
177
+ color: var(--toastify-text-color-light);
178
+ }
179
+ .Toastify__toast-theme--colored.Toastify__toast--default {
180
+ background: var(--toastify-color-light);
181
+ color: var(--toastify-text-color-light);
182
+ }
183
+ .Toastify__toast-theme--colored.Toastify__toast--info {
184
+ color: var(--toastify-text-color-info);
185
+ background: var(--toastify-color-info);
186
+ }
187
+ .Toastify__toast-theme--colored.Toastify__toast--success {
188
+ color: var(--toastify-text-color-success);
189
+ background: var(--toastify-color-success);
190
+ }
191
+ .Toastify__toast-theme--colored.Toastify__toast--warning {
192
+ color: var(--toastify-text-color-warning);
193
+ background: var(--toastify-color-warning);
194
+ }
195
+ .Toastify__toast-theme--colored.Toastify__toast--error {
196
+ color: var(--toastify-text-color-error);
197
+ background: var(--toastify-color-error);
198
+ }
199
+
200
+ .Toastify__progress-bar-theme--light {
201
+ background: var(--toastify-color-progress-light);
202
+ }
203
+ .Toastify__progress-bar-theme--dark {
204
+ background: var(--toastify-color-progress-dark);
205
+ }
206
+ .Toastify__progress-bar--info {
207
+ background: var(--toastify-color-progress-info);
208
+ }
209
+ .Toastify__progress-bar--success {
210
+ background: var(--toastify-color-progress-success);
211
+ }
212
+ .Toastify__progress-bar--warning {
213
+ background: var(--toastify-color-progress-warning);
214
+ }
215
+ .Toastify__progress-bar--error {
216
+ background: var(--toastify-color-progress-error);
217
+ }
218
+ .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
219
+ background: var(--toastify-color-transparent);
220
+ }
221
+
222
+ .Toastify__close-button {
223
+ color: #fff;
224
+ background: transparent;
225
+ outline: none;
226
+ border: none;
227
+ padding: 0;
228
+ cursor: pointer;
229
+ opacity: 0.7;
230
+ transition: 0.3s ease;
231
+ -ms-flex-item-align: start;
232
+ align-self: flex-start;
233
+ }
234
+ .Toastify__close-button--light {
235
+ color: #000;
236
+ opacity: 0.3;
237
+ }
238
+ .Toastify__close-button > svg {
239
+ fill: currentColor;
240
+ height: 16px;
241
+ width: 14px;
242
+ }
243
+ .Toastify__close-button:hover, .Toastify__close-button:focus {
244
+ opacity: 1;
245
+ }
246
+
247
+ @keyframes Toastify__trackProgress {
248
+ 0% {
249
+ transform: scaleX(1);
250
+ }
251
+ 100% {
252
+ transform: scaleX(0);
253
+ }
254
+ }
255
+ .Toastify__progress-bar {
256
+ position: absolute;
257
+ bottom: 0;
258
+ left: 0;
259
+ width: 100%;
260
+ height: 5px;
261
+ z-index: var(--toastify-z-index);
262
+ opacity: 0.7;
263
+ transform-origin: left;
264
+ }
265
+ .Toastify__progress-bar--animated {
266
+ animation: Toastify__trackProgress linear 1 forwards;
267
+ }
268
+ .Toastify__progress-bar--controlled {
269
+ transition: transform 0.2s;
270
+ }
271
+ .Toastify__progress-bar--rtl {
272
+ right: 0;
273
+ left: initial;
274
+ transform-origin: right;
275
+ }
276
+
277
+ .Toastify__spinner {
278
+ width: 20px;
279
+ height: 20px;
280
+ box-sizing: border-box;
281
+ border: 2px solid;
282
+ border-radius: 100%;
283
+ border-color: var(--toastify-spinner-color-empty-area);
284
+ border-right-color: var(--toastify-spinner-color);
285
+ animation: Toastify__spin 0.65s linear infinite;
286
+ }
287
+
288
+ @keyframes Toastify__bounceInRight {
289
+ from, 60%, 75%, 90%, to {
290
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
291
+ }
292
+ from {
293
+ opacity: 0;
294
+ transform: translate3d(3000px, 0, 0);
295
+ }
296
+ 60% {
297
+ opacity: 1;
298
+ transform: translate3d(-25px, 0, 0);
299
+ }
300
+ 75% {
301
+ transform: translate3d(10px, 0, 0);
302
+ }
303
+ 90% {
304
+ transform: translate3d(-5px, 0, 0);
305
+ }
306
+ to {
307
+ transform: none;
308
+ }
309
+ }
310
+ @keyframes Toastify__bounceOutRight {
311
+ 20% {
312
+ opacity: 1;
313
+ transform: translate3d(-20px, 0, 0);
314
+ }
315
+ to {
316
+ opacity: 0;
317
+ transform: translate3d(2000px, 0, 0);
318
+ }
319
+ }
320
+ @keyframes Toastify__bounceInLeft {
321
+ from, 60%, 75%, 90%, to {
322
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
323
+ }
324
+ 0% {
325
+ opacity: 0;
326
+ transform: translate3d(-3000px, 0, 0);
327
+ }
328
+ 60% {
329
+ opacity: 1;
330
+ transform: translate3d(25px, 0, 0);
331
+ }
332
+ 75% {
333
+ transform: translate3d(-10px, 0, 0);
334
+ }
335
+ 90% {
336
+ transform: translate3d(5px, 0, 0);
337
+ }
338
+ to {
339
+ transform: none;
340
+ }
341
+ }
342
+ @keyframes Toastify__bounceOutLeft {
343
+ 20% {
344
+ opacity: 1;
345
+ transform: translate3d(20px, 0, 0);
346
+ }
347
+ to {
348
+ opacity: 0;
349
+ transform: translate3d(-2000px, 0, 0);
350
+ }
351
+ }
352
+ @keyframes Toastify__bounceInUp {
353
+ from, 60%, 75%, 90%, to {
354
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
355
+ }
356
+ from {
357
+ opacity: 0;
358
+ transform: translate3d(0, 3000px, 0);
359
+ }
360
+ 60% {
361
+ opacity: 1;
362
+ transform: translate3d(0, -20px, 0);
363
+ }
364
+ 75% {
365
+ transform: translate3d(0, 10px, 0);
366
+ }
367
+ 90% {
368
+ transform: translate3d(0, -5px, 0);
369
+ }
370
+ to {
371
+ transform: translate3d(0, 0, 0);
372
+ }
373
+ }
374
+ @keyframes Toastify__bounceOutUp {
375
+ 20% {
376
+ transform: translate3d(0, -10px, 0);
377
+ }
378
+ 40%, 45% {
379
+ opacity: 1;
380
+ transform: translate3d(0, 20px, 0);
381
+ }
382
+ to {
383
+ opacity: 0;
384
+ transform: translate3d(0, -2000px, 0);
385
+ }
386
+ }
387
+ @keyframes Toastify__bounceInDown {
388
+ from, 60%, 75%, 90%, to {
389
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
390
+ }
391
+ 0% {
392
+ opacity: 0;
393
+ transform: translate3d(0, -3000px, 0);
394
+ }
395
+ 60% {
396
+ opacity: 1;
397
+ transform: translate3d(0, 25px, 0);
398
+ }
399
+ 75% {
400
+ transform: translate3d(0, -10px, 0);
401
+ }
402
+ 90% {
403
+ transform: translate3d(0, 5px, 0);
404
+ }
405
+ to {
406
+ transform: none;
407
+ }
408
+ }
409
+ @keyframes Toastify__bounceOutDown {
410
+ 20% {
411
+ transform: translate3d(0, 10px, 0);
412
+ }
413
+ 40%, 45% {
414
+ opacity: 1;
415
+ transform: translate3d(0, -20px, 0);
416
+ }
417
+ to {
418
+ opacity: 0;
419
+ transform: translate3d(0, 2000px, 0);
420
+ }
421
+ }
422
+ .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
423
+ animation-name: Toastify__bounceInLeft;
424
+ }
425
+ .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
426
+ animation-name: Toastify__bounceInRight;
427
+ }
428
+ .Toastify__bounce-enter--top-center {
429
+ animation-name: Toastify__bounceInDown;
430
+ }
431
+ .Toastify__bounce-enter--bottom-center {
432
+ animation-name: Toastify__bounceInUp;
433
+ }
434
+
435
+ .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
436
+ animation-name: Toastify__bounceOutLeft;
437
+ }
438
+ .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
439
+ animation-name: Toastify__bounceOutRight;
440
+ }
441
+ .Toastify__bounce-exit--top-center {
442
+ animation-name: Toastify__bounceOutUp;
443
+ }
444
+ .Toastify__bounce-exit--bottom-center {
445
+ animation-name: Toastify__bounceOutDown;
446
+ }
447
+
448
+ @keyframes Toastify__zoomIn {
449
+ from {
450
+ opacity: 0;
451
+ transform: scale3d(0.3, 0.3, 0.3);
452
+ }
453
+ 50% {
454
+ opacity: 1;
455
+ }
456
+ }
457
+ @keyframes Toastify__zoomOut {
458
+ from {
459
+ opacity: 1;
460
+ }
461
+ 50% {
462
+ opacity: 0;
463
+ transform: scale3d(0.3, 0.3, 0.3);
464
+ }
465
+ to {
466
+ opacity: 0;
467
+ }
468
+ }
469
+ .Toastify__zoom-enter {
470
+ animation-name: Toastify__zoomIn;
471
+ }
472
+
473
+ .Toastify__zoom-exit {
474
+ animation-name: Toastify__zoomOut;
475
+ }
476
+
477
+ @keyframes Toastify__flipIn {
478
+ from {
479
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
480
+ animation-timing-function: ease-in;
481
+ opacity: 0;
482
+ }
483
+ 40% {
484
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
485
+ animation-timing-function: ease-in;
486
+ }
487
+ 60% {
488
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
489
+ opacity: 1;
490
+ }
491
+ 80% {
492
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
493
+ }
494
+ to {
495
+ transform: perspective(400px);
496
+ }
497
+ }
498
+ @keyframes Toastify__flipOut {
499
+ from {
500
+ transform: perspective(400px);
501
+ }
502
+ 30% {
503
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
504
+ opacity: 1;
505
+ }
506
+ to {
507
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
508
+ opacity: 0;
509
+ }
510
+ }
511
+ .Toastify__flip-enter {
512
+ animation-name: Toastify__flipIn;
513
+ }
514
+
515
+ .Toastify__flip-exit {
516
+ animation-name: Toastify__flipOut;
517
+ }
518
+
519
+ @keyframes Toastify__slideInRight {
520
+ from {
521
+ transform: translate3d(110%, 0, 0);
522
+ visibility: visible;
523
+ }
524
+ to {
525
+ transform: translate3d(0, 0, 0);
526
+ }
527
+ }
528
+ @keyframes Toastify__slideInLeft {
529
+ from {
530
+ transform: translate3d(-110%, 0, 0);
531
+ visibility: visible;
532
+ }
533
+ to {
534
+ transform: translate3d(0, 0, 0);
535
+ }
536
+ }
537
+ @keyframes Toastify__slideInUp {
538
+ from {
539
+ transform: translate3d(0, 110%, 0);
540
+ visibility: visible;
541
+ }
542
+ to {
543
+ transform: translate3d(0, 0, 0);
544
+ }
545
+ }
546
+ @keyframes Toastify__slideInDown {
547
+ from {
548
+ transform: translate3d(0, -110%, 0);
549
+ visibility: visible;
550
+ }
551
+ to {
552
+ transform: translate3d(0, 0, 0);
553
+ }
554
+ }
555
+ @keyframes Toastify__slideOutRight {
556
+ from {
557
+ transform: translate3d(0, 0, 0);
558
+ }
559
+ to {
560
+ visibility: hidden;
561
+ transform: translate3d(110%, 0, 0);
562
+ }
563
+ }
564
+ @keyframes Toastify__slideOutLeft {
565
+ from {
566
+ transform: translate3d(0, 0, 0);
567
+ }
568
+ to {
569
+ visibility: hidden;
570
+ transform: translate3d(-110%, 0, 0);
571
+ }
572
+ }
573
+ @keyframes Toastify__slideOutDown {
574
+ from {
575
+ transform: translate3d(0, 0, 0);
576
+ }
577
+ to {
578
+ visibility: hidden;
579
+ transform: translate3d(0, 500px, 0);
580
+ }
581
+ }
582
+ @keyframes Toastify__slideOutUp {
583
+ from {
584
+ transform: translate3d(0, 0, 0);
585
+ }
586
+ to {
587
+ visibility: hidden;
588
+ transform: translate3d(0, -500px, 0);
589
+ }
590
+ }
591
+ .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
592
+ animation-name: Toastify__slideInLeft;
593
+ }
594
+ .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
595
+ animation-name: Toastify__slideInRight;
596
+ }
597
+ .Toastify__slide-enter--top-center {
598
+ animation-name: Toastify__slideInDown;
599
+ }
600
+ .Toastify__slide-enter--bottom-center {
601
+ animation-name: Toastify__slideInUp;
602
+ }
603
+
604
+ .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
605
+ animation-name: Toastify__slideOutLeft;
606
+ }
607
+ .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
608
+ animation-name: Toastify__slideOutRight;
609
+ }
610
+ .Toastify__slide-exit--top-center {
611
+ animation-name: Toastify__slideOutUp;
612
+ }
613
+ .Toastify__slide-exit--bottom-center {
614
+ animation-name: Toastify__slideOutDown;
615
+ }
616
+
617
+ @keyframes Toastify__spin {
618
+ from {
619
+ transform: rotate(0deg);
620
+ }
621
+ to {
622
+ transform: rotate(360deg);
623
+ }
624
+ }
625
+
626
+ /*# sourceMappingURL=ReactToastify.css.map */
@@ -1,10 +1,13 @@
1
1
  /// <reference types="react" />
2
+ import 'react-toastify/dist/ReactToastify.css';
2
3
  import { ToastContainerProps } from './types';
3
4
  export declare const ToastContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
4
- hideProgressBar: true;
5
- newestOnTop: true;
5
+ closeButton: false;
6
6
  closeOnClick: false;
7
7
  draggable: false;
8
- rtl: false;
8
+ hideProgressBar: true;
9
9
  icon: false;
10
- } & ToastContainerProps, "draggable" | "icon" | "rtl" | "closeOnClick" | "newestOnTop" | "hideProgressBar">;
10
+ newestOnTop: true;
11
+ rtl: false;
12
+ transition: ({ children, position, preventExitTransition, done, nodeRef, isIn }: import("react-toastify").ToastTransitionProps) => JSX.Element;
13
+ } & ToastContainerProps, "draggable" | "icon" | "rtl" | "transition" | "closeOnClick" | "newestOnTop" | "closeButton" | "hideProgressBar">;