@innovaccer/design-system/css/src/components/dropzone.module.css

React components library project for Innovaccer Design System

.Dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: var(--border-radius-10);
  width: 100%;
  background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);
  transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);
  box-sizing: border-box;
}

.Dropzone--active {
  background-color: var(--primary-lightest);
  background-image: linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);
  transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);
  box-sizing: border-box;
}

.Dropzone-animation {
  animation-delay: var(--duration--fast-02);
  animation-fill-mode: forwards;
}

.Dropzone-animation--default {
  animation: dropzoneDefault var(--duration--moderate-01) var(--entrance-productive-curve);
}

.Dropzone-animation--active {
  animation: dropzoneActive var(--duration--moderate-01) var(--entrance-productive-curve);
}

@keyframes dropzoneDefault {
  from {
    opacity: 0;
    padding-top: 20px;
  }

  to {
    opacity: 1;
    padding-top: var(--spacing-30);
  }
}

@keyframes dropzoneActive {
  from {
    opacity: 0;
    padding-top: 20px;
  }

  to {
    opacity: 1;
    padding-top: var(--spacing-30);
  }
}

.Dropzone-standard--default {
  animation: dropzoneStandardDefault var(--duration--moderate-01) var(--entrance-productive-curve);
}

.Dropzone-standard--active {
  animation: dropzoneStandardActive var(--duration--moderate-01) var(--entrance-productive-curve);
}

@keyframes dropzoneStandardDefault {
  from {
    opacity: 0;
    padding-top: var(--spacing-40);
  }

  to {
    opacity: 1;
    padding-top: var(--spacing-20);
  }
}

@keyframes dropzoneStandardActive {
  from {
    opacity: 0;
    padding-top: var(--spacing-40);
  }

  to {
    opacity: 1;
    padding-top: var(--spacing-20);
  }
}

.Dropzone--error {
  background: var(--alert-lightest);
  background-image: linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);
}

.Dropzone--disabled {
  background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);
}

.Dropzone--standard {
  flex-direction: column;
  height: 196px;
  min-width: 480px;
  padding: var(--spacing-20) var(--spacing-60) var(--spacing-40) var(--spacing-60);
}

.Dropzone--compressed {
  flex-direction: row;
  height: 124px;
  min-width: 400px;
  padding: var(--spacing-30) var(--spacing-60) var(--spacing-40) var(--spacing-60);
}

.Dropzone--tight {
  height: 124px;
  min-width: 320px;
  padding: var(--spacing-30) var(--spacing-60) var(--spacing-40) var(--spacing-60);
}

.DropzoneWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.DropzoneWrapper--standard,
.DropzoneWrapper--tight {
  align-items: center;
}

.DropzoneWrapper--compressed {
  align-items: start;
}

.Dropzone-icon--standard {
  margin-bottom: var(--spacing-30);
}

.Dropzone-icon--compressed {
  margin-right: var(--spacing-60);
}

.Dropzone-icon--disabled {
  fill: var(--inverse-lightest);
}

.Dropzone-icon--default {
  fill: var(--inverse-lighter);
}

.Dropzone-icon--active {
  fill: var(--primary);
}

.Dropzone-icon--error {
  fill: var(--alert);
}