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
.datepicker-area {
display: none;
position: relative;
z-index: 1000;
@at-root .datepicker-wrap {
@include position($t: .8rem, $l: 0);
width: 100%;
background-color: var(--#{$prefix}white);
border: 1px solid var(--#{$prefix}gray-40);
border-radius: var(--#{$prefix}rd-8);
&:focus {
@include focus($offset: -.4rem);
}
&.bottom {
top: auto;
bottom: 6.4rem;
}
.datepicker-head {
@include flex-layout($ai: center, $jc: space-between);
position: relative;
width: 100%;
height: 6.4rem;
padding: 0 var(--#{$prefix}spacer-3);
background-color: var(--#{$prefix}secondary-5);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
font-size: var(--#{$prefix}fz-body-lg);
.btn-cal-move {
width: 4rem;
height: 4rem;
background: url(#{$url}/component/common/ico_cal_move.svg) no-repeat center;
background-size: 1.6rem;
&.next {
transform: rotate(180deg);
}
}
.datepicker-switch-wrap {
@include flex-layout($ai: center, $jc: center);
width: 100%;
padding: 0 var(--#{$prefix}spacer-3);
.btn-cal-switch {
@include flex-layout($ai: center, $jc: center);
width: 50%;
height: 3.8rem;
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--#{$prefix}rd-8);
text-align: center;
transition: $transition-base;
&::after {
@include pseudo();
width: 1.6rem;
height: 1.6rem;
margin-left: var(--#{$prefix}spacer-1);
background: url(#{$url}/component/common/ico_cal_dropdown.svg) no-repeat center;
background-size: 1.6rem;
}
&:hover {
background-color: var(--#{$prefix}secondary-10);
}
&:focus,
&:active {
border: 1px solid var(--#{$prefix}secondary-10);
}
}
}
}
.datepicker-tbl-wrap {
padding: 0 var(--#{$prefix}spacer-3);
.datepicker-tbl {
th,
td {
width: calc(100% / 7);
padding-top: var(--#{$prefix}spacer-1);
> button {
@include flex-layout($ai: center, $jc: center);
width: 100%;
height: 100%;
}
&.old,
&.new {
color: transparentize($gray-60, 0.7);
}
&.period {
.btn-set-date {
background-color: var(--#{$prefix}primary-10);
}
&.start,
&.end {
> .btn-set-date {
background-color: var(--#{$prefix}primary);
color: var(--#{$prefix}white);
&:focus {
@include focus($offset: -.4rem, $color: $white, $alpha: 0.9);
}
}
}
&.start {
> .btn-set-date {
border-top-left-radius: var(--#{$prefix}rd-full);
border-bottom-left-radius: var(--#{$prefix}rd-full);
}
}
&.end {
> .btn-set-date {
border-top-right-radius: var(--#{$prefix}rd-full);
border-bottom-right-radius: var(--#{$prefix}rd-full);
}
}
}
}
}
}
.datepicker-body {
position: relative;
.sel {
&.year {
@include flex-layout($jc: center, $fd: column);
width: 14rem;
margin: 0 auto;
li,
.btn {
width: 100%;
}
}
&.month {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 1.2rem;
row-gap: .8rem;
> li {
flex: 1;
.btn {
width: 100%;
}
}
}
.btn {
background-color: transparent;
border-color: transparent;
color: var(--#{$prefix}gray-90);
&.active {
background-color: var(--#{$prefix}primary);
border-color: var(--#{$prefix}primary);
color: var(--#{$prefix}white);
}
}
}
.datepicker-conts {
@include position($t:0, $l: 0);
@include visibility(hidden);
width: 100%;
height: 100%;
transition: $transition-base;
&.active {
@include visibility(visible);
}
}
}
.datepicker-mon-wrap,
.datepicker-year-wrap {
overflow-x: hidden;
overflow-y: auto;
}
.datepicker-mon-wrap {
padding: var(--#{$prefix}spacer-5) var(--#{$prefix}spacer-6) 0;
}
.datepicker-btn-wrap {
@include flex-layout($jc: flex-end);
gap: .8rem;
margin: 0 calc(var(--#{$prefix}spacer-3) * -1);
padding: var(--#{$prefix}spacer-4);
border-top: 1px solid var(--#{$prefix}gray-20);
}
}
&.active {
display: block;
}
}
.row {
.datepicker-wrap {
&.bottom {
bottom: 12.8rem;
}
}
}
@media (min-width: 361px) {
.datepicker-wrap {
width: 36rem;
}
}
@include tabletMore() {
.datepicker-year-wrap {
@include scrollbar;
}
}