yk-smart-ui-test/packages/theme-chalk/lib/notification.css

A Component Library for Vue.js.

.yk-notification{display:-ms-flexbox;display:flex;width:330px;padding:14px 26px 14px 13px;border-radius:8px;box-sizing:border-box;border:1px solid #EBEEF5;position:fixed;background-color:#FFF;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);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}.yk-notification.right{right:16px}.yk-notification.left{left:16px}.yk-notification__group{margin-left:13px;margin-right:8px}.yk-notification__title{font-weight:700;font-size:16px;color:#303133;margin:0}.yk-notification__content{font-size:14px;line-height:21px;margin:6px 0 0;color:#2C2836;text-align:justify}.yk-notification__content p{margin:0}.yk-notification__icon{height:24px;width:24px;font-size:24px}.yk-notification__closeBtn{position:absolute;top:18px;right:15px;cursor:pointer;color:#909399;font-size:16px}.yk-notification__closeBtn:hover{color:#2C2836}.yk-notification .el-icon-success{color:#4CAF50}.yk-notification .el-icon-error{color:#DD425A}.yk-notification .el-icon-info{color:#909399}.yk-notification .el-icon-warning{color:#D87214}.el-notification-fade-enter.right{right:0;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.el-notification-fade-enter.left{left:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.el-notification-fade-leave-active{opacity:0}.yk-notification-style{width:360px;min-height:84px;background:#fff;box-shadow:4px 4px 8px 0 rgba(111,144,194,.04),-4px 4px 8px 0 rgba(111,144,194,.04),4px 4px 8px 0 rgba(60,102,165,.04),-4px 4px 8px 0 rgba(60,102,165,.04);border-radius:4px;padding:16px 20px;border:none}.yk_notification_icon{margin-top:4px}.yk-notification__title-style{font-size:16px;font-weight:700;color:#2c2836;line-height:24px;margin:0 0 6px}.yk-notification__content-style{font-size:14px;font-weight:400;color:rgba(44,40,54,.56);line-height:22px}.yk-notification__content-style>p{margin:0}.yk-notification-info{color:#2e63fd}.yk-notification-success{color:#4caf50}.yk-notification-warning{color:#d87214}.yk-notification-error{color:#dd425a}