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
/* 파일 업로드 */
.file-upload {
@include flex-layout($fd:column, $jc: center, $ai: center);
gap: var(--#{$prefix}spacer-10);
padding: var(--#{$prefix}spacer-16) var(--#{$prefix}spacer-10);
border-radius: 12px;
border: .1rem dashed var(--tk-gray-40);
background-color: var(--tk-gray-10);
.txt {
font-size: var(--#{$prefix}fz-body-lg);
text-align: center;
}
}
.file-upload-result {
display: flex;
flex-wrap: wrap;
margin-top: var(--#{$prefix}spacer-6 );
.upload-top {
flex: 1;
order: -1;
@include flex-layout($ai:center);
.file-total {
flex: 1;
font-weight: map-get($fws, bold);
.current {
color: var(--#{$prefix}primary);
}
}
}
.upload-list {
@include flex-layout($fd: column, $ai: normal);
gap: var(--#{$prefix}spacer-4);
margin-top: var(--#{$prefix}spacer-6);
width: 100%;
> li {
padding: var(--#{$prefix}spacer-3) var(--#{$prefix}spacer-4);
border-radius: var(--#{$prefix}rd-6);
border: .1rem solid var(--#{$prefix}gray-30);
&.is-error {
border: .2rem solid var(--#{$prefix}danger);
background-color: var(--#{$prefix}point-5);
.file-hint {
color: var(--#{$prefix}danger);
}
}
}
.in {
@include flex-layout($ai:center);
gap: var(--#{$prefix}spacer-4);
> div {
display: inline-flex;
}
.file-name {
flex: 1;
@include ellipsis(1);
}
.file-btn {
gap: var(--#{$prefix}spacer-4);
}
.ico-invalid {
display: inline-flex;
width: 2.4rem;
height: 2.4rem;
background-repeat: no-repeat;
background-position: center;
&.error {
background-image: url(#{$url}/component/common/ico_invalid_error_20.svg);
}
&.ok {
background-image: url(#{$url}/component/common/ico_invalid_ok_20.svg);
}
}
}
.file-hint {
padding-top: var(--#{$prefix}spacer-4);
margin-top: var(--#{$prefix}spacer-4);
border-top: .1rem solid var(--#{$prefix}gray-30);
}
}
.upload-delete-btn {
order: -1;
line-height: 1;
}
}