@import "../../style/themes/default"; @import "../../style/mixins/index"; @alert-prefix-cls: ~"@{ant-prefix}-alert"; @alert-message-color: @heading-color; @alert-text-color: @text-color; @alert-close-color: @text-color-secondary; .@{alert-prefix-cls} { .reset-component; position: relative; padding: 8px 15px 8px 37px; border-radius: @border-radius-base; &&-no-icon { padding: 8px 15px; } &&-closable { padding-right: 30px; } &-icon { top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2; left: 16px; position: absolute; } &-description { font-size: @font-size-base; line-height: 22px; display: none; } &-success { border: @border-width-base @border-style-base @alert-success-border-color; background-color: @alert-success-bg-color; .@{alert-prefix-cls}-icon { color: @alert-success-icon-color; } } &-info { border: @border-width-base @border-style-base @alert-info-border-color; background-color: @alert-info-bg-color; .@{alert-prefix-cls}-icon { color: @alert-info-icon-color; } } &-warning { border: @border-width-base @border-style-base @alert-warning-border-color; background-color: @alert-warning-bg-color; .@{alert-prefix-cls}-icon { color: @alert-warning-icon-color; } } &-error { border: @border-width-base @border-style-base @alert-error-border-color; background-color: @alert-error-bg-color; .@{alert-prefix-cls}-icon { color: @alert-error-icon-color; } } &-close-icon { font-size: @font-size-sm; position: absolute; right: 16px; top: 8px; line-height: 22px; overflow: hidden; cursor: pointer; .@{iconfont-css-prefix}-close { color: @alert-close-color; transition: color .3s; &:hover { color: #404040; } } } &-close-text { position: absolute; right: 16px; } &-with-description { padding: 15px 15px 15px 64px; position: relative; border-radius: @border-radius-base; color: @alert-text-color; line-height: @line-height-base; } &-with-description&-no-icon { padding: 15px; } &-with-description &-icon { position: absolute; top: 16px; left: 24px; font-size: 24px; } &-with-description &-close-icon { position: absolute; top: 16px; right: 16px; cursor: pointer; font-size: @font-size-base; } &-with-description &-message { font-size: @font-size-lg; color: @alert-message-color; display: block; margin-bottom: 4px; } &-with-description &-description { display: block; } &&-close { height: 0 !important; margin: 0; padding-top: 0; padding-bottom: 0; transition: all .3s @ease-in-out-circ; transform-origin: 50% 0; } &-slide-up-leave { animation: antAlertSlideUpOut .3s @ease-in-out-circ; animation-fill-mode: both; } &-banner { border-radius: 0; border: 0; margin-bottom: 0; } } @keyframes antAlertSlideUpIn { 0% { opacity: 0; transform-origin: 0% 0%; transform: scaleY(0); } 100% { opacity: 1; transform-origin: 0% 0%; transform: scaleY(1); } } @keyframes antAlertSlideUpOut { 0% { opacity: 1; transform-origin: 0% 0%; transform: scaleY(1); } 100% { opacity: 0; transform-origin: 0% 0%; transform: scaleY(0); } }