109 lines
2.3 KiB
SCSS
109 lines
2.3 KiB
SCSS
@use '../abstracts' as *;
|
|
|
|
.modal-popup{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width:100%;
|
|
height:100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background:rgba(0,0,0,.75);
|
|
z-index:110000;
|
|
.modal-dialog {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: calc(100% - (14px * 2));
|
|
max-width: 860px;
|
|
z-index:111000;
|
|
margin: 14px auto;
|
|
pointer-events: none;
|
|
font-size: $font-s-14;
|
|
.modal-content{
|
|
flex:1;
|
|
position: relative;
|
|
margin: 0 16px;
|
|
background-clip: padding-box;
|
|
background-color: $white-fff;
|
|
border-radius: 16px;
|
|
outline: 0 none;
|
|
pointer-events: auto;
|
|
.modal-header {
|
|
display: block;
|
|
position:relative;
|
|
padding:20px 20px 0;
|
|
}
|
|
.modal-body {
|
|
position: relative;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
padding: 32px 20px;
|
|
}
|
|
.modal-footer {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// modal-header
|
|
.modal-header-inner{
|
|
@include flex(0px);
|
|
align-items: center;
|
|
.modal-name-wrap{
|
|
@include flex(12px);
|
|
align-items: center;
|
|
.modal-img{
|
|
@include flex(0px);
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
background-color: $black-1010;
|
|
}
|
|
.modal-name{
|
|
@include defaultFont($font-s-15, $font-w-600, $black-1010)
|
|
}
|
|
}
|
|
.modal-close{
|
|
display: block;
|
|
margin-left: auto;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url(/assets/images/layout/modal_close.svg)no-repeat center;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
// alert
|
|
.modal-popup{
|
|
&.alert{
|
|
.modal-dialog{
|
|
max-width: 237px;
|
|
align-items: center;
|
|
.modal-content{
|
|
padding: 20px;
|
|
.alert-tit{
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #ECECEC;
|
|
text-align: center;
|
|
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
|
}
|
|
.alert-btn-wrap{
|
|
@include flex(5px);
|
|
margin-top: 20px;
|
|
.alert-btn-bx{
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |