vue-msgbox/lib/vue-msgbox.css

A message box (like Sweet Alert) for vue.js.

.v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@-webkit-keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{to{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.msgbox{position:fixed;top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);background-color:#fff;width:85%;border-radius:3px;font-size:16px;-webkit-user-select:none;overflow:hidden;opacity:1;-webkit-backface-visibility:hidden;backface-visibility:hidden}.msgbox-header{padding:15px 20px 5px 10px;border-bottom:1px solid #ddd}.msgbox-content{padding:10px 20px;min-height:36px;position:relative;border-bottom:1px solid #ddd}.msgbox-close{display:inline-block;position:absolute;top:14px;right:15px;width:20px;height:20px;cursor:pointer;line-height:20px;text-align:center}.msgbox-input>input{border:1px solid #dedede;border-radius:5px;padding:4px 5px;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.msgbox-errormsg{color:red;font-size:12px;min-height:16px}.msgbox-title{padding-left:10px;font-size:16px;font-weight:700;color:#333;margin-bottom:8px}.msgbox-status{float:left;width:36px;height:36px;font-size:36px!important}.msgbox-status.icon-success{color:#94c852}.msgbox-status.icon-warning{color:#ff9c00}.msgbox-status.icon-error{color:#ff4248}.msgbox-message{color:#333;line-height:36px;margin-left:36px;margin-right:36px}.msgbox-btns,.msgbox-message{font-size:16px;text-align:center}.msgbox-btns{display:-webkit-box;display:-ms-flexbox;display:flex;height:40px;line-height:40px}.msgbox-btn{display:block;background-color:#fff;border:0;-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0;border-radius:0}.msgbox-btn:active{background-color:#3492e9;color:#fff;outline:none}.msgbox-btn:focus{outline:none}.msgbox-confirm{width:50%}.msgbox-cancel{width:50%;border-right:1px solid #ddd}.msgbox-cancel-highlight,.msgbox-confirm-highlight{font-weight:800}.msgbox-btns-reverse{-webkit-box-direction:reverse}.msgbox-btns-reverse .msgbox-confirm{border-right:1px solid #ddd}.msgbox-btns-reverse .msgbox-cancel{border-right:0}.pop-bounce-transition{-webkit-transition:.2s .1s;transition:.2s .1s}.pop-bounce-enter{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.pop-bounce-leave{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9)}