toast.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. /*toast*/
  2. .api-toast{
  3. width: 100%;
  4. height: 100%;
  5. position: fixed;
  6. top: 0;
  7. left: 0;
  8. background: rgba(255,255,255,1);
  9. }
  10. .aui-toast {
  11. background: rgba(0, 0, 0, 0.7);
  12. text-align: center;
  13. border-radius: 0.25rem;
  14. color: #ffffff;
  15. position: fixed;
  16. z-index: 3;
  17. top: 45%;
  18. left: 50%;
  19. width: 7.5em;
  20. padding: 0.5rem;
  21. margin-left: -3.75em;
  22. margin-top: -4rem;
  23. display: none;
  24. }
  25. .aui-toast .aui-iconfont {
  26. display: block;
  27. font-size: 2.6rem;
  28. }
  29. .aui-toast-content {
  30. font-size: 14px;
  31. /*margin: 0 0 0.75rem;*/
  32. }
  33. .aui-toast-loading {
  34. background-color: #ffffff;
  35. border-radius: 100%;
  36. margin: 0.75rem 0;
  37. -webkit-animation-fill-mode: both;
  38. animation-fill-mode: both;
  39. border: 2px solid #ffffff;
  40. border-bottom-color: transparent;
  41. height: 3.25rem;
  42. width: 3.25rem;
  43. background: transparent !important;
  44. display: inline-block;
  45. -webkit-animation: rotate 1s 0s linear infinite;
  46. animation: rotate 1s 0s linear infinite;
  47. }
  48. /*基础动画类*/
  49. @keyframes rotate {
  50. 0% {
  51. -webkit-transform: rotate(0deg) scale(1);
  52. transform: rotate(0deg) scale(1);
  53. }
  54. 50% {
  55. -webkit-transform: rotate(180deg) scale(1);
  56. transform: rotate(180deg) scale(1);
  57. }
  58. 100% {
  59. -webkit-transform: rotate(360deg) scale(1);
  60. transform: rotate(360deg) scale(1);
  61. }
  62. }
  63. @-webkit-keyframes rotate {
  64. 0% {
  65. -webkit-transform: rotate(0deg) scale(1);
  66. transform: rotate(0deg) scale(1);
  67. }
  68. 50% {
  69. -webkit-transform: rotate(180deg) scale(1);
  70. transform: rotate(180deg) scale(1);
  71. }
  72. 100% {
  73. -webkit-transform: rotate(360deg) scale(1);
  74. transform: rotate(360deg) scale(1);
  75. }
  76. }
  77. @keyframes bounce {
  78. 0%, 100% {
  79. -webkit-transform: scale(0.0);
  80. transform: scale(0.0);
  81. }
  82. 50% {
  83. -webkit-transform: scale(1.0);
  84. transform: scale(1.0);
  85. }
  86. }
  87. @-webkit-keyframes bounce {
  88. 0%, 100% {
  89. -webkit-transform: scale(0.0);
  90. transform: scale(0.0);
  91. }
  92. 50% {
  93. -webkit-transform: scale(1.0);
  94. transform: scale(1.0);
  95. }
  96. }
  97. @keyframes fadeIn {
  98. from { opacity: 0.3; }
  99. to { opacity: 1; }
  100. }
  101. @-webkit-keyframes fadeIn {
  102. from { opacity: 0.3; }
  103. to { opacity: 1; }
  104. }
  105. @font-face {
  106. font-family: "aui_iconfont";
  107. src: url('aui-iconfont.ttf') format('truetype');
  108. }
  109. .aui-iconfont {
  110. position: relative;
  111. font-family:"aui_iconfont" !important;
  112. font-size: 0.7rem;
  113. font-style:normal;
  114. -webkit-font-smoothing: antialiased;
  115. -moz-osx-font-smoothing: grayscale;
  116. }
  117. .aui-icon-menu:before { content: "\e6eb"; }
  118. .aui-icon-paper:before { content: "\e6ec"; }
  119. .aui-icon-info:before { content: "\e6ed"; }
  120. .aui-icon-question:before { content: "\e6ee"; }
  121. .aui-icon-left:before { content: "\e6f4"; }
  122. .aui-icon-right:before { content: "\e6f5"; }
  123. .aui-icon-top:before { content: "\e6f6"; }
  124. .aui-icon-down:before { content: "\e6f7"; }
  125. .aui-icon-share:before { content: "\e700"; }
  126. .aui-icon-comment:before { content: "\e701"; }
  127. .aui-icon-edit:before { content: "\e6d3"; }
  128. .aui-icon-trash:before { content: "\e6d4"; }
  129. .aui-icon-recovery:before { content: "\e6dc"; }
  130. .aui-icon-refresh:before { content: "\e6dd"; }
  131. .aui-icon-close:before { content: "\e6d8"; }
  132. .aui-icon-cart:before { content: "\e6df"; }
  133. .aui-icon-star:before { content: "\e6e0"; }
  134. .aui-icon-plus:before { content: "\e6e3"; }
  135. .aui-icon-minus:before { content: "\e62d"; }
  136. .aui-icon-correct:before { content: "\e6e5"; }
  137. .aui-icon-search:before { content: "\e6e6"; }
  138. .aui-icon-gear:before { content: "\e6e8"; }
  139. .aui-icon-map:before { content: "\e6d2"; }
  140. .aui-icon-location:before { content: "\e6d1"; }
  141. .aui-icon-image:before { content: "\e6ce"; }
  142. .aui-icon-phone:before { content: "\e6c4"; }
  143. .aui-icon-camera:before { content: "\e6cd"; }
  144. .aui-icon-video:before { content: "\e6cc"; }
  145. .aui-icon-qq:before { content: "\e6cb"; }
  146. .aui-icon-wechat:before { content: "\e6c9"; }
  147. .aui-icon-weibo:before { content: "\e6c8"; }
  148. .aui-icon-note:before { content: "\e6c6"; }
  149. .aui-icon-mail:before { content: "\e6c5"; }
  150. .aui-icon-wechat-circle:before { content: "\e6ca"; }
  151. .aui-icon-home:before { content: "\e706"; }
  152. .aui-icon-forward:before { content: "\e6d9"; }
  153. .aui-icon-back:before { content: "\e6da"; }
  154. .aui-icon-laud:before { content: "\e64b"; }
  155. .aui-icon-lock:before { content: "\e6ef"; }
  156. .aui-icon-unlock:before { content: "\e62f"; }
  157. .aui-icon-like:before { content: "\e62b"; }
  158. .aui-icon-my:before { content: "\e610"; }
  159. .aui-icon-more:before { content: "\e625"; }
  160. .aui-icon-mobile:before { content: "\e697"; }
  161. .aui-icon-calendar:before { content: "\e68a"; }
  162. .aui-icon-date:before { content: "\e68c"; }
  163. .aui-icon-display:before { content: "\e612"; }
  164. .aui-icon-hide:before { content: "\e624"; }
  165. .aui-icon-pencil:before { content: "\e615"; }
  166. .aui-icon-flag:before { content: "\e6f1"; }
  167. .aui-icon-cert:before { content: "\e704"; }