ant-design/style/components/notification.less

148 lines
2.8 KiB
Plaintext
Raw Normal View History

2015-07-28 15:40:28 +08:00
@import "../mixins/index";
2015-08-20 16:55:42 +08:00
@notification-prefix-cls: ~"@{css-prefix}notification";
2015-07-28 15:40:28 +08:00
2015-08-20 16:55:42 +08:00
@notice-width: 335px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;
2015-07-28 15:40:28 +08:00
2015-08-20 16:55:42 +08:00
.@{notification-prefix-cls} {
2015-07-28 15:40:28 +08:00
position: fixed;
z-index: 1000;
2015-08-20 16:55:42 +08:00
width: @notice-width;
2015-08-03 15:17:12 +08:00
margin-right: 24px;
2015-07-28 15:40:28 +08:00
&-notice {
2015-08-20 16:55:42 +08:00
padding: @notice-padding;
2015-07-28 15:40:28 +08:00
border-radius: @border-radius-base;
box-shadow: 0 0 4px @legend-border-color;
background: @body-background;
line-height: 1.5;
position: relative;
2015-08-20 16:55:42 +08:00
margin-bottom: @notice-margin-bottom;
2015-07-28 15:40:28 +08:00
overflow: hidden;
2015-07-29 20:08:16 +08:00
&-content {
&-message {
2015-07-28 15:40:28 +08:00
font-size: 14px;
color: @text-color;
margin-bottom: 4px;
}
2015-07-29 20:08:16 +08:00
&-description {
2015-07-28 15:40:28 +08:00
font-size: @font-size-base;
color: @legend-color;
}
}
2015-07-29 20:08:16 +08:00
&-content-icon {
2015-07-28 15:40:28 +08:00
position: relative;
2015-07-29 20:08:16 +08:00
&-message {
2015-07-28 15:40:28 +08:00
font-size: 14px;
color: @text-color;
margin-left: 51px;
margin-bottom: 4px;
}
2015-07-29 20:08:16 +08:00
&-description {
2015-07-28 15:40:28 +08:00
margin-left: 51px;
font-size: @font-size-base;
color: @legend-color;
}
2015-07-29 20:08:16 +08:00
&-icon {
2015-07-28 15:40:28 +08:00
position: absolute;
left: 16px;
top: 50%;
margin-top: -26px;
font-size: 35px;
2015-08-03 15:17:12 +08:00
2015-08-12 18:08:06 +08:00
&-success {
2015-08-03 15:17:12 +08:00
color: @success-color;
}
2015-08-12 18:08:06 +08:00
&-info {
2015-08-03 15:17:12 +08:00
color: @primary-color;
}
2015-08-12 18:08:06 +08:00
&-warn {
2015-08-03 15:17:12 +08:00
color: @warning-color;
}
2015-08-12 18:08:06 +08:00
&-error {
2015-08-03 15:17:12 +08:00
color: @error-color;
}
2015-07-28 15:40:28 +08:00
}
}
2015-07-29 20:08:16 +08:00
&-close-x:after {
font-size: 12px;
2015-07-28 15:40:28 +08:00
content: "\e61e";
font-family: "anticon";
cursor: pointer;
}
&-close {
position: absolute;
right: 16px;
top: 10px;
color: #999;
outline: none;
}
2015-08-04 15:16:10 +08:00
2015-07-29 20:08:16 +08:00
&-content-btn {
2015-07-28 15:40:28 +08:00
float: right;
margin-top: 16px;
}
}
2015-08-24 00:50:22 +08:00
.notification-fade-effect() {
2015-08-12 18:08:06 +08:00
animation-duration: 0.3s;
animation-fill-mode: both;
animation-timing-function: @ease-in-out;
}
2015-08-24 00:50:22 +08:00
&-fade-enter,&-fade-appear {
2015-07-28 15:40:28 +08:00
opacity: 0;
2015-08-24 00:50:22 +08:00
.notification-fade-effect();
2015-08-12 18:08:06 +08:00
animation-play-state: paused;
2015-07-28 15:40:28 +08:00
}
2015-08-12 18:08:06 +08:00
&-fade-leave {
2015-08-24 00:50:22 +08:00
.notification-fade-effect();
2015-08-12 18:08:06 +08:00
animation-play-state: paused;
2015-07-28 15:40:28 +08:00
}
2015-08-24 00:50:22 +08:00
&-fade-enter&-fade-enter-active, &-fade-appear&-fade-appear-active {
2015-08-12 18:08:06 +08:00
animation-name: NotificationFadeIn;
animation-play-state: running;
2015-07-28 15:40:28 +08:00
}
&-fade-leave&-fade-leave-active {
2015-08-12 18:08:06 +08:00
animation-name: NotificationFadeOut;
animation-play-state: running;
}
@keyframes NotificationFadeIn {
0% {
opacity: 0;
2015-08-20 16:55:42 +08:00
left: @notice-width;
2015-08-12 18:08:06 +08:00
}
100% {
left: 0;
opacity: 1;
}
}
@keyframes NotificationFadeOut {
0% {
opacity: 1;
2015-08-20 16:55:42 +08:00
margin-bottom: @notice-margin-bottom;
padding-top: @notice-padding;
padding-bottom: @notice-padding;
2015-08-12 18:08:06 +08:00
max-height: 150px;
}
100% {
opacity: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
max-height: 0;
}
2015-07-28 15:40:28 +08:00
}
2015-08-04 15:16:10 +08:00
}