blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

feat(uploader): support css variables (#3797)

Browse Source 
fix #3789
This commit is contained in:
rex 2020-11-30 21:24:44 +08:00 committed by GitHub
parent 9725ec336b
commit 44dc6e768a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/uploader/index.less
View File

@ -25,24 +25,24 @@
align-items: center;
justify-content: center;
box-sizing: border-box;
width: @uploader-size;
height: @uploader-size;
margin: 0 @padding-xs @padding-xs 0;
background-color: @uploader-upload-background-color;
.theme(width, '@uploader-size');
.theme(height, '@uploader-size');
.theme(margin, '0 @padding-xs @padding-xs 0');
.theme(background-color, '@uploader-upload-background-color');
&:active {
background-color: @uploader-upload-active-color;
.theme(background-color, '@uploader-upload-active-color');
}
&-icon {
color: @uploader-icon-color;
font-size: @uploader-icon-size;
.theme(color, '@uploader-icon-color');
.theme(font-size, '@uploader-icon-size');
}
&-text {
margin-top: @padding-xs;
color: @uploader-text-color;
font-size: @uploader-text-font-size;
.theme(margin-top, '@padding-xs');
.theme(color, '@uploader-text-color');
.theme(font-size, '@uploader-text-font-size');
}
&--disabled {
@ -52,33 +52,33 @@
&__preview {
position: relative;
margin: 0 @padding-xs @padding-xs 0;
cursor: pointer;
.theme(margin, '0 @padding-xs @padding-xs 0');
&-image {
display: block;
width: @uploader-size;
height: @uploader-size;
overflow: hidden;
.theme(width, '@uploader-size');
.theme(height, '@uploader-size');
}
&-delete {
position: absolute;
top: 0;
right: 0;
width: @uploader-delete-icon-size;
height: @uploader-delete-icon-size;
padding: 0 0 @padding-xs @padding-xs;
.theme(width, '@uploader-delete-icon-size');
.theme(height, '@uploader-delete-icon-size');
.theme(padding, '0 0 @padding-xs @padding-xs');
&::after {
position: absolute;
top: 0;
right: 0;
width: @uploader-delete-icon-size;
height: @uploader-delete-icon-size;
background-color: @uploader-delete-background-color;
border-radius: 0 0 0 @uploader-delete-icon-size - 2px;
content: '';
.theme(width, '@uploader-delete-icon-size');
.theme(height, '@uploader-delete-icon-size');
.theme(background-color, '@uploader-delete-background-color');
.theme(border-radius, '0 0 0 calc(@uploader-delete-icon-size - 2px)');
}
&-icon {
@ -86,9 +86,11 @@
top: -2px;
right: -2px;
z-index: 1;
color: @uploader-delete-color;
font-size: 16px;
// font-size: 16px;
transform: scale(0.5);
// .theme(font-size, 'calc(@uploader-delete-icon-size / 2 + 9px)');
.theme(font-size, 'calc(@uploader-delete-icon-size + 2px)');
.theme(color, '@uploader-delete-color');
}
}
}
@ -98,23 +100,23 @@
flex-direction: column;
align-items: center;
justify-content: center;
width: @uploader-size;
height: @uploader-size;
background-color: @uploader-file-background-color;
.theme(width, '@uploader-size');
.theme(height, '@uploader-size');
.theme(background-color, '@uploader-file-background-color');
&-icon {
color: @uploader-file-icon-color;
font-size: @uploader-file-icon-size;
.theme(color, '@uploader-file-icon-color');
.theme(font-size, '@uploader-file-icon-size');
}
&-name {
box-sizing: border-box;
width: 100%;
margin-top: @uploader-file-name-margin-top;
padding: @uploader-file-name-padding;
color: @uploader-file-name-text-color;
font-size: @uploader-file-name-font-size;
text-align: center;
.theme(margin-top, '@uploader-file-name-margin-top');
.theme(padding, '@uploader-file-name-padding');
.theme(color, '@uploader-file-name-text-color');
.theme(font-size, '@uploader-file-name-font-size');
}
}
@ -128,24 +130,24 @@
flex-direction: column;
align-items: center;
justify-content: center;
color: @white;
background-color: @uploader-mask-background-color;
.theme(color, '@white');
.theme(background-color, '@uploader-mask-background-color');
&-icon {
font-size: @uploader-mask-icon-size;
.theme(font-size, '@uploader-mask-icon-size');
}
&-message {
margin-top: 6px;
padding: 0 @padding-base;
font-size: @uploader-mask-message-font-size;
line-height: @uploader-mask-message-line-height;
.theme(padding, '0 @padding-base');
.theme(font-size, '@uploader-mask-message-font-size');
.theme(line-height, '@uploader-mask-message-line-height');
}
}
&__loading {
width: @uploader-loading-icon-size;
height: @uploader-loading-icon-size;
color: @uploader-loading-icon-color !important;
.theme(width, '@uploader-loading-icon-size');
.theme(height, '@uploader-loading-icon-size');
.theme(color, '@uploader-loading-icon-color !important');
}
}