jiku-ui
Version:
A Component Library for Vue.js.
1 lines • 1.94 kB
CSS
.hn-message__closeBtn:focus,.hn-message__content:focus{outline-width:0}.hn-message{min-width:380px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border-width:1px;border-style:solid;border-color:#EBEEF5;position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#edf2fc;-webkit-transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,top .4s,-webkit-transform .4s;transition:opacity .3s,transform .4s,top .4s;transition:opacity .3s,transform .4s,top .4s,-webkit-transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.hn-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.hn-message.is-closable .hn-message__content{padding-right:16px}.hn-message p{margin:0}.hn-message--info .hn-message__content{color:#909399}.hn-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.hn-message--success .hn-message__content{color:#67C23A}.hn-message--warning{background-color:#fef6e9;border-color:#fdedd3}.hn-message--warning .hn-message__content{color:#F5A623}.hn-message--error{background-color:#fef0f0;border-color:#fde2e2}.hn-message--error .hn-message__content{color:#F56C6C}.hn-message__icon{margin-right:10px}.hn-message__content{padding:0;font-size:14px;line-height:1}.hn-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#C0C4CC;font-size:16px}.hn-message__closeBtn:hover{color:#909399}.hn-message .hn-icon-success{color:#67C23A}.hn-message .hn-icon-error{color:#F56C6C}.hn-message .hn-icon-info{color:#909399}.hn-message .hn-icon-warning{color:#F5A623}.hn-message-fade-enter,.hn-message-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}