ReactToastify.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621
  1. :root {
  2. --toastify-color-light: #fff;
  3. --toastify-color-dark: #121212;
  4. --toastify-color-info: #3498db;
  5. --toastify-color-success: #07bc0c;
  6. --toastify-color-warning: #f1c40f;
  7. --toastify-color-error: #e74c3c;
  8. --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  9. --toastify-icon-color-info: var(--toastify-color-info);
  10. --toastify-icon-color-success: var(--toastify-color-success);
  11. --toastify-icon-color-warning: var(--toastify-color-warning);
  12. --toastify-icon-color-error: var(--toastify-color-error);
  13. --toastify-toast-width: 320px;
  14. --toastify-toast-background: #fff;
  15. --toastify-toast-min-height: 64px;
  16. --toastify-toast-max-height: 800px;
  17. --toastify-font-family: sans-serif;
  18. --toastify-z-index: 9999;
  19. --toastify-text-color-light: #757575;
  20. --toastify-text-color-dark: #fff;
  21. --toastify-text-color-info: #fff;
  22. --toastify-text-color-success: #fff;
  23. --toastify-text-color-warning: #fff;
  24. --toastify-text-color-error: #fff;
  25. --toastify-spinner-color: #616161;
  26. --toastify-spinner-color-empty-area: #e0e0e0;
  27. --toastify-color-progress-light: linear-gradient(
  28. to right,
  29. #4cd964,
  30. #5ac8fa,
  31. #007aff,
  32. #34aadc,
  33. #5856d6,
  34. #ff2d55
  35. );
  36. --toastify-color-progress-dark: #bb86fc;
  37. --toastify-color-progress-info: var(--toastify-color-info);
  38. --toastify-color-progress-success: var(--toastify-color-success);
  39. --toastify-color-progress-warning: var(--toastify-color-warning);
  40. --toastify-color-progress-error: var(--toastify-color-error);
  41. }
  42. .Toastify__toast-container {
  43. z-index: var(--toastify-z-index);
  44. -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  45. position: fixed;
  46. padding: 4px;
  47. width: var(--toastify-toast-width);
  48. box-sizing: border-box;
  49. color: #fff;
  50. }
  51. .Toastify__toast-container--top-left {
  52. top: 1em;
  53. left: 1em;
  54. }
  55. .Toastify__toast-container--top-center {
  56. top: 1em;
  57. left: 50%;
  58. transform: translateX(-50%);
  59. }
  60. .Toastify__toast-container--top-right {
  61. top: 1em;
  62. right: 1em;
  63. }
  64. .Toastify__toast-container--bottom-left {
  65. bottom: 1em;
  66. left: 1em;
  67. }
  68. .Toastify__toast-container--bottom-center {
  69. bottom: 1em;
  70. left: 50%;
  71. transform: translateX(-50%);
  72. }
  73. .Toastify__toast-container--bottom-right {
  74. bottom: 1em;
  75. right: 1em;
  76. }
  77. @media only screen and (max-width : 480px) {
  78. .Toastify__toast-container {
  79. width: 100vw;
  80. padding: 0;
  81. left: 0;
  82. margin: 0;
  83. }
  84. .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
  85. top: 0;
  86. transform: translateX(0);
  87. }
  88. .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
  89. bottom: 0;
  90. transform: translateX(0);
  91. }
  92. .Toastify__toast-container--rtl {
  93. right: 0;
  94. left: initial;
  95. }
  96. }
  97. .Toastify__toast {
  98. position: relative;
  99. min-height: var(--toastify-toast-min-height);
  100. box-sizing: border-box;
  101. margin-bottom: 1rem;
  102. padding: 8px;
  103. border-radius: 4px;
  104. box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  105. display: -ms-flexbox;
  106. display: flex;
  107. -ms-flex-pack: justify;
  108. justify-content: space-between;
  109. max-height: var(--toastify-toast-max-height);
  110. overflow: hidden;
  111. font-family: var(--toastify-font-family);
  112. cursor: default;
  113. direction: ltr;
  114. /* webkit only issue #791 */
  115. z-index: 0;
  116. }
  117. .Toastify__toast--rtl {
  118. direction: rtl;
  119. }
  120. .Toastify__toast--close-on-click {
  121. cursor: pointer;
  122. }
  123. .Toastify__toast-body {
  124. margin: auto 0;
  125. -ms-flex: 1 1 auto;
  126. flex: 1 1 auto;
  127. padding: 6px;
  128. display: -ms-flexbox;
  129. display: flex;
  130. -ms-flex-align: center;
  131. align-items: center;
  132. }
  133. .Toastify__toast-body > div:last-child {
  134. word-break: break-word;
  135. -ms-flex: 1;
  136. flex: 1;
  137. }
  138. .Toastify__toast-icon {
  139. -webkit-margin-end: 10px;
  140. margin-inline-end: 10px;
  141. width: 20px;
  142. -ms-flex-negative: 0;
  143. flex-shrink: 0;
  144. display: -ms-flexbox;
  145. display: flex;
  146. }
  147. .Toastify--animate {
  148. animation-fill-mode: both;
  149. animation-duration: 0.7s;
  150. }
  151. .Toastify--animate-icon {
  152. animation-fill-mode: both;
  153. animation-duration: 0.3s;
  154. }
  155. @media only screen and (max-width : 480px) {
  156. .Toastify__toast {
  157. margin-bottom: 0;
  158. border-radius: 0;
  159. }
  160. }
  161. .Toastify__toast-theme--dark {
  162. background: var(--toastify-color-dark);
  163. color: var(--toastify-text-color-dark);
  164. }
  165. .Toastify__toast-theme--light {
  166. background: var(--toastify-color-light);
  167. color: var(--toastify-text-color-light);
  168. }
  169. .Toastify__toast-theme--colored.Toastify__toast--default {
  170. background: var(--toastify-color-light);
  171. color: var(--toastify-text-color-light);
  172. }
  173. .Toastify__toast-theme--colored.Toastify__toast--info {
  174. color: var(--toastify-text-color-info);
  175. background: var(--toastify-color-info);
  176. }
  177. .Toastify__toast-theme--colored.Toastify__toast--success {
  178. color: var(--toastify-text-color-success);
  179. background: var(--toastify-color-success);
  180. }
  181. .Toastify__toast-theme--colored.Toastify__toast--warning {
  182. color: var(--toastify-text-color-warning);
  183. background: var(--toastify-color-warning);
  184. }
  185. .Toastify__toast-theme--colored.Toastify__toast--error {
  186. color: var(--toastify-text-color-error);
  187. background: var(--toastify-color-error);
  188. }
  189. .Toastify__progress-bar-theme--light {
  190. background: var(--toastify-color-progress-light);
  191. }
  192. .Toastify__progress-bar-theme--dark {
  193. background: var(--toastify-color-progress-dark);
  194. }
  195. .Toastify__progress-bar--info {
  196. background: var(--toastify-color-progress-info);
  197. }
  198. .Toastify__progress-bar--success {
  199. background: var(--toastify-color-progress-success);
  200. }
  201. .Toastify__progress-bar--warning {
  202. background: var(--toastify-color-progress-warning);
  203. }
  204. .Toastify__progress-bar--error {
  205. background: var(--toastify-color-progress-error);
  206. }
  207. .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  208. background: var(--toastify-color-transparent);
  209. }
  210. .Toastify__close-button {
  211. color: #fff;
  212. background: transparent;
  213. outline: none;
  214. border: none;
  215. padding: 0;
  216. cursor: pointer;
  217. opacity: 0.7;
  218. transition: 0.3s ease;
  219. -ms-flex-item-align: start;
  220. align-self: flex-start;
  221. }
  222. .Toastify__close-button--light {
  223. color: #000;
  224. opacity: 0.3;
  225. }
  226. .Toastify__close-button > svg {
  227. fill: currentColor;
  228. height: 16px;
  229. width: 14px;
  230. }
  231. .Toastify__close-button:hover, .Toastify__close-button:focus {
  232. opacity: 1;
  233. }
  234. @keyframes Toastify__trackProgress {
  235. 0% {
  236. transform: scaleX(1);
  237. }
  238. 100% {
  239. transform: scaleX(0);
  240. }
  241. }
  242. .Toastify__progress-bar {
  243. position: absolute;
  244. bottom: 0;
  245. left: 0;
  246. width: 100%;
  247. height: 5px;
  248. z-index: var(--toastify-z-index);
  249. opacity: 0.7;
  250. transform-origin: left;
  251. }
  252. .Toastify__progress-bar--animated {
  253. animation: Toastify__trackProgress linear 1 forwards;
  254. }
  255. .Toastify__progress-bar--controlled {
  256. transition: transform 0.2s;
  257. }
  258. .Toastify__progress-bar--rtl {
  259. right: 0;
  260. left: initial;
  261. transform-origin: right;
  262. }
  263. .Toastify__spinner {
  264. width: 20px;
  265. height: 20px;
  266. box-sizing: border-box;
  267. border: 2px solid;
  268. border-radius: 100%;
  269. border-color: var(--toastify-spinner-color-empty-area);
  270. border-right-color: var(--toastify-spinner-color);
  271. animation: Toastify__spin 0.65s linear infinite;
  272. }
  273. @keyframes Toastify__bounceInRight {
  274. from, 60%, 75%, 90%, to {
  275. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  276. }
  277. from {
  278. opacity: 0;
  279. transform: translate3d(3000px, 0, 0);
  280. }
  281. 60% {
  282. opacity: 1;
  283. transform: translate3d(-25px, 0, 0);
  284. }
  285. 75% {
  286. transform: translate3d(10px, 0, 0);
  287. }
  288. 90% {
  289. transform: translate3d(-5px, 0, 0);
  290. }
  291. to {
  292. transform: none;
  293. }
  294. }
  295. @keyframes Toastify__bounceOutRight {
  296. 20% {
  297. opacity: 1;
  298. transform: translate3d(-20px, 0, 0);
  299. }
  300. to {
  301. opacity: 0;
  302. transform: translate3d(2000px, 0, 0);
  303. }
  304. }
  305. @keyframes Toastify__bounceInLeft {
  306. from, 60%, 75%, 90%, to {
  307. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  308. }
  309. 0% {
  310. opacity: 0;
  311. transform: translate3d(-3000px, 0, 0);
  312. }
  313. 60% {
  314. opacity: 1;
  315. transform: translate3d(25px, 0, 0);
  316. }
  317. 75% {
  318. transform: translate3d(-10px, 0, 0);
  319. }
  320. 90% {
  321. transform: translate3d(5px, 0, 0);
  322. }
  323. to {
  324. transform: none;
  325. }
  326. }
  327. @keyframes Toastify__bounceOutLeft {
  328. 20% {
  329. opacity: 1;
  330. transform: translate3d(20px, 0, 0);
  331. }
  332. to {
  333. opacity: 0;
  334. transform: translate3d(-2000px, 0, 0);
  335. }
  336. }
  337. @keyframes Toastify__bounceInUp {
  338. from, 60%, 75%, 90%, to {
  339. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  340. }
  341. from {
  342. opacity: 0;
  343. transform: translate3d(0, 3000px, 0);
  344. }
  345. 60% {
  346. opacity: 1;
  347. transform: translate3d(0, -20px, 0);
  348. }
  349. 75% {
  350. transform: translate3d(0, 10px, 0);
  351. }
  352. 90% {
  353. transform: translate3d(0, -5px, 0);
  354. }
  355. to {
  356. transform: translate3d(0, 0, 0);
  357. }
  358. }
  359. @keyframes Toastify__bounceOutUp {
  360. 20% {
  361. transform: translate3d(0, -10px, 0);
  362. }
  363. 40%, 45% {
  364. opacity: 1;
  365. transform: translate3d(0, 20px, 0);
  366. }
  367. to {
  368. opacity: 0;
  369. transform: translate3d(0, -2000px, 0);
  370. }
  371. }
  372. @keyframes Toastify__bounceInDown {
  373. from, 60%, 75%, 90%, to {
  374. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  375. }
  376. 0% {
  377. opacity: 0;
  378. transform: translate3d(0, -3000px, 0);
  379. }
  380. 60% {
  381. opacity: 1;
  382. transform: translate3d(0, 25px, 0);
  383. }
  384. 75% {
  385. transform: translate3d(0, -10px, 0);
  386. }
  387. 90% {
  388. transform: translate3d(0, 5px, 0);
  389. }
  390. to {
  391. transform: none;
  392. }
  393. }
  394. @keyframes Toastify__bounceOutDown {
  395. 20% {
  396. transform: translate3d(0, 10px, 0);
  397. }
  398. 40%, 45% {
  399. opacity: 1;
  400. transform: translate3d(0, -20px, 0);
  401. }
  402. to {
  403. opacity: 0;
  404. transform: translate3d(0, 2000px, 0);
  405. }
  406. }
  407. .Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  408. animation-name: Toastify__bounceInLeft;
  409. }
  410. .Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  411. animation-name: Toastify__bounceInRight;
  412. }
  413. .Toastify__bounce-enter--top-center {
  414. animation-name: Toastify__bounceInDown;
  415. }
  416. .Toastify__bounce-enter--bottom-center {
  417. animation-name: Toastify__bounceInUp;
  418. }
  419. .Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  420. animation-name: Toastify__bounceOutLeft;
  421. }
  422. .Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  423. animation-name: Toastify__bounceOutRight;
  424. }
  425. .Toastify__bounce-exit--top-center {
  426. animation-name: Toastify__bounceOutUp;
  427. }
  428. .Toastify__bounce-exit--bottom-center {
  429. animation-name: Toastify__bounceOutDown;
  430. }
  431. @keyframes Toastify__zoomIn {
  432. from {
  433. opacity: 0;
  434. transform: scale3d(0.3, 0.3, 0.3);
  435. }
  436. 50% {
  437. opacity: 1;
  438. }
  439. }
  440. @keyframes Toastify__zoomOut {
  441. from {
  442. opacity: 1;
  443. }
  444. 50% {
  445. opacity: 0;
  446. transform: scale3d(0.3, 0.3, 0.3);
  447. }
  448. to {
  449. opacity: 0;
  450. }
  451. }
  452. .Toastify__zoom-enter {
  453. animation-name: Toastify__zoomIn;
  454. }
  455. .Toastify__zoom-exit {
  456. animation-name: Toastify__zoomOut;
  457. }
  458. @keyframes Toastify__flipIn {
  459. from {
  460. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  461. animation-timing-function: ease-in;
  462. opacity: 0;
  463. }
  464. 40% {
  465. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  466. animation-timing-function: ease-in;
  467. }
  468. 60% {
  469. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  470. opacity: 1;
  471. }
  472. 80% {
  473. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  474. }
  475. to {
  476. transform: perspective(400px);
  477. }
  478. }
  479. @keyframes Toastify__flipOut {
  480. from {
  481. transform: perspective(400px);
  482. }
  483. 30% {
  484. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  485. opacity: 1;
  486. }
  487. to {
  488. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  489. opacity: 0;
  490. }
  491. }
  492. .Toastify__flip-enter {
  493. animation-name: Toastify__flipIn;
  494. }
  495. .Toastify__flip-exit {
  496. animation-name: Toastify__flipOut;
  497. }
  498. @keyframes Toastify__slideInRight {
  499. from {
  500. transform: translate3d(110%, 0, 0);
  501. visibility: visible;
  502. }
  503. to {
  504. transform: translate3d(0, 0, 0);
  505. }
  506. }
  507. @keyframes Toastify__slideInLeft {
  508. from {
  509. transform: translate3d(-110%, 0, 0);
  510. visibility: visible;
  511. }
  512. to {
  513. transform: translate3d(0, 0, 0);
  514. }
  515. }
  516. @keyframes Toastify__slideInUp {
  517. from {
  518. transform: translate3d(0, 110%, 0);
  519. visibility: visible;
  520. }
  521. to {
  522. transform: translate3d(0, 0, 0);
  523. }
  524. }
  525. @keyframes Toastify__slideInDown {
  526. from {
  527. transform: translate3d(0, -110%, 0);
  528. visibility: visible;
  529. }
  530. to {
  531. transform: translate3d(0, 0, 0);
  532. }
  533. }
  534. @keyframes Toastify__slideOutRight {
  535. from {
  536. transform: translate3d(0, 0, 0);
  537. }
  538. to {
  539. visibility: hidden;
  540. transform: translate3d(110%, 0, 0);
  541. }
  542. }
  543. @keyframes Toastify__slideOutLeft {
  544. from {
  545. transform: translate3d(0, 0, 0);
  546. }
  547. to {
  548. visibility: hidden;
  549. transform: translate3d(-110%, 0, 0);
  550. }
  551. }
  552. @keyframes Toastify__slideOutDown {
  553. from {
  554. transform: translate3d(0, 0, 0);
  555. }
  556. to {
  557. visibility: hidden;
  558. transform: translate3d(0, 500px, 0);
  559. }
  560. }
  561. @keyframes Toastify__slideOutUp {
  562. from {
  563. transform: translate3d(0, 0, 0);
  564. }
  565. to {
  566. visibility: hidden;
  567. transform: translate3d(0, -500px, 0);
  568. }
  569. }
  570. .Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  571. animation-name: Toastify__slideInLeft;
  572. }
  573. .Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  574. animation-name: Toastify__slideInRight;
  575. }
  576. .Toastify__slide-enter--top-center {
  577. animation-name: Toastify__slideInDown;
  578. }
  579. .Toastify__slide-enter--bottom-center {
  580. animation-name: Toastify__slideInUp;
  581. }
  582. .Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  583. animation-name: Toastify__slideOutLeft;
  584. }
  585. .Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  586. animation-name: Toastify__slideOutRight;
  587. }
  588. .Toastify__slide-exit--top-center {
  589. animation-name: Toastify__slideOutUp;
  590. }
  591. .Toastify__slide-exit--bottom-center {
  592. animation-name: Toastify__slideOutDown;
  593. }
  594. @keyframes Toastify__spin {
  595. from {
  596. transform: rotate(0deg);
  597. }
  598. to {
  599. transform: rotate(360deg);
  600. }
  601. }
  602. /*# sourceMappingURL=ReactToastify.css.map */