@sms-frontend/components/lib/Upload/style/index.css

SMS Design React UI Library.

.sms-upload{display:inline-block;max-width:100%}.sms-upload-type-picture-card{vertical-align:top}.sms-upload-drag{width:100%}.sms-upload-hide{display:none}.sms-upload-disabled .sms-upload-trigger-picture,.sms-upload-disabled .sms-upload-trigger-picture:hover{cursor:not-allowed;border-color:var(--color-neutral-4);background-color:var(--color-fill-1);color:var(--color-text-4)}.sms-upload-disabled .sms-upload-trigger-drag,.sms-upload-disabled .sms-upload-trigger-drag:hover{cursor:not-allowed;border-color:var(--color-text-4);background-color:var(--color-fill-1)}.sms-upload-disabled .sms-upload-trigger-drag .sms-icon-plus,.sms-upload-disabled .sms-upload-trigger-drag .sms-upload-trigger-drag-text,.sms-upload-disabled .sms-upload-trigger-drag:hover .sms-icon-plus,.sms-upload-disabled .sms-upload-trigger-drag:hover .sms-upload-trigger-drag-text{color:var(--color-text-4)}.sms-upload-disabled .sms-upload-trigger-tip{color:var(--color-text-4)}.sms-upload-trigger{cursor:pointer;display:inline-block;vertical-align:top;width:100%}.sms-upload-trigger-tip{color:var(--color-text-3);margin-top:4px;font-size:12px;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sms-upload-trigger-picture{min-width:80px;height:80px;color:var(--color-text-2);text-align:center;margin-bottom:0;background:var(--color-fill-2);border-radius:var(--border-radius-small);border:1px dashed var(--color-neutral-3);-webkit-transition:all .1s cubic-bezier(0,0,1,1);transition:all .1s cubic-bezier(0,0,1,1)}.sms-upload-trigger-picture:hover{border-color:var(--color-neutral-4);background-color:var(--color-fill-3);color:var(--color-text-2)}.sms-upload-trigger-picture-text{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.sms-upload-trigger-drag{width:100%;border-radius:var(--border-radius-small);border:1px dashed var(--color-neutral-3);background-color:var(--color-fill-1);text-align:center;-webkit-transition:all .2s ease;transition:all .2s ease;color:var(--color-text-1);padding:50px 0}.sms-upload-trigger-drag .sms-icon-plus{font-size:14px;margin-bottom:24px;color:var(--color-text-2)}.sms-upload-trigger-drag:hover{border-color:var(--color-neutral-4);background-color:var(--color-fill-3)}.sms-upload-trigger-drag:hover .sms-upload-trigger-drag-text{color:var(--color-text-1)}.sms-upload-trigger-drag:hover .sms-icon-plus{color:var(--color-text-2)}.sms-upload-trigger-drag-active{border-color:rgb(var(--primary-6));color:var(--color-text-1);background-color:var(--color-primary-light-1)}.sms-upload-trigger-drag-active .sms-upload-trigger-drag-text{color:var(--color-text-1)}.sms-upload-trigger-drag-active .sms-icon-plus{color:rgb(var(--primary-6))}.sms-upload-trigger-drag .sms-upload-trigger-tip{margin-top:0}.sms-upload-trigger-drag-text{color:var(--color-text-1);line-height:1.5;font-size:14px}.sms-upload-hide+.sms-upload-list{margin-top:0}.sms-upload-list{width:100%}.sms-upload-list-type--picture-list,.sms-upload-list-type-text{margin-top:24px}.sms-upload-list-type--picture-list .sms-upload-list-item:first-of-type,.sms-upload-list-type-text .sms-upload-list-item:first-of-type{margin-top:0}.sms-upload-list-file-icon{line-height:16px;font-size:16px;color:rgb(var(--primary-6));margin-right:12px}.sms-upload-list-preview-icon{cursor:pointer}.sms-upload-list-error-icon{cursor:pointer;color:rgb(var(--danger-6));font-size:14px;margin-left:4px}.sms-upload-list-success-icon{cursor:pointer;color:rgb(var(--success-6));font-size:14px;line-height:14px}.sms-upload-list-remove-icon{position:relative;cursor:pointer;font-size:14px}.sms-upload-list-cancel-icon,.sms-upload-list-start-icon{position:absolute;color:var(--color-white);-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);top:50%;left:50%;font-size:12px}.sms-upload-list-reupload-icon{cursor:pointer;color:rgb(var(--primary-6));font-size:14px;-webkit-transition:all .2s ease;transition:all .2s ease}.sms-upload-list-reupload-icon:active,.sms-upload-list-reupload-icon:hover{color:rgb(var(--primary-7))}.sms-upload-list-status{position:relative;cursor:pointer;line-height:12px}.sms-upload-list-status:hover .sms-progress-circle-mask{stroke:rgba(var(--gray-10),.2)}.sms-upload-list-status:hover .sms-progress-circle-path{stroke:rgb(var(--primary-7))}.sms-upload-list-item-done .sms-upload-list-item-text-file-icon{color:rgb(var(--success-6))}.sms-upload-list-item{-webkit-box-sizing:border-box;box-sizing:border-box;padding-right:24px;margin-top:12px;position:relative}.sms-upload-list-item-operation{font-size:12px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:var(--color-text-2)}.sms-upload-list-item-operation .sms-upload-list-remove-icon{font-size:inherit}.sms-upload-list-item-text{font-size:14px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius-small);width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-fill-1);padding:8px 0;padding-left:12px;padding-right:10px;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.sms-upload-list-item-text-content{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-transition:background-color .1s cubic-bezier(0,0,1,1);transition:background-color .1s cubic-bezier(0,0,1,1)}.sms-upload-list-item-text-thumbnail{height:40px;width:40px;margin-right:12px;-ms-flex-negative:0;flex-shrink:0}.sms-upload-list-item-text-thumbnail img{width:100%;height:100%}.sms-upload-list-item-text-name{white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-text-1);font-size:14px;text-overflow:ellipsis;line-height:1.4286;margin-right:10px}.sms-upload-list-item-text-name-link{cursor:pointer;text-decoration:none;overflow:hidden;color:rgb(var(--link-6));text-overflow:ellipsis}.sms-upload-list-item-text-name-text{overflow:hidden;text-overflow:ellipsis}.sms-upload-list-item-done .sms-upload-list-status,.sms-upload-list-item-error .sms-upload-list-status{display:none}.sms-upload-list-type-text .sms-upload-list-item-error .sms-upload-list-item-text-name,.sms-upload-list-type-text .sms-upload-list-item-error .sms-upload-list-item-text-name-link{color:rgb(var(--danger-6))}.sms-upload-list.sms-upload-list-type-picture-card{display:inline;vertical-align:top}.sms-upload-list.sms-upload-list-type-picture-card .sms-upload-list-status{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);margin-left:0}.sms-upload-list-type-picture-card .sms-upload-list-item{display:inline-block;vertical-align:top;margin-top:0;padding-right:0;margin-right:8px;margin-bottom:8px;overflow:hidden;-webkit-transition:all .2s cubic-bezier(.34,.69,.1,1);transition:all .2s cubic-bezier(.34,.69,.1,1)}.sms-upload-list-type-picture-card .sms-upload-list-item-error .sms-upload-list-item-picture-mask{opacity:1}.sms-upload-list-item-picture{width:80px;height:80px;line-height:80px;position:relative;overflow:hidden;border-radius:var(--border-radius-small);-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;vertical-align:top}.sms-upload-list-item-picture img{width:100%;height:100%}.sms-upload-list-item-picture-mask{cursor:pointer;position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);color:var(--color-white);font-size:16px;line-height:80px;opacity:0;-webkit-transition:opacity .1s cubic-bezier(0,0,1,1);transition:opacity .1s cubic-bezier(0,0,1,1)}.sms-upload-list-item-picture-operation{display:none;font-size:14px}.sms-upload-list-item-picture-operation .sms-upload-list-reupload-icon{color:var(--color-white)}.sms-upload-list-item-picture-operation .sms-upload-list-preview-icon+.sms-upload-list-remove-icon,.sms-upload-list-item-picture-operation .sms-upload-list-reupload-icon+.sms-upload-list-remove-icon{margin-left:20px}.sms-upload-list-item-picture-error-tip .sms-upload-list-error-icon{font-size:26px;color:var(--color-white)}.sms-upload-list-item-picture-mask:hover,.sms-upload-list-item-picture-mask:hover .sms-upload-list-item-picture-operation{opacity:1;display:block}.sms-upload-list-item-picture-mask:hover .sms-upload-list-item-picture-error-tip{display:none}.sms-upload-list-type-picture-list .sms-upload-list-item-text{padding-top:8px;padding-bottom:8px}.sms-upload-list-type-picture-list .sms-upload-list-item-error .sms-upload-list-item-text{background-color:var(--color-danger-light-1)}.sms-upload-list-type-picture-list .sms-upload-list-item-error .sms-upload-list-item-text-name,.sms-upload-list-type-picture-list .sms-upload-list-item-error .sms-upload-list-item-text-name-link{color:rgb(var(--danger-6))}.sms-upload-slide-up-enter{opacity:0}.sms-upload-slide-up-enter-active{opacity:1;-webkit-transition:opacity .2s cubic-bezier(.34,.69,.1,1);transition:opacity .2s cubic-bezier(.34,.69,.1,1)}.sms-upload-slide-up-exit{opacity:1}.sms-upload-slide-up-exit-active{opacity:0;overflow:hidden;margin:0;-webkit-transition:opacity .1s cubic-bezier(0,0,1,1),height .3s cubic-bezier(.34,.69,.1,1) .1s,margin .3s cubic-bezier(.34,.69,.1,1) .1s;transition:opacity .1s cubic-bezier(0,0,1,1),height .3s cubic-bezier(.34,.69,.1,1) .1s,margin .3s cubic-bezier(.34,.69,.1,1) .1s}.sms-upload-list-item.sms-upload-slide-inline-enter{opacity:0}.sms-upload-list-item.sms-upload-slide-inline-enter-active{opacity:1;-webkit-transition:opacity .2s cubic-bezier(0,0,1,1);transition:opacity .2s cubic-bezier(0,0,1,1)}.sms-upload-list-item.sms-upload-slide-inline-exit{opacity:1}.sms-upload-list-item.sms-upload-slide-inline-exit-active{opacity:0;overflow:hidden;margin:0;-webkit-transition:opacity .1s cubic-bezier(0,0,1,1),width .3s cubic-bezier(.34,.69,.1,1) .1s,margin .3s cubic-bezier(.34,.69,.1,1) .1s;transition:opacity .1s cubic-bezier(0,0,1,1),width .3s cubic-bezier(.34,.69,.1,1) .1s,margin .3s cubic-bezier(.34,.69,.1,1) .1s}