toast.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. .ui-toast {
  2. position: fixed;
  3. width: 20em;
  4. }
  5. .ui-toast .ui-toast-message {
  6. position: relative;
  7. display: block;
  8. margin-bottom: .75em;
  9. overflow: hidden;
  10. }
  11. .ui-toast .ui-toast-message-content {
  12. padding: .5em 1em;
  13. }
  14. .ui-toast .ui-toast-close-icon {
  15. position: absolute;
  16. top: .25em;
  17. right: .25em;
  18. cursor: pointer;
  19. display: inline-block;
  20. }
  21. .ui-toast .ui-toast-summary {
  22. font-weight: bold;
  23. padding: 0 0 .5em 0;
  24. display: block;
  25. }
  26. .ui-toast .ui-toast-icon {
  27. position: absolute;
  28. display: inline-block;
  29. left: .5em;
  30. top: .25em;
  31. padding: 0;
  32. font-size: 2em;
  33. }
  34. .ui-toast .ui-toast-message-text-content {
  35. padding: 0 0 .25em 0;
  36. margin-left: 2.5em;
  37. }
  38. /* Positions */
  39. .ui-toast-top-right {
  40. top: 20px;
  41. right: 20px;
  42. }
  43. .ui-toast-top-left {
  44. top: 20px;
  45. left: 20px;
  46. }
  47. .ui-toast-bottom-right {
  48. bottom: 20px;
  49. right: 20px;
  50. }
  51. .ui-toast-bottom-left {
  52. bottom: 20px;
  53. left: 20px;
  54. }
  55. .ui-toast-top-center {
  56. top: 20px;
  57. left: 50%;
  58. margin-left: -10em;
  59. }
  60. .ui-toast-bottom-center {
  61. bottom: 20px;
  62. left: 50%;
  63. margin-left: -10em;
  64. }
  65. .ui-toast-center {
  66. left: 50%;
  67. top: 50%;
  68. min-width: 20vw;
  69. transform: translate(-50%, -50%);
  70. }