alerts-sweet-rails 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,602 @@
1
+ @import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
2
+ .sweet-overlay {
3
+ background-color: rgba(0, 0, 0, 0.4);
4
+ position: fixed;
5
+ left: 0;
6
+ right: 0;
7
+ top: 0;
8
+ bottom: 0;
9
+ display: none;
10
+ z-index: 1000; }
11
+
12
+ .sweet-alert {
13
+ background-color: white;
14
+ font-family: 'Open Sans', sans-serif;
15
+ width: 478px;
16
+ padding: 17px;
17
+ border-radius: 5px;
18
+ text-align: center;
19
+ position: fixed;
20
+ left: 50%;
21
+ top: 50%;
22
+ margin-left: -256px;
23
+ margin-top: -200px;
24
+ overflow: hidden;
25
+ display: none;
26
+ z-index: 2000; }
27
+ @media all and (max-width: 540px) {
28
+ .sweet-alert {
29
+ width: auto;
30
+ margin-left: 0;
31
+ margin-right: 0;
32
+ left: 15px;
33
+ right: 15px; } }
34
+ .sweet-alert h2 {
35
+ color: #575757;
36
+ font-size: 30px;
37
+ text-align: center;
38
+ font-weight: 600;
39
+ text-transform: none;
40
+ position: relative; }
41
+ .sweet-alert p {
42
+ color: #797979;
43
+ font-size: 16px;
44
+ text-align: center;
45
+ font-weight: 300;
46
+ position: relative;
47
+ margin: 0;
48
+ line-height: normal; }
49
+ .sweet-alert button {
50
+ background-color: #AEDEF4;
51
+ color: white;
52
+ border: none;
53
+ box-shadow: none;
54
+ font-size: 17px;
55
+ font-weight: 500;
56
+ border-radius: 5px;
57
+ padding: 10px 32px;
58
+ margin: 26px 5px 0 5px;
59
+ cursor: pointer; }
60
+ .sweet-alert button:focus {
61
+ outline: none;
62
+ box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
63
+ .sweet-alert button:hover {
64
+ background-color: #a1d9f2; }
65
+ .sweet-alert button:active {
66
+ background-color: #81ccee; }
67
+ .sweet-alert button.cancel {
68
+ background-color: #D0D0D0; }
69
+ .sweet-alert button.cancel:hover {
70
+ background-color: #c8c8c8; }
71
+ .sweet-alert button.cancel:active {
72
+ background-color: #b6b6b6; }
73
+ .sweet-alert button.cancel:focus {
74
+ box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
75
+ .sweet-alert[data-has-cancel-button=false] button {
76
+ box-shadow: none !important; }
77
+ .sweet-alert .icon {
78
+ width: 80px;
79
+ height: 80px;
80
+ border: 4px solid gray;
81
+ border-radius: 50%;
82
+ margin: 20px auto;
83
+ position: relative;
84
+ box-sizing: content-box; }
85
+ .sweet-alert .icon.error {
86
+ border-color: #F27474; }
87
+ .sweet-alert .icon.error .x-mark {
88
+ position: relative;
89
+ display: block; }
90
+ .sweet-alert .icon.error .line {
91
+ position: absolute;
92
+ height: 5px;
93
+ width: 47px;
94
+ background-color: #F27474;
95
+ display: block;
96
+ top: 37px;
97
+ border-radius: 2px; }
98
+ .sweet-alert .icon.error .line.left {
99
+ -webkit-transform: rotate(45deg);
100
+ transform: rotate(45deg);
101
+ left: 17px; }
102
+ .sweet-alert .icon.error .line.right {
103
+ -webkit-transform: rotate(-45deg);
104
+ transform: rotate(-45deg);
105
+ right: 16px; }
106
+ .sweet-alert .icon.warning {
107
+ border-color: #F8BB86; }
108
+ .sweet-alert .icon.warning .body {
109
+ position: absolute;
110
+ width: 5px;
111
+ height: 47px;
112
+ left: 50%;
113
+ top: 10px;
114
+ border-radius: 2px;
115
+ margin-left: -2px;
116
+ background-color: #F8BB86; }
117
+ .sweet-alert .icon.warning .dot {
118
+ position: absolute;
119
+ width: 7px;
120
+ height: 7px;
121
+ border-radius: 50%;
122
+ margin-left: -3px;
123
+ left: 50%;
124
+ bottom: 10px;
125
+ background-color: #F8BB86; }
126
+ .sweet-alert .icon.info {
127
+ border-color: #C9DAE1; }
128
+ .sweet-alert .icon.info::before {
129
+ content: "";
130
+ position: absolute;
131
+ width: 5px;
132
+ height: 29px;
133
+ left: 50%;
134
+ bottom: 17px;
135
+ border-radius: 2px;
136
+ margin-left: -2px;
137
+ background-color: #C9DAE1; }
138
+ .sweet-alert .icon.info::after {
139
+ content: "";
140
+ position: absolute;
141
+ width: 7px;
142
+ height: 7px;
143
+ border-radius: 50%;
144
+ margin-left: -3px;
145
+ top: 19px;
146
+ background-color: #C9DAE1; }
147
+ .sweet-alert .icon.success {
148
+ border-color: #A5DC86; }
149
+ .sweet-alert .icon.success::before, .sweet-alert .icon.success::after {
150
+ content: '';
151
+ border-radius: 50%;
152
+ position: absolute;
153
+ width: 60px;
154
+ height: 120px;
155
+ background: white;
156
+ transform: rotate(45deg); }
157
+ .sweet-alert .icon.success::before {
158
+ border-radius: 120px 0 0 120px;
159
+ top: -7px;
160
+ left: -33px;
161
+ -webkit-transform: rotate(-45deg);
162
+ transform: rotate(-45deg);
163
+ -webkit-transform-origin: 60px 60px;
164
+ transform-origin: 60px 60px; }
165
+ .sweet-alert .icon.success::after {
166
+ border-radius: 0 120px 120px 0;
167
+ top: -11px;
168
+ left: 30px;
169
+ -webkit-transform: rotate(-45deg);
170
+ transform: rotate(-45deg);
171
+ -webkit-transform-origin: 0px 60px;
172
+ transform-origin: 0px 60px; }
173
+ .sweet-alert .icon.success .placeholder {
174
+ width: 80px;
175
+ height: 80px;
176
+ border: 4px solid rgba(165, 220, 134, 0.2);
177
+ border-radius: 50%;
178
+ box-sizing: content-box;
179
+ position: absolute;
180
+ left: -4px;
181
+ top: -4px;
182
+ z-index: 2; }
183
+ .sweet-alert .icon.success .fix {
184
+ width: 5px;
185
+ height: 90px;
186
+ background-color: white;
187
+ position: absolute;
188
+ left: 28px;
189
+ top: 8px;
190
+ z-index: 1;
191
+ -webkit-transform: rotate(-45deg);
192
+ transform: rotate(-45deg); }
193
+ .sweet-alert .icon.success .line {
194
+ height: 5px;
195
+ background-color: #A5DC86;
196
+ display: block;
197
+ border-radius: 2px;
198
+ position: absolute;
199
+ z-index: 2; }
200
+ .sweet-alert .icon.success .line.tip {
201
+ width: 25px;
202
+ left: 14px;
203
+ top: 46px;
204
+ -webkit-transform: rotate(45deg);
205
+ transform: rotate(45deg); }
206
+ .sweet-alert .icon.success .line.long {
207
+ width: 47px;
208
+ right: 8px;
209
+ top: 38px;
210
+ -webkit-transform: rotate(-45deg);
211
+ transform: rotate(-45deg); }
212
+ .sweet-alert .icon.custom {
213
+ background-size: contain;
214
+ border-radius: 0;
215
+ border: none;
216
+ background-position: center center;
217
+ background-repeat: no-repeat; }
218
+
219
+ /*
220
+ * Animations
221
+ */
222
+ @-webkit-keyframes showSweetAlert {
223
+ 0% {
224
+ transform: scale(0.7);
225
+ -webkit-transform: scale(0.7); }
226
+ 45% {
227
+ transform: scale(1.05);
228
+ -webkit-transform: scale(1.05); }
229
+ 80% {
230
+ transform: scale(0.95);
231
+ -webkit-tranform: scale(0.95); }
232
+ 100% {
233
+ transform: scale(1);
234
+ -webkit-transform: scale(1); } }
235
+ @-moz-keyframes showSweetAlert {
236
+ 0% {
237
+ transform: scale(0.7);
238
+ -webkit-transform: scale(0.7); }
239
+ 45% {
240
+ transform: scale(1.05);
241
+ -webkit-transform: scale(1.05); }
242
+ 80% {
243
+ transform: scale(0.95);
244
+ -webkit-tranform: scale(0.95); }
245
+ 100% {
246
+ transform: scale(1);
247
+ -webkit-transform: scale(1); } }
248
+ @keyframes showSweetAlert {
249
+ 0% {
250
+ transform: scale(0.7);
251
+ -webkit-transform: scale(0.7); }
252
+ 45% {
253
+ transform: scale(1.05);
254
+ -webkit-transform: scale(1.05); }
255
+ 80% {
256
+ transform: scale(0.95);
257
+ -webkit-tranform: scale(0.95); }
258
+ 100% {
259
+ transform: scale(1);
260
+ -webkit-transform: scale(1); } }
261
+ @-webkit-keyframes hideSweetAlert {
262
+ 0% {
263
+ transform: scale(1);
264
+ -webkit-transform: scale(1); }
265
+ 100% {
266
+ transform: scale(0.5);
267
+ -webkit-transform: scale(0.5); } }
268
+ @-moz-keyframes hideSweetAlert {
269
+ 0% {
270
+ transform: scale(1);
271
+ -webkit-transform: scale(1); }
272
+ 100% {
273
+ transform: scale(0.5);
274
+ -webkit-transform: scale(0.5); } }
275
+ @keyframes hideSweetAlert {
276
+ 0% {
277
+ transform: scale(1);
278
+ -webkit-transform: scale(1); }
279
+ 100% {
280
+ transform: scale(0.5);
281
+ -webkit-transform: scale(0.5); } }
282
+ .showSweetAlert {
283
+ -webkit-animation: showSweetAlert 0.3s;
284
+ -moz-animation: showSweetAlert 0.3s;
285
+ animation: showSweetAlert 0.3s; }
286
+
287
+ .hideSweetAlert {
288
+ -webkit-animation: hideSweetAlert 0.2s;
289
+ -moz-animation: hideSweetAlert 0.2s;
290
+ animation: hideSweetAlert 0.2s; }
291
+
292
+ @-webkit-keyframes animateSuccessTip {
293
+ 0% {
294
+ width: 0;
295
+ left: 1px;
296
+ top: 19px; }
297
+ 54% {
298
+ width: 0;
299
+ left: 1px;
300
+ top: 19px; }
301
+ 70% {
302
+ width: 50px;
303
+ left: -8px;
304
+ top: 37px; }
305
+ 84% {
306
+ width: 17px;
307
+ left: 21px;
308
+ top: 48px; }
309
+ 100% {
310
+ width: 25px;
311
+ left: 14px;
312
+ top: 45px; } }
313
+ @-moz-keyframes animateSuccessTip {
314
+ 0% {
315
+ width: 0;
316
+ left: 1px;
317
+ top: 19px; }
318
+ 54% {
319
+ width: 0;
320
+ left: 1px;
321
+ top: 19px; }
322
+ 70% {
323
+ width: 50px;
324
+ left: -8px;
325
+ top: 37px; }
326
+ 84% {
327
+ width: 17px;
328
+ left: 21px;
329
+ top: 48px; }
330
+ 100% {
331
+ width: 25px;
332
+ left: 14px;
333
+ top: 45px; } }
334
+ @keyframes animateSuccessTip {
335
+ 0% {
336
+ width: 0;
337
+ left: 1px;
338
+ top: 19px; }
339
+ 54% {
340
+ width: 0;
341
+ left: 1px;
342
+ top: 19px; }
343
+ 70% {
344
+ width: 50px;
345
+ left: -8px;
346
+ top: 37px; }
347
+ 84% {
348
+ width: 17px;
349
+ left: 21px;
350
+ top: 48px; }
351
+ 100% {
352
+ width: 25px;
353
+ left: 14px;
354
+ top: 45px; } }
355
+ @-webkit-keyframes animateSuccessLong {
356
+ 0% {
357
+ width: 0;
358
+ right: 46px;
359
+ top: 54px; }
360
+ 65% {
361
+ width: 0;
362
+ right: 46px;
363
+ top: 54px; }
364
+ 84% {
365
+ width: 55px;
366
+ right: 0px;
367
+ top: 35px; }
368
+ 100% {
369
+ width: 47px;
370
+ right: 8px;
371
+ top: 38px; } }
372
+ @-moz-keyframes animateSuccessLong {
373
+ 0% {
374
+ width: 0;
375
+ right: 46px;
376
+ top: 54px; }
377
+ 65% {
378
+ width: 0;
379
+ right: 46px;
380
+ top: 54px; }
381
+ 84% {
382
+ width: 55px;
383
+ right: 0px;
384
+ top: 35px; }
385
+ 100% {
386
+ width: 47px;
387
+ right: 8px;
388
+ top: 38px; } }
389
+ @keyframes animateSuccessLong {
390
+ 0% {
391
+ width: 0;
392
+ right: 46px;
393
+ top: 54px; }
394
+ 65% {
395
+ width: 0;
396
+ right: 46px;
397
+ top: 54px; }
398
+ 84% {
399
+ width: 55px;
400
+ right: 0px;
401
+ top: 35px; }
402
+ 100% {
403
+ width: 47px;
404
+ right: 8px;
405
+ top: 38px; } }
406
+ @-webkit-keyframes rotatePlaceholder {
407
+ 0% {
408
+ transform: rotate(-45deg);
409
+ -webkit-transform: rotate(-45deg); }
410
+ 5% {
411
+ transform: rotate(-45deg);
412
+ -webkit-transform: rotate(-45deg); }
413
+ 12% {
414
+ transform: rotate(-405deg);
415
+ -webkit-transform: rotate(-405deg); }
416
+ 100% {
417
+ transform: rotate(-405deg);
418
+ -webkit-transform: rotate(-405deg); } }
419
+ @-moz-keyframes rotatePlaceholder {
420
+ 0% {
421
+ transform: rotate(-45deg);
422
+ -webkit-transform: rotate(-45deg); }
423
+ 5% {
424
+ transform: rotate(-45deg);
425
+ -webkit-transform: rotate(-45deg); }
426
+ 12% {
427
+ transform: rotate(-405deg);
428
+ -webkit-transform: rotate(-405deg); }
429
+ 100% {
430
+ transform: rotate(-405deg);
431
+ -webkit-transform: rotate(-405deg); } }
432
+ @keyframes rotatePlaceholder {
433
+ 0% {
434
+ transform: rotate(-45deg);
435
+ -webkit-transform: rotate(-45deg); }
436
+ 5% {
437
+ transform: rotate(-45deg);
438
+ -webkit-transform: rotate(-45deg); }
439
+ 12% {
440
+ transform: rotate(-405deg);
441
+ -webkit-transform: rotate(-405deg); }
442
+ 100% {
443
+ transform: rotate(-405deg);
444
+ -webkit-transform: rotate(-405deg); } }
445
+ .animateSuccessTip {
446
+ -webkit-animation: animateSuccessTip 0.75s;
447
+ -moz-animation: animateSuccessTip 0.75s;
448
+ animation: animateSuccessTip 0.75s; }
449
+
450
+ .animateSuccessLong {
451
+ -webkit-animation: animateSuccessLong 0.75s;
452
+ -moz-animation: animateSuccessLong 0.75s;
453
+ animation: animateSuccessLong 0.75s; }
454
+
455
+ .icon.success.animate::after {
456
+ -webkit-animation: rotatePlaceholder 4.25s ease-in;
457
+ -moz-animation: rotatePlaceholder 4.25s ease-in;
458
+ animation: rotatePlaceholder 4.25s ease-in; }
459
+
460
+ @-webkit-keyframes animateErrorIcon {
461
+ 0% {
462
+ transform: rotateX(100deg);
463
+ -webkit-transform: rotateX(100deg);
464
+ opacity: 0; }
465
+ 100% {
466
+ transform: rotateX(0deg);
467
+ -webkit-transform: rotateX(0deg);
468
+ opacity: 1; } }
469
+ @-moz-keyframes animateErrorIcon {
470
+ 0% {
471
+ transform: rotateX(100deg);
472
+ -webkit-transform: rotateX(100deg);
473
+ opacity: 0; }
474
+ 100% {
475
+ transform: rotateX(0deg);
476
+ -webkit-transform: rotateX(0deg);
477
+ opacity: 1; } }
478
+ @keyframes animateErrorIcon {
479
+ 0% {
480
+ transform: rotateX(100deg);
481
+ -webkit-transform: rotateX(100deg);
482
+ opacity: 0; }
483
+ 100% {
484
+ transform: rotateX(0deg);
485
+ -webkit-transform: rotateX(0deg);
486
+ opacity: 1; } }
487
+ .animateErrorIcon {
488
+ -webkit-animation: animateErrorIcon 0.5s;
489
+ -moz-animation: animateErrorIcon 0.5s;
490
+ animation: animateErrorIcon 0.5s; }
491
+
492
+ @-webkit-keyframes animateXMark {
493
+ 0% {
494
+ transform: scale(0.4);
495
+ -webkit-transform: scale(0.4);
496
+ margin-top: 26px;
497
+ opacity: 0; }
498
+ 50% {
499
+ transform: scale(0.4);
500
+ -webkit-transform: scale(0.4);
501
+ margin-top: 26px;
502
+ opacity: 0; }
503
+ 80% {
504
+ transform: scale(1.15);
505
+ -webkit-transform: scale(1.15);
506
+ margin-top: -6px; }
507
+ 100% {
508
+ transform: scale(1);
509
+ -webkit-transform: scale(1);
510
+ margin-top: 0;
511
+ opacity: 1; } }
512
+ @-moz-keyframes animateXMark {
513
+ 0% {
514
+ transform: scale(0.4);
515
+ -webkit-transform: scale(0.4);
516
+ margin-top: 26px;
517
+ opacity: 0; }
518
+ 50% {
519
+ transform: scale(0.4);
520
+ -webkit-transform: scale(0.4);
521
+ margin-top: 26px;
522
+ opacity: 0; }
523
+ 80% {
524
+ transform: scale(1.15);
525
+ -webkit-transform: scale(1.15);
526
+ margin-top: -6px; }
527
+ 100% {
528
+ transform: scale(1);
529
+ -webkit-transform: scale(1);
530
+ margin-top: 0;
531
+ opacity: 1; } }
532
+ @keyframes animateXMark {
533
+ 0% {
534
+ transform: scale(0.4);
535
+ -webkit-transform: scale(0.4);
536
+ margin-top: 26px;
537
+ opacity: 0; }
538
+ 50% {
539
+ transform: scale(0.4);
540
+ -webkit-transform: scale(0.4);
541
+ margin-top: 26px;
542
+ opacity: 0; }
543
+ 80% {
544
+ transform: scale(1.15);
545
+ -webkit-transform: scale(1.15);
546
+ margin-top: -6px; }
547
+ 100% {
548
+ transform: scale(1);
549
+ -webkit-transform: scale(1);
550
+ margin-top: 0;
551
+ opacity: 1; } }
552
+ .animateXMark {
553
+ -webkit-animation: animateXMark 0.5s;
554
+ -moz-animation: animateXMark 0.5s;
555
+ animation: animateXMark 0.5s; }
556
+
557
+ /*@include keyframes(simpleRotate) {
558
+ 0% { transform: rotateY(0deg); }
559
+ 100% { transform: rotateY(-360deg); }
560
+ }
561
+ .simpleRotate {
562
+ @include animation('simpleRotate 0.75s');
563
+ }*/
564
+ @-webkit-keyframes pulseWarning {
565
+ 0% {
566
+ border-color: #F8D486; }
567
+ 100% {
568
+ border-color: #F8BB86; } }
569
+ @-moz-keyframes pulseWarning {
570
+ 0% {
571
+ border-color: #F8D486; }
572
+ 100% {
573
+ border-color: #F8BB86; } }
574
+ @keyframes pulseWarning {
575
+ 0% {
576
+ border-color: #F8D486; }
577
+ 100% {
578
+ border-color: #F8BB86; } }
579
+ .pulseWarning {
580
+ -webkit-animation: pulseWarning 0.75s infinite alternate;
581
+ -moz-animation: pulseWarning 0.75s infinite alternate;
582
+ animation: pulseWarning 0.75s infinite alternate; }
583
+
584
+ @-webkit-keyframes pulseWarningIns {
585
+ 0% {
586
+ background-color: #F8D486; }
587
+ 100% {
588
+ background-color: #F8BB86; } }
589
+ @-moz-keyframes pulseWarningIns {
590
+ 0% {
591
+ background-color: #F8D486; }
592
+ 100% {
593
+ background-color: #F8BB86; } }
594
+ @keyframes pulseWarningIns {
595
+ 0% {
596
+ background-color: #F8D486; }
597
+ 100% {
598
+ background-color: #F8BB86; } }
599
+ .pulseWarningIns {
600
+ -webkit-animation: pulseWarningIns 0.75s infinite alternate;
601
+ -moz-animation: pulseWarningIns 0.75s infinite alternate;
602
+ animation: pulseWarningIns 0.75s infinite alternate; }