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
File name
Commit message
Commit date
/* ***** 도움말 박스 ***** */
.helper-area {
$w: 39rem;
@include position($p:fixed, $t: 0, $b: 0, $r: 0);
visibility: hidden;
opacity: 0;
z-index: 60;
width: $w;
transition: $transition-base;
transform: translateX(100%);
.helper-wrap {
@include position($t: 0, $b: 0, $r: 0);
width: $w;
padding: 0 var(--#{$prefix}spacer-10);
background-color: var(--#{$prefix}gray-5);
border-left: 1px solid var(--#{$prefix}gray-40);
transition: $transition-base;
.helper-tit {
padding-top: var(--#{$prefix}spacer-10);
font-size: var(--#{$prefix}fz-title-xlg);
font-weight: map-get($fws, bold);
}
.helper-conts-area {
@include flex-layout($jc: space-between, $fd: column);
gap: var(--#{$prefix}spacer-10);
position: relative;
overflow-x: hidden;
overflow-y: auto;
transition: $transition-base;
.conts-area-wrap {
@include flex-layout($jc: space-between, $fd: column);
gap: var(--#{$prefix}spacer-10);
position: relative;
overflow-x: hidden;
overflow-y: auto;
transition: $transition-base;
}
.conts-area {
.tit {
@include flex-layout($ai: center);
font-size: var(--#{$prefix}fz-title-md);
font-weight: map-get($fws, bold);
.btn-ico {
margin-left: var(--#{$prefix}spacer-1);
}
}
&.helper-conts {
width: 100%;
padding-top: 7rem;
.conts-wrap {
gap: var(--#{$prefix}spacer-8);
.conts-desc {
@include flex-layout($fd: column);
gap: var(--#{$prefix}spacer-2);
}
}
}
&.related-service {
padding: var(--#{$prefix}spacer-10) 0;
background-color: var(--#{$prefix}gray-5);
border-top: 1px solid var(--#{$prefix}gray-40);
transition: $transition-base;
.conts-wrap {
gap: var(--#{$prefix}spacer-6);
}
}
}
.helper-in {
width: 100%;
height: 100%;
padding: var(--#{$prefix}spacer-11) 0 var(--#{$prefix}spacer-10);
.helper-conts {
padding-top: 0;
}
}
}
}
&.expand {
visibility: visible;
opacity: 1;
transform: translateX(0);
.btn-helper {
&.expand {
visibility: hidden;
opacity: 0;
transform: translateX(100%);
}
}
}
}
.btn-helper {
@include position($p:fixed, $t: 4rem, $r: 4rem);
&.expand {
visibility: visible;
opacity: 1;
transition: $transition-base;
transform: translateX(0);
}
}
/* 도움말 버튼 */
.btn {
&.btn-helper {
height: 4.4rem;
padding: 0 var(--#{$prefix}btn-px-sm);
background-color: var(--#{$prefix}gray-5);
border: 1px solid var(--#{$prefix}gray-40);
border-radius: var(--#{$prefix}rd-4);
box-shadow: $box-shadow-base;
font-size: var(--#{$prefix}btn-fz-md);
color: var(--#{$prefix}black);
&::before,
&::after {
@include pseudo();
width: 2rem;
height: 2rem;
background: url(#{$url}/component/common/ico_foldable.svg) no-repeat center;
background-size: contain;
}
&:focus {
@include focus($color: $primary);
}
&.expand {
&::before {
margin-right: var(--#{$prefix}spacer-default2);
}
&::after {
display: none;
}
}
&.fold {
&::before {
display: none;
}
&::after {
margin-left: var(--#{$prefix}spacer-default2);
transform: rotate(180deg);
}
}
}
}
//mobile only
@include tabletLess {
/* ***** 도움말 박스 ***** */
.helper-area {
$w : calc(100vw - 3rem);
position: fixed;
z-index: 71;
width: $w;
&::before {
@include position($p: fixed, $t: 0, $l: -3rem, $r: 0, $b: 0);
@include pseudo();
background: transparent;
transition: $transition-base;
}
.helper-wrap {
width: $w;
padding: 0 var(--#{$prefix}spacer-4);
border-left: none;
.helper-conts-area {
.btn-helper {
top: 4rem;
right: 1.6rem;
}
.conts-area {
&.helper-conts {
.conts-wrap {
gap: var(--#{$prefix}spacer-6);
}
}
&.related-service {
width: calc(100vw - 6.2rem);
}
}
}
}
&.expand {
&::before {
background: rgba(0, 0, 0, 0.60);
transition-delay: .3s;
}
}
}
.btn-helper {
top: 2.4rem;
right: 1.6rem;
}
}
//tablet size more
@include tabletMore {
/* ***** 도움말 박스 ***** */
.helper-area {
.helper-wrap {
.helper-conts-area {
@include scrollbar;
}
}
}
}