UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

102 lines (86 loc) 1.63 kB
.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); } }