smart-webcomponents-react/source/styles/components/smart.fileupload.css

[](https://jqwidgets.com/license/)

.smart-circular-progress-bar.smart-element,smart-circular-progress-bar.smart-element,smart-progress-bar.smart-element{border:none}.smart-circular-progress-bar.smart-element:focus>.smart-container,smart-circular-progress-bar.smart-element:focus>.smart-container,smart-progress-bar.smart-element:focus>.smart-container{border-color:var(--smart-outline)}.smart-circular-progress-bar.smart-container,.smart-circular-progress-bar>.smart-container,smart-circular-progress-bar.smart-container,smart-circular-progress-bar>.smart-container,smart-progress-bar.smart-container,smart-progress-bar>.smart-container{border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);overflow:hidden;position:relative;border-width:var(--smart-border-width);border-style:solid;border-color:var(--smart-border);color:var(--smart-background-color)}.smart-circular-progress-bar .smart-label,smart-circular-progress-bar .smart-label,smart-progress-bar .smart-label{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;text-align:center;color:var(--smart-background-color)}smart-progress-bar{width:var(--smart-progress-bar-default-width);height:var(--smart-progress-bar-default-height)}smart-progress-bar .smart-label{width:auto;color:var(--smart-outline)}smart-progress-bar .smart-value{outline:0;height:100%;width:100%;box-sizing:border-box;position:absolute;border:1px solid var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active);transform-origin:left}smart-progress-bar .smart-value.smart-value-animation{animation:indeterminate 3s infinite linear}smart-progress-bar.primary .smart-value{border:1px solid var(--smart-primary);background-color:var(--smart-primary)}smart-progress-bar.secondary .smart-value{border:1px solid var(--smart-secondary);background-color:var(--smart-secondary)}smart-progress-bar.success .smart-value{border:1px solid var(--smart-success);background-color:var(--smart-success)}smart-progress-bar.info .smart-value{border:1px solid var(--smart-info);background-color:var(--smart-info)}smart-progress-bar.warning .smart-value{border:1px solid var(--smart-warning);background-color:var(--smart-warning)}smart-progress-bar.error .smart-value{border:1px solid var(--smart-error);background-color:var(--smart-error)}smart-progress-bar.light .smart-value{border:1px solid var(--smart-light);background-color:var(--smart-light)}smart-progress-bar.dark .smart-value{border:1px solid var(--smart-dark);background-color:var(--smart-dark)}smart-progress-bar:not([animation=none]) .smart-value{transition:.2s ease-in-out}smart-progress-bar[inverted] .smart-value,smart-progress-bar[orientation][inverted] .smart-value{transform-origin:right}smart-progress-bar[inverted] .smart-value.smart-value-animation{animation:indeterminate-inverted 3s infinite linear}smart-progress-bar[orientation] .smart-value{transform-origin:left}smart-progress-bar[orientation=vertical]{width:var(--smart-progress-bar-default-height);height:var(--smart-progress-bar-default-width)}smart-progress-bar[orientation=vertical][inverted] .smart-value{transform-origin:left bottom}smart-progress-bar[orientation=vertical] .smart-value{transform-origin:left top}smart-progress-bar[orientation=vertical] .smart-value.smart-value-animation{animation:indeterminate-vertical 3s infinite linear}smart-progress-bar[orientation=vertical] .smart-label{width:100%}smart-progress-bar[inverted][orientation=vertical] .smart-value.smart-value-animation{animation:indeterminate-vertical-inverted 3s infinite linear}.smart-circular-progress-bar,smart-circular-progress-bar{width:var(--smart-circular-progress-bar-default-size);height:var(--smart-circular-progress-bar-default-size)}.smart-circular-progress-bar.smart-container,.smart-circular-progress-bar>.smart-container,smart-circular-progress-bar.smart-container,smart-circular-progress-bar>.smart-container{border-radius:50%}.smart-circular-progress-bar .smart-value-animation-ms,smart-circular-progress-bar .smart-value-animation-ms{stroke-dashoffset:114}.smart-circular-progress-bar svg:first-of-type,smart-circular-progress-bar svg:first-of-type{position:absolute;border-radius:50%;pointer-events:none}.smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation,smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation{animation:circle 2s infinite linear}.smart-circular-progress-bar .smart-label-container,smart-circular-progress-bar .smart-label-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;box-sizing:content-box;border-radius:50%;background-color:transparent;border-style:solid;border-width:var(--smart-border-width);border-color:var(--smart-border);width:calc(100% - var(--smart-circular-progress-bar-fill-size));height:calc(100% - var(--smart-circular-progress-bar-fill-size))}.smart-circular-progress-bar .smart-value,.smart-circular-progress-bar .smart-value-path,smart-circular-progress-bar .smart-value,smart-circular-progress-bar .smart-value-path{stroke-width:var(--smart-circular-progress-bar-fill-size);fill:transparent;stroke-dasharray:314.159}.smart-circular-progress-bar .smart-value,smart-circular-progress-bar .smart-value{stroke:var(--smart-ui-state-active)}.smart-circular-progress-bar .smart-value-path,smart-circular-progress-bar .smart-value-path{stroke-dashoffset:0;stroke:transparent}.smart-circular-progress-bar.primary .smart-value,smart-circular-progress-bar.primary .smart-value{stroke:var(--smart-primary)}.smart-circular-progress-bar.secondary .smart-value,smart-circular-progress-bar.secondary .smart-value{stroke:var(--smart-secondary)}.smart-circular-progress-bar.success .smart-value,smart-circular-progress-bar.success .smart-value{stroke:var(--smart-success)}.smart-circular-progress-bar.info .smart-value,smart-circular-progress-bar.info .smart-value{stroke:var(--smart-info)}.smart-circular-progress-bar.warning .smart-value,smart-circular-progress-bar.warning .smart-value{stroke:var(--smart-warning)}.smart-circular-progress-bar.error .smart-value,smart-circular-progress-bar.error .smart-value{stroke:var(--smart-error)}.smart-circular-progress-bar.light .smart-value,smart-circular-progress-bar.light .smart-value{stroke:var(--smart-light)}.smart-circular-progress-bar.dark .smart-value,smart-circular-progress-bar.dark .smart-value{stroke:var(--smart-dark)}.smart-circular-progress-bar:not([animation=none]) .smart-value,smart-circular-progress-bar:not([animation=none]) .smart-value{transition:stroke-dashoffset 1s linear}.smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation,smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation{animation:circle-inverted 2s infinite linear}.smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type,.smart-circular-progress-bar[value=null][inverted] svg:first-of-type,smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type,smart-circular-progress-bar[value=null][inverted] svg:first-of-type{animation:rotate-circle-inverted 1s infinite linear}.smart-circular-progress-bar[indeterminate] svg:first-of-type,.smart-circular-progress-bar[value=null] svg:first-of-type,smart-circular-progress-bar[indeterminate] svg:first-of-type,smart-circular-progress-bar[value=null] svg:first-of-type{animation:rotate-circle 1s infinite linear}.barber-shop-effect .smart-value{background-image:linear-gradient(45deg,rgba(0,0,0,.2) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.2) 75%,transparent 75%,transparent);background-size:5rem 5rem;background-position:0 -244rem;animation:stripes 10s linear infinite;animation-direction:normal}.barber-shop-effect[inverted] .smart-value,.barber-shop-effect[orientation=vertical] .smart-value{animation-direction:reverse}@keyframes stripes{0%{background-position:0 0}100%{background-position:60rem 0}}@keyframes indeterminate{0%{left:-100%;transform:scaleX(.4);transform-origin:left}20%{left:-40%;transform:scaleX(.3);transform-origin:left}35%{left:35%;transform:scaleX(.4);transform-origin:left}50%{left:75%;transform:scaleX(.6);transform-origin:left}55%{left:100%;transform:scaleX(.7);transform-origin:left}55.99%{left:100%;transform:scaleX(0);transform-origin:left}56%{left:-100%;transform:scaleX(0);transform-origin:left}56.99%{left:-100%;transform:scaleX(.6);transform-origin:left}75%{left:-5%;transform:scaleX(.6);transform-origin:left}80%{left:30%;transform:scaleX(.5);transform-origin:left}85%{left:50%;transform:scaleX(.4);transform-origin:left}90%{left:75%;transform:scaleX(.3);transform-origin:left}95%{left:95%;transform:scaleX(.2);transform-origin:left}98%{left:100%;transform:scaleX(.2);transform-origin:left}99.99%{left:100%;transform:scaleX(0);transform-origin:left}100%{left:-100%;transform:scaleX(0);transform-origin:left}}@keyframes indeterminate-vertical{0%{bottom:-100%;transform:scaleY(.4);transform-origin:bottom}20%{bottom:-40%;transform:scaleY(.3);transform-origin:bottom}35%{bottom:35%;transform:scaleY(.4);transform-origin:bottom}50%{bottom:75%;transform:scaleY(.6);transform-origin:bottom}55%{bottom:100%;transform:scaleY(.7);transform-origin:bottom}55.99%{bottom:100%;transform:scaleY(0);transform-origin:bottom}56%{bottom:-100%;transform:scaleY(0);transform-origin:bottom}56.99%{bottom:-100%;transform:scaleY(.6);transform-origin:bottom}75%{bottom:-5%;transform:scaleY(.6);transform-origin:bottom}80%{bottom:30%;transform:scaleY(.5);transform-origin:bottom}85%{bottom:50%;transform:scaleY(.4);transform-origin:bottom}90%{bottom:75%;transform:scaleY(.3);transform-origin:bottom}95%{bottom:95%;transform:scaleY(.2);transform-origin:bottom}98%{bottom:100%;transform:scaleY(.2);transform-origin:bottom}99.99%{bottom:100%;transform:scaleY(0);transform-origin:bottom}100%{bottom:-100%;transform:scaleY(0);transform-origin:bottom}}@keyframes circle{0%{stroke-dashoffset:314}5%{stroke-dashoffset:164}25%{stroke-dashoffset:104}}@keyframes circle-inverted{0%{stroke-dashoffset:-314}5%{stroke-dashoffset:-164}25%{stroke-dashoffset:-104}}@keyframes rotate-circle{50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}@keyframes rotate-circle-inverted{50%{transform:rotate(-180deg)}75%{transform:rotate(-270deg)}100%{transform:rotate(-360deg)}}smart-circular-progress-bar[right-to-left] .smart-label,smart-progress-bar[right-to-left] .smart-label{direction:rtl}smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value,smart-progress-bar[right-to-left][orientation=horizontal] .smart-value{transform-origin:right}smart-progress-bar[right-to-left]:not([orientation=vertical])[inverted] .smart-value,smart-progress-bar[right-to-left][orientation=horizontal][inverted] .smart-value{transform-origin:left}smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value.smart-value-animation,smart-progress-bar[right-to-left][orientation=horizontal] .smart-value.smart-value-animation{animation:indeterminate-inverted 3s infinite linear}smart-progress-bar[right-to-left][inverted]:not([orientation=vertical]) .smart-value.smart-value-animation,smart-progress-bar[right-to-left][inverted][orientation=horizontal] .smart-value.smart-value-animation{animation:indeterminate 3s infinite linear}smart-circular-progress-bar[right-to-left][inverted] svg:first-of-type .smart-value.smart-value-animation{animation:circle 2s infinite linear}smart-circular-progress-bar[right-to-left] svg:first-of-type .smart-value.smart-value-animation{animation:circle-inverted 2s infinite linear}smart-circular-progress-bar[right-to-left][indeterminate] svg:first-of-type,smart-circular-progress-bar[right-to-left][value=null] svg:first-of-type{animation:rotate-circle-inverted 1s infinite linear}smart-circular-progress-bar[right-to-left][indeterminate][inverted] svg:first-of-type,smart-circular-progress-bar[right-to-left][value=null][inverted] svg:first-of-type{animation:rotate-circle 1s infinite linear}.barber-shop-effect[right-to-left] .smart-value{animation-direction:reverse}.barber-shop-effect[right-to-left][inverted] .smart-value{animation-direction:normal}
smart-file-upload{display:inline-block;width:var(--smart-file-upload-default-width);font-size:var(--smart-file-upload-font-size);font-family:var(--smart-file-upload-font-family);color:var(--smart-file-upload-color);overflow:hidden;box-sizing:border-box;border:var(--smart-file-upload-border-width) dashed var(--smart-file-upload-border);background-color:var(--smart-file-upload-background);min-width:200px;min-height:100px}smart-file-upload .smart-selected-files .smart-file.smart-hidden,smart-file-upload .smart-total-files.smart-hidden,smart-file-upload[show-progress] .smart-file smart-progress-bar{display:none}smart-file-upload[disabled]{opacity:.55;cursor:default}smart-file-upload[show-progress] .smart-file smart-progress-bar[value]{display:block}.smart-file.smart-uploading-start:before{width:100%;height:100%;position:absolute;left:0;top:0;font-family:arial;content:var(--smart-file-upload-text-content-uploading-start);background-color:rgba(193,193,193,.4117647059);opacity:1;display:flex;justify-content:flex-end;flex-direction:column;box-sizing:border-box;font-size:11px;color:#737373;padding:0 0 2px 5px;pointer-events:none;z-index:1;animation:connecting 1s linear infinite}.smart-file.smart-error:before,.smart-file.smart-pause:before,.smart-file.smart-uploading:before{height:100%;justify-content:flex-end;font-size:11px;z-index:1;position:absolute;font-family:arial;padding:0 0 2px 5px;width:100%;pointer-events:none;box-sizing:border-box;top:0;left:0}.smart-file.smart-uploading:before{content:var(--smart-file-upload-text-content-uploading);background-color:rgba(193,193,193,.4117647059);opacity:1;display:flex;flex-direction:column;color:var(--smart-ui-state)}.smart-file.smart-uploading .smart-item-upload-button{pointer-events:none}.smart-file.smart-uploading .smart-item-name{opacity:.2;user-select:none}.smart-file.smart-pause:before{content:var(--smart-file-upload-text-content-pause);background-color:rgba(255,0,0,.1882352941);border-radius:3px;opacity:.8;display:flex;flex-direction:column;color:#8a0000}.smart-file.smart-error:before{content:var(--smart-file-upload-text-content-error);background-color:var(--smart-error);border-radius:var(--smart-error-border-radius);opacity:0;display:flex;flex-direction:column;color:var(--smart-on-error);animation:error 6s linear 1}.smart-file.smart-error smart-progress-bar,.smart-selected-files .smart-uploading .smart-item-upload-button{opacity:.3}.smart-file smart-progress-bar{display:none;width:100%;height:4px;position:absolute;bottom:0;left:0}.smart-file smart-progress-bar .smart-container{border-style:none}.smart-file smart-progress-bar .smart-value{background-color:orange}.smart-file-upload .smart-file-upload-container,.smart-file-upload .smart-file-upload-footer,.smart-file-upload .smart-file-upload-header{padding:5px;width:100%;box-sizing:border-box}.smart-file-upload .smart-browse-button{display:block;margin:4px;width:var(--smart-file-upload-browse-button-width);height:var(--smart-file-upload-browse-button-height)}.smart-file-upload .smart-cancel-all-button,.smart-file-upload .smart-pause-all-button,.smart-file-upload .smart-upload-all-button{width:var(--smart-file-upload-footer-button-width);height:var(--smart-file-upload-footer-button-height);margin:4px}.smart-file-upload .smart-browse-input{display:none}.smart-file-upload .smart-drop-zone{display:none;width:100%;height:100px}.smart-file-upload .smart-total-files{font-family:arial;font-size:12px;color:gray;display:block;box-sizing:border-box;padding:0 0 2px 5px}.smart-file-upload .smart-total-files:empty,.smart-file-upload[hide-footer] .smart-file-upload-footer{display:none}.smart-file-upload[disabled] .smart-file-upload-container{pointer-events:none;user-select:none}.smart-file-upload[drop-zone] .smart-drop-zone{display:block}.smart-file-upload[drop-zone] .smart-overflow .smart-drop-zone{display:none}.smart-drop-zone{width:100%;height:100%;background-color:var(--smart-background);position:relative;box-sizing:border-box;border:1px dotted #d3d3d3}.smart-drop-zone:after{font-family:var(--smart-font-family-icon);overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:center;flex-direction:column;height:100%;width:100%;text-align:center;content:var(--smart-file-upload-text-content-drop-zone);color:var(--smart-ui-state);box-sizing:border-box;border:5px dashed transparent;transition:border .5s ease-out}.smart-drop-zone.smart-drag-over:after,[data-theme=modern] .smart-drop-zone.smart-drag-over:after{content:var(--smart-file-upload-text-content-drop-zone-over);transition:border .5s ease-out;animation:drop-zone 1s ease-in infinite}.smart-drop-zone.smart-drag-over:after{font-size:50px;border:3px dashed var(--smart-background-border)}[data-theme=modern]{--smart-file-upload-text-content-drop-zone-over:"Drop here"}[data-theme=modern] .smart-drop-zone{border:2px dashed var(--smart-surface);width:100%;background-size:contain;background-repeat:no-repeat;background-position:bottom center;padding:10px;display:flex;justify-content:center;align-items:center}[data-theme=modern] .smart-drop-zone:after{font-family:Verdana;font-size:.875rem;font-weight:400;line-height:1.5}[data-theme=modern] .smart-drop-zone:hover{border-color:var(--smart-primary);background-color:rgba(var(--smart-primary-rgb),.1)}[data-theme=modern] .smart-drop-zone.smart-drag-over:after{border-color:transparent;font-size:2.5rem}.smart-selected-files{width:100%;height:100%;display:block;box-sizing:border-box;padding:2px}.smart-selected-files .smart-file{height:auto;position:relative;display:block;box-sizing:border-box;border:1px solid #d3d3d3;padding:10px;border-radius:3px;margin-bottom:1px;background-color:#fafafa;transition:border-color .5s ease}.smart-selected-files .smart-file:hover{transition:border-color .5s ease;border-color:gray}.smart-selected-files .smart-item-pause-button{pointer-events:none;box-sizing:border-box;height:16px;position:relative;width:16px;color:#999;transition:color .5s ease;display:none}.smart-selected-files .smart-item-pause-button:after{font-family:var(--smart-font-family-icon);position:absolute;left:0;top:0;font-size:16px;text-shadow:2px 2px 2px #d3d3d3;content:var(--smart-icon-close)}.smart-selected-files .smart-item-cancel-button{display:inline-block;box-sizing:border-box;height:16px;position:relative;width:16px;color:#999;transition:color .5s ease}.smart-selected-files .smart-item-cancel-button:after{font-family:var(--smart-font-family-icon);position:absolute;left:0;top:0;font-size:16px;text-shadow:2px 2px 2px #d3d3d3;content:var(--smart-icon-close)}.smart-selected-files .smart-item-cancel-button:hover{cursor:pointer;transition:color .5s ease;color:orange}.smart-selected-files .smart-item-upload-button{display:inline-block;box-sizing:border-box;height:16px;position:relative;width:16px;color:#999;transition:color .5s ease}.smart-selected-files .smart-item-upload-button:after{font-family:var(--smart-font-family-icon);content:var(--smart-icon-up);position:absolute;left:0;top:0;font-size:16px;text-shadow:2px 2px 2px #d3d3d3}.smart-selected-files .smart-item-upload-button:hover{cursor:pointer;color:var(--smart-success);transition:color .5s ease}.smart-selected-files .smart-item-name{display:inline-block;box-sizing:border-box;position:relative;width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;height:auto}.smart-selected-files .smart-uploading .smart-item-name{width:calc(100% - 60px);overflow:hidden;text-overflow:ellipsis;height:auto}.smart-selected-files .smart-uploading .smart-item-pause-button{display:inline-block;cursor:pointer;pointer-events:all;transition:color .5s,opacity .5s ease;color:#dc1919;opacity:.5}.smart-selected-files .smart-uploading .smart-item-pause-button:hover{transition:color .5s,opacity .5s ease;color:red;opacity:1}.smart-selected-files .smart-uploading .smart-item-cancel-button{display:inline-block;cursor:pointer;pointer-events:all;transition:color .5s,opacity .5s ease;opacity:.5;color:#ff8c00}.smart-selected-files .smart-uploading .smart-item-cancel-button:hover{transition:color .5s,opacity .5s ease;color:orange;opacity:1}.smart-drop-zone-square{position:relative}.smart-drop-zone-square:before{content:"";display:block;padding-bottom:100%}.smart-drop-zone-square .smart-drop-zone{position:absolute;top:0;bottom:0;left:0;right:0}.smart-drop-zone-square.smart-drop-zone-small{min-width:115px}.smart-drop-zone-small{position:relative;width:auto;display:inline-block}.smart-drop-zone-small .smart-drop-zone.smart-drag-over:after{font-size:1.25rem}.smart-drop-zone-images-only .smart-drop-zone{display:flex;align-items:center;flex-flow:column;justify-content:space-evenly}.smart-drop-zone-images-only .smart-drop-zone:after{height:auto}.smart-drop-zone-images-only .smart-drop-zone:before{display:block;content:"";background-image:url(../images/dropable_zone_image.svg);width:70px;height:55px;background-size:contain;background-position:center center}@-webkit-keyframes connecting{0%,100%{color:rgba(115,115,115,.3137254902)}50%{color:rgba(115,115,115,.6)}}@-webkit-keyframes drop-zone{0%,100%{color:rgba(177,177,177,0)}50%{color:rgba(177,177,177,.6)}}@-webkit-keyframes rotating{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes error{0%{opacity:.8;background-color:rgba(255,0,0,.0823529412)}3%,9%{background-color:rgba(255,0,0,.2509803922)}12%,6%{background-color:rgba(255,0,0,.0823529412)}80%{opacity:.8}100%{opacity:0}}.smart-drop-zone[right-to-left],.smart-file[right-to-left],smart-file-upload[right-to-left]>.smart-container{direction:rtl}