You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

189 lines
3.8 KiB

@import "../../style/themes/default";
@import "../../style/mixins/index";
@notification-prefix-cls: ~"@{ant-prefix}-notification";
@notification-width: 335px;
@notification-padding: 16px;
@notification-margin-bottom: 10px;
.@{notification-prefix-cls} {
position: fixed;
z-index: @zindex-notification;
width: @notification-width;
margin-right: 24px;
&-topLeft,
&-bottomLeft {
margin-left: 24px;
margin-right: 0;
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
animation-name: NotificationLeftFadeIn;
}
}
&-notice {
padding: @notification-padding;
border-radius: @border-radius-base;
box-shadow: @shadow-2;
background: @component-background;
line-height: 1.5;
position: relative;
margin-bottom: @notification-margin-bottom;
overflow: hidden;
&-message {
font-size: @font-size-lg;
color: @heading-color;
margin-bottom: 4px;
line-height: 20px;
display: inline-block;
// https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
&-single-line-auto-margin {
width: ~"calc(@{notification-width} - @{notification-padding} * 2 - 24px - 48px - 100%)";
background-color: transparent;
pointer-events: none;
display: block;
max-width: 4px;
&:before {
content: '';
display: block;
padding-bottom: 100%;
}
}
}
&-description {
font-size: @font-size-base;
}
&-closable &-message {
padding-right: 24px;
}
&-with-icon &-message {
font-size: @font-size-lg;
margin-left: 48px;
margin-bottom: 4px;
}
&-with-icon &-description {
margin-left: 48px;
font-size: @font-size-base;
}
&-icon {
position: absolute;
font-size: 32px;
line-height: 32px;
&-success {
color: @success-color;
}
&-info {
color: @info-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
}
&-close-x:after {
font-size: @font-size-base;
content: "\e633";
font-family: "anticon";
cursor: pointer;
}
&-close {
position: absolute;
right: 16px;
top: 10px;
color: @text-color-secondary;
outline: none;
text-decoration: none;
&:hover {
color: #404040;
}
}
&-btn {
float: right;
margin-top: 16px;
}
}
.notification-fade-effect {
animation-duration: 0.24s;
animation-fill-mode: both;
animation-timing-function: @ease-in-out;
}
&-fade-enter,
&-fade-appear {
opacity: 0;
.notification-fade-effect();
animation-play-state: paused;
}
&-fade-leave {
.notification-fade-effect();
animation-duration: 0.2s;
animation-play-state: paused;
}
&-fade-enter&-fade-enter-active,
&-fade-appear&-fade-appear-active {
animation-name: NotificationFadeIn;
animation-play-state: running;
}
&-fade-leave&-fade-leave-active {
animation-name: NotificationFadeOut;
animation-play-state: running;
}
}
@keyframes NotificationFadeIn {
0% {
opacity: 0;
left: @notification-width;
}
100% {
left: 0;
opacity: 1;
}
}
@keyframes NotificationLeftFadeIn {
0% {
opacity: 0;
right: @notification-width;
}
100% {
right: 0;
opacity: 1;
}
}
@keyframes NotificationFadeOut {
0% {
opacity: 1;
margin-bottom: @notification-margin-bottom;
padding-top: @notification-padding;
padding-bottom: @notification-padding;
max-height: 150px;
}
100% {
opacity: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
max-height: 0;
}
}