File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
//default
.modal-back,
.modal {
display: none;
visibility: hidden;
z-index: -1;
&.in {
visibility: visible;
}
}
.modal-back {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparentize($black, 0.25);
//opacity: 0;
//transition: visibility 0s .3s;
&.in {
display: block;
z-index: 1000;
}
}
.modal {
/*@include flex-layout($ai: center, $jc: center, $fd: column);*/
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
visibility: hidden;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
opacity: 0;
@include reset-text;
transition: visibility .15s .3s, z-index 0s .3s, opacity .2s;
> * {
width: 100%;
}
&.in {
z-index: 1010;
transition-delay: 0s;
opacity: 1;
}
&.shown {
display: block;
}
.modal-dialog { //기본 타입
$p: var(--#{$prefix}spacer-10);
$gap: var(--#{$prefix}spacer-8);
$m: var(--#{$prefix}spacer-20);
@include flex-layout($ai: center);
position: relative;
z-index: 1020;
width: 84.6rem;
height: calc(100% - $m * 2);
min-height: calc(100% - $m * 2);
margin: $m auto;
.modal-content {
@include flex-layout($ai: center, $fd: column);
position: relative;
overflow: hidden;
width: 100%;
max-height: 100%;
background-color: var(--#{$prefix}white);
border-radius: var(--#{$prefix}rd-12);
outline-color: transparent;
transition: outline-color .1s;
> * {
width: 100%;
}
&:focus {
@include focus($offset: .4rem, $color: $white, $alpha: 0.9);
}
}
.modal-header {
width: 100%;
padding: $p 6.8rem $gap $p;
background-color: inherit;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
.modal-title {
@include ellipsis(1);
font-size: var(--#{$prefix}fz-title-sm);
font-weight: map-get($fws, bold);
}
}
.modal-conts {
@include flex-layout($fd: column);
gap: $gap;
position: relative;
overflow-y: auto;
width: 100%;
padding: 0 $p;
color: var(--#{$prefix}gray-90);
> * {
width: 100%;
}
.conts-tit {
font-size: var(--#{$prefix}fz-title-md);
font-weight: map-get($fws, bold);
}
.conts-area {
@include flex-layout($fd: column);
gap: $gap;
> * {
width: 100%;
}
}
}
.modal-btn {
@include flex-layout($ai: center, $jc: flex-end);
gap: .8rem;
width: 100%;
padding: $gap $p $p;
.btn {
min-width: 9.2rem;
}
}
.btn-close {
@include position($t: 3.2rem, $r: 3.2rem);
z-index: 901;
width: 3.6rem;
height: 3.6rem;
background: url(#{$url}/component/common/ico_close_modal.svg) no-repeat center;
background-size: 2rem;
}
}
&.alert { //얼럿 타입
.modal-dialog {
width: 56rem;
.modal-conts {
gap: 2.4rem;
}
.modal-btn {
.btn {
min-width: 7.8rem;
}
}
}
}
}
/* modal open 시 contents (전체모달 아닌경우) */
.modal-open {
/*padding-right: 17px;*/
overflow: hidden;
}
/* mobile */
@include mobile {
.modal {
$w: calc(100% - 3.2rem);
.modal-dialog {
$p: var(--#{$prefix}spacer-6);
$gap: var(--#{$prefix}spacer-6);
$m: var(--#{$prefix}spacer-4);
width: $w;
height: calc(100% - $m * 2);
min-height: calc(100% - $m * 2);
margin: $m auto;
.modal-header {
padding: $p 6.8rem $gap $p;
}
.modal-conts {
gap: $gap;
padding: 0 $p;
.conts-area {
gap: $gap;
> * {
width: 100%;
}
}
}
.modal-btn {
padding: $gap $p $p;
.btn {
width: calc((100% - 0.8rem) / 2);
min-width: 0;
}
}
.btn-close {
@include position($t: 1.6rem, $r: 1.6rem);
}
}
&.alert {
.modal-dialog {
width: $w;
.modal-btn {
.btn {
width: auto;
min-width: 7.8rem;
}
}
}
}
}
}