@import "../../style/themes/default"; @message-prefix-cls: ~"@{ant-prefix}-message"; .@{message-prefix-cls} { font-size: @font-size-base; position: fixed; z-index: @zindex-message; width: 100%; top: 16px; left: 0; pointer-events: none; &-notice { padding: 8px; text-align: center; &:first-child { margin-top: -8px; } } &-notice-content { padding: 8px 16px; border-radius: @border-radius-base; box-shadow: @shadow-2; background: @component-background; display: inline-block; pointer-events: all; } &-success .@{iconfont-css-prefix} { color: @success-color; } &-error .@{iconfont-css-prefix} { color: @error-color; } &-warning .@{iconfont-css-prefix} { color: @warning-color; } &-info .@{iconfont-css-prefix}, &-loading .@{iconfont-css-prefix} { color: @primary-color; } .@{iconfont-css-prefix} { margin-right: 8px; font-size: @font-size-lg; top: 1px; position: relative; } &-notice.move-up-leave.move-up-leave-active { animation-name: MessageMoveOut; overflow: hidden; } } @keyframes MessageMoveOut { 0% { opacity: 1; max-height: 60px; padding: 8px; } 100% { opacity: 0; max-height: 0; padding: 0; } }