sweetalert.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935
  1. body.stop-scrolling {
  2. height: 100%;
  3. overflow: hidden; }
  4. .sweet-overlay {
  5. background-color: black;
  6. /* IE8 */
  7. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  8. /* IE8 */
  9. background-color: rgba(0, 0, 0, 0.4);
  10. position: fixed;
  11. left: 0;
  12. right: 0;
  13. top: 0;
  14. bottom: 0;
  15. display: none;
  16. z-index: 10000; }
  17. .sweet-alert {
  18. background-color: white;
  19. font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  20. width: 478px;
  21. padding: 17px;
  22. border-radius: 5px;
  23. text-align: center;
  24. position: fixed;
  25. left: 50%;
  26. top: 50%;
  27. margin-left: -256px;
  28. margin-top: -200px;
  29. overflow: hidden;
  30. display: none;
  31. z-index: 99999; }
  32. @media all and (max-width: 540px) {
  33. .sweet-alert {
  34. width: auto;
  35. margin-left: 0;
  36. margin-right: 0;
  37. left: 15px;
  38. right: 15px; } }
  39. .sweet-alert h2 {
  40. color: #575757;
  41. font-size: 30px;
  42. text-align: center;
  43. font-weight: 600;
  44. text-transform: none;
  45. position: relative;
  46. margin: 25px 0;
  47. padding: 0;
  48. line-height: 40px;
  49. display: block; }
  50. .sweet-alert p {
  51. color: #797979;
  52. font-size: 16px;
  53. text-align: center;
  54. font-weight: 300;
  55. position: relative;
  56. text-align: inherit;
  57. float: none;
  58. margin: 0;
  59. padding: 0;
  60. line-height: normal; }
  61. .sweet-alert fieldset {
  62. border: none;
  63. position: relative; }
  64. .sweet-alert .sa-error-container {
  65. background-color: #f1f1f1;
  66. margin-left: -17px;
  67. margin-right: -17px;
  68. overflow: hidden;
  69. padding: 0 10px;
  70. max-height: 0;
  71. webkit-transition: padding 0.15s, max-height 0.15s;
  72. transition: padding 0.15s, max-height 0.15s; }
  73. .sweet-alert .sa-error-container.show {
  74. padding: 10px 0;
  75. max-height: 100px;
  76. webkit-transition: padding 0.2s, max-height 0.2s;
  77. transition: padding 0.25s, max-height 0.25s; }
  78. .sweet-alert .sa-error-container .icon {
  79. display: inline-block;
  80. width: 24px;
  81. height: 24px;
  82. border-radius: 50%;
  83. background-color: #ea7d7d;
  84. color: white;
  85. line-height: 24px;
  86. text-align: center;
  87. margin-right: 3px; }
  88. .sweet-alert .sa-error-container p {
  89. display: inline-block; }
  90. .sweet-alert .sa-input-error {
  91. position: absolute;
  92. top: 29px;
  93. right: 26px;
  94. width: 20px;
  95. height: 20px;
  96. opacity: 0;
  97. -webkit-transform: scale(0.5);
  98. transform: scale(0.5);
  99. -webkit-transform-origin: 50% 50%;
  100. transform-origin: 50% 50%;
  101. -webkit-transition: all 0.1s;
  102. transition: all 0.1s; }
  103. .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after {
  104. content: "";
  105. width: 20px;
  106. height: 6px;
  107. background-color: #f06e57;
  108. border-radius: 3px;
  109. position: absolute;
  110. top: 50%;
  111. margin-top: -4px;
  112. left: 50%;
  113. margin-left: -9px; }
  114. .sweet-alert .sa-input-error::before {
  115. -webkit-transform: rotate(-45deg);
  116. transform: rotate(-45deg); }
  117. .sweet-alert .sa-input-error::after {
  118. -webkit-transform: rotate(45deg);
  119. transform: rotate(45deg); }
  120. .sweet-alert .sa-input-error.show {
  121. opacity: 1;
  122. -webkit-transform: scale(1);
  123. transform: scale(1); }
  124. .sweet-alert input {
  125. width: 100%;
  126. box-sizing: border-box;
  127. border-radius: 3px;
  128. border: 1px solid #d7d7d7;
  129. height: 43px;
  130. margin-top: 10px;
  131. margin-bottom: 17px;
  132. font-size: 18px;
  133. box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06);
  134. padding: 0 12px;
  135. display: none;
  136. -webkit-transition: all 0.3s;
  137. transition: all 0.3s; }
  138. .sweet-alert input:focus {
  139. outline: none;
  140. box-shadow: 0px 0px 3px #c4e6f5;
  141. border: 1px solid #b4dbed; }
  142. .sweet-alert input:focus::-moz-placeholder {
  143. transition: opacity 0.3s 0.03s ease;
  144. opacity: 0.5; }
  145. .sweet-alert input:focus:-ms-input-placeholder {
  146. transition: opacity 0.3s 0.03s ease;
  147. opacity: 0.5; }
  148. .sweet-alert input:focus::-webkit-input-placeholder {
  149. transition: opacity 0.3s 0.03s ease;
  150. opacity: 0.5; }
  151. .sweet-alert input::-moz-placeholder {
  152. color: #bdbdbd; }
  153. .sweet-alert input::-ms-clear {
  154. display: none; }
  155. .sweet-alert input:-ms-input-placeholder {
  156. color: #bdbdbd; }
  157. .sweet-alert input::-webkit-input-placeholder {
  158. color: #bdbdbd; }
  159. .sweet-alert.show-input input {
  160. display: block; }
  161. .sweet-alert .sa-confirm-button-container {
  162. display: inline-block;
  163. position: relative; }
  164. .sweet-alert .la-ball-fall {
  165. position: absolute;
  166. left: 50%;
  167. top: 50%;
  168. margin-left: -27px;
  169. margin-top: 4px;
  170. opacity: 0;
  171. visibility: hidden; }
  172. .sweet-alert button {
  173. background-color: #8CD4F5;
  174. color: white;
  175. border: none;
  176. box-shadow: none;
  177. font-size: 17px;
  178. font-weight: 500;
  179. -webkit-border-radius: 4px;
  180. border-radius: 5px;
  181. padding: 10px 32px;
  182. margin: 26px 5px 0 5px;
  183. cursor: pointer; }
  184. .sweet-alert button:focus {
  185. outline: none;
  186. box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
  187. .sweet-alert button:hover {
  188. background-color: #7ecff4; }
  189. .sweet-alert button:active {
  190. background-color: #5dc2f1; }
  191. .sweet-alert button.cancel {
  192. background-color: #C1C1C1; }
  193. .sweet-alert button.cancel:hover {
  194. background-color: #b9b9b9; }
  195. .sweet-alert button.cancel:active {
  196. background-color: #a8a8a8; }
  197. .sweet-alert button.cancel:focus {
  198. box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
  199. .sweet-alert button[disabled] {
  200. opacity: .6;
  201. cursor: default; }
  202. .sweet-alert button.confirm[disabled] {
  203. color: transparent; }
  204. .sweet-alert button.confirm[disabled] ~ .la-ball-fall {
  205. opacity: 1;
  206. visibility: visible;
  207. transition-delay: 0s; }
  208. .sweet-alert button::-moz-focus-inner {
  209. border: 0; }
  210. .sweet-alert[data-has-cancel-button=false] button {
  211. box-shadow: none !important; }
  212. .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] {
  213. padding-bottom: 40px; }
  214. .sweet-alert .sa-icon {
  215. width: 80px;
  216. height: 80px;
  217. border: 4px solid gray;
  218. -webkit-border-radius: 40px;
  219. border-radius: 40px;
  220. border-radius: 50%;
  221. margin: 20px auto;
  222. padding: 0;
  223. position: relative;
  224. box-sizing: content-box; }
  225. .sweet-alert .sa-icon.sa-error {
  226. border-color: #F27474; }
  227. .sweet-alert .sa-icon.sa-error .sa-x-mark {
  228. position: relative;
  229. display: block; }
  230. .sweet-alert .sa-icon.sa-error .sa-line {
  231. position: absolute;
  232. height: 5px;
  233. width: 47px;
  234. background-color: #F27474;
  235. display: block;
  236. top: 37px;
  237. border-radius: 2px; }
  238. .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
  239. -webkit-transform: rotate(45deg);
  240. transform: rotate(45deg);
  241. left: 17px; }
  242. .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
  243. -webkit-transform: rotate(-45deg);
  244. transform: rotate(-45deg);
  245. right: 16px; }
  246. .sweet-alert .sa-icon.sa-warning {
  247. border-color: #F8BB86; }
  248. .sweet-alert .sa-icon.sa-warning .sa-body {
  249. position: absolute;
  250. width: 5px;
  251. height: 47px;
  252. left: 50%;
  253. top: 10px;
  254. -webkit-border-radius: 2px;
  255. border-radius: 2px;
  256. margin-left: -2px;
  257. background-color: #F8BB86; }
  258. .sweet-alert .sa-icon.sa-warning .sa-dot {
  259. position: absolute;
  260. width: 7px;
  261. height: 7px;
  262. -webkit-border-radius: 50%;
  263. border-radius: 50%;
  264. margin-left: -3px;
  265. left: 50%;
  266. bottom: 10px;
  267. background-color: #F8BB86; }
  268. .sweet-alert .sa-icon.sa-info {
  269. border-color: #C9DAE1; }
  270. .sweet-alert .sa-icon.sa-info::before {
  271. content: "";
  272. position: absolute;
  273. width: 5px;
  274. height: 29px;
  275. left: 50%;
  276. bottom: 17px;
  277. border-radius: 2px;
  278. margin-left: -2px;
  279. background-color: #C9DAE1; }
  280. .sweet-alert .sa-icon.sa-info::after {
  281. content: "";
  282. position: absolute;
  283. width: 7px;
  284. height: 7px;
  285. border-radius: 50%;
  286. margin-left: -3px;
  287. top: 19px;
  288. background-color: #C9DAE1;
  289. left: 50%; }
  290. .sweet-alert .sa-icon.sa-success {
  291. border-color: #A5DC86; }
  292. .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
  293. content: '';
  294. -webkit-border-radius: 40px;
  295. border-radius: 40px;
  296. border-radius: 50%;
  297. position: absolute;
  298. width: 60px;
  299. height: 120px;
  300. background: white;
  301. -webkit-transform: rotate(45deg);
  302. transform: rotate(45deg); }
  303. .sweet-alert .sa-icon.sa-success::before {
  304. -webkit-border-radius: 120px 0 0 120px;
  305. border-radius: 120px 0 0 120px;
  306. top: -7px;
  307. left: -33px;
  308. -webkit-transform: rotate(-45deg);
  309. transform: rotate(-45deg);
  310. -webkit-transform-origin: 60px 60px;
  311. transform-origin: 60px 60px; }
  312. .sweet-alert .sa-icon.sa-success::after {
  313. -webkit-border-radius: 0 120px 120px 0;
  314. border-radius: 0 120px 120px 0;
  315. top: -11px;
  316. left: 30px;
  317. -webkit-transform: rotate(-45deg);
  318. transform: rotate(-45deg);
  319. -webkit-transform-origin: 0px 60px;
  320. transform-origin: 0px 60px; }
  321. .sweet-alert .sa-icon.sa-success .sa-placeholder {
  322. width: 80px;
  323. height: 80px;
  324. border: 4px solid rgba(165, 220, 134, 0.2);
  325. -webkit-border-radius: 40px;
  326. border-radius: 40px;
  327. border-radius: 50%;
  328. box-sizing: content-box;
  329. position: absolute;
  330. left: -4px;
  331. top: -4px;
  332. z-index: 2; }
  333. .sweet-alert .sa-icon.sa-success .sa-fix {
  334. width: 5px;
  335. height: 90px;
  336. background-color: white;
  337. position: absolute;
  338. left: 28px;
  339. top: 8px;
  340. z-index: 1;
  341. -webkit-transform: rotate(-45deg);
  342. transform: rotate(-45deg); }
  343. .sweet-alert .sa-icon.sa-success .sa-line {
  344. height: 5px;
  345. background-color: #A5DC86;
  346. display: block;
  347. border-radius: 2px;
  348. position: absolute;
  349. z-index: 2; }
  350. .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
  351. width: 25px;
  352. left: 14px;
  353. top: 46px;
  354. -webkit-transform: rotate(45deg);
  355. transform: rotate(45deg); }
  356. .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
  357. width: 47px;
  358. right: 8px;
  359. top: 38px;
  360. -webkit-transform: rotate(-45deg);
  361. transform: rotate(-45deg); }
  362. .sweet-alert .sa-icon.sa-custom {
  363. background-size: contain;
  364. border-radius: 0;
  365. border: none;
  366. background-position: center center;
  367. background-repeat: no-repeat; }
  368. /*
  369. * Animations
  370. */
  371. @-webkit-keyframes showSweetAlert {
  372. 0% {
  373. transform: scale(0.7);
  374. -webkit-transform: scale(0.7); }
  375. 45% {
  376. transform: scale(1.05);
  377. -webkit-transform: scale(1.05); }
  378. 80% {
  379. transform: scale(0.95);
  380. -webkit-transform: scale(0.95); }
  381. 100% {
  382. transform: scale(1);
  383. -webkit-transform: scale(1); } }
  384. @keyframes showSweetAlert {
  385. 0% {
  386. transform: scale(0.7);
  387. -webkit-transform: scale(0.7); }
  388. 45% {
  389. transform: scale(1.05);
  390. -webkit-transform: scale(1.05); }
  391. 80% {
  392. transform: scale(0.95);
  393. -webkit-transform: scale(0.95); }
  394. 100% {
  395. transform: scale(1);
  396. -webkit-transform: scale(1); } }
  397. @-webkit-keyframes hideSweetAlert {
  398. 0% {
  399. transform: scale(1);
  400. -webkit-transform: scale(1); }
  401. 100% {
  402. transform: scale(0.5);
  403. -webkit-transform: scale(0.5); } }
  404. @keyframes hideSweetAlert {
  405. 0% {
  406. transform: scale(1);
  407. -webkit-transform: scale(1); }
  408. 100% {
  409. transform: scale(0.5);
  410. -webkit-transform: scale(0.5); } }
  411. @-webkit-keyframes slideFromTop {
  412. 0% {
  413. top: 0%; }
  414. 100% {
  415. top: 50%; } }
  416. @keyframes slideFromTop {
  417. 0% {
  418. top: 0%; }
  419. 100% {
  420. top: 50%; } }
  421. @-webkit-keyframes slideToTop {
  422. 0% {
  423. top: 50%; }
  424. 100% {
  425. top: 0%; } }
  426. @keyframes slideToTop {
  427. 0% {
  428. top: 50%; }
  429. 100% {
  430. top: 0%; } }
  431. @-webkit-keyframes slideFromBottom {
  432. 0% {
  433. top: 70%; }
  434. 100% {
  435. top: 50%; } }
  436. @keyframes slideFromBottom {
  437. 0% {
  438. top: 70%; }
  439. 100% {
  440. top: 50%; } }
  441. @-webkit-keyframes slideToBottom {
  442. 0% {
  443. top: 50%; }
  444. 100% {
  445. top: 70%; } }
  446. @keyframes slideToBottom {
  447. 0% {
  448. top: 50%; }
  449. 100% {
  450. top: 70%; } }
  451. .showSweetAlert[data-animation=pop] {
  452. -webkit-animation: showSweetAlert 0.3s;
  453. animation: showSweetAlert 0.3s; }
  454. .showSweetAlert[data-animation=none] {
  455. -webkit-animation: none;
  456. animation: none; }
  457. .showSweetAlert[data-animation=slide-from-top] {
  458. -webkit-animation: slideFromTop 0.3s;
  459. animation: slideFromTop 0.3s; }
  460. .showSweetAlert[data-animation=slide-from-bottom] {
  461. -webkit-animation: slideFromBottom 0.3s;
  462. animation: slideFromBottom 0.3s; }
  463. .hideSweetAlert[data-animation=pop] {
  464. -webkit-animation: hideSweetAlert 0.2s;
  465. animation: hideSweetAlert 0.2s; }
  466. .hideSweetAlert[data-animation=none] {
  467. -webkit-animation: none;
  468. animation: none; }
  469. .hideSweetAlert[data-animation=slide-from-top] {
  470. -webkit-animation: slideToTop 0.4s;
  471. animation: slideToTop 0.4s; }
  472. .hideSweetAlert[data-animation=slide-from-bottom] {
  473. -webkit-animation: slideToBottom 0.3s;
  474. animation: slideToBottom 0.3s; }
  475. @-webkit-keyframes animateSuccessTip {
  476. 0% {
  477. width: 0;
  478. left: 1px;
  479. top: 19px; }
  480. 54% {
  481. width: 0;
  482. left: 1px;
  483. top: 19px; }
  484. 70% {
  485. width: 50px;
  486. left: -8px;
  487. top: 37px; }
  488. 84% {
  489. width: 17px;
  490. left: 21px;
  491. top: 48px; }
  492. 100% {
  493. width: 25px;
  494. left: 14px;
  495. top: 45px; } }
  496. @keyframes animateSuccessTip {
  497. 0% {
  498. width: 0;
  499. left: 1px;
  500. top: 19px; }
  501. 54% {
  502. width: 0;
  503. left: 1px;
  504. top: 19px; }
  505. 70% {
  506. width: 50px;
  507. left: -8px;
  508. top: 37px; }
  509. 84% {
  510. width: 17px;
  511. left: 21px;
  512. top: 48px; }
  513. 100% {
  514. width: 25px;
  515. left: 14px;
  516. top: 45px; } }
  517. @-webkit-keyframes animateSuccessLong {
  518. 0% {
  519. width: 0;
  520. right: 46px;
  521. top: 54px; }
  522. 65% {
  523. width: 0;
  524. right: 46px;
  525. top: 54px; }
  526. 84% {
  527. width: 55px;
  528. right: 0px;
  529. top: 35px; }
  530. 100% {
  531. width: 47px;
  532. right: 8px;
  533. top: 38px; } }
  534. @keyframes animateSuccessLong {
  535. 0% {
  536. width: 0;
  537. right: 46px;
  538. top: 54px; }
  539. 65% {
  540. width: 0;
  541. right: 46px;
  542. top: 54px; }
  543. 84% {
  544. width: 55px;
  545. right: 0px;
  546. top: 35px; }
  547. 100% {
  548. width: 47px;
  549. right: 8px;
  550. top: 38px; } }
  551. @-webkit-keyframes rotatePlaceholder {
  552. 0% {
  553. transform: rotate(-45deg);
  554. -webkit-transform: rotate(-45deg); }
  555. 5% {
  556. transform: rotate(-45deg);
  557. -webkit-transform: rotate(-45deg); }
  558. 12% {
  559. transform: rotate(-405deg);
  560. -webkit-transform: rotate(-405deg); }
  561. 100% {
  562. transform: rotate(-405deg);
  563. -webkit-transform: rotate(-405deg); } }
  564. @keyframes rotatePlaceholder {
  565. 0% {
  566. transform: rotate(-45deg);
  567. -webkit-transform: rotate(-45deg); }
  568. 5% {
  569. transform: rotate(-45deg);
  570. -webkit-transform: rotate(-45deg); }
  571. 12% {
  572. transform: rotate(-405deg);
  573. -webkit-transform: rotate(-405deg); }
  574. 100% {
  575. transform: rotate(-405deg);
  576. -webkit-transform: rotate(-405deg); } }
  577. .animateSuccessTip {
  578. -webkit-animation: animateSuccessTip 0.75s;
  579. animation: animateSuccessTip 0.75s; }
  580. .animateSuccessLong {
  581. -webkit-animation: animateSuccessLong 0.75s;
  582. animation: animateSuccessLong 0.75s; }
  583. .sa-icon.sa-success.animate::after {
  584. -webkit-animation: rotatePlaceholder 4.25s ease-in;
  585. animation: rotatePlaceholder 4.25s ease-in; }
  586. @-webkit-keyframes animateErrorIcon {
  587. 0% {
  588. transform: rotateX(100deg);
  589. -webkit-transform: rotateX(100deg);
  590. opacity: 0; }
  591. 100% {
  592. transform: rotateX(0deg);
  593. -webkit-transform: rotateX(0deg);
  594. opacity: 1; } }
  595. @keyframes animateErrorIcon {
  596. 0% {
  597. transform: rotateX(100deg);
  598. -webkit-transform: rotateX(100deg);
  599. opacity: 0; }
  600. 100% {
  601. transform: rotateX(0deg);
  602. -webkit-transform: rotateX(0deg);
  603. opacity: 1; } }
  604. .animateErrorIcon {
  605. -webkit-animation: animateErrorIcon 0.5s;
  606. animation: animateErrorIcon 0.5s; }
  607. @-webkit-keyframes animateXMark {
  608. 0% {
  609. transform: scale(0.4);
  610. -webkit-transform: scale(0.4);
  611. margin-top: 26px;
  612. opacity: 0; }
  613. 50% {
  614. transform: scale(0.4);
  615. -webkit-transform: scale(0.4);
  616. margin-top: 26px;
  617. opacity: 0; }
  618. 80% {
  619. transform: scale(1.15);
  620. -webkit-transform: scale(1.15);
  621. margin-top: -6px; }
  622. 100% {
  623. transform: scale(1);
  624. -webkit-transform: scale(1);
  625. margin-top: 0;
  626. opacity: 1; } }
  627. @keyframes animateXMark {
  628. 0% {
  629. transform: scale(0.4);
  630. -webkit-transform: scale(0.4);
  631. margin-top: 26px;
  632. opacity: 0; }
  633. 50% {
  634. transform: scale(0.4);
  635. -webkit-transform: scale(0.4);
  636. margin-top: 26px;
  637. opacity: 0; }
  638. 80% {
  639. transform: scale(1.15);
  640. -webkit-transform: scale(1.15);
  641. margin-top: -6px; }
  642. 100% {
  643. transform: scale(1);
  644. -webkit-transform: scale(1);
  645. margin-top: 0;
  646. opacity: 1; } }
  647. .animateXMark {
  648. -webkit-animation: animateXMark 0.5s;
  649. animation: animateXMark 0.5s; }
  650. @-webkit-keyframes pulseWarning {
  651. 0% {
  652. border-color: #F8D486; }
  653. 100% {
  654. border-color: #F8BB86; } }
  655. @keyframes pulseWarning {
  656. 0% {
  657. border-color: #F8D486; }
  658. 100% {
  659. border-color: #F8BB86; } }
  660. .pulseWarning {
  661. -webkit-animation: pulseWarning 0.75s infinite alternate;
  662. animation: pulseWarning 0.75s infinite alternate; }
  663. @-webkit-keyframes pulseWarningIns {
  664. 0% {
  665. background-color: #F8D486; }
  666. 100% {
  667. background-color: #F8BB86; } }
  668. @keyframes pulseWarningIns {
  669. 0% {
  670. background-color: #F8D486; }
  671. 100% {
  672. background-color: #F8BB86; } }
  673. .pulseWarningIns {
  674. -webkit-animation: pulseWarningIns 0.75s infinite alternate;
  675. animation: pulseWarningIns 0.75s infinite alternate; }
  676. @-webkit-keyframes rotate-loading {
  677. 0% {
  678. transform: rotate(0deg); }
  679. 100% {
  680. transform: rotate(360deg); } }
  681. @keyframes rotate-loading {
  682. 0% {
  683. transform: rotate(0deg); }
  684. 100% {
  685. transform: rotate(360deg); } }
  686. /* Internet Explorer 9 has some special quirks that are fixed here */
  687. /* The icons are not animated. */
  688. /* This file is automatically merged into sweet-alert.min.js through Gulp */
  689. /* Error icon */
  690. .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
  691. -ms-transform: rotate(45deg) \9; }
  692. .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
  693. -ms-transform: rotate(-45deg) \9; }
  694. /* Success icon */
  695. .sweet-alert .sa-icon.sa-success {
  696. border-color: transparent\9; }
  697. .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
  698. -ms-transform: rotate(45deg) \9; }
  699. .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
  700. -ms-transform: rotate(-45deg) \9; }
  701. /*!
  702. * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
  703. * Copyright 2015 Daniel Cardoso <@DanielCardoso>
  704. * Licensed under MIT
  705. */
  706. .la-ball-fall,
  707. .la-ball-fall > div {
  708. position: relative;
  709. -webkit-box-sizing: border-box;
  710. -moz-box-sizing: border-box;
  711. box-sizing: border-box; }
  712. .la-ball-fall {
  713. display: block;
  714. font-size: 0;
  715. color: #fff; }
  716. .la-ball-fall.la-dark {
  717. color: #333; }
  718. .la-ball-fall > div {
  719. display: inline-block;
  720. float: none;
  721. background-color: currentColor;
  722. border: 0 solid currentColor; }
  723. .la-ball-fall {
  724. width: 54px;
  725. height: 18px; }
  726. .la-ball-fall > div {
  727. width: 10px;
  728. height: 10px;
  729. margin: 4px;
  730. border-radius: 100%;
  731. opacity: 0;
  732. -webkit-animation: ball-fall 1s ease-in-out infinite;
  733. -moz-animation: ball-fall 1s ease-in-out infinite;
  734. -o-animation: ball-fall 1s ease-in-out infinite;
  735. animation: ball-fall 1s ease-in-out infinite; }
  736. .la-ball-fall > div:nth-child(1) {
  737. -webkit-animation-delay: -200ms;
  738. -moz-animation-delay: -200ms;
  739. -o-animation-delay: -200ms;
  740. animation-delay: -200ms; }
  741. .la-ball-fall > div:nth-child(2) {
  742. -webkit-animation-delay: -100ms;
  743. -moz-animation-delay: -100ms;
  744. -o-animation-delay: -100ms;
  745. animation-delay: -100ms; }
  746. .la-ball-fall > div:nth-child(3) {
  747. -webkit-animation-delay: 0ms;
  748. -moz-animation-delay: 0ms;
  749. -o-animation-delay: 0ms;
  750. animation-delay: 0ms; }
  751. .la-ball-fall.la-sm {
  752. width: 26px;
  753. height: 8px; }
  754. .la-ball-fall.la-sm > div {
  755. width: 4px;
  756. height: 4px;
  757. margin: 2px; }
  758. .la-ball-fall.la-2x {
  759. width: 108px;
  760. height: 36px; }
  761. .la-ball-fall.la-2x > div {
  762. width: 20px;
  763. height: 20px;
  764. margin: 8px; }
  765. .la-ball-fall.la-3x {
  766. width: 162px;
  767. height: 54px; }
  768. .la-ball-fall.la-3x > div {
  769. width: 30px;
  770. height: 30px;
  771. margin: 12px; }
  772. /*
  773. * Animation
  774. */
  775. @-webkit-keyframes ball-fall {
  776. 0% {
  777. opacity: 0;
  778. -webkit-transform: translateY(-145%);
  779. transform: translateY(-145%); }
  780. 10% {
  781. opacity: .5; }
  782. 20% {
  783. opacity: 1;
  784. -webkit-transform: translateY(0);
  785. transform: translateY(0); }
  786. 80% {
  787. opacity: 1;
  788. -webkit-transform: translateY(0);
  789. transform: translateY(0); }
  790. 90% {
  791. opacity: .5; }
  792. 100% {
  793. opacity: 0;
  794. -webkit-transform: translateY(145%);
  795. transform: translateY(145%); } }
  796. @-moz-keyframes ball-fall {
  797. 0% {
  798. opacity: 0;
  799. -moz-transform: translateY(-145%);
  800. transform: translateY(-145%); }
  801. 10% {
  802. opacity: .5; }
  803. 20% {
  804. opacity: 1;
  805. -moz-transform: translateY(0);
  806. transform: translateY(0); }
  807. 80% {
  808. opacity: 1;
  809. -moz-transform: translateY(0);
  810. transform: translateY(0); }
  811. 90% {
  812. opacity: .5; }
  813. 100% {
  814. opacity: 0;
  815. -moz-transform: translateY(145%);
  816. transform: translateY(145%); } }
  817. @-o-keyframes ball-fall {
  818. 0% {
  819. opacity: 0;
  820. -o-transform: translateY(-145%);
  821. transform: translateY(-145%); }
  822. 10% {
  823. opacity: .5; }
  824. 20% {
  825. opacity: 1;
  826. -o-transform: translateY(0);
  827. transform: translateY(0); }
  828. 80% {
  829. opacity: 1;
  830. -o-transform: translateY(0);
  831. transform: translateY(0); }
  832. 90% {
  833. opacity: .5; }
  834. 100% {
  835. opacity: 0;
  836. -o-transform: translateY(145%);
  837. transform: translateY(145%); } }
  838. @keyframes ball-fall {
  839. 0% {
  840. opacity: 0;
  841. -webkit-transform: translateY(-145%);
  842. -moz-transform: translateY(-145%);
  843. -o-transform: translateY(-145%);
  844. transform: translateY(-145%); }
  845. 10% {
  846. opacity: .5; }
  847. 20% {
  848. opacity: 1;
  849. -webkit-transform: translateY(0);
  850. -moz-transform: translateY(0);
  851. -o-transform: translateY(0);
  852. transform: translateY(0); }
  853. 80% {
  854. opacity: 1;
  855. -webkit-transform: translateY(0);
  856. -moz-transform: translateY(0);
  857. -o-transform: translateY(0);
  858. transform: translateY(0); }
  859. 90% {
  860. opacity: .5; }
  861. 100% {
  862. opacity: 0;
  863. -webkit-transform: translateY(145%);
  864. -moz-transform: translateY(145%);
  865. -o-transform: translateY(145%);
  866. transform: translateY(145%); } }