tdesign-mobile-vue
Version:
tdesign-mobile-vue
179 lines (151 loc) • 3.9 kB
text/less
// 组件允许单个组件打包,因此默认引入公共基础样式 --
@import "../../base.less";
@import "./_var.less";
.horizontal-vertical-center-with-flex() {
display: flex;
align-items: center;
justify-content: center;
}
.fill-with-position-absolute() {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.@{prefix}-upload {
.@{prefix}-icon {
font-size: @upload-icon-size;
flex-shrink: 0;
}
.@{prefix}-icon-check-circle-filled {
color: @upload-icon-check-circle-filled-color;
}
.@{prefix}-icon-error-circle-filled {
color: @upload-icon-error-circle-filled-color;
}
.@{prefix}-icon-loading {
color: @upload-icon-loading-color;
}
.@{prefix}-icon-add {
color: @upload-icon-add-color;
}
}
// 照片墙
.@{prefix}-upload {
&__card {
font-size: @upload-card-font-size;
line-height: @upload-card-line-height;
overflow: hidden;
width: 100%;
padding: @upload-card-padding;
display: flex;
flex-wrap: wrap;
&-item {
margin: @upload-card-item-margin;
padding: @upload-card-item-padding;
float: left;
cursor: pointer;
box-sizing: border-box;
list-style: none;
display: flex;
&::after {
content: "";
display: block;
}
&.@{prefix}-is--error {
& .@{prefix}-icon-warning_fill {
color: @upload-card-item-error-icon-warning-color;
margin-bottom: @upload-card-item-error-icon-warning-margin-bottom;
}
& .@{prefix}-upload__card-status {
color: @upload-card-item-status-color;
}
}
}
& .@{prefix}-icon-loading {
margin-bottom: @upload-card-icon-loading-margin-bottom;
}
&-content {
position: relative;
width: @upload-img-size;
height: @upload-img-size;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: @upload-card-container-bg-color;
border: @upload-card-contariner-border;
}
&-container {
width: (@upload-img-size - 2);
height: (@upload-img-size - 2);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: @upload-card-container-bg-color;
> .@{prefix}-icon,
.@{prefix}-loading {
font-size: @upload-icon-size-large;
// margin-bottom: @upload-card-container-icon-add-margin-bottom;
}
> p {
color: @text-color-placeholder;
}
}
&-status-wrap {
text-align: center;
> svg {
margin-bottom: @upload-card-status-wrap-svg-margin-bottom;
}
.@{prefix}-icon,
.@{prefix}-loading {
font-size: @upload-icon-size-middle;
}
}
&-image {
max-width: 100%;
max-height: 100%;
}
&-status {
color: @upload-card-status-color;
font-size: @upload-card-status-font-size;
}
&-mask {
background-color: @upload-card-mask-bg-color;
color: @upload-card-mask-color;
// transition: opacity .5s ease-in-out;
// will-change: transform;
// opacity: 0;
.horizontal-vertical-center-with-flex();
.fill-with-position-absolute();
}
&-delete-item {
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
z-index: 1;
background-color: @upload-card-mask-bg-color;
width: @font-size-l;
height: @font-size-l;
.close-icon {
color: @bg-color-container;
width: @font-size-l;
height: @font-size-l;
}
}
&-mask-item {
> .@{prefix}-icon {
cursor: pointer;
font-size: @upload-icon-size;
}
}
}
}