tinper-bee/dist/Notification/index.css

React Components living for enterprise-class pc backend application

.u-notification{position:fixed;z-index:1;width:300px;margin-right:15px}.u-notification-topRight{top:30px;right:30px}.u-notification-bottomRight{bottom:30px;right:30px}.u-notification-notice{position:relative;padding:15px;border-radius:3px;-webkit-box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12);background:#424242;line-height:1.5;margin-bottom:15px;overflow:hidden;color:#fff}.u-notification-notice-title{font-size:14px;margin-bottom:4px;line-height:20px}.u-notification-notice-description{font-size:12px;word-wrap:break-word}.u-notification-notice-closable{padding-right:20px}.u-notification-notice-close{position:absolute;right:10px;top:6px;cursor:pointer;outline:none;font-size:16px;font-weight:700;line-height:1;text-shadow:0 1px 0 #fff;filter:alpha(opacity=80);opacity:.8;text-decoration:none}.u-notification-notice-close-x .uf{font-size:12px;padding:0}.u-notification-notice-close:hover{opacity:1;filter:alpha(opacity=100);text-decoration:none}.u-notification-notice-light{background-color:#fff;color:#424242}.notification-fade-effect,.u-notification-fade-appear,.u-notification-fade-enter,.u-notification-fade-leave{-webkit-animation-duration:.24s;animation-duration:.24s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:cubic-bezier(.645,.045,.355,1);animation-timing-function:cubic-bezier(.645,.045,.355,1)}.u-notification-fade-appear,.u-notification-fade-enter{opacity:0;-webkit-animation-play-state:paused;animation-play-state:paused}.u-notification-fade-leave{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-play-state:paused;animation-play-state:paused}.u-notification-fade-appear.u-notification-fade-appear-active,.u-notification-fade-enter.u-notification-fade-enter-active{-webkit-animation-name:uNotificationFadeIn;animation-name:uNotificationFadeIn;-webkit-animation-play-state:running;animation-play-state:running}.u-notification-fade-leave.u-notification-fade-leave-active{-webkit-animation-name:uNotificationFadeOut;animation-name:uNotificationFadeOut;-webkit-animation-play-state:running;animation-play-state:running}@-webkit-keyframes uNotificationFadeIn{0%{opacity:0;left:300px}to{left:0;opacity:1}}@keyframes uNotificationFadeIn{0%{opacity:0;left:300px}to{left:0;opacity:1}}@-webkit-keyframes uNotificationFadeOut{0%{opacity:1;margin-bottom:15px;padding-top:15px;padding-bottom:15px;max-height:150px}to{opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;max-height:0}}@keyframes uNotificationFadeOut{0%{opacity:1;margin-bottom:15px;padding-top:15px;padding-bottom:15px;max-height:150px}to{opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;max-height:0}}