@shopify/polaris/dist/esnext/components/DropZone/DropZone.css

Shopify’s product component library

.Polaris-DropZone_1ehhx{ position:relative; display:flex; justify-content:center; background-color:var(--p-surface, white); border-radius:var(--p-border-radius-base, 3px); }

.Polaris-DropZone_1ehhx::after{ content:''; position:absolute; z-index:29; top:0; right:0; bottom:0; left:0; border:0.2rem dashed transparent; border-radius:var(--p-border-radius-base, 3px); pointer-events:none; }

.Polaris-DropZone--hasOutline_1z0fh{ padding:0.2rem; }

.Polaris-DropZone--hasOutline_1z0fh::after{ border-color:var(--p-border, #919eab); }

.Polaris-DropZone--hasOutline_1z0fh:not(.Polaris-DropZone--isDisabled_7e21n):hover{ cursor:pointer; background-color:var(--p-surface-hovered, #f4f5fa); }

.Polaris-DropZone--hasOutline_1z0fh:not(.Polaris-DropZone--isDisabled_7e21n):hover:not(.Polaris-DropZone--newDesignLanguage_1rik8)::after{ border-color:var(--p-border, #5c6ac4); }

.Polaris-DropZone--focused_17w4h:not(.Polaris-DropZone--newDesignLanguage_1rik8):not(.Polaris-DropZone--isDisabled_7e21n){ background-color:var(--p-surface-hovered, #f4f5fa); }

.Polaris-DropZone--focused_17w4h:not(.Polaris-DropZone--newDesignLanguage_1rik8):not(.Polaris-DropZone--isDisabled_7e21n)::after{ border:0.2rem dashed var(--p-border, #5c6ac4); }

@media (-ms-high-contrast: active){ .Polaris-DropZone--focused_17w4h:not(.Polaris-DropZone--newDesignLanguage_1rik8):not(.Polaris-DropZone--isDisabled_7e21n)::after{ border-style:solid; border-color:highlight; } }

.Polaris-DropZone--isDragging_yvz0y:not(.Polaris-DropZone--isDisabled_7e21n){ background-color:var(--p-surface-hovered, #f4f5fa); }

.Polaris-DropZone--isDragging_yvz0y:not(.Polaris-DropZone--isDisabled_7e21n):not(.Polaris-DropZone--newDesignLanguage_1rik8)::after{ border-color:var(--p-border, #5c6ac4); }

.Polaris-DropZone--isDisabled_7e21n{ cursor:not-allowed; }

.Polaris-DropZone--isDisabled_7e21n::after{ border-color:var(--p-border-disabled, #dfe3e8); }

.Polaris-DropZone--sizeExtraLarge_1akox{ min-height:20.5rem; }

.Polaris-DropZone--sizeLarge_61dxo{ min-height:16rem; }

.Polaris-DropZone--sizeMedium_5f35p{ min-height:10rem; align-items:center; }

.Polaris-DropZone--sizeSmall_7647q{ padding:0; align-items:center; min-height:5rem; }

.Polaris-DropZone--measuring_wb2tw{ visibility:hidden; min-height:0; }

.Polaris-DropZone__Container_13mbo{ flex:1 1; }

.Polaris-DropZone__Overlay_ib7rj{ position:absolute; z-index:30; top:0; right:0; bottom:0; left:0; display:flex; justify-content:center; align-items:center; padding:1.5rem; border:0.2rem dashed var(--p-border, #5c6ac4); border-radius:var(--p-border-radius-base, 3px); text-align:center; color:var(--p-text, #5c6ac4); background-color:var(--p-surface-hovered, #f4f5fa); }

.Polaris-DropZone--hasError_7q9ec .Polaris-DropZone__Overlay_ib7rj{ border-color:var(--p-border-critical, #de3618); color:var(--p-text-critical, #de3618); background-color:var(--p-surface-critical-subdued, #fbeae5); }

.Polaris-DropZone--sizeSmall_7647q .Polaris-DropZone__Overlay_ib7rj{ padding:0; }

.Polaris-DropZone--newDesignLanguage_1rik8.Polaris-DropZone_1ehhx:not(.Polaris-DropZone--focused_17w4h)::after{ top:0; left:0; right:0; bottom:0; opacity:1; transform:scale(1); border:0.2rem dashed transparent; }

@media (-ms-high-contrast: active){ .Polaris-DropZone--newDesignLanguage_1rik8.Polaris-DropZone_1ehhx:hover{ outline:1px solid windowText; } }

.Polaris-DropZone--newDesignLanguage_1rik8 .Polaris-DropZone__Container_13mbo{ position:relative; }

.Polaris-DropZone--newDesignLanguage_1rik8 .Polaris-DropZone__Container_13mbo::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.3rem; right:-0.3rem; bottom:-0.3rem; left:-0.3rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.3rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-DropZone--newDesignLanguage_1rik8.Polaris-DropZone__Overlay_ib7rj{ border-radius:calc(var(--p-border-radius-base) + 0.3rem); }

.Polaris-DropZone--newDesignLanguage_1rik8.Polaris-DropZone--hasOutline_1z0fh:not(.Polaris-DropZone--focused_17w4h)::after{ top:0; left:0; right:0; bottom:0; opacity:1; transform:scale(1); border:0.2rem dashed transparent; border-color:var(--p-border, #919eab); }

.Polaris-DropZone--newDesignLanguage_1rik8.Polaris-DropZone--focused_17w4h:not(.Polaris-DropZone--isDisabled_7e21n) .Polaris-DropZone__Container_13mbo::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-DropZone--newDesignLanguage_1rik8.Polaris-DropZone--focused_17w4h:not(.Polaris-DropZone--isDisabled_7e21n) .Polaris-DropZone__Container_13mbo::after{ outline:1px solid windowText; } }