ten-design-vue
Version:
ten-vue
111 lines (93 loc) • 1.74 kB
text/less
/* dependencies button */
@import "../vars.less";
.ten-modal {
width: 50%;
background: #ffffff;
margin: 0 auto;
position: relative;
top: 20vh;
border-radius: @modal-border-radius-default;
box-shadow: @shadow-level-1;
&--center {
top: 50%;
transform: translateY(-50%);
}
&__wrapper {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10001;
overflow: auto;
}
&__mask {
background: rgba(0, 0, 0, .5);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
&__header {
position: relative;
display: flex;
padding: 20px 24px;
&-title {
font-size: @title-level-3-size;
color: @text-color;
font-weight: bold;
}
&-close {
position: absolute;
top: 19px;
right: 20px;
font-size: @text-level-1-size;
padding: 5px;
color: @text-color-lighter-2;
cursor: pointer;
}
&-icon {
font-size: 24px;
margin-right: @modal-icon-right;
&--error {
color: @error-color;
}
&--warning {
color: @warning-color
}
&--success {
color: @success-color
}
&--info {
color: @info-color
}
}
}
&__content {
padding: 18px 24px 30px;
position: relative;
color: @text-color-lighter-1;
}
&__footer {
position: relative;
padding: 15px 24px;
text-align: right;
&::before {
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
right: 0;
top: 0;
background: #F0F0F0;
}
&-btn {
min-width: auto;
}
.ten-button + .ten-button {
margin-left: 8px;
}
}
}