@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
1 lines • 4.87 kB
CSS
:root,page{--primary-color:#07c160}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__box{display:-webkit-box;display:-webkit-flex;display:flex}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none}.van-uploader__upload{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:160px;width:var(--uploader-size,160px);height:160px;height:var(--uploader-size,160px);margin:0 16px 16px 0;margin:0 var(--padding-xs,16px) var(--padding-xs,16px) 0;background-color:#f7f8fa;background-color:var(--uploader-upload-background-color,#f7f8fa)}.van-uploader__upload:active{background-color:#f2f3f5;background-color:var(--uploader-upload-active-color,#f2f3f5)}.van-uploader__upload-icon{color:#dcdee0;color:var(--uploader-icon-color,#dcdee0);font-size:48px;font-size:var(--uploader-icon-size, 48px)}.van-uploader__upload-text{margin-top:16px;margin-top:var(--padding-xs,16px);color:#969799;color:var(--uploader-text-color,#969799);font-size:24px;font-size:var(--uploader-text-font-size, 24px)}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity, .5)}.van-uploader__preview{position:relative;cursor:pointer;margin:0 16px 16px 0;margin:0 var(--padding-xs,16px) var(--padding-xs,16px) 0}.van-uploader__preview-image{display:block;overflow:hidden;width:160px;width:var(--uploader-size,160px);height:160px;height:var(--uploader-size,160px)}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:28px;width:var(--uploader-delete-icon-size,28px);height:28px;height:var(--uploader-delete-icon-size,28px);padding:0 0 16px 16px;padding:0 0 var(--padding-xs,16px) var(--padding-xs,16px)}.van-uploader__preview-delete::after{position:absolute;top:0;right:0;content:'';width:28px;width:var(--uploader-delete-icon-size,28px);height:28px;height:var(--uploader-delete-icon-size,28px);background-color:rgba(0,0,0,.7);background-color:var(--uploader-delete-background-color,rgba(0,0,0,.7));border-radius:0 0 0 calc(28px - 4px);border-radius:0 0 0 calc(var(--uploader-delete-icon-size,28px) - var(--borderRadius,4px))}.van-uploader__preview-delete-icon{position:absolute;top:-4px;right:-4px;z-index:1;-webkit-transform:scale(.5);transform:scale(.5);font-size:calc(28px + 4px);font-size:calc(var(--uploader-delete-icon-size, 28px) + var(--fontSize, 4px));color:#fff;color:var(--uploader-delete-color,#fff)}.van-uploader__file{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;width:160px;width:var(--uploader-size,160px);height:160px;height:var(--uploader-size,160px);background-color:#f7f8fa;background-color:var(--uploader-file-background-color,#f7f8fa)}.van-uploader__file-icon{color:#646566;color:var(--uploader-file-icon-color,#646566);font-size:40px;font-size:var(--uploader-file-icon-size, 40px)}.van-uploader__file-name{box-sizing:border-box;width:100%;text-align:center;margin-top:16px;margin-top:var(--uploader-file-name-margin-top,16px);padding:0 8px;padding:var(--uploader-file-name-padding,0 8px);color:#646566;color:var(--uploader-file-name-text-color,#646566);font-size:24px;font-size:var(--uploader-file-name-font-size, 24px)}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#fff;color:var(--white,#fff);background-color:rgba(50,50,51,.88);background-color:var(--uploader-mask-background-color,rgba(50,50,51,.88))}.van-uploader__mask-icon{font-size:44px;font-size:var(--uploader-mask-icon-size, 44px)}.van-uploader__mask-message{margin-top:12px;padding:0 8px;padding:0 var(--padding-base,8px);font-size:24px;font-size:var(--uploader-mask-message-font-size, 24px);line-height:28px;line-height:var(--uploader-mask-message-line-height, 28px)}.van-uploader__loading{width:44px;width:var(--uploader-loading-icon-size,44px);height:44px;height:var(--uploader-loading-icon-size,44px);color:#fff;color:var(--uploader-loading-icon-color,#fff)}