sweetalert.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576
  1. body.stop-scrolling {
  2. height: 100%;
  3. overflow: hidden; }
  4. .sweet-overlay {
  5. position: fixed;
  6. top: 0;
  7. right: 0;
  8. bottom: 0;
  9. left: 0;
  10. z-index: 1700;
  11. display: none;
  12. background-color: rgba(0, 0, 0, 0.4); }
  13. .sweet-alert {
  14. position: fixed;
  15. top: 50%;
  16. left: 50%;
  17. z-index: 1700;
  18. display: none;
  19. width: 478px;
  20. padding: 20px 30px;
  21. margin-top: -200px;
  22. margin-left: -269px;
  23. overflow: hidden;
  24. text-align: center;
  25. background-color: #fff;
  26. border-radius: 0.215rem; }
  27. @media (max-width: 767.98px) {
  28. .sweet-alert {
  29. right: 1.0715rem;
  30. left: 1.0715rem;
  31. width: auto;
  32. margin-right: 0;
  33. margin-left: 0; } }
  34. .sweet-alert .form-group {
  35. display: none; }
  36. .sweet-alert .form-group .sa-input-error {
  37. display: none; }
  38. .sweet-alert.show-input .form-group {
  39. display: block; }
  40. .sweet-alert .sa-confirm-button-container {
  41. position: relative;
  42. display: inline-block; }
  43. .sweet-alert .la-ball-fall {
  44. position: absolute;
  45. top: 50%;
  46. left: 50%;
  47. margin-top: -9px;
  48. margin-left: -27px;
  49. visibility: hidden;
  50. opacity: 0; }
  51. .sweet-alert button[disabled] {
  52. cursor: default;
  53. opacity: .6; }
  54. .sweet-alert button.confirm[disabled] {
  55. color: transparent; }
  56. .sweet-alert button.confirm[disabled] ~ .la-ball-fall {
  57. visibility: visible;
  58. opacity: 1;
  59. transition-delay: 0s; }
  60. .sweet-alert .sa-icon {
  61. position: relative;
  62. box-sizing: content-box;
  63. width: 80px;
  64. height: 80px;
  65. margin: 20px auto;
  66. border: 4px solid gray;
  67. border-radius: 50%; }
  68. .sweet-alert .sa-icon.sa-error {
  69. border-color: #ff4c52; }
  70. .sweet-alert .sa-icon.sa-error .sa-x-mark {
  71. position: relative;
  72. display: block; }
  73. .sweet-alert .sa-icon.sa-error .sa-line {
  74. position: absolute;
  75. top: 37px;
  76. display: block;
  77. width: 47px;
  78. height: 5px;
  79. background-color: #ff4c52;
  80. border-radius: 2px; }
  81. .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
  82. left: 17px;
  83. -webkit-transform: rotate(45deg);
  84. transform: rotate(45deg); }
  85. .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
  86. right: 16px;
  87. -webkit-transform: rotate(-45deg);
  88. transform: rotate(-45deg); }
  89. .sweet-alert .sa-icon.sa-warning {
  90. border-color: #eb6709; }
  91. .sweet-alert .sa-icon.sa-warning .sa-body {
  92. position: absolute;
  93. top: 10px;
  94. left: 50%;
  95. width: 5px;
  96. height: 47px;
  97. margin-left: -2px;
  98. background-color: #eb6709;
  99. border-radius: 2px; }
  100. .sweet-alert .sa-icon.sa-warning .sa-dot {
  101. position: absolute;
  102. bottom: 10px;
  103. left: 50%;
  104. width: 7px;
  105. height: 7px;
  106. margin-left: -3px;
  107. background-color: #eb6709;
  108. border-radius: 50%; }
  109. .sweet-alert .sa-icon.sa-info {
  110. border-color: #0bb2d4; }
  111. .sweet-alert .sa-icon.sa-info::before {
  112. position: absolute;
  113. bottom: 17px;
  114. left: 50%;
  115. width: 5px;
  116. height: 29px;
  117. margin-left: -2px;
  118. content: "";
  119. background-color: #0bb2d4;
  120. border-radius: 2px; }
  121. .sweet-alert .sa-icon.sa-info::after {
  122. position: absolute;
  123. top: 19px;
  124. width: 7px;
  125. height: 7px;
  126. margin-left: -3px;
  127. content: "";
  128. background-color: #0bb2d4;
  129. border-radius: 50%; }
  130. .sweet-alert .sa-icon.sa-success {
  131. border-color: #11c26d; }
  132. .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after {
  133. position: absolute;
  134. width: 60px;
  135. height: 120px;
  136. content: "";
  137. background: #fff;
  138. border-radius: 50%;
  139. -webkit-transform: rotate(45deg);
  140. transform: rotate(45deg); }
  141. .sweet-alert .sa-icon.sa-success::before {
  142. top: -7px;
  143. left: -33px;
  144. border-radius: 120px 0 0 120px;
  145. -webkit-transform: rotate(-45deg);
  146. transform: rotate(-45deg);
  147. -webkit-transform-origin: 60px 60px;
  148. transform-origin: 60px 60px; }
  149. .sweet-alert .sa-icon.sa-success::after {
  150. top: -11px;
  151. left: 30px;
  152. border-radius: 0 120px 120px 0;
  153. -webkit-transform: rotate(-45deg);
  154. transform: rotate(-45deg);
  155. -webkit-transform-origin: 0 60px;
  156. transform-origin: 0 60px; }
  157. .sweet-alert .sa-icon.sa-success .sa-placeholder {
  158. position: absolute;
  159. top: -4px;
  160. left: -4px;
  161. z-index: 2;
  162. box-sizing: content-box;
  163. width: 80px;
  164. height: 80px;
  165. border: 4px solid rgba(17, 194, 109, 0.2);
  166. border-radius: 50%; }
  167. .sweet-alert .sa-icon.sa-success .sa-fix {
  168. position: absolute;
  169. top: 8px;
  170. left: 27px;
  171. z-index: 1;
  172. width: 7px;
  173. height: 90px;
  174. background-color: #fff;
  175. -webkit-transform: rotate(-45deg);
  176. transform: rotate(-45deg); }
  177. .sweet-alert .sa-icon.sa-success .sa-line {
  178. position: absolute;
  179. z-index: 2;
  180. display: block;
  181. height: 5px;
  182. background-color: #11c26d;
  183. border-radius: 2px; }
  184. .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {
  185. top: 46px;
  186. left: 14px;
  187. width: 25px;
  188. -webkit-transform: rotate(45deg);
  189. transform: rotate(45deg); }
  190. .sweet-alert .sa-icon.sa-success .sa-line.sa-long {
  191. top: 38px;
  192. right: 8px;
  193. width: 47px;
  194. -webkit-transform: rotate(-45deg);
  195. transform: rotate(-45deg); }
  196. .sweet-alert .sa-icon.sa-custom {
  197. background-repeat: no-repeat;
  198. background-position: center center;
  199. background-size: contain;
  200. border: none;
  201. border-radius: 0; }
  202. .sweet-alert .btn-default.focus, .sweet-alert .btn-default:focus {
  203. border-color: #e4eaec;
  204. box-shadow: none; }
  205. .sweet-alert .btn-success.focus, .sweet-alert .btn-success:focus {
  206. border-color: #11c26d;
  207. box-shadow: none; }
  208. .sweet-alert .btn-info.focus, .sweet-alert .btn-info:focus {
  209. border-color: #0bb2d4;
  210. box-shadow: none; }
  211. .sweet-alert .btn-danger.focus, .sweet-alert .btn-danger:focus {
  212. border-color: #ff4c52;
  213. box-shadow: none; }
  214. .sweet-alert .btn-warning.focus, .sweet-alert .btn-warning:focus {
  215. border-color: #eb6709;
  216. box-shadow: none; }
  217. .sweet-alert button::-moz-focus-inner {
  218. border: 0; }
  219. @-webkit-keyframes showSweetAlert {
  220. 0% {
  221. -webkit-transform: scale(0.7);
  222. transform: scale(0.7); }
  223. 45% {
  224. -webkit-transform: scale(1.05);
  225. transform: scale(1.05); }
  226. 80% {
  227. -webkit-transform: scale(0.95);
  228. transform: scale(0.95); }
  229. 100% {
  230. -webkit-transform: scale(1);
  231. transform: scale(1); } }
  232. @keyframes showSweetAlert {
  233. 0% {
  234. -webkit-transform: scale(0.7);
  235. transform: scale(0.7); }
  236. 45% {
  237. -webkit-transform: scale(1.05);
  238. transform: scale(1.05); }
  239. 80% {
  240. -webkit-transform: scale(0.95);
  241. transform: scale(0.95); }
  242. 100% {
  243. -webkit-transform: scale(1);
  244. transform: scale(1); } }
  245. @-webkit-keyframes hideSweetAlert {
  246. 0% {
  247. -webkit-transform: scale(1);
  248. transform: scale(1); }
  249. 100% {
  250. -webkit-transform: scale(0.5);
  251. transform: scale(0.5); } }
  252. @keyframes hideSweetAlert {
  253. 0% {
  254. -webkit-transform: scale(1);
  255. transform: scale(1); }
  256. 100% {
  257. -webkit-transform: scale(0.5);
  258. transform: scale(0.5); } }
  259. @-webkit-keyframes slideFromTop {
  260. 0% {
  261. top: 0%; }
  262. 100% {
  263. top: 50%; } }
  264. @keyframes slideFromTop {
  265. 0% {
  266. top: 0%; }
  267. 100% {
  268. top: 50%; } }
  269. @-webkit-keyframes slideToTop {
  270. 0% {
  271. top: 50%; }
  272. 100% {
  273. top: 0%; } }
  274. @keyframes slideToTop {
  275. 0% {
  276. top: 50%; }
  277. 100% {
  278. top: 0%; } }
  279. @-webkit-keyframes slideFromBottom {
  280. 0% {
  281. top: 70%; }
  282. 100% {
  283. top: 50%; } }
  284. @keyframes slideFromBottom {
  285. 0% {
  286. top: 70%; }
  287. 100% {
  288. top: 50%; } }
  289. @-webkit-keyframes slideToBottom {
  290. 0% {
  291. top: 50%; }
  292. 100% {
  293. top: 70%; } }
  294. @keyframes slideToBottom {
  295. 0% {
  296. top: 50%; }
  297. 100% {
  298. top: 70%; } }
  299. .showSweetAlert {
  300. -webkit-animation: showSweetAlert .3s;
  301. animation: showSweetAlert .3s; }
  302. .showSweetAlert[data-animation=none] {
  303. -webkit-animation: none;
  304. animation: none; }
  305. .showSweetAlert[data-animation=slide-from-top] {
  306. -webkit-animation: slideFromTop .3s;
  307. animation: slideFromTop .3s; }
  308. .showSweetAlert[data-animation=slide-from-bottom] {
  309. -webkit-animation: slideFromBottom .3s;
  310. animation: slideFromBottom .3s; }
  311. .hideSweetAlert {
  312. -webkit-animation: hideSweetAlert .3s;
  313. animation: hideSweetAlert .3s; }
  314. .hideSweetAlert[data-animation=none] {
  315. -webkit-animation: none;
  316. animation: none; }
  317. .hideSweetAlert[data-animation=slide-from-top] {
  318. -webkit-animation: slideToTop .3s;
  319. animation: slideToTop .3s; }
  320. .hideSweetAlert[data-animation=slide-from-bottom] {
  321. -webkit-animation: slideToBottom .3s;
  322. animation: slideToBottom .3s; }
  323. @-webkit-keyframes animateSuccessTip {
  324. 0% {
  325. top: 19px;
  326. left: 1px;
  327. width: 0; }
  328. 54% {
  329. top: 19px;
  330. left: 1px;
  331. width: 0; }
  332. 70% {
  333. top: 37px;
  334. left: -8px;
  335. width: 50px; }
  336. 84% {
  337. top: 48px;
  338. left: 21px;
  339. width: 17px; }
  340. 100% {
  341. top: 45px;
  342. left: 14px;
  343. width: 25px; } }
  344. @keyframes animateSuccessTip {
  345. 0% {
  346. top: 19px;
  347. left: 1px;
  348. width: 0; }
  349. 54% {
  350. top: 19px;
  351. left: 1px;
  352. width: 0; }
  353. 70% {
  354. top: 37px;
  355. left: -8px;
  356. width: 50px; }
  357. 84% {
  358. top: 48px;
  359. left: 21px;
  360. width: 17px; }
  361. 100% {
  362. top: 45px;
  363. left: 14px;
  364. width: 25px; } }
  365. @-webkit-keyframes animateSuccessLong {
  366. 0% {
  367. top: 54px;
  368. right: 46px;
  369. width: 0; }
  370. 65% {
  371. top: 54px;
  372. right: 46px;
  373. width: 0; }
  374. 84% {
  375. top: 35px;
  376. right: 0;
  377. width: 55px; }
  378. 100% {
  379. top: 38px;
  380. right: 8px;
  381. width: 47px; } }
  382. @keyframes animateSuccessLong {
  383. 0% {
  384. top: 54px;
  385. right: 46px;
  386. width: 0; }
  387. 65% {
  388. top: 54px;
  389. right: 46px;
  390. width: 0; }
  391. 84% {
  392. top: 35px;
  393. right: 0;
  394. width: 55px; }
  395. 100% {
  396. top: 38px;
  397. right: 8px;
  398. width: 47px; } }
  399. @-webkit-keyframes rotatePlaceholder {
  400. 0% {
  401. -webkit-transform: rotate(-45deg);
  402. transform: rotate(-45deg); }
  403. 5% {
  404. -webkit-transform: rotate(-45deg);
  405. transform: rotate(-45deg); }
  406. 12% {
  407. -webkit-transform: rotate(-405deg);
  408. transform: rotate(-405deg); }
  409. 100% {
  410. -webkit-transform: rotate(-405deg);
  411. transform: rotate(-405deg); } }
  412. @keyframes rotatePlaceholder {
  413. 0% {
  414. -webkit-transform: rotate(-45deg);
  415. transform: rotate(-45deg); }
  416. 5% {
  417. -webkit-transform: rotate(-45deg);
  418. transform: rotate(-45deg); }
  419. 12% {
  420. -webkit-transform: rotate(-405deg);
  421. transform: rotate(-405deg); }
  422. 100% {
  423. -webkit-transform: rotate(-405deg);
  424. transform: rotate(-405deg); } }
  425. .animateSuccessTip {
  426. -webkit-animation: animateSuccessTip .75s;
  427. animation: animateSuccessTip .75s; }
  428. .animateSuccessLong {
  429. -webkit-animation: animateSuccessLong .75s;
  430. animation: animateSuccessLong .75s; }
  431. .sa-icon.sa-success.animate::after {
  432. -webkit-animation: rotatePlaceholder 4.25s ease-in;
  433. animation: rotatePlaceholder 4.25s ease-in; }
  434. @-webkit-keyframes animateErrorIcon {
  435. 0% {
  436. opacity: 0;
  437. -webkit-transform: rotateX(100deg);
  438. transform: rotateX(100deg); }
  439. 100% {
  440. opacity: 1;
  441. -webkit-transform: rotateX(0deg);
  442. transform: rotateX(0deg); } }
  443. @keyframes animateErrorIcon {
  444. 0% {
  445. opacity: 0;
  446. -webkit-transform: rotateX(100deg);
  447. transform: rotateX(100deg); }
  448. 100% {
  449. opacity: 1;
  450. -webkit-transform: rotateX(0deg);
  451. transform: rotateX(0deg); } }
  452. .animateErrorIcon {
  453. -webkit-animation: animateErrorIcon .5s;
  454. animation: animateErrorIcon .5s; }
  455. @-webkit-keyframes animateXMark {
  456. 0% {
  457. margin-top: 26px;
  458. opacity: 0;
  459. -webkit-transform: scale(0.4);
  460. transform: scale(0.4); }
  461. 50% {
  462. margin-top: 26px;
  463. opacity: 0;
  464. -webkit-transform: scale(0.4);
  465. transform: scale(0.4); }
  466. 80% {
  467. margin-top: -6px;
  468. -webkit-transform: scale(1.15);
  469. transform: scale(1.15); }
  470. 100% {
  471. margin-top: 0;
  472. opacity: 1;
  473. -webkit-transform: scale(1);
  474. transform: scale(1); } }
  475. @keyframes animateXMark {
  476. 0% {
  477. margin-top: 26px;
  478. opacity: 0;
  479. -webkit-transform: scale(0.4);
  480. transform: scale(0.4); }
  481. 50% {
  482. margin-top: 26px;
  483. opacity: 0;
  484. -webkit-transform: scale(0.4);
  485. transform: scale(0.4); }
  486. 80% {
  487. margin-top: -6px;
  488. -webkit-transform: scale(1.15);
  489. transform: scale(1.15); }
  490. 100% {
  491. margin-top: 0;
  492. opacity: 1;
  493. -webkit-transform: scale(1);
  494. transform: scale(1); } }
  495. .animateXMark {
  496. -webkit-animation: animateXMark .5s;
  497. animation: animateXMark .5s; }
  498. @-webkit-keyframes pulseWarning {
  499. 0% {
  500. border-color: #f8d486; }
  501. 100% {
  502. border-color: #f8bb86; } }
  503. @keyframes pulseWarning {
  504. 0% {
  505. border-color: #f8d486; }
  506. 100% {
  507. border-color: #f8bb86; } }
  508. .pulseWarning {
  509. -webkit-animation: pulseWarning .75s infinite alternate;
  510. animation: pulseWarning .75s infinite alternate; }
  511. @-webkit-keyframes pulseWarningIns {
  512. 0% {
  513. background-color: #f8d486; }
  514. 100% {
  515. background-color: #f8bb86; } }
  516. @keyframes pulseWarningIns {
  517. 0% {
  518. background-color: #f8d486; }
  519. 100% {
  520. background-color: #f8bb86; } }
  521. .pulseWarningIns {
  522. -webkit-animation: pulseWarningIns .75s infinite alternate;
  523. animation: pulseWarningIns .75s infinite alternate; }
  524. @-webkit-keyframes rotate-loading {
  525. 0% {
  526. -webkit-transform: rotate(0deg);
  527. transform: rotate(0deg); }
  528. 100% {
  529. -webkit-transform: rotate(360deg);
  530. transform: rotate(360deg); } }
  531. @keyframes rotate-loading {
  532. 0% {
  533. -webkit-transform: rotate(0deg);
  534. transform: rotate(0deg); }
  535. 100% {
  536. -webkit-transform: rotate(360deg);
  537. transform: rotate(360deg); } }