index.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
  2. /* stylelint-disable no-duplicate-selectors */
  3. .ant-notification {
  4. box-sizing: border-box;
  5. margin: 0;
  6. padding: 0;
  7. color: rgba(0, 0, 0, 0.85);
  8. font-size: 14px;
  9. font-variant: tabular-nums;
  10. line-height: 1.5715;
  11. list-style: none;
  12. font-feature-settings: 'tnum';
  13. position: fixed;
  14. z-index: 1010;
  15. margin-right: 24px;
  16. }
  17. .ant-notification-close-icon {
  18. font-size: 14px;
  19. cursor: pointer;
  20. }
  21. .ant-notification-hook-holder {
  22. position: relative;
  23. }
  24. .ant-notification-notice {
  25. position: relative;
  26. width: 384px;
  27. max-width: calc(100vw - 24px * 2);
  28. margin-bottom: 16px;
  29. margin-left: auto;
  30. padding: 16px 24px;
  31. overflow: hidden;
  32. line-height: 1.5715;
  33. word-wrap: break-word;
  34. background: #fff;
  35. border-radius: 2px;
  36. box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  37. }
  38. .ant-notification-top .ant-notification-notice,
  39. .ant-notification-bottom .ant-notification-notice {
  40. margin-right: auto;
  41. margin-left: auto;
  42. }
  43. .ant-notification-topLeft .ant-notification-notice,
  44. .ant-notification-bottomLeft .ant-notification-notice {
  45. margin-right: auto;
  46. margin-left: 0;
  47. }
  48. .ant-notification-notice-message {
  49. margin-bottom: 8px;
  50. color: rgba(0, 0, 0, 0.85);
  51. font-size: 16px;
  52. line-height: 24px;
  53. }
  54. .ant-notification-notice-message-single-line-auto-margin {
  55. display: block;
  56. width: calc(384px - 24px * 2 - 24px - 48px - 100%);
  57. max-width: 4px;
  58. background-color: transparent;
  59. pointer-events: none;
  60. }
  61. .ant-notification-notice-message-single-line-auto-margin::before {
  62. display: block;
  63. content: '';
  64. }
  65. .ant-notification-notice-description {
  66. font-size: 14px;
  67. }
  68. .ant-notification-notice-closable .ant-notification-notice-message {
  69. padding-right: 24px;
  70. }
  71. .ant-notification-notice-with-icon .ant-notification-notice-message {
  72. margin-bottom: 4px;
  73. margin-left: 48px;
  74. font-size: 16px;
  75. }
  76. .ant-notification-notice-with-icon .ant-notification-notice-description {
  77. margin-left: 48px;
  78. font-size: 14px;
  79. }
  80. .ant-notification-notice-icon {
  81. position: absolute;
  82. margin-left: 4px;
  83. font-size: 24px;
  84. line-height: 24px;
  85. }
  86. .anticon.ant-notification-notice-icon-success {
  87. color: #52c41a;
  88. }
  89. .anticon.ant-notification-notice-icon-info {
  90. color: #1890ff;
  91. }
  92. .anticon.ant-notification-notice-icon-warning {
  93. color: #faad14;
  94. }
  95. .anticon.ant-notification-notice-icon-error {
  96. color: #ff4d4f;
  97. }
  98. .ant-notification-notice-close {
  99. position: absolute;
  100. top: 16px;
  101. right: 22px;
  102. color: rgba(0, 0, 0, 0.45);
  103. outline: none;
  104. }
  105. .ant-notification-notice-close:hover {
  106. color: rgba(0, 0, 0, 0.67);
  107. }
  108. .ant-notification-notice-btn {
  109. float: right;
  110. margin-top: 16px;
  111. }
  112. .ant-notification .notification-fade-effect {
  113. animation-duration: 0.24s;
  114. animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  115. animation-fill-mode: both;
  116. }
  117. .ant-notification-fade-enter,
  118. .ant-notification-fade-appear {
  119. animation-duration: 0.24s;
  120. animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  121. animation-fill-mode: both;
  122. opacity: 0;
  123. animation-play-state: paused;
  124. }
  125. .ant-notification-fade-leave {
  126. animation-duration: 0.24s;
  127. animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  128. animation-fill-mode: both;
  129. animation-duration: 0.2s;
  130. animation-play-state: paused;
  131. }
  132. .ant-notification-fade-enter.ant-notification-fade-enter-active,
  133. .ant-notification-fade-appear.ant-notification-fade-appear-active {
  134. animation-name: NotificationFadeIn;
  135. animation-play-state: running;
  136. }
  137. .ant-notification-fade-leave.ant-notification-fade-leave-active {
  138. animation-name: NotificationFadeOut;
  139. animation-play-state: running;
  140. }
  141. @keyframes NotificationFadeIn {
  142. 0% {
  143. left: 384px;
  144. opacity: 0;
  145. }
  146. 100% {
  147. left: 0;
  148. opacity: 1;
  149. }
  150. }
  151. @keyframes NotificationFadeOut {
  152. 0% {
  153. max-height: 150px;
  154. margin-bottom: 16px;
  155. opacity: 1;
  156. }
  157. 100% {
  158. max-height: 0;
  159. margin-bottom: 0;
  160. padding-top: 0;
  161. padding-bottom: 0;
  162. opacity: 0;
  163. }
  164. }
  165. .ant-notification-rtl {
  166. direction: rtl;
  167. }
  168. .ant-notification-rtl .ant-notification-notice-closable .ant-notification-notice-message {
  169. padding-right: 0;
  170. padding-left: 24px;
  171. }
  172. .ant-notification-rtl .ant-notification-notice-with-icon .ant-notification-notice-message {
  173. margin-right: 48px;
  174. margin-left: 0;
  175. }
  176. .ant-notification-rtl .ant-notification-notice-with-icon .ant-notification-notice-description {
  177. margin-right: 48px;
  178. margin-left: 0;
  179. }
  180. .ant-notification-rtl .ant-notification-notice-icon {
  181. margin-right: 4px;
  182. margin-left: 0;
  183. }
  184. .ant-notification-rtl .ant-notification-notice-close {
  185. right: auto;
  186. left: 22px;
  187. }
  188. .ant-notification-rtl .ant-notification-notice-btn {
  189. float: left;
  190. }
  191. .ant-notification-top,
  192. .ant-notification-bottom {
  193. margin-right: 0;
  194. margin-left: 0;
  195. }
  196. .ant-notification-top .ant-notification-fade-enter.ant-notification-fade-enter-active,
  197. .ant-notification-top .ant-notification-fade-appear.ant-notification-fade-appear-active {
  198. animation-name: NotificationTopFadeIn;
  199. }
  200. .ant-notification-bottom .ant-notification-fade-enter.ant-notification-fade-enter-active,
  201. .ant-notification-bottom .ant-notification-fade-appear.ant-notification-fade-appear-active {
  202. animation-name: NotificationBottomFadeIn;
  203. }
  204. .ant-notification-topLeft,
  205. .ant-notification-bottomLeft {
  206. margin-right: 0;
  207. margin-left: 24px;
  208. }
  209. .ant-notification-topLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
  210. .ant-notification-bottomLeft .ant-notification-fade-enter.ant-notification-fade-enter-active,
  211. .ant-notification-topLeft .ant-notification-fade-appear.ant-notification-fade-appear-active,
  212. .ant-notification-bottomLeft .ant-notification-fade-appear.ant-notification-fade-appear-active {
  213. animation-name: NotificationLeftFadeIn;
  214. }
  215. @keyframes NotificationTopFadeIn {
  216. 0% {
  217. margin-top: -100%;
  218. opacity: 0;
  219. }
  220. 100% {
  221. margin-top: 0;
  222. opacity: 1;
  223. }
  224. }
  225. @keyframes NotificationBottomFadeIn {
  226. 0% {
  227. margin-bottom: -100%;
  228. opacity: 0;
  229. }
  230. 100% {
  231. margin-bottom: 0;
  232. opacity: 1;
  233. }
  234. }
  235. @keyframes NotificationLeftFadeIn {
  236. 0% {
  237. right: 384px;
  238. opacity: 0;
  239. }
  240. 100% {
  241. right: 0;
  242. opacity: 1;
  243. }
  244. }