index.less 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @message-prefix-cls: ~'@{ant-prefix}-message';
  4. .@{message-prefix-cls} {
  5. .reset-component();
  6. position: fixed;
  7. top: 8px;
  8. left: 0;
  9. z-index: @zindex-message;
  10. width: 100%;
  11. pointer-events: none;
  12. &-notice {
  13. padding: 8px;
  14. text-align: center;
  15. }
  16. &-notice-content {
  17. display: inline-block;
  18. padding: @message-notice-content-padding;
  19. background: @message-notice-content-bg;
  20. border-radius: @border-radius-base;
  21. box-shadow: @shadow-2;
  22. pointer-events: all;
  23. }
  24. &-success .@{iconfont-css-prefix} {
  25. color: @success-color;
  26. }
  27. &-error .@{iconfont-css-prefix} {
  28. color: @error-color;
  29. }
  30. &-warning .@{iconfont-css-prefix} {
  31. color: @warning-color;
  32. }
  33. &-info .@{iconfont-css-prefix},
  34. &-loading .@{iconfont-css-prefix} {
  35. color: @info-color;
  36. }
  37. .@{iconfont-css-prefix} {
  38. position: relative;
  39. top: 1px;
  40. margin-right: 8px;
  41. font-size: @font-size-lg;
  42. }
  43. &-notice.@{ant-prefix}-move-up-leave.@{ant-prefix}-move-up-leave-active {
  44. animation-name: MessageMoveOut;
  45. animation-duration: 0.3s;
  46. }
  47. }
  48. @keyframes MessageMoveOut {
  49. 0% {
  50. max-height: 150px;
  51. padding: 8px;
  52. opacity: 1;
  53. }
  54. 100% {
  55. max-height: 0;
  56. padding: 0;
  57. opacity: 0;
  58. }
  59. }
  60. @import './rtl';