toast.style.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. @charset "UTF-8";
  2. @font-face {
  3. font-family: 'toast';
  4. src: url("../fonts/toast.eot?76tjxy");
  5. src: url("../fonts/toast.eot?76tjxy#iefix") format("embedded-opentype"), url("../fonts/toast.ttf?76tjxy") format("truetype"), url("../fonts/toast.woff?76tjxy") format("woff"), url("../fonts/toast.svg?76tjxy#toast") format("svg");
  6. font-weight: normal;
  7. font-style: normal; }
  8. i {
  9. /* use !important to prevent issues with browser extensions that change fonts */
  10. font-family: 'toast' !important;
  11. speak: none;
  12. font-style: normal;
  13. font-weight: normal;
  14. font-variant: normal;
  15. text-transform: none;
  16. line-height: 1;
  17. /* Better Font Rendering =========== */
  18. -webkit-font-smoothing: antialiased;
  19. -moz-osx-font-smoothing: grayscale; }
  20. .toast-icon-error:before {
  21. content: ""; }
  22. .toast-icon-info:before {
  23. content: ""; }
  24. .toast-icon-notice:before {
  25. content: ""; }
  26. .toast-icon-success:before {
  27. content: ""; }
  28. .toast-icon-warning:before {
  29. content: ""; }
  30. .toast-item-wrapper {
  31. min-width: 250px;
  32. padding: 10px;
  33. box-sizing: border-box;
  34. color: #fff;
  35. overflow: hidden;
  36. -webkit-user-select: none;
  37. -moz-user-select: none;
  38. -ms-user-select: none;
  39. user-select: none; }
  40. .toast-item-wrapper i.toast-icon {
  41. position: absolute;
  42. top: 12px;
  43. left: 0;
  44. width: 50px;
  45. text-align: center;
  46. vertical-align: middle;
  47. font-size: 2rem; }
  48. .toast-item-wrapper .toast-close {
  49. font-size: 1.2rem;
  50. position: absolute;
  51. top: 0;
  52. right: 0;
  53. width: 20px;
  54. text-align: center;
  55. cursor: pointer; }
  56. .toast-item-wrapper.success {
  57. background-color: #29ab9f;
  58. border: 1px solid #1a9581; }
  59. .toast-item-wrapper.error {
  60. background-color: #ff7946;
  61. border: 1px solid #f35818; }
  62. .toast-item-wrapper.warning {
  63. background-color: #fff1c0;
  64. border: 1px solid #f0c948;
  65. color: #333; }
  66. .toast-item-wrapper.notice {
  67. background-color: #48a9f8;
  68. border: 1px solid #208ce4; }
  69. .toast-item-wrapper.info {
  70. background-color: #7f97a3;
  71. border: 1px solid #6b8699; }
  72. .toast-item-wrapper.toast-top-left {
  73. left: 20px;
  74. top: 20px; }
  75. .toast-item-wrapper.toast-top-right {
  76. right: 20px;
  77. top: 20px; }
  78. .toast-item-wrapper.toast-top-center {
  79. margin: 0 auto;
  80. top: 20px; }
  81. .toast-item-wrapper.toast-bottom-left {
  82. left: 20px;
  83. bottom: 20px; }
  84. .toast-item-wrapper.toast-bottom-right {
  85. right: 20px;
  86. bottom: 20px; }
  87. .toast-item-wrapper.toast-bottom-center {
  88. margin: 0 auto;
  89. bottom: 20px; }
  90. .toast-item-wrapper.fullscreen {
  91. left: 20px;
  92. right: 20px;
  93. width: calc(100% - 40px); }
  94. .toast-item-wrapper p {
  95. margin: 0; }
  96. .toast-item-wrapper .toast-message {
  97. font-size: 0.87rem; }
  98. .toast-item-wrapper .toast-progress {
  99. width: 0;
  100. height: 3px;
  101. background-color: rgba(0, 0, 0, 0.5);
  102. position: absolute;
  103. bottom: 0;
  104. right: 0; }
  105. .toast-item-wrapper.rtl {
  106. direction: rtl;
  107. text-align: right; }
  108. .toast-item-wrapper.rtl i.toast-icon {
  109. left: auto;
  110. right: 0; }
  111. .toast-item-wrapper.rtl .toast-close {
  112. right: auto;
  113. left: 0; }
  114. .toast-item-wrapper.rtl p {
  115. text-align: right; }
  116. .toast-item-wrapper.rtl .toast-progress {
  117. left: auto;
  118. right: 0; }