index.css 5.3 KB

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