song-ui-u/theme/messageBox.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-message-box{--x-message-text-color:var(--x-text-color-primary);--x-message-icon-color:var(--x-color-primary);--x-message-bg-color:var(--x-color-white);margin:0 auto;width:460px;box-sizing:border-box}.x-message-box__wrap{margin-top:15vh;background-color:#fff;border-radius:12px}.x-message-box__body{padding:24px;font-size:14px;line-height:1.6;word-break:break-word}.x-message-box__footer{padding:0 24px 16px;text-align:right}.x-message-box__header{display:flex;align-items:center}.x-message-box__header .x-icon{font-size:22px;line-height:1;margin-right:12px;color:var(--x-messageBox-icon-color)}.x-message-box__title{font-size:16px;font-weight:600;line-height:1.5;color:var(--x-neutral-color-light-2)}.x-message-box__content{margin:12px 0 0 34px;line-height:24px;font-size:14px;color:var(--x-neutral-color-light-3)}.x-message-box--primary{--x-messageBox-icon-color:var(--x-color-primary)}.x-message-box--success{--x-messageBox-icon-color:var(--x-color-success)}.x-message-box--warning{--x-messageBox-icon-color:var(--x-color-warning)}.x-message-box--error{--x-messageBox-icon-color:var(--x-color-error)}.x-message-box-enter-from,.x-message-box-leave-to{opacity:0}.x-message-box-enter-active .x-message-box{animation:dialogFadeIn .2s}.x-message-box-leave-active .x-message-box{animation:dialogFadeOut .2s}@keyframes dialogFadeIn{0%{transform:translateY(-30px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes dialogFadeOut{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-30px);opacity:0}}