PageRenderTime 25ms CodeModel.GetById 21ms RepoModel.GetById 1ms app.codeStats 0ms

/modules/cubyn/views/css/sweetalert2.css

https://gitlab.com/ptisky/API_prestashop
CSS | 595 lines | 500 code | 72 blank | 23 comment | 0 complexity | cf5c13c014d931b9b17d941a789cffe1 MD5 | raw file
  1. /**
  2. * 2015-2016 Cubyn
  3. *
  4. * NOTICE OF LICENSE
  5. *
  6. * This source file is subject to the Academic Free License (AFL 3.0)
  7. * that is bundled with this package in the file LICENSE.txt.
  8. * It is also available through the world-wide-web at this URL:
  9. * http://opensource.org/licenses/afl-3.0.php
  10. * If you did not receive a copy of the license and are unable to
  11. * obtain it through the world-wide-web, please send an email
  12. * to license@prestashop.com so we can send you a copy immediately.
  13. *
  14. * DISCLAIMER
  15. *
  16. * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
  17. * versions in the future. If you wish to customize PrestaShop for your
  18. * needs please refer to http://www.prestashop.com for more information.
  19. *
  20. * @author Cubyn <modules@cubyn.com>
  21. * @copyright 2015-2016 Cubyn
  22. * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
  23. */
  24. .sweet-overlay {
  25. background-color: rgba(0, 0, 0, 0.4);
  26. position: fixed;
  27. left: 0;
  28. right: 0;
  29. top: 0;
  30. bottom: 0;
  31. display: none;
  32. z-index: 1000; }
  33. .sweet-alert {
  34. background-color: #fff;
  35. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  36. border-radius: 5px;
  37. box-sizing: border-box;
  38. text-align: center;
  39. position: fixed;
  40. left: 50%;
  41. top: 50%;
  42. margin-top: -200px;
  43. max-height: 90%;
  44. overflow-x: hidden;
  45. overflow-y: auto;
  46. display: none;
  47. z-index: 2000; }
  48. .sweet-alert h2 {
  49. color: #575757;
  50. font-size: 30px;
  51. text-align: center;
  52. font-weight: 600;
  53. text-transform: none;
  54. position: relative;
  55. margin: 0;
  56. padding: 0;
  57. line-height: 60px;
  58. display: block; }
  59. .sweet-alert p {
  60. font-size: 16px;
  61. text-align: center;
  62. font-weight: 300;
  63. position: relative;
  64. float: none;
  65. margin: 0;
  66. padding: 0;
  67. line-height: normal; }
  68. .sweet-alert hr {
  69. height: 10px;
  70. color: transparent;
  71. border: 0; }
  72. .sweet-alert button {
  73. color: #fff;
  74. border: 0;
  75. box-shadow: none;
  76. font-size: 17px;
  77. font-weight: 500;
  78. border-radius: 5px;
  79. padding: 10px 32px;
  80. margin: 0 5px;
  81. cursor: pointer; }
  82. .sweet-alert button:focus {
  83. outline: none; }
  84. .sweet-alert button.cancel[disabled] {
  85. opacity: .4; }
  86. .sweet-alert button.confirm[disabled] {
  87. border: 4px solid transparent;
  88. border-color: transparent;
  89. width: 40px;
  90. height: 40px;
  91. padding: 0;
  92. margin: 0 30px;
  93. vertical-align: middle;
  94. background-color: transparent !important;
  95. color: transparent;
  96. cursor: default;
  97. border-radius: 100%;
  98. -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
  99. animation: rotate-loading 1.5s linear 0s infinite normal; }
  100. .sweet-alert button::-moz-focus-inner {
  101. border: 0; }
  102. .sweet-alert[data-has-cancel-button=false] button {
  103. box-shadow: none !important; }
  104. .sweet-alert .icon {
  105. width: 80px;
  106. height: 80px;
  107. border: 4px solid #808080;
  108. border-radius: 50%;
  109. margin: 20px auto;
  110. padding: 0;
  111. position: relative;
  112. box-sizing: content-box; }
  113. .sweet-alert .icon.error {
  114. border-color: #f27474; }
  115. .sweet-alert .icon.error .x-mark {
  116. position: relative;
  117. display: block; }
  118. .sweet-alert .icon.error .line {
  119. position: absolute;
  120. height: 5px;
  121. width: 47px;
  122. background-color: #f27474;
  123. display: block;
  124. top: 37px;
  125. border-radius: 2px; }
  126. .sweet-alert .icon.error .line.left {
  127. -webkit-transform: rotate(45deg);
  128. -ms-transform: rotate(45deg);
  129. transform: rotate(45deg);
  130. left: 17px; }
  131. .sweet-alert .icon.error .line.right {
  132. -webkit-transform: rotate(-45deg);
  133. -ms-transform: rotate(-45deg);
  134. transform: rotate(-45deg);
  135. right: 16px; }
  136. .sweet-alert .icon.warning {
  137. border-color: #f8bb86; }
  138. .sweet-alert .icon.warning .body {
  139. position: absolute;
  140. width: 5px;
  141. height: 47px;
  142. left: 50%;
  143. top: 10px;
  144. border-radius: 2px;
  145. margin-left: -2px;
  146. background-color: #f8bb86; }
  147. .sweet-alert .icon.warning .dot {
  148. position: absolute;
  149. width: 7px;
  150. height: 7px;
  151. border-radius: 50%;
  152. margin-left: -3px;
  153. left: 50%;
  154. bottom: 10px;
  155. background-color: #f8bb86; }
  156. .sweet-alert .icon.info {
  157. border-color: #c9dae1; }
  158. .sweet-alert .icon.info::before {
  159. content: '';
  160. position: absolute;
  161. width: 5px;
  162. height: 29px;
  163. left: 50%;
  164. bottom: 17px;
  165. border-radius: 2px;
  166. margin-left: -2px;
  167. background-color: #c9dae1; }
  168. .sweet-alert .icon.info::after {
  169. content: '';
  170. position: absolute;
  171. width: 7px;
  172. height: 7px;
  173. border-radius: 50%;
  174. margin-left: -3px;
  175. top: 19px;
  176. background-color: #c9dae1; }
  177. .sweet-alert .icon.success {
  178. border-color: #a5dc86; }
  179. .sweet-alert .icon.success::before, .sweet-alert .icon.success::after {
  180. content: '';
  181. border-radius: 50%;
  182. position: absolute;
  183. width: 60px;
  184. height: 120px;
  185. background: #fff;
  186. -webkit-transform: rotate(45deg);
  187. -ms-transform: rotate(45deg);
  188. transform: rotate(45deg); }
  189. .sweet-alert .icon.success::before {
  190. border-radius: 120px 0 0 120px;
  191. top: -7px;
  192. left: -33px;
  193. -webkit-transform: rotate(-45deg);
  194. -ms-transform: rotate(-45deg);
  195. transform: rotate(-45deg);
  196. -webkit-transform-origin: 60px 60px;
  197. -ms-transform-origin: 60px 60px;
  198. transform-origin: 60px 60px; }
  199. .sweet-alert .icon.success::after {
  200. border-radius: 0 120px 120px 0;
  201. top: -11px;
  202. left: 30px;
  203. -webkit-transform: rotate(-45deg);
  204. -ms-transform: rotate(-45deg);
  205. transform: rotate(-45deg);
  206. -webkit-transform-origin: 0 60px;
  207. -ms-transform-origin: 0 60px;
  208. transform-origin: 0 60px; }
  209. .sweet-alert .icon.success .placeholder {
  210. width: 80px;
  211. height: 80px;
  212. border: 4px solid rgba(165, 220, 134, 0.2);
  213. border-radius: 50%;
  214. box-sizing: content-box;
  215. position: absolute;
  216. left: -4px;
  217. top: -4px;
  218. z-index: 2; }
  219. .sweet-alert .icon.success .fix {
  220. width: 5px;
  221. height: 90px;
  222. background-color: #fff;
  223. position: absolute;
  224. left: 28px;
  225. top: 8px;
  226. z-index: 1;
  227. -webkit-transform: rotate(-45deg);
  228. -ms-transform: rotate(-45deg);
  229. transform: rotate(-45deg); }
  230. .sweet-alert .icon.success .line {
  231. height: 5px;
  232. background-color: #a5dc86;
  233. display: block;
  234. border-radius: 2px;
  235. position: absolute;
  236. z-index: 2; }
  237. .sweet-alert .icon.success .line.tip {
  238. width: 25px;
  239. left: 14px;
  240. top: 46px;
  241. -webkit-transform: rotate(45deg);
  242. -ms-transform: rotate(45deg);
  243. transform: rotate(45deg); }
  244. .sweet-alert .icon.success .line.long {
  245. width: 47px;
  246. right: 8px;
  247. top: 38px;
  248. -webkit-transform: rotate(-45deg);
  249. -ms-transform: rotate(-45deg);
  250. transform: rotate(-45deg); }
  251. .sweet-alert .icon.custom {
  252. background-size: contain;
  253. border-radius: 0;
  254. border: 0;
  255. background-position: center center;
  256. background-repeat: no-repeat; }
  257. @-webkit-keyframes showSweetAlert {
  258. 0% {
  259. -webkit-transform: scale(.7);
  260. transform: scale(.7); }
  261. 45% {
  262. -webkit-transform: scale(1.05);
  263. transform: scale(1.05); }
  264. 80% {
  265. -webkit-transform: scale(.95);
  266. transform: scale(.95); }
  267. 100% {
  268. -webkit-transform: scale(1);
  269. transform: scale(1); } }
  270. @keyframes showSweetAlert {
  271. 0% {
  272. -webkit-transform: scale(.7);
  273. transform: scale(.7); }
  274. 45% {
  275. -webkit-transform: scale(1.05);
  276. transform: scale(1.05); }
  277. 80% {
  278. -webkit-transform: scale(.95);
  279. transform: scale(.95); }
  280. 100% {
  281. -webkit-transform: scale(1);
  282. transform: scale(1); } }
  283. @-webkit-keyframes hideSweetAlert {
  284. 0% {
  285. -webkit-transform: scale(1);
  286. transform: scale(1); }
  287. 100% {
  288. -webkit-transform: scale(.5);
  289. transform: scale(.5); } }
  290. @keyframes hideSweetAlert {
  291. 0% {
  292. -webkit-transform: scale(1);
  293. transform: scale(1); }
  294. 100% {
  295. -webkit-transform: scale(.5);
  296. transform: scale(.5); } }
  297. .show-sweet-alert {
  298. -webkit-animation: showSweetAlert 0.3s;
  299. animation: showSweetAlert 0.3s; }
  300. .show-sweet-alert.no-animation {
  301. -webkit-animation: none;
  302. animation: none; }
  303. .hide-sweet-alert {
  304. -webkit-animation: hideSweetAlert 0.2s;
  305. animation: hideSweetAlert 0.2s; }
  306. .hide-sweet-alert.no-animation {
  307. -webkit-animation: none;
  308. animation: none; }
  309. @-webkit-keyframes animate-success-tip {
  310. 0% {
  311. width: 0;
  312. left: 1px;
  313. top: 19px; }
  314. 54% {
  315. width: 0;
  316. left: 1px;
  317. top: 19px; }
  318. 70% {
  319. width: 50px;
  320. left: -8px;
  321. top: 37px; }
  322. 84% {
  323. width: 17px;
  324. left: 21px;
  325. top: 48px; }
  326. 100% {
  327. width: 25px;
  328. left: 14px;
  329. top: 45px; } }
  330. @keyframes animate-success-tip {
  331. 0% {
  332. width: 0;
  333. left: 1px;
  334. top: 19px; }
  335. 54% {
  336. width: 0;
  337. left: 1px;
  338. top: 19px; }
  339. 70% {
  340. width: 50px;
  341. left: -8px;
  342. top: 37px; }
  343. 84% {
  344. width: 17px;
  345. left: 21px;
  346. top: 48px; }
  347. 100% {
  348. width: 25px;
  349. left: 14px;
  350. top: 45px; } }
  351. @-webkit-keyframes animate-success-long {
  352. 0% {
  353. width: 0;
  354. right: 46px;
  355. top: 54px; }
  356. 65% {
  357. width: 0;
  358. right: 46px;
  359. top: 54px; }
  360. 84% {
  361. width: 55px;
  362. right: 0;
  363. top: 35px; }
  364. 100% {
  365. width: 47px;
  366. right: 8px;
  367. top: 38px; } }
  368. @keyframes animate-success-long {
  369. 0% {
  370. width: 0;
  371. right: 46px;
  372. top: 54px; }
  373. 65% {
  374. width: 0;
  375. right: 46px;
  376. top: 54px; }
  377. 84% {
  378. width: 55px;
  379. right: 0;
  380. top: 35px; }
  381. 100% {
  382. width: 47px;
  383. right: 8px;
  384. top: 38px; } }
  385. @-webkit-keyframes rotatePlaceholder {
  386. 0% {
  387. -webkit-transform: rotate(-45deg);
  388. transform: rotate(-45deg); }
  389. 5% {
  390. -webkit-transform: rotate(-45deg);
  391. transform: rotate(-45deg); }
  392. 12% {
  393. -webkit-transform: rotate(-405deg);
  394. transform: rotate(-405deg); }
  395. 100% {
  396. -webkit-transform: rotate(-405deg);
  397. transform: rotate(-405deg); } }
  398. @keyframes rotatePlaceholder {
  399. 0% {
  400. -webkit-transform: rotate(-45deg);
  401. transform: rotate(-45deg); }
  402. 5% {
  403. -webkit-transform: rotate(-45deg);
  404. transform: rotate(-45deg); }
  405. 12% {
  406. -webkit-transform: rotate(-405deg);
  407. transform: rotate(-405deg); }
  408. 100% {
  409. -webkit-transform: rotate(-405deg);
  410. transform: rotate(-405deg); } }
  411. .animate-success-tip {
  412. -webkit-animation: animate-success-tip 0.75s;
  413. animation: animate-success-tip 0.75s; }
  414. .animate-success-long {
  415. -webkit-animation: animate-success-long 0.75s;
  416. animation: animate-success-long 0.75s; }
  417. .icon.success.animate::after {
  418. -webkit-animation: rotatePlaceholder 4.25s ease-in;
  419. animation: rotatePlaceholder 4.25s ease-in; }
  420. @-webkit-keyframes animate-error-icon {
  421. 0% {
  422. -webkit-transform: rotateX(100deg);
  423. transform: rotateX(100deg);
  424. opacity: 0; }
  425. 100% {
  426. -webkit-transform: rotateX(0deg);
  427. transform: rotateX(0deg);
  428. opacity: 1; } }
  429. @keyframes animate-error-icon {
  430. 0% {
  431. -webkit-transform: rotateX(100deg);
  432. transform: rotateX(100deg);
  433. opacity: 0; }
  434. 100% {
  435. -webkit-transform: rotateX(0deg);
  436. transform: rotateX(0deg);
  437. opacity: 1; } }
  438. .animate-error-icon {
  439. -webkit-animation: animate-error-icon 0.5s;
  440. animation: animate-error-icon 0.5s; }
  441. @-webkit-keyframes animate-x-mark {
  442. 0% {
  443. -webkit-transform: scale(.4);
  444. transform: scale(.4);
  445. margin-top: 26px;
  446. opacity: 0; }
  447. 50% {
  448. -webkit-transform: scale(.4);
  449. transform: scale(.4);
  450. margin-top: 26px;
  451. opacity: 0; }
  452. 80% {
  453. -webkit-transform: scale(1.15);
  454. transform: scale(1.15);
  455. margin-top: -6px; }
  456. 100% {
  457. -webkit-transform: scale(1);
  458. transform: scale(1);
  459. margin-top: 0;
  460. opacity: 1; } }
  461. @keyframes animate-x-mark {
  462. 0% {
  463. -webkit-transform: scale(.4);
  464. transform: scale(.4);
  465. margin-top: 26px;
  466. opacity: 0; }
  467. 50% {
  468. -webkit-transform: scale(.4);
  469. transform: scale(.4);
  470. margin-top: 26px;
  471. opacity: 0; }
  472. 80% {
  473. -webkit-transform: scale(1.15);
  474. transform: scale(1.15);
  475. margin-top: -6px; }
  476. 100% {
  477. -webkit-transform: scale(1);
  478. transform: scale(1);
  479. margin-top: 0;
  480. opacity: 1; } }
  481. .animate-x-mark {
  482. -webkit-animation: animate-x-mark 0.5s;
  483. animation: animate-x-mark 0.5s; }
  484. @-webkit-keyframes pulse-warning {
  485. 0% {
  486. border-color: #f8d486; }
  487. 100% {
  488. border-color: #f8bb86; } }
  489. @keyframes pulse-warning {
  490. 0% {
  491. border-color: #f8d486; }
  492. 100% {
  493. border-color: #f8bb86; } }
  494. .pulse-warning {
  495. -webkit-animation: pulse-warning 0.75s infinite alternate;
  496. animation: pulse-warning 0.75s infinite alternate; }
  497. @-webkit-keyframes pulse-warning-ins {
  498. 0% {
  499. background-color: #f8d486; }
  500. 100% {
  501. background-color: #f8bb86; } }
  502. @keyframes pulse-warning-ins {
  503. 0% {
  504. background-color: #f8d486; }
  505. 100% {
  506. background-color: #f8bb86; } }
  507. .pulse-warning-ins {
  508. -webkit-animation: pulse-warning-ins 0.75s infinite alternate;
  509. animation: pulse-warning-ins 0.75s infinite alternate; }
  510. @-webkit-keyframes rotate-loading {
  511. 0% {
  512. -webkit-transform: rotate(0deg);
  513. transform: rotate(0deg); }
  514. 100% {
  515. -webkit-transform: rotate(360deg);
  516. transform: rotate(360deg); } }
  517. @keyframes rotate-loading {
  518. 0% {
  519. -webkit-transform: rotate(0deg);
  520. transform: rotate(0deg); }
  521. 100% {
  522. -webkit-transform: rotate(360deg);
  523. transform: rotate(360deg); } }