1 |
|
2 |
|
3 |
|
4 |
|
5 | .ant-notification {
|
6 | box-sizing: border-box;
|
7 | margin: 0;
|
8 | padding: 0;
|
9 | color: rgba(0, 0, 0, 0.85);
|
10 | font-size: 14px;
|
11 | font-variant: tabular-nums;
|
12 | line-height: 1.5715;
|
13 | list-style: none;
|
14 | font-feature-settings: 'tnum';
|
15 | position: fixed;
|
16 | z-index: 1010;
|
17 | margin-right: 24px;
|
18 | }
|
19 | .ant-notification-topLeft,
|
20 | .ant-notification-bottomLeft {
|
21 | margin-right: 0;
|
22 | margin-left: 24px;
|
23 | }
|
24 | .ant-notification-topLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
|
25 | .ant-notification-bottomLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
|
26 | .ant-notification-topLeft .ant-notification-fade-appear.ant-notification-fade-appear-active,
|
27 | .ant-notification-bottomLeft .ant-notification-fade-appear.ant-notification-fade-appear-active {
|
28 | -webkit-animation-name: NotificationLeftFadeIn;
|
29 | animation-name: NotificationLeftFadeIn;
|
30 | }
|
31 | .ant-notification-close-icon {
|
32 | font-size: 14px;
|
33 | cursor: pointer;
|
34 | }
|
35 | .ant-notification-hook-holder {
|
36 | position: relative;
|
37 | }
|
38 | .ant-notification-notice {
|
39 | position: relative;
|
40 | width: 384px;
|
41 | max-width: calc(100vw - 24px * 2);
|
42 | margin-bottom: 16px;
|
43 | margin-left: auto;
|
44 | padding: 16px 24px;
|
45 | overflow: hidden;
|
46 | line-height: 1.5715;
|
47 | word-wrap: break-word;
|
48 | background: #fff;
|
49 | border-radius: 2px;
|
50 | box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
51 | }
|
52 | .ant-notification-topLeft .ant-notification-notice,
|
53 | .ant-notification-bottomLeft .ant-notification-notice {
|
54 | margin-right: auto;
|
55 | margin-left: 0;
|
56 | }
|
57 | .ant-notification-notice-message {
|
58 | margin-bottom: 8px;
|
59 | color: rgba(0, 0, 0, 0.85);
|
60 | font-size: 16px;
|
61 | line-height: 24px;
|
62 | }
|
63 | .ant-notification-notice-message-single-line-auto-margin {
|
64 | display: block;
|
65 | width: calc(384px - 24px * 2 - 24px - 48px - 100%);
|
66 | max-width: 4px;
|
67 | background-color: transparent;
|
68 | pointer-events: none;
|
69 | }
|
70 | .ant-notification-notice-message-single-line-auto-margin::before {
|
71 | display: block;
|
72 | content: '';
|
73 | }
|
74 | .ant-notification-notice-description {
|
75 | font-size: 14px;
|
76 | }
|
77 | .ant-notification-notice-closable .ant-notification-notice-message {
|
78 | padding-right: 24px;
|
79 | }
|
80 | .ant-notification-notice-with-icon .ant-notification-notice-message {
|
81 | margin-bottom: 4px;
|
82 | margin-left: 48px;
|
83 | font-size: 16px;
|
84 | }
|
85 | .ant-notification-notice-with-icon .ant-notification-notice-description {
|
86 | margin-left: 48px;
|
87 | font-size: 14px;
|
88 | }
|
89 | .ant-notification-notice-icon {
|
90 | position: absolute;
|
91 | margin-left: 4px;
|
92 | font-size: 24px;
|
93 | line-height: 24px;
|
94 | }
|
95 | .anticon.ant-notification-notice-icon-success {
|
96 | color: #52c41a;
|
97 | }
|
98 | .anticon.ant-notification-notice-icon-info {
|
99 | color: #1890ff;
|
100 | }
|
101 | .anticon.ant-notification-notice-icon-warning {
|
102 | color: #faad14;
|
103 | }
|
104 | .anticon.ant-notification-notice-icon-error {
|
105 | color: #ff4d4f;
|
106 | }
|
107 | .ant-notification-notice-close {
|
108 | position: absolute;
|
109 | top: 16px;
|
110 | right: 22px;
|
111 | color: rgba(0, 0, 0, 0.45);
|
112 | outline: none;
|
113 | }
|
114 | .ant-notification-notice-close:hover {
|
115 | color: rgba(0, 0, 0, 0.67);
|
116 | }
|
117 | .ant-notification-notice-btn {
|
118 | float: right;
|
119 | margin-top: 16px;
|
120 | }
|
121 | .ant-notification .notification-fade-effect {
|
122 | -webkit-animation-duration: 0.24s;
|
123 | animation-duration: 0.24s;
|
124 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
125 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
126 | -webkit-animation-fill-mode: both;
|
127 | animation-fill-mode: both;
|
128 | }
|
129 | .ant-notification-fade-enter,
|
130 | .ant-notification-fade-appear {
|
131 | -webkit-animation-duration: 0.24s;
|
132 | animation-duration: 0.24s;
|
133 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
134 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
135 | -webkit-animation-fill-mode: both;
|
136 | animation-fill-mode: both;
|
137 | opacity: 0;
|
138 | -webkit-animation-play-state: paused;
|
139 | animation-play-state: paused;
|
140 | }
|
141 | .ant-notification-fade-leave {
|
142 | -webkit-animation-duration: 0.24s;
|
143 | animation-duration: 0.24s;
|
144 | -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
145 | animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
|
146 | -webkit-animation-fill-mode: both;
|
147 | animation-fill-mode: both;
|
148 | -webkit-animation-duration: 0.2s;
|
149 | animation-duration: 0.2s;
|
150 | -webkit-animation-play-state: paused;
|
151 | animation-play-state: paused;
|
152 | }
|
153 | .ant-notification-fade-enter.ant-notification-fade-enter-active,
|
154 | .ant-notification-fade-appear.ant-notification-fade-appear-active {
|
155 | -webkit-animation-name: NotificationFadeIn;
|
156 | animation-name: NotificationFadeIn;
|
157 | -webkit-animation-play-state: running;
|
158 | animation-play-state: running;
|
159 | }
|
160 | .ant-notification-fade-leave.ant-notification-fade-leave-active {
|
161 | -webkit-animation-name: NotificationFadeOut;
|
162 | animation-name: NotificationFadeOut;
|
163 | -webkit-animation-play-state: running;
|
164 | animation-play-state: running;
|
165 | }
|
166 | @-webkit-keyframes NotificationFadeIn {
|
167 | 0% {
|
168 | left: 384px;
|
169 | opacity: 0;
|
170 | }
|
171 | 100% {
|
172 | left: 0;
|
173 | opacity: 1;
|
174 | }
|
175 | }
|
176 | @keyframes NotificationFadeIn {
|
177 | 0% {
|
178 | left: 384px;
|
179 | opacity: 0;
|
180 | }
|
181 | 100% {
|
182 | left: 0;
|
183 | opacity: 1;
|
184 | }
|
185 | }
|
186 | @-webkit-keyframes NotificationLeftFadeIn {
|
187 | 0% {
|
188 | right: 384px;
|
189 | opacity: 0;
|
190 | }
|
191 | 100% {
|
192 | right: 0;
|
193 | opacity: 1;
|
194 | }
|
195 | }
|
196 | @keyframes NotificationLeftFadeIn {
|
197 | 0% {
|
198 | right: 384px;
|
199 | opacity: 0;
|
200 | }
|
201 | 100% {
|
202 | right: 0;
|
203 | opacity: 1;
|
204 | }
|
205 | }
|
206 | @-webkit-keyframes NotificationFadeOut {
|
207 | 0% {
|
208 | max-height: 150px;
|
209 | margin-bottom: 16px;
|
210 | opacity: 1;
|
211 | }
|
212 | 100% {
|
213 | max-height: 0;
|
214 | margin-bottom: 0;
|
215 | padding-top: 0;
|
216 | padding-bottom: 0;
|
217 | opacity: 0;
|
218 | }
|
219 | }
|
220 | @keyframes NotificationFadeOut {
|
221 | 0% {
|
222 | max-height: 150px;
|
223 | margin-bottom: 16px;
|
224 | opacity: 1;
|
225 | }
|
226 | 100% {
|
227 | max-height: 0;
|
228 | margin-bottom: 0;
|
229 | padding-top: 0;
|
230 | padding-bottom: 0;
|
231 | opacity: 0;
|
232 | }
|
233 | }
|
234 | .ant-notification-rtl {
|
235 | direction: rtl;
|
236 | }
|
237 | .ant-notification-rtl .ant-notification-notice-closable .ant-notification-notice-message {
|
238 | padding-right: 0;
|
239 | padding-left: 24px;
|
240 | }
|
241 | .ant-notification-rtl .ant-notification-notice-with-icon .ant-notification-notice-message {
|
242 | margin-right: 48px;
|
243 | margin-left: 0;
|
244 | }
|
245 | .ant-notification-rtl .ant-notification-notice-with-icon .ant-notification-notice-description {
|
246 | margin-right: 48px;
|
247 | margin-left: 0;
|
248 | }
|
249 | .ant-notification-rtl .ant-notification-notice-icon {
|
250 | margin-right: 4px;
|
251 | margin-left: 0;
|
252 | }
|
253 | .ant-notification-rtl .ant-notification-notice-close {
|
254 | right: auto;
|
255 | left: 22px;
|
256 | }
|
257 | .ant-notification-rtl .ant-notification-notice-btn {
|
258 | float: left;
|
259 | }
|