demosample/css/src/components/dropzone.css

React components library project for CensaNext Design System

.Dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: var(--spacing-m);
  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: 7px var(--spacing-xs), var(--spacing-xs) 7px;
  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: 7px var(--spacing-xs), var(--spacing-xs) 7px;
  transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);
  box-sizing: border-box;
}

.DropzoneAnimation--default {
  animation-delay: var(--duration--fast-02);
  animation: dropzoneDefault var(--duration--moderate-01) var(--entrance-productive-curve);
}

.DropzoneAnimation--active {
  animation-delay: var(--duration--fast-02);
  animation: dropzoneActive var(--duration--moderate-01) var(--entrance-productive-curve);
}

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

  to {
    opacity: 1;
    padding-top: 0;
  }
}

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

  to {
    opacity: 1;
    padding-top: 0;
  }
}

.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: 7px var(--spacing-xs), var(--spacing-xs) 7px;
}

.Dropzone--disabled {
  background: var(--secondary-lightest);
  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: 7px var(--spacing-xs), var(--spacing-xs) 7px;
}

.Dropzone--standard {
  flex-direction: column;
  height: 196px;
  min-width: 480px;
}

.Dropzone--compressed {
  flex-direction: row;
  height: 124px;
  min-width: 400px;
}

.Dropzone--tight {
  height: 124px;
  min-width: 320px;
}

.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-l);
}

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

.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);
}