apiToast.css 4.6 KB

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