elara-ui/lib/theme/notification.css

Elara based on element-ui, and add other usefull components

.elara-notification{display:-webkit-box;display:-ms-flexbox;display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #EBEEF5;position:fixed;background-color:#FFF;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);-webkit-transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;transition:opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s,-webkit-transform .3s;overflow:hidden}.elara-notification.right{right:16px}.elara-notification.left{left:16px}.elara-notification__group{margin-left:13px;margin-right:8px}.elara-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.elara-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#606266;text-align:justify}.elara-notification__content p{margin:0}.elara-notification__icon{height:24px;width:24px;font-size:24px}.elara-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:16px}.elara-notification__closeBtn:hover{color:#606266}.elara-notification .elara-icon-success{color:#1bb500}.elara-notification .elara-icon-error{color:red}.elara-notification .elara-icon-info{color:#999}.elara-notification .elara-icon-warning{color:#ff9d00}.elara-notification-fade-enter.right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.elara-notification-fade-enter.left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.elara-notification-fade-leave-active{opacity:0}