@gravity-ui/uikit/build/cjs/components/lab/FileDropZone/FileDropZone.css

Gravity UI base styling and components

.g-file-drop-zone {
  background-color: var(--g-color-base-background);
  border: 1px dashed var(--g-color-line-generic-active);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 16px;
  cursor: pointer;
  outline: none;
}
.g-file-drop-zone_default-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.g-file-drop-zone_default-layout .g-file-drop-zone__button {
  margin-block-start: 10px;
}
.g-file-drop-zone:hover {
  border-color: var(--g-color-text-info);
}
.g-file-drop-zone:focus {
  border-color: var(--g-color-text-info);
}
.g-file-drop-zone_drag-hover {
  background-color: var(--g-color-base-info-light);
  border-color: var(--g-color-text-info);
}
.g-file-drop-zone_invalid-drag {
  background-color: var(--g-color-base-danger-light);
  border-color: var(--g-color-text-danger);
}
.g-file-drop-zone_invalid-drag:hover {
  border-color: var(--g-color-text-danger);
}
.g-file-drop-zone_error {
  border-color: var(--g-color-line-danger);
}
.g-file-drop-zone_error:hover {
  border-color: var(--g-color-line-danger);
}
.g-file-drop-zone_error .g-file-drop-zone__icon {
  color: var(--g-color-text-danger);
}
.g-file-drop-zone_disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.g-file-drop-zone_disabled .g-file-drop-zone__icon {
  color: var(--g-color-text-hint);
}
.g-file-drop-zone__icon {
  flex-shrink: 0;
  color: var(--g-color-text-info);
  margin-block-end: 5px;
}