1 | @import '../../styles/common/colors';
|
2 | @import '../../styles/common/functions';
|
3 | @import '../../styles/common/screen';
|
4 |
|
5 | .alert {
|
6 | display: flex;
|
7 | padding: 7px 10px;
|
8 | border-radius: 4px;
|
9 | background-color: $white;
|
10 | color: $primary-4;
|
11 | font-size: 13px;
|
12 | line-height: 1.5;
|
13 | font-weight: 200;
|
14 | box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
|
15 | margin-bottom: 15px;
|
16 | position: relative;
|
17 | > div {
|
18 | margin-left: 10px;
|
19 | }
|
20 | > svg {
|
21 | margin-top: 1px;
|
22 | min-width: 17px;
|
23 | }
|
24 | &.success {
|
25 | svg {
|
26 | fill: $success;
|
27 | }
|
28 | }
|
29 | &.warning {
|
30 | svg {
|
31 | fill: $warning;
|
32 | }
|
33 | }
|
34 | &.info {
|
35 | svg {
|
36 | fill: $info;
|
37 | }
|
38 | }
|
39 | &.danger {
|
40 | svg {
|
41 | fill: $danger;
|
42 | }
|
43 | }
|
44 | .close-icon {
|
45 | cursor: pointer;
|
46 | height: 15px;
|
47 | margin: 0;
|
48 | position: absolute;
|
49 | right: 10px;
|
50 | top: 9px;
|
51 | svg {
|
52 | margin-top: 0;
|
53 | fill: $neutral-4;
|
54 | }
|
55 | }
|
56 | }
|
57 |
|
58 | .alert-system.slide-in-right {
|
59 | position: fixed;
|
60 | top: 15px;
|
61 | right: 15px;
|
62 | z-index: z('alert');
|
63 |
|
64 | .alert {
|
65 | animation: slideInRight .75s ease-out;
|
66 | animation-iteration-count: 1;
|
67 | margin-left: 30px;
|
68 | max-width: 350px;
|
69 |
|
70 | div:last-child {
|
71 | margin-right: 20px;
|
72 | }
|
73 | }
|
74 |
|
75 | @keyframes slideInRight {
|
76 | 0% {
|
77 | opacity: 0;
|
78 | transform: translate3d(3000px, 0, 0);
|
79 | }
|
80 |
|
81 | 80% {
|
82 | opacity: 1;
|
83 | transform: translate3d(-25px, 0, 0);
|
84 | }
|
85 |
|
86 | 100% {
|
87 | transform: translate3d(0, 0, 0);
|
88 | }
|
89 | }
|
90 |
|
91 | }
|