@itwin/itwinui-css/css/file-upload.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-file-upload{vertical-align:baseline;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);border:none;margin:0;padding:0;line-height:1;display:flex;position:relative}.iui-file-upload>.iui-content{visibility:hidden;align-content:center;place-items:center;gap:var(--iui-size-xs);background-color:var(--iui-color-background-backdrop);border:1px solid var(--iui-color-background-backdrop);border-radius:var(--iui-border-radius-1);block-size:100%;inline-size:100%;display:grid;position:absolute;inset-block-start:0;inset-inline-start:0}.iui-file-upload>.iui-content .iui-browse-input{clip-path:inset(50%)!important;white-space:nowrap!important;block-size:1px!important;inline-size:1px!important;position:absolute!important;overflow:hidden!important}.iui-file-upload>.iui-content>svg,.iui-file-upload>.iui-content :is(.iui-template-icon,.iui-template-icon>svg){inline-size:var(--iui-size-xl);block-size:var(--iui-size-xl);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-file-upload>.iui-content>svg,.iui-file-upload>.iui-content :is(.iui-template-icon,.iui-template-icon>svg){fill:CanvasText}}.iui-file-upload>.iui-content:only-child{visibility:visible;position:relative}.iui-file-upload>.iui-content:only-child:focus-within{outline:2px solid var(--iui-color-text-accent);outline-offset:-2px}.iui-file-upload>.iui-content .iui-template-text{gap:var(--iui-size-2xs);margin-inline-start:var(--iui-size-l);display:grid}.iui-file-upload>.iui-content .iui-template-text>label{font-weight:var(--iui-font-weight-bold)}.iui-file-upload.iui-drag>.iui-content{visibility:visible;background-color:var(--iui-color-background-accent-muted);border-color:var(--iui-color-border-accent);color:var(--iui-color-text-accent)}.iui-file-upload.iui-drag>.iui-content svg,.iui-file-upload.iui-drag>.iui-content .iui-template-icon{fill:var(--iui-color-icon-accent)}.iui-file-upload-template{padding:var(--iui-size-m);justify-content:center;align-items:center;display:flex}.iui-file-card{vertical-align:baseline;align-items:center;gap:var(--iui-size-s);padding:0;padding:var(--iui-size-m);border-radius:var(--iui-border-radius-1);background-color:var(--iui-color-background);border:none;border:1px solid var(--iui-color-border-subtle);color:var(--iui-color-text);inline-size:100%;margin:0;line-height:1;display:flex}.iui-file-card:focus-within{outline:2px solid var(--iui-color-text-accent);outline-offset:-2px}.iui-file-card-icon,.iui-file-card-icon svg{inline-size:var(--iui-size-xl);block-size:var(--iui-size-xl);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-file-card-icon,.iui-file-card-icon svg{fill:CanvasText}}.iui-file-card-text{gap:var(--iui-size-2xs);display:grid}.iui-file-card-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-file-card-description{white-space:nowrap;text-overflow:ellipsis;font-size:var(--iui-font-size-0);color:var(--iui-color-text-muted);overflow:hidden}.iui-file-card-action{font-weight:var(--iui-font-weight-bold);margin-inline-start:auto}.iui-file-card-empty{vertical-align:baseline;justify-content:center;align-items:center;gap:var(--iui-size-l);padding:0;padding:var(--iui-size-m);border-radius:var(--iui-border-radius-1);border:none;border:1px solid var(--iui-color-border);inline-size:100%;margin:0;line-height:1;display:flex}.iui-file-card-empty:focus-within{outline:2px solid var(--iui-color-text-accent);outline-offset:-2px}.iui-file-card-empty-icon,.iui-file-card-empty-icon svg{fill:var(--iui-color-icon-muted);inline-size:var(--iui-size-xl);block-size:var(--iui-size-xl);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-file-card-empty-icon,.iui-file-card-empty-icon svg{fill:CanvasText}}.iui-file-card-empty-action{gap:var(--iui-size-2xs);display:grid}.iui-file-card-empty-action label{font-weight:var(--iui-font-weight-bold)}