stupid-dialog/dialog/dialog.css

A simple plugin for dialog with Vue

.dialog-fade-enter-active, .dialog-fade-leave-active {
  transition: opacity .5s;
}
.dialog-fade-enter, .dialog-fade-leave-to {
  opacity: 0;
}
.dialog-content {
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: 998;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20vw 0;
}
.dialog-content-mask {
    background: rgba(0, 0, 0, 0.5);
}
.dialog-container {
    z-index: 9999;
    box-sizing: border-box;
    border-radius: 1.8vw;
    text-align: center;
    background: #fff;
    color: #000;
    font-size: 3.8vm;
}
.dialog-title {
    padding: 2.8vw 2.8vw 0 2.8vw;
    font-size: 4vw;
    color: #000;
    text-align: center;
    letter-spacing: 1.8px;
}
.dialog-confirm {
    max-width: 72vw;
    min-width: 60vw;
}
.dialog-confirm .dialog-message {
    padding: 5vw;
}
.dialog-toast {
    max-width: 56vw;
    min-width: 24vw;
}
.dialog-toast .dialog-message {
    padding: 2.8vw 4vw;
}
.dialog-message {
    display: inline-block;
    text-align: left;
}
.dialog-action {
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    border-top: 1px solid #000;
    letter-spacing: 1.2px;
}
.dialog-action .action-confirm {
    padding: 2.8vw 0;
    width: 50%;
    font-weight: bolder;
    color: #000;
}
.dialog-action .action-cancel {
    padding: 2.8vw 0;
    width: calc(50% - 1px);
    font-weight: bolder;
    color: #ADADAD;
    border-right: 1px solid #000;
}
.dialog-content-dark .dialog-container {
    background: #141314;
    color: #ADADAD;
}
.dialog-content-dark .dialog-title {
    color: #fff;
}
.dialog-content-dark .dialog-action .action-confirm {
    color: #fff;
}