react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
102 lines (86 loc) • 1.63 kB
text/less
.icon {
height: 40px;
width: 40px;
fill: currentColor;
overflow: hidden;
}
.toast-notification {
position: fixed;
top: 50%;
left: 50%;
z-index:999;
transform: translate(-50%,-50%);
}
.toast-notice-wrapper.notice-enter {
opacity: 0.01;
transform: scale(0);
}
.toast-notice-wrapper.notice-enter-active {
opacity: 1;
transform: scale(1);
transition: all 300ms ease-out;
}
.toast-notice-wrapper.notice-exit {
opacity: 1;
transform: translateY(0);
}
.toast-notice-wrapper.notice-exit-active {
opacity: 0.01;
transform: translateY(-40%);
transition: all 300ms ease-out;
}
.toast-notice {
padding: 16px 32px;
margin: 8px auto;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, .1);
border-radius: 6px;
font-size: 15px;
align-items: center;
background:rgba(0,0,0,.6);
border-radius:10px;
color: #fff;
text-align: center;
}
.toast-notice>div {
font-size: 28px;
text-align: center;
}
.toast-notice>svg {
font-size: 32px;
}
.toast-notice.info{
svg {
color: #1890FF;
}
}
.toast-notice.success{
.icon{
width: 108px;
height: 100px;
margin:24px 58px 24px 58px;
}
div{
margin-bottom: 30px;
}
svg {
color: #52C41A;
}
}
.toast-notice.warning>svg {
color: #FAAD14;
}
.toast-notice.error>svg {
color: #F74A53;
}
.toast-notice.loading>svg {
color: #1890FF;
animation: rotating 1s linear infinite;
}
@keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}