1 | .native-toast {
|
2 | position: fixed;
|
3 | background-color: rgba(50,50,50,0.8);
|
4 | border-radius: 3px;
|
5 | color: #fff;
|
6 | text-align: center;
|
7 | padding: 10px 12px;
|
8 | opacity: 0;
|
9 | z-index: 99999;
|
10 | transition: opacity 0.25s, top 0.25s, bottom 0.25s, -webkit-transform 0.25s;
|
11 | transition: transform 0.25s, opacity 0.25s, top 0.25s, bottom 0.25s;
|
12 | transition: transform 0.25s, opacity 0.25s, top 0.25s, bottom 0.25s, -webkit-transform 0.25s;
|
13 | box-sizing: border-box;
|
14 | max-width: 18rem;
|
15 | }
|
16 | .native-toast-north {
|
17 | left: 50%;
|
18 | -webkit-transform: translateX(-50%);
|
19 | transform: translateX(-50%);
|
20 | top: -50px;
|
21 | }
|
22 | .native-toast-north.native-toast-shown {
|
23 | opacity: 1;
|
24 | top: 50px;
|
25 | }
|
26 | .native-toast-north.native-toast-shown.native-toast-edge {
|
27 | top: 0;
|
28 | }
|
29 | .native-toast-north-west {
|
30 | left: 50%;
|
31 | -webkit-transform: translateX(-50%);
|
32 | transform: translateX(-50%);
|
33 | top: -50px;
|
34 | left: 50px;
|
35 | -webkit-transform: translateX(0);
|
36 | transform: translateX(0);
|
37 | }
|
38 | .native-toast-north-west.native-toast-shown {
|
39 | opacity: 1;
|
40 | top: 50px;
|
41 | }
|
42 | .native-toast-north-west.native-toast-shown.native-toast-edge {
|
43 | top: 0;
|
44 | }
|
45 | .native-toast-north-east {
|
46 | left: 50%;
|
47 | -webkit-transform: translateX(-50%);
|
48 | transform: translateX(-50%);
|
49 | top: -50px;
|
50 | left: auto;
|
51 | right: 50px;
|
52 | -webkit-transform: translateX(0);
|
53 | transform: translateX(0);
|
54 | }
|
55 | .native-toast-north-east.native-toast-shown {
|
56 | opacity: 1;
|
57 | top: 50px;
|
58 | }
|
59 | .native-toast-north-east.native-toast-shown.native-toast-edge {
|
60 | top: 0;
|
61 | }
|
62 | .native-toast-south {
|
63 | left: 50%;
|
64 | -webkit-transform: translateX(-50%);
|
65 | transform: translateX(-50%);
|
66 | bottom: -50px;
|
67 | }
|
68 | .native-toast-south.native-toast-shown {
|
69 | opacity: 1;
|
70 | bottom: 50px;
|
71 | }
|
72 | .native-toast-south.native-toast-shown.native-toast-edge {
|
73 | bottom: 0;
|
74 | }
|
75 | .native-toast-south-west {
|
76 | left: 50%;
|
77 | -webkit-transform: translateX(-50%);
|
78 | transform: translateX(-50%);
|
79 | bottom: -50px;
|
80 | left: 50px;
|
81 | -webkit-transform: translateX(0);
|
82 | transform: translateX(0);
|
83 | }
|
84 | .native-toast-south-west.native-toast-shown {
|
85 | opacity: 1;
|
86 | bottom: 50px;
|
87 | }
|
88 | .native-toast-south-west.native-toast-shown.native-toast-edge {
|
89 | bottom: 0;
|
90 | }
|
91 | .native-toast-south-east {
|
92 | left: 50%;
|
93 | -webkit-transform: translateX(-50%);
|
94 | transform: translateX(-50%);
|
95 | bottom: -50px;
|
96 | left: auto;
|
97 | right: 50px;
|
98 | -webkit-transform: translateX(0);
|
99 | transform: translateX(0);
|
100 | }
|
101 | .native-toast-south-east.native-toast-shown {
|
102 | opacity: 1;
|
103 | bottom: 50px;
|
104 | }
|
105 | .native-toast-south-east.native-toast-shown.native-toast-edge {
|
106 | bottom: 0;
|
107 | }
|
108 | .native-toast-center {
|
109 | left: 50%;
|
110 | -webkit-transform: translate(-50%, -50%);
|
111 | transform: translate(-50%, -50%);
|
112 | bottom: -50px;
|
113 | }
|
114 | .native-toast-center.native-toast-shown {
|
115 | opacity: 1;
|
116 | bottom: 50%;
|
117 | }
|
118 | .native-toast-west {
|
119 | left: 50px;
|
120 | -webkit-transform: translateX(0);
|
121 | transform: translateX(0);
|
122 | bottom: -50px;
|
123 | }
|
124 | .native-toast-west.native-toast-shown {
|
125 | opacity: 1;
|
126 | bottom: 50%;
|
127 | }
|
128 | .native-toast-east {
|
129 | left: auto;
|
130 | right: 50px;
|
131 | -webkit-transform: translateX(0);
|
132 | transform: translateX(0);
|
133 | bottom: -50px;
|
134 | }
|
135 | .native-toast-east.native-toast-shown {
|
136 | opacity: 1;
|
137 | bottom: 50%;
|
138 | }
|
139 | .native-toast-edge {
|
140 | border-radius: 0;
|
141 | max-width: 100%;
|
142 | width: 100%;
|
143 | text-align: left;
|
144 | left: 0;
|
145 | -webkit-transform: none;
|
146 | transform: none;
|
147 | }
|
148 | .native-toast-error {
|
149 | background-color: #ff3d3d;
|
150 | color: #fff;
|
151 | }
|
152 | .native-toast-success {
|
153 | background-color: #62a465;
|
154 | color: #fff;
|
155 | }
|
156 | .native-toast-warning {
|
157 | background-color: #ffb618;
|
158 | color: #fff;
|
159 | }
|
160 | .native-toast-info {
|
161 | background-color: #67daff;
|
162 | color: #fff;
|
163 | }
|
164 | [class^='native-toast-icon-'] {
|
165 | vertical-align: middle;
|
166 | margin-right: 5px;
|
167 | }
|
168 | [class^='native-toast-icon-'] svg {
|
169 | width: 16px;
|
170 | height: 16px;
|
171 | }
|