ten-design-vue
Version:
ten-vue
141 lines (122 loc) • 2.54 kB
text/less
/* dependencies icon,progress */
@import "../vars.less";
.ten-upload {
display: inline-block;
width: 100%;
&__input {
display: none;
}
&__select-container {
display: inline-block;
cursor: pointer;
transition: all 0.3s;
}
&__trigger--picture-card {
width: 120px;
height: 120px;
background: rgba(0, 0, 0, 0.02);
border: 1px dashed rgba(0, 0, 0, 0.15);
line-height: 120px;
user-select: none;
font-size: 28px;
text-align: center;
color: @text-color-lighter-2;
&:hover {
border-color: @primary-color;
}
}
&--disabled {
.ten-uplaod__select-container:hover,
.ten-uplaod__select-container--dragover {
border-color: none ;
}
}
&--drag {
.ten-upload__select-container {
background: rgba(0, 0, 0, 0.02);
border: 1px dashed rgba(0, 0, 0, 0.15);
}
.ten-upload__select-container:hover,
.ten-upload__select-container--dragover {
border-color: @primary-color;
}
}
&--drag.ten-upload--disabled {
.ten-upload__select-container {
border: @disabled-color;
cursor: not-allowed;
}
}
}
.ten-file-list {
width: 100%;
overflow: hidden;
padding-top: 4px;
}
.ten-upload--disabled {
.ten-file-list {
pointer-events: none;
}
}
.ten-file-item {
&__info {
width: 100%;
min-width: 120px;
height: 24px;
line-height: 24px;
position: relative;
cursor: pointer;
transition: all 0.3s;
position: relative;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
.ten-file-item__info-close-icon {
opacity: 1;
}
.ten-file-item__info-status-icon {
opacity: 0;
}
}
&-status-icon {
font-size: 16px;
position: absolute;
top: 50%;
right: 7px;
transform: translate(0, -50%);
&--loading {
color: #0052D9;
margin-top: -8px;
}
&--error {
color: @error-color ;
}
&--done {
color: @success-color;
}
}
&-filename {
width: 100%;
font-size: 14px;
padding: 0 30px 0 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
}
&-close-icon {
position: absolute;
font-size: 16px;
opacity: 0;
right: 7px;
top: 50%;
transform: translate(0, -50%);
color: @disabled-color;
}
}
&__progress {
padding: 0 4px;
}
& + & {
margin-top: 10px;
}
}