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

Shopify’s admin product component library

/* stylelint-disable unit-disallowed-list */
/* stylelint-disable length-zero-no-unit */
/* Breakpoints - Aliases */
/* Breakpoints - Media conditions */
.Polaris-DropZone_1ehhx { --pc-drop-zone-outline: 29; --pc-drop-zone-overlay: 30; position: relative; display: flex; justify-content: center; background-color: var(--p-surface); border-radius: var(--p-border-radius-1); }

.Polaris-DropZone_1ehhx::after { content: ''; position: absolute; z-index: var(--pc-drop-zone-outline); top: 0; right: 0; bottom: 0; left: 0; border: var(--p-border-width-1) dashed transparent; border-radius: var(--p-border-radius-1); pointer-events: none; }

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

.Polaris-DropZone_1ehhx:hover { outline: var(--p-border-width-1) solid transparent; }

.Polaris-DropZone--hasOutline_1z0fh { padding: var(--p-space-025); }

.Polaris-DropZone--hasOutline_1z0fh::after { border-color: var(--p-border-neutral-subdued); }

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

.Polaris-DropZone--hasOutline_1z0fh:not(.Polaris-DropZone--isDisabled_7e21n):hover::after { border-color: var(--p-interactive-hovered); }

.Polaris-DropZone--hasOutline_1z0fh:not(.Polaris-DropZone--focused_17w4h)::after { top: 0; left: 0; right: 0; bottom: 0; opacity: 1; transform: scale(1); border: var(--p-border-width-1) dashed transparent; border-radius: var(--p-border-radius-large); border-color: var(--p-border-neutral-subdued); }

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

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

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

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

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

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

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

.Polaris-DropZone__Container_13mbo { position: relative; flex: 1 1; }

.Polaris-DropZone__Container_13mbo::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-DropZone__Overlay_ib7rj { border-radius: var(--p-border-radius-large); position: absolute; z-index: var(--pc-drop-zone-overlay); top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: var(--p-space-4); border: var(--p-border-width-1) dashed var(--p-interactive); text-align: center; color: var(--p-interactive); background-color: var(--p-surface-selected); pointer-events: none; }

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

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

.Polaris-DropZone--focused_17w4h:not(.Polaris-DropZone--isDisabled_7e21n) .Polaris-DropZone__Container_13mbo::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }