@import "mixins/mixins";
|
@import "common/var";
|
@import "common/popup";
|
@import "button";
|
@import "input";
|
|
@include b(message-box) {
|
display: inline-block;
|
width: $--msgbox-width;
|
padding-bottom: 10px;
|
vertical-align: middle;
|
background-color: $--color-white;
|
border-radius: $--msgbox-border-radius;
|
border: 1px solid $--border-color-lighter;
|
font-size: $--messagebox-font-size;
|
box-shadow: $--box-shadow-light;
|
text-align: left;
|
overflow: hidden;
|
backface-visibility: hidden;
|
|
@include e(wrapper) {
|
position: fixed;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
text-align: center;
|
|
&::after {
|
content: "";
|
display: inline-block;
|
height: 100%;
|
width: 0;
|
vertical-align: middle;
|
}
|
}
|
|
@include e(header) {
|
position: relative;
|
padding: $--msgbox-padding-primary;
|
padding-bottom: 10px;
|
}
|
|
@include e(title) {
|
padding-left: 0;
|
margin-bottom: 0;
|
font-size: $--messagebox-font-size;
|
line-height: 1;
|
color: $--messagebox-title-color;
|
}
|
|
@include e(headerbtn) {
|
position: absolute;
|
top: $--msgbox-padding-primary;
|
right: $--msgbox-padding-primary;
|
padding: 0;
|
border: none;
|
outline: none;
|
background: transparent;
|
font-size: $--message-close-size;
|
cursor: pointer;
|
|
.el-message-box__close {
|
color: $--color-info;
|
}
|
|
&:focus, &:hover {
|
.el-message-box__close {
|
color: $--color-primary;
|
}
|
}
|
|
}
|
|
@include e(content) {
|
padding: 10px $--msgbox-padding-primary;
|
color: $--messagebox-content-color;
|
font-size: $--messagebox-content-font-size;
|
}
|
|
@include e(container) {
|
position: relative;
|
}
|
|
@include e(input) {
|
padding-top: 15px;
|
|
& input.invalid {
|
border-color: $--color-danger;
|
&:focus {
|
border-color: $--color-danger;
|
}
|
}
|
}
|
|
@include e(status) {
|
position: absolute;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 24px !important;
|
|
&::before {
|
// 防止图标切割
|
padding-left: 1px;
|
}
|
|
+ .el-message-box__message {
|
padding-left: 36px;
|
padding-right: 12px;
|
}
|
|
&.el-icon-success {
|
color: $--messagebox-success-color;
|
}
|
|
&.el-icon-info {
|
color: $--messagebox-info-color;
|
}
|
|
&.el-icon-warning {
|
color: $--messagebox-warning-color;
|
}
|
|
&.el-icon-error {
|
color: $--messagebox-danger-color;
|
}
|
}
|
|
@include e(message) {
|
margin: 0;
|
|
& p {
|
margin: 0;
|
line-height: 24px;
|
}
|
}
|
|
@include e(errormsg) {
|
color: $--color-danger;
|
font-size: $--messagebox-error-font-size;
|
min-height: 18px;
|
margin-top: 2px;
|
}
|
|
@include e(btns) {
|
padding: 5px 15px 0;
|
text-align: right;
|
|
& button:nth-child(2) {
|
margin-left: 10px;
|
}
|
}
|
|
@include e(btns-reverse) {
|
flex-direction: row-reverse;
|
}
|
|
// centerAlign 布局
|
@include m(center) {
|
padding-bottom: 30px;
|
|
@include e(header) {
|
padding-top: 30px;
|
}
|
|
@include e(title) {
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
@include e(status) {
|
position: relative;
|
top: auto;
|
padding-right: 5px;
|
text-align: center;
|
transform: translateY(-1px);
|
}
|
|
@include e(message) {
|
margin-left: 0;
|
}
|
|
@include e((btns, content)) {
|
text-align: center;
|
}
|
|
@include e(content) {
|
$padding-horizontal: $--msgbox-padding-primary + 12px;
|
|
padding-left: $padding-horizontal;
|
padding-right: $padding-horizontal;
|
}
|
}
|
}
|
|
.msgbox-fade-enter-active {
|
animation: msgbox-fade-in .3s;
|
}
|
|
.msgbox-fade-leave-active {
|
animation: msgbox-fade-out .3s;
|
}
|
|
@keyframes msgbox-fade-in {
|
0% {
|
transform: translate3d(0, -20px, 0);
|
opacity: 0;
|
}
|
100% {
|
transform: translate3d(0, 0, 0);
|
opacity: 1;
|
}
|
}
|
|
@keyframes msgbox-fade-out {
|
0% {
|
transform: translate3d(0, 0, 0);
|
opacity: 1;
|
}
|
100% {
|
transform: translate3d(0, -20px, 0);
|
opacity: 0;
|
}
|
}
|
