You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.5 KiB
148 lines
3.5 KiB
@import '~@/uni_modules/lime-style/index.scss';
|
|
$prefix: l !default;
|
|
$upload: #{$prefix}-upload;
|
|
|
|
$upload-add-color: create-var(upload-add-color, $text-color-4);
|
|
$upload-add-bg-color: create-var(upload-add-bg-color, $gray-1);
|
|
$upload-add-disabled-bg-color: create-var(upload-add-disabled-bg-color, $gray-2);
|
|
$upload-add-icon-font-size: create-var(upload-add-icon-font-size, 28px);
|
|
// $upload-add-icon-disabled-color: create-var(upload-add-icon-disabled-color, $text-color-4);
|
|
|
|
$upload-radius: create-var(upload-radius, $border-radius);
|
|
$upload-width: create-var(upload-width, 80px);
|
|
$upload-height: create-var(upload-height, 80px);
|
|
$upload-background: create-var(upload-background, $upload-add-bg-color);
|
|
$upload-delete-icon-color: create-var(upload-delete-icon-color, white);
|
|
$upload-gap: create-var(upload-gap, 8px);
|
|
|
|
// $upload-disabled-mask: create-var(upload-disabled-mask, rgba(0, 0, 0, 0.6));
|
|
// $upload-drag-z-index: create-var(upload-drag-z-index, 999);
|
|
|
|
.#{$upload} {
|
|
/* #ifndef UNI-APP-X */
|
|
display: flex;
|
|
/* #endif */
|
|
flex: 1;
|
|
position: relative;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
&__item {
|
|
position: relative;
|
|
// flex: 1;
|
|
/* #ifdef APP-ANDROID || APP-IOS || WEB */
|
|
width: $upload-width;
|
|
height: $upload-height;
|
|
border-radius: $upload-radius;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* #endif */
|
|
/* #ifndef APP-ANDROID || APP-IOS || WEB */
|
|
&-inner {
|
|
overflow: hidden;
|
|
display: flex;
|
|
border-radius: $upload-radius;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: $upload-width;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
height: $upload-height;
|
|
position: relative;
|
|
}
|
|
|
|
/* #endif */
|
|
&--add {
|
|
/* #ifdef APP-ANDROID || APP-IOS || WEB */
|
|
background: $upload-background;
|
|
/* #endif */
|
|
|
|
/* #ifndef APP-ANDROID || APP-IOS || WEB */
|
|
& > view {
|
|
background: $upload-background;
|
|
}
|
|
/* #endif */
|
|
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
font-size: $upload-add-icon-font-size;
|
|
color: $upload-add-color;
|
|
// text {
|
|
// font-size: inherit;
|
|
// }
|
|
/* #endif*/
|
|
}
|
|
&--disabled {
|
|
// background-color: $upload-add-disabled-bg-color;
|
|
// color: $upload-add-icon-disabled-color;
|
|
opacity: 0.5;
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
cursor: not-allowed;
|
|
/* #endif */
|
|
}
|
|
}
|
|
&__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
&__add-icon {
|
|
font-size: $upload-add-icon-font-size;
|
|
color: $upload-add-color;
|
|
// position: absolute;
|
|
// top: 50%;
|
|
// left: 50%;
|
|
// transform: translate3d(-50%, -50%, 0);
|
|
}
|
|
&__delete-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
border-top-right-radius: $upload-radius;
|
|
border-bottom-left-radius: $upload-radius;
|
|
background-color: $text-color-2;
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
color: $upload-delete-icon-color;
|
|
/* #endif */
|
|
}
|
|
&__progress {
|
|
&-mask {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
background-color: $bg-color-mask;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: $upload-radius;
|
|
padding: 16px 0;
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
display: flex;
|
|
color: white;
|
|
/* #endif */
|
|
}
|
|
|
|
&-text {
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
margin-top: 4px;
|
|
color: white;
|
|
}
|
|
|
|
&-loading {
|
|
align-self: center;
|
|
}
|
|
&-icon {
|
|
color: white;
|
|
font-size: 24px !important;
|
|
width: 24px!important;
|
|
}
|
|
}
|
|
}
|