sweetalert: updated theme.
marcink -
r4315:2cac6d75 default
Not Reviewed
Show More
Add another comment
TODOs: 0 unresolved 0 Resolved
COMMENTS: 0 General 0 Inline
@@ -5,80 +5,97
5 padding: 0.625em;
5 padding: 0.625em;
6 overflow-y: hidden;
6 overflow-y: hidden;
7 background: #fff;
7 background: #fff;
8 box-shadow: 0 0 0.625em #d9d9d9;
8 box-shadow: none;
9 }
9 }
10
10 .swal2-popup.swal2-toast .swal2-header {
11 .swal2-popup.swal2-toast .swal2-header {
11 flex-direction: row;
12 flex-direction: row;
12 }
13 }
14
13 .swal2-popup.swal2-toast .swal2-title {
15 .swal2-popup.swal2-toast .swal2-title {
14 flex-grow: 1;
16 flex-grow: 1;
15 justify-content: flex-start;
17 justify-content: flex-start;
16 margin: 0 0.6em;
18 margin: 0 0.6em;
17 font-size: 1em;
19 font-size: 1em;
18 }
20 }
21
19 .swal2-popup.swal2-toast .swal2-footer {
22 .swal2-popup.swal2-toast .swal2-footer {
20 margin: 0.5em 0 0;
23 margin: 0.5em 0 0;
21 padding: 0.5em 0 0;
24 padding: 0.5em 0 0;
22 font-size: 0.8em;
25 font-size: 0.8em;
23 }
26 }
27
24 .swal2-popup.swal2-toast .swal2-close {
28 .swal2-popup.swal2-toast .swal2-close {
25 position: static;
29 position: static;
26 width: 0.8em;
30 width: 0.8em;
27 height: 0.8em;
31 height: 0.8em;
28 line-height: 0.8;
32 line-height: 0.8;
29 }
33 }
34
30 .swal2-popup.swal2-toast .swal2-content {
35 .swal2-popup.swal2-toast .swal2-content {
31 justify-content: flex-start;
36 justify-content: flex-start;
32 font-size: 1em;
37 font-size: 1em;
33 }
38 }
39
34 .swal2-popup.swal2-toast .swal2-icon {
40 .swal2-popup.swal2-toast .swal2-icon {
35 width: 2em;
41 width: 2em;
36 min-width: 2em;
42 min-width: 2em;
37 height: 2em;
43 height: 2em;
38 margin: 0;
44 margin: 0;
39 }
45 }
46
40 .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
47 .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
41 display: flex;
48 display: flex;
42 align-items: center;
49 align-items: center;
43 font-size: 1.8em;
50 font-size: 1.8em;
44 font-weight: bold;
51 font-weight: bold;
45 }
52 }
53
46 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
54 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
47 .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
55 .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
48 font-size: 0.25em;
56 font-size: 0.25em;
49 }
57 }
50 }
58 }
59
51 .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
60 .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
52 width: 2em;
61 width: 2em;
53 height: 2em;
62 height: 2em;
54 }
63 }
64
55 .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
65 .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
56 top: 0.875em;
66 top: 0.875em;
57 width: 1.375em;
67 width: 1.375em;
58 }
68 }
69
59 .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
70 .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
60 left: 0.3125em;
71 left: 0.3125em;
61 }
72 }
73
62 .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
74 .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
63 right: 0.3125em;
75 right: 0.3125em;
64 }
76 }
77
65 .swal2-popup.swal2-toast .swal2-actions {
78 .swal2-popup.swal2-toast .swal2-actions {
66 flex-basis: auto !important;
79 flex-basis: auto !important;
67 width: auto;
80 width: auto;
68 height: auto;
81 height: auto;
69 margin: 0 0.3125em;
82 margin: 0 0.3125em;
70 }
83 }
84
71 .swal2-popup.swal2-toast .swal2-styled {
85 .swal2-popup.swal2-toast .swal2-styled {
72 margin: 0 0.3125em;
86 margin: 0 0.3125em;
73 padding: 0.3125em 0.625em;
87 padding: 0.3125em 0.625em;
74 font-size: 1em;
88 font-size: 1em;
75 }
89 }
90
76 .swal2-popup.swal2-toast .swal2-styled:focus {
91 .swal2-popup.swal2-toast .swal2-styled:focus {
77 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4);
92 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4);
78 }
93 }
94
79 .swal2-popup.swal2-toast .swal2-success {
95 .swal2-popup.swal2-toast .swal2-success {
80 border-color: @alert1;
96 border-color: @alert1;
81 }
97 }
98
82 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
99 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
83 position: absolute;
100 position: absolute;
84 width: 1.6em;
101 width: 1.6em;
@@ -86,6 +103,7
86 transform: rotate(45deg);
103 transform: rotate(45deg);
87 border-radius: 50%;
104 border-radius: 50%;
88 }
105 }
106
89 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
107 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
90 top: -0.8em;
108 top: -0.8em;
91 left: -0.5em;
109 left: -0.5em;
@@ -93,50 +111,60
93 transform-origin: 2em 2em;
111 transform-origin: 2em 2em;
94 border-radius: 4em 0 0 4em;
112 border-radius: 4em 0 0 4em;
95 }
113 }
114
96 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
115 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
97 top: -0.25em;
116 top: -0.25em;
98 left: 0.9375em;
117 left: 0.9375em;
99 transform-origin: 0 1.5em;
118 transform-origin: 0 1.5em;
100 border-radius: 0 4em 4em 0;
119 border-radius: 0 4em 4em 0;
101 }
120 }
121
102 .swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
122 .swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
103 width: 2em;
123 width: 2em;
104 height: 2em;
124 height: 2em;
105 }
125 }
126
106 .swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
127 .swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
107 top: 0;
128 top: 0;
108 left: 0.4375em;
129 left: 0.4375em;
109 width: 0.4375em;
130 width: 0.4375em;
110 height: 2.6875em;
131 height: 2.6875em;
111 }
132 }
133
112 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
134 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
113 height: 0.3125em;
135 height: 0.3125em;
114 }
136 }
137
115 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
138 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
116 top: 1.125em;
139 top: 1.125em;
117 left: 0.1875em;
140 left: 0.1875em;
118 width: 0.75em;
141 width: 0.75em;
119 }
142 }
143
120 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
144 .swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
121 top: 0.9375em;
145 top: 0.9375em;
122 right: 0.1875em;
146 right: 0.1875em;
123 width: 1.375em;
147 width: 1.375em;
124 }
148 }
149
125 .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
150 .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
126 -webkit-animation: swal2-toast-animate-success-line-tip 0.75s;
151 -webkit-animation: swal2-toast-animate-success-line-tip 0.75s;
127 animation: swal2-toast-animate-success-line-tip 0.75s;
152 animation: swal2-toast-animate-success-line-tip 0.75s;
128 }
153 }
154
129 .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
155 .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
130 -webkit-animation: swal2-toast-animate-success-line-long 0.75s;
156 -webkit-animation: swal2-toast-animate-success-line-long 0.75s;
131 animation: swal2-toast-animate-success-line-long 0.75s;
157 animation: swal2-toast-animate-success-line-long 0.75s;
132 }
158 }
159
133 .swal2-popup.swal2-toast.swal2-show {
160 .swal2-popup.swal2-toast.swal2-show {
134 -webkit-animation: swal2-toast-show 0.5s;
161 -webkit-animation: swal2-toast-show 0.5s;
135 animation: swal2-toast-show 0.5s;
162 animation: swal2-toast-show 0.5s;
136 }
163 }
164
137 .swal2-popup.swal2-toast.swal2-hide {
165 .swal2-popup.swal2-toast.swal2-hide {
138 -webkit-animation: swal2-toast-hide 0.1s forwards;
166 -webkit-animation: swal2-toast-hide 0.1s forwards;
139 animation: swal2-toast-hide 0.1s forwards;
167 animation: swal2-toast-hide 0.1s forwards;
140 }
168 }
141
169
142 .swal2-container {
170 .swal2-container {
@@ -155,85 +183,111
155 transition: background-color 0.1s;
183 transition: background-color 0.1s;
156 -webkit-overflow-scrolling: touch;
184 -webkit-overflow-scrolling: touch;
157 }
185 }
186
158 .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
187 .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
159 background: rgba(0, 0, 0, 0.4);
188 background: rgba(0, 0, 0, 0.4);
160 }
189 }
190
161 .swal2-container.swal2-backdrop-hide {
191 .swal2-container.swal2-backdrop-hide {
162 background: transparent !important;
192 background: transparent !important;
163 }
193 }
194
164 .swal2-container.swal2-top {
195 .swal2-container.swal2-top {
165 align-items: flex-start;
196 align-items: flex-start;
166 }
197 }
198
167 .swal2-container.swal2-top-start, .swal2-container.swal2-top-left {
199 .swal2-container.swal2-top-start, .swal2-container.swal2-top-left {
168 align-items: flex-start;
200 align-items: flex-start;
169 justify-content: flex-start;
201 justify-content: flex-start;
170 }
202 }
203
171 .swal2-container.swal2-top-end, .swal2-container.swal2-top-right {
204 .swal2-container.swal2-top-end, .swal2-container.swal2-top-right {
172 align-items: flex-start;
205 align-items: flex-start;
173 justify-content: flex-end;
206 justify-content: flex-end;
174 }
207 }
208
175 .swal2-container.swal2-center {
209 .swal2-container.swal2-center {
176 align-items: center;
210 align-items: center;
177 }
211 }
212
178 .swal2-container.swal2-center-start, .swal2-container.swal2-center-left {
213 .swal2-container.swal2-center-start, .swal2-container.swal2-center-left {
179 align-items: center;
214 align-items: center;
180 justify-content: flex-start;
215 justify-content: flex-start;
181 }
216 }
217
182 .swal2-container.swal2-center-end, .swal2-container.swal2-center-right {
218 .swal2-container.swal2-center-end, .swal2-container.swal2-center-right {
183 align-items: center;
219 align-items: center;
184 justify-content: flex-end;
220 justify-content: flex-end;
185 }
221 }
222
186 .swal2-container.swal2-bottom {
223 .swal2-container.swal2-bottom {
187 align-items: flex-end;
224 align-items: flex-end;
188 }
225 }
226
189 .swal2-container.swal2-bottom-start, .swal2-container.swal2-bottom-left {
227 .swal2-container.swal2-bottom-start, .swal2-container.swal2-bottom-left {
190 align-items: flex-end;
228 align-items: flex-end;
191 justify-content: flex-start;
229 justify-content: flex-start;
192 }
230 }
231
193 .swal2-container.swal2-bottom-end, .swal2-container.swal2-bottom-right {
232 .swal2-container.swal2-bottom-end, .swal2-container.swal2-bottom-right {
194 align-items: flex-end;
233 align-items: flex-end;
195 justify-content: flex-end;
234 justify-content: flex-end;
196 }
235 }
197 .swal2-container.swal2-bottom > :first-child, .swal2-container.swal2-bottom-start > :first-child, .swal2-container.swal2-bottom-left > :first-child, .swal2-container.swal2-bottom-end > :first-child, .swal2-container.swal2-bottom-right > :first-child {
236
237 .swal2-container.swal2-bottom > :first-child,
238 .swal2-container.swal2-bottom-start > :first-child,
239 .swal2-container.swal2-bottom-left > :first-child,
240 .swal2-container.swal2-bottom-end > :first-child,
241 .swal2-container.swal2-bottom-right > :first-child {
198 margin-top: auto;
242 margin-top: auto;
199 }
243 }
244
200 .swal2-container.swal2-grow-fullscreen > .swal2-modal {
245 .swal2-container.swal2-grow-fullscreen > .swal2-modal {
201 display: flex !important;
246 display: flex !important;
202 flex: 1;
247 flex: 1;
203 align-self: stretch;
248 align-self: stretch;
204 justify-content: center;
249 justify-content: center;
205 }
250 }
251
206 .swal2-container.swal2-grow-row > .swal2-modal {
252 .swal2-container.swal2-grow-row > .swal2-modal {
207 display: flex !important;
253 display: flex !important;
208 flex: 1;
254 flex: 1;
209 align-content: center;
255 align-content: center;
210 justify-content: center;
256 justify-content: center;
211 }
257 }
258
212 .swal2-container.swal2-grow-column {
259 .swal2-container.swal2-grow-column {
213 flex: 1;
260 flex: 1;
214 flex-direction: column;
261 flex-direction: column;
215 }
262 }
263
216 .swal2-container.swal2-grow-column.swal2-top, .swal2-container.swal2-grow-column.swal2-center, .swal2-container.swal2-grow-column.swal2-bottom {
264 .swal2-container.swal2-grow-column.swal2-top, .swal2-container.swal2-grow-column.swal2-center, .swal2-container.swal2-grow-column.swal2-bottom {
217 align-items: center;
265 align-items: center;
218 }
266 }
267
219 .swal2-container.swal2-grow-column.swal2-top-start, .swal2-container.swal2-grow-column.swal2-center-start, .swal2-container.swal2-grow-column.swal2-bottom-start, .swal2-container.swal2-grow-column.swal2-top-left, .swal2-container.swal2-grow-column.swal2-center-left, .swal2-container.swal2-grow-column.swal2-bottom-left {
268 .swal2-container.swal2-grow-column.swal2-top-start, .swal2-container.swal2-grow-column.swal2-center-start, .swal2-container.swal2-grow-column.swal2-bottom-start, .swal2-container.swal2-grow-column.swal2-top-left, .swal2-container.swal2-grow-column.swal2-center-left, .swal2-container.swal2-grow-column.swal2-bottom-left {
220 align-items: flex-start;
269 align-items: flex-start;
221 }
270 }
271
222 .swal2-container.swal2-grow-column.swal2-top-end, .swal2-container.swal2-grow-column.swal2-center-end, .swal2-container.swal2-grow-column.swal2-bottom-end, .swal2-container.swal2-grow-column.swal2-top-right, .swal2-container.swal2-grow-column.swal2-center-right, .swal2-container.swal2-grow-column.swal2-bottom-right {
272 .swal2-container.swal2-grow-column.swal2-top-end, .swal2-container.swal2-grow-column.swal2-center-end, .swal2-container.swal2-grow-column.swal2-bottom-end, .swal2-container.swal2-grow-column.swal2-top-right, .swal2-container.swal2-grow-column.swal2-center-right, .swal2-container.swal2-grow-column.swal2-bottom-right {
223 align-items: flex-end;
273 align-items: flex-end;
224 }
274 }
275
225 .swal2-container.swal2-grow-column > .swal2-modal {
276 .swal2-container.swal2-grow-column > .swal2-modal {
226 display: flex !important;
277 display: flex !important;
227 flex: 1;
278 flex: 1;
228 align-content: center;
279 align-content: center;
229 justify-content: center;
280 justify-content: center;
230 }
281 }
282
231 .swal2-container.swal2-no-transition {
283 .swal2-container.swal2-no-transition {
232 transition: none !important;
284 transition: none !important;
233 }
285 }
286
234 .swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
287 .swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
235 margin: auto;
288 margin: auto;
236 }
289 }
290
237 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
291 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
238 .swal2-container .swal2-modal {
292 .swal2-container .swal2-modal {
239 margin: 0 !important;
293 margin: 0 !important;
@@ -250,14 +304,16
250 max-width: 100%;
304 max-width: 100%;
251 padding: 1.25em;
305 padding: 1.25em;
252 border: none;
306 border: none;
253 border-radius: 0.3125em;
307 border-radius: 0;
254 background: #fff;
308 background: #fff;
255 font-family: inherit;
309 font-family: inherit;
256 font-size: 1rem;
310 font-size: 1rem;
257 }
311 }
312
258 .swal2-popup:focus {
313 .swal2-popup:focus {
259 outline: none;
314 outline: none;
260 }
315 }
316
261 .swal2-popup.swal2-loading {
317 .swal2-popup.swal2-loading {
262 overflow-y: hidden;
318 overflow-y: hidden;
263 }
319 }
@@ -290,15 +346,19
290 width: 100%;
346 width: 100%;
291 margin: 1.25em auto 0;
347 margin: 1.25em auto 0;
292 }
348 }
349
293 .swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
350 .swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
294 opacity: 0.4;
351 opacity: 0.4;
295 }
352 }
353
296 .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
354 .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
297 background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
355 background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
298 }
356 }
357
299 .swal2-actions:not(.swal2-loading) .swal2-styled:active {
358 .swal2-actions:not(.swal2-loading) .swal2-styled:active {
300 background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
359 background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
301 }
360 }
361
302 .swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
362 .swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
303 box-sizing: border-box;
363 box-sizing: border-box;
304 width: 2.5em;
364 width: 2.5em;
@@ -306,7 +366,7
306 margin: 0.46875em;
366 margin: 0.46875em;
307 padding: 0;
367 padding: 0;
308 -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
368 -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
309 animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
369 animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
310 border: 0.25em solid transparent;
370 border: 0.25em solid transparent;
311 border-radius: 100%;
371 border-radius: 100%;
312 border-color: transparent;
372 border-color: transparent;
@@ -314,14 +374,16
314 color: transparent !important;
374 color: transparent !important;
315 cursor: default;
375 cursor: default;
316 -webkit-user-select: none;
376 -webkit-user-select: none;
317 -moz-user-select: none;
377 -moz-user-select: none;
318 -ms-user-select: none;
378 -ms-user-select: none;
319 user-select: none;
379 user-select: none;
320 }
380 }
381
321 .swal2-actions.swal2-loading .swal2-styled.swal2-cancel {
382 .swal2-actions.swal2-loading .swal2-styled.swal2-cancel {
322 margin-right: 30px;
383 margin-right: 30px;
323 margin-left: 30px;
384 margin-left: 30px;
324 }
385 }
386
325 .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
387 .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
326 content: "";
388 content: "";
327 display: inline-block;
389 display: inline-block;
@@ -329,7 +391,7
329 height: 15px;
391 height: 15px;
330 margin-left: 5px;
392 margin-left: 5px;
331 -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
393 -webkit-animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
332 animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
394 animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
333 border: 3px solid #999999;
395 border: 3px solid #999999;
334 border-radius: 50%;
396 border-radius: 50%;
335 border-right-color: transparent;
397 border-right-color: transparent;
@@ -342,29 +404,34
342 box-shadow: none;
404 box-shadow: none;
343 font-weight: 500;
405 font-weight: 500;
344 }
406 }
407
345 .swal2-styled:not([disabled]) {
408 .swal2-styled:not([disabled]) {
346 cursor: pointer;
409 cursor: pointer;
347 }
410 }
411
348 .swal2-styled.swal2-confirm {
412 .swal2-styled.swal2-confirm {
349 border: 0;
413 border: 0;
350 border-radius: 0.25em;
414 border-radius: 0;
351 background: initial;
415 background: initial;
352 background-color: @alert4;
416 background-color: @alert4;
353 color: #fff;
417 color: #fff;
354 font-size: 1.0625em;
418 font-size: 1.0625em;
355 }
419 }
420
356 .swal2-styled.swal2-cancel {
421 .swal2-styled.swal2-cancel {
357 border: 0;
422 border: 0;
358 border-radius: 0.25em;
423 border-radius: 0;
359 background: initial;
424 background: initial;
360 background-color: #aaa;
425 background-color: #aaa;
361 color: #fff;
426 color: #fff;
362 font-size: 1.0625em;
427 font-size: 1.0625em;
363 }
428 }
429
364 .swal2-styled:focus {
430 .swal2-styled:focus {
365 outline: none;
431 outline: none;
366 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4);
432 box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4);
367 }
433 }
434
368 .swal2-styled::-moz-focus-inner {
435 .swal2-styled::-moz-focus-inner {
369 border: 0;
436 border: 0;
370 }
437 }
@@ -385,8 +452,8
385 left: 0;
452 left: 0;
386 height: 0.25em;
453 height: 0.25em;
387 overflow: hidden;
454 overflow: hidden;
388 border-bottom-right-radius: 0.3125em;
455 border-bottom-right-radius: 0;
389 border-bottom-left-radius: 0.3125em;
456 border-bottom-left-radius: 0;
390 }
457 }
391
458
392 .swal2-timer-progress-bar {
459 .swal2-timer-progress-bar {
@@ -403,6 +470,7
403 .swal2-close {
470 .swal2-close {
404 position: absolute;
471 position: absolute;
405 z-index: 2;
472 z-index: 2;
473 /* 1617 */
406 top: 0;
474 top: 0;
407 right: 0;
475 right: 0;
408 align-items: center;
476 align-items: center;
@@ -421,11 +489,13
421 line-height: 1.2;
489 line-height: 1.2;
422 cursor: pointer;
490 cursor: pointer;
423 }
491 }
492
424 .swal2-close:hover {
493 .swal2-close:hover {
425 transform: none;
494 transform: none;
426 background: transparent;
495 background: transparent;
427 color: #f27474;
496 color: #f27474;
428 }
497 }
498
429 .swal2-close::-moz-focus-inner {
499 .swal2-close::-moz-focus-inner {
430 border: 0;
500 border: 0;
431 }
501 }
@@ -457,20 +527,22
457 .swal2-textarea {
527 .swal2-textarea {
458 box-sizing: border-box;
528 box-sizing: border-box;
459 width: 100%;
529 width: 100%;
460 transition: border-color 0.3s, box-shadow 0.3s;
530 transition: initial;
461 border: 1px solid #d9d9d9;
531 border: 1px solid #d9d9d9;
462 border-radius: 0.1875em;
532 border-radius: 0;
463 background: inherit;
533 background: inherit;
464 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
534 box-shadow: none;
465 color: inherit;
535 color: inherit;
466 font-size: 1.125em;
536 font-size: 1.125em;
467 }
537 }
538
468 .swal2-input.swal2-inputerror,
539 .swal2-input.swal2-inputerror,
469 .swal2-file.swal2-inputerror,
540 .swal2-file.swal2-inputerror,
470 .swal2-textarea.swal2-inputerror {
541 .swal2-textarea.swal2-inputerror {
471 border-color: #f27474 !important;
542 border-color: #f27474 !important;
472 box-shadow: 0 0 2px #f27474 !important;
543 box-shadow: 0 0 2px #f27474 !important;
473 }
544 }
545
474 .swal2-input:focus,
546 .swal2-input:focus,
475 .swal2-file:focus,
547 .swal2-file:focus,
476 .swal2-textarea:focus {
548 .swal2-textarea:focus {
@@ -478,18 +550,23
478 outline: none;
550 outline: none;
479 box-shadow: 0 0 3px #c4e6f5;
551 box-shadow: 0 0 3px #c4e6f5;
480 }
552 }
553
481 .swal2-input::-webkit-input-placeholder, .swal2-file::-webkit-input-placeholder, .swal2-textarea::-webkit-input-placeholder {
554 .swal2-input::-webkit-input-placeholder, .swal2-file::-webkit-input-placeholder, .swal2-textarea::-webkit-input-placeholder {
482 color: #cccccc;
555 color: #cccccc;
483 }
556 }
557
484 .swal2-input::-moz-placeholder, .swal2-file::-moz-placeholder, .swal2-textarea::-moz-placeholder {
558 .swal2-input::-moz-placeholder, .swal2-file::-moz-placeholder, .swal2-textarea::-moz-placeholder {
485 color: #cccccc;
559 color: #cccccc;
486 }
560 }
561
487 .swal2-input:-ms-input-placeholder, .swal2-file:-ms-input-placeholder, .swal2-textarea:-ms-input-placeholder {
562 .swal2-input:-ms-input-placeholder, .swal2-file:-ms-input-placeholder, .swal2-textarea:-ms-input-placeholder {
488 color: #cccccc;
563 color: #cccccc;
489 }
564 }
565
490 .swal2-input::-ms-input-placeholder, .swal2-file::-ms-input-placeholder, .swal2-textarea::-ms-input-placeholder {
566 .swal2-input::-ms-input-placeholder, .swal2-file::-ms-input-placeholder, .swal2-textarea::-ms-input-placeholder {
491 color: #cccccc;
567 color: #cccccc;
492 }
568 }
569
493 .swal2-input::placeholder,
570 .swal2-input::placeholder,
494 .swal2-file::placeholder,
571 .swal2-file::placeholder,
495 .swal2-textarea::placeholder {
572 .swal2-textarea::placeholder {
@@ -500,15 +577,18
500 margin: 1em auto;
577 margin: 1em auto;
501 background: #fff;
578 background: #fff;
502 }
579 }
580
503 .swal2-range input {
581 .swal2-range input {
504 width: 80%;
582 width: 80%;
505 }
583 }
584
506 .swal2-range output {
585 .swal2-range output {
507 width: 20%;
586 width: 20%;
508 color: inherit;
587 color: inherit;
509 font-weight: 600;
588 font-weight: 600;
510 text-align: center;
589 text-align: center;
511 }
590 }
591
512 .swal2-range input,
592 .swal2-range input,
513 .swal2-range output {
593 .swal2-range output {
514 height: 2.625em;
594 height: 2.625em;
@@ -521,6 +601,7
521 height: 2.625em;
601 height: 2.625em;
522 padding: 0 0.75em;
602 padding: 0 0.75em;
523 }
603 }
604
524 .swal2-input[type=number] {
605 .swal2-input[type=number] {
525 max-width: 10em;
606 max-width: 10em;
526 }
607 }
@@ -551,11 +632,13
551 background: #fff;
632 background: #fff;
552 color: inherit;
633 color: inherit;
553 }
634 }
635
554 .swal2-radio label,
636 .swal2-radio label,
555 .swal2-checkbox label {
637 .swal2-checkbox label {
556 margin: 0 0.6em;
638 margin: 0 0.6em;
557 font-size: 1.125em;
639 font-size: 1.125em;
558 }
640 }
641
559 .swal2-radio input,
642 .swal2-radio input,
560 .swal2-checkbox input {
643 .swal2-checkbox input {
561 margin: 0 0.4em;
644 margin: 0 0.4em;
@@ -572,6 +655,7
572 font-size: 1em;
655 font-size: 1em;
573 font-weight: 300;
656 font-weight: 300;
574 }
657 }
658
575 .swal2-validation-message::before {
659 .swal2-validation-message::before {
576 content: "!";
660 content: "!";
577 display: inline-block;
661 display: inline-block;
@@ -600,23 +684,27
600 line-height: 5em;
684 line-height: 5em;
601 cursor: default;
685 cursor: default;
602 -webkit-user-select: none;
686 -webkit-user-select: none;
603 -moz-user-select: none;
687 -moz-user-select: none;
604 -ms-user-select: none;
688 -ms-user-select: none;
605 user-select: none;
689 user-select: none;
606 }
690 }
691
607 .swal2-icon .swal2-icon-content {
692 .swal2-icon .swal2-icon-content {
608 display: flex;
693 display: flex;
609 align-items: center;
694 align-items: center;
610 font-size: 3.75em;
695 font-size: 3.75em;
611 }
696 }
697
612 .swal2-icon.swal2-error {
698 .swal2-icon.swal2-error {
613 border-color: @alert2;
699 border-color: @alert2;
614 color: @alert2;
700 color: @alert2;
615 }
701 }
702
616 .swal2-icon.swal2-error .swal2-x-mark {