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(--krds-gray-40);
background-color: var(--krds-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;
}
}