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