@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
2 lines (1 loc) • 8.41 kB
CSS
.nut-progress{display:flex;align-items:center;position:relative;width:100%}.nut-progress-outer{flex:1;border-radius:var(--nutui-progress-border-radius, 12px);height:var(--nutui-progress-height, 10px);background:var(--nutui-progress-background, var(--nutui-color-background, #f8f8f8))}.nut-progress-outer .nut-progress-active:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--nutui-progress-border-radius, 12px);animation:progressActive 2s ease-in-out infinite}.nut-progress-inner{height:100%;display:flex;flex-direction:column;justify-content:center;transition:all .4s;border-radius:var(--nutui-progress-border-radius, 12px);background:var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, var(--nutui-color-primary, #006dfc)) 0%, var(--nutui-color-primary-stop-2, var(--nutui-color-primary, #006dfc)) 100%))}.nut-progress-text{display:flex;align-items:center;transition:all .4s;margin-left:12px;color:var(--nutui-color-text-help, var(--nutui-color-text-disabled, #999999));font-family:PingFang SC;font-size:var(--nutui-progress-text-font-size, 13px)}@keyframes progressActive{0%{background:#ffffff1a;width:0}20%{background:#ffffff80;width:0}to{background:#fff0;width:100%}}[dir=rtl] .nut-progress-text,.nut-rtl .nut-progress-text{transform:translate(50%)}.nut-progress-inner{background:var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, var(--nutui-color-primary, #006dfc)) 0%, var(--nutui-color-primary-stop-2, var(--nutui-color-primary, #006dfc)) 100%))}.nut-uploader{position:relative;display:flex;flex-direction:row;flex-wrap:wrap}.nut-uploader__slot{position:relative;margin-bottom:2px}.nut-uploader__upload{position:relative;display:flex;align-items:center;justify-content:center;background:var(--nutui-uploader-background, var(--nutui-color-background, #f8f8f8));width:var(--nutui-uploader-image-height, 101px);height:var(--nutui-uploader-image-height, 101px);border:var(--nutui-uploader-image-border, 0px);border-radius:var(--nutui-uploader-image-border-radius, var(--nutui-radius-1, 8px))}.nut-uploader__upload.col-3{width:var(--nutui-uploader-image-height, 101px);height:var(--nutui-uploader-image-height, 101px)}.nut-uploader__upload.col-4{width:71px;height:71px}.nut-uploader__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 var(--nutui-spacing-2, 12px)}.nut-uploader__icon i{line-height:1}.nut-uploader__icon-tip{font-size:var(--nutui-uploader-image-icon-tip-font-size, var(--nutui-font-size-1, 13px));color:var(--nutui-uploader-picture-icon-tip-color, var(--nutui-color-text-disabled, #999999));margin-top:var(--nutui-uploader-image-icon-margin-bottom, var(--nutui-spacing-0, 4px))}.nut-uploader__icon .iconfont{font-size:20px}.nut-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.nut-uploader__input:disabled{cursor:not-allowed}.nut-uploader__upload-disabled{background:var(--nutui-uploader-background-disabled, var(--nutui-color-background, #f8f8f8))}.nut-uploader__upload-disabled .nut-uploader__icon i{opacity:.3;margin-bottom:var(--nutui-uploader-image-icon-margin-bottom, var(--nutui-spacing-0, 4px))}.nut-uploader__upload__multiple{width:calc((100% - 24px) / 3);aspect-ratio:1/1;height:auto;margin-bottom:var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-2, 12px))}.nut-uploader__preview{position:relative;margin-right:var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-2, 12px));margin-bottom:var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-2, 12px));border-radius:var(--nutui-uploader-image-border-radius, var(--nutui-radius-1, 8px));overflow:hidden}.nut-uploader__preview.last-row{margin-right:0}.nut-uploader__preview.single{margin:0}.nut-uploader__preview.multiple{width:calc((100% - 24px) / 3)}.nut-uploader__preview.error .nut-uploader__preview__progress{box-sizing:border-box}.nut-uploader__preview__progress{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:var(--nutui-uploader-preview-progress-background, var(--nutui-color-mask-secondary, rgba(0, 0, 0, .4)));border-radius:var(--nutui-uploader-image-border-radius, var(--nutui-radius-1, 8px));z-index:99}.nut-uploader__preview__progress i,.nut-uploader__preview__progress img{margin-bottom:var(--nutui-uploader-image-icon-margin-bottom, var(--nutui-spacing-0, 4px))}.nut-uploader__preview__progress img{border:0 none;vertical-align:bottom;-ms-interpolation-mode:bicubic}.nut-uploader__preview__progress__msg{color:#fff;font-size:var(--nutui-font-size-1, 13px);line-height:1.5}.nut-uploader__preview__progress .extra-loading-style{margin-bottom:1px;padding-top:2px}.nut-uploader__preview.list{width:100%;margin-right:0;margin-bottom:0;margin-top:12px;border-radius:var(--nutui-uploader-image-border-radius, var(--nutui-radius-1, 8px));overflow:hidden;box-shadow:0 2px 4px -2px #00000005,0 2px 4px #00000005,0 4px 8px 4px #0000000a}.nut-uploader__preview-list{width:100%;height:42px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background-color:var(--nutui-color-background, #f8f8f8)}.nut-uploader__preview-list .nut-uploader__preview-img__file__name{flex:1;padding:0 10px;color:var(--nutui-color-title, #0d0d0d);font-size:var(--nutui-font-size-2, 15px);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-uploader__preview-list .nut-uploader__preview-img__file__name.success{color:var(--nutui-color-title, #0d0d0d)}.nut-uploader__preview-list .icon-file,.nut-uploader__preview-list .icon-delete{font-size:16px;color:var(--nutui-color-title, #0d0d0d)}.nut-uploader__preview-list .nut-progress{position:absolute;left:0;right:0;bottom:0}.nut-uploader__preview-list .nut-progress .nut-progress-outer{height:2px}.nut-uploader__preview .close{position:absolute;right:var(--nutui-uploader-preview-close-right, 0px);top:var(--nutui-uploader-preview-close-top, 0px);font-size:20px;line-height:20px;color:var(--nutui-color-mask, rgba(0, 0, 0, .7));z-index:999;cursor:pointer}.nut-uploader__preview-img{position:relative;width:var(--nutui-uploader-image-height, 101px);height:var(--nutui-uploader-image-height, 101px);background:#f8f8f8;border-radius:var(--nutui-uploader-image-border-radius, var(--nutui-radius-1, 8px));overflow:hidden}.nut-uploader__preview-img.col-3{width:var(--nutui-uploader-image-width, 101px);height:var(--nutui-uploader-image-height, 101px)}.nut-uploader__preview-img.col-4{width:70px;height:70px}.nut-uploader__preview-img.multiple{width:100%;height:100%;aspect-ratio:1/1}.nut-uploader__preview-img i{color:var(--nutui-color-title, #0d0d0d)}.nut-uploader__preview-img .tips{position:absolute;bottom:0;left:0;font-size:var(--nutui-font-size-1, 13px);color:var(--nutui-color-white, #ffffff);text-align:center;box-sizing:border-box;height:var(--nutui-uploader-preview-tips-height, 24px);line-height:var(--nutui-uploader-preview-tips-height, 24px);border-radius:var(--nutui-uploader-image-border-radius, var(--nutui-radius-1, 8px));border-top-left-radius:0;border-top-right-radius:0;padding:var(--nutui-uploader-preview-tips-padding, 0 var(--nutui-spacing-0, 4px));background:var(--nutui-uploader-preview-tips-background, var(--nutui-color-mask, rgba(0, 0, 0, .7)));width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nut-uploader__preview-img__c{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:initial;border-radius:var(--nutui-uploader-image-border-radius, var(--nutui-radius-1, 8px))}.nut-uploader__preview-img__file{height:100%;width:100%;display:flex;align-items:center;justify-content:center;transition:all .3s}.nut-uploader__preview-img__file__name{display:flex;width:90%;font-size:var(--nutui-font-size-1, 13px);color:var(--nutui-color-text, #666666);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all}.nut-uploader__preview-img__file__name.error{color:red}.nut-uploader__preview-img__file__name.success{color:#1890ff}.nut-uploader__preview-img__file__name .nut-icon-link:before{margin-left:-45%;margin-top:-45%;transform:none}