@dnb/eufemia/es/components/upload/style/dnb-upload.css

DNB Eufemia Design System UI Library

/*
* Upload component
*
*/
/*
 * Utilities
 */
.dnb-upload {
  --upload-background: white;
  --upload-background--active: lightgray;
  --upload-border: gray;
  --upload-border--active: black;
  --upload-border-width: 2px;
  --upload-list-border: black;
  --upload-icon--default: black;
  --upload-icon--warning: red;
  --upload-highlight: lightyellow;
  --upload-text--primary: black;
  --upload-text--secondary: black;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding: var(--spacing-medium);
}
@media screen and (max-width: 40em) {
  .dnb-upload {
    padding: var(--spacing-medium) var(--spacing-small);
  }
}
.dnb-upload {
  background-color: var(--upload-background);
  border-radius: 0.5rem;
}
.dnb-upload__outline {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.5rem;
  stroke: var(--upload-border);
  stroke-width: 0.1875rem;
}
.dnb-upload--active .dnb-upload__outline {
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  width: calc(100% + var(--upload-border-width));
  height: calc(100% + var(--upload-border-width));
  stroke: var(--upload-border--active);
}
.dnb-upload--active .dnb-upload__outline rect {
  stroke-width: 0.25rem;
  stroke-dasharray: 0;
}
.dnb-upload--active {
  background-color: var(--upload-background--active);
}
.dnb-upload__file-input {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px;
}
.dnb-upload__file-list {
  position: relative;
  padding: 0;
  margin-top: var(--spacing-medium);
  margin-bottom: 0;
  list-style: none;
}
.dnb-upload__file-list::before, .dnb-upload__file-cell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: var(--upload-list-border);
}
.dnb-upload__file-cell {
  position: relative;
  padding: var(--spacing-small) 0;
  /** Highlight Animation */
  transition: background-color;
  transition-duration: 1.5s;
  transition-timing-function: var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-upload__file-cell {
    transition-duration: 0.01ms;
  }
}
.dnb-upload__file-cell::after {
  top: auto;
}
.dnb-upload__file-cell__content {
  display: flex;
  column-gap: var(--spacing-small);
  justify-content: space-between;
  align-items: center;
}
.dnb-upload__file-cell__content__left {
  display: flex;
  column-gap: var(--spacing-small);
  align-items: center;
}
.dnb-upload__file-cell__content__left .dnb-icon {
  color: var(--upload-icon--default);
}
.dnb-upload__file-cell--warning .dnb-upload__file-cell__content__left .dnb-icon {
  color: var(--upload-icon--warning);
}
.dnb-upload__file-cell--highlight {
  background-color: var(--upload-highlight);
}
.dnb-upload__file-cell__text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dnb-upload__file-cell__text-container--loading {
  font-size: var(--font-size-basis);
}
.dnb-upload__file-cell__text-container .dnb-button {
  justify-content: flex-start;
}
.dnb-upload__text.dnb-p {
  color: var(--upload-text--secondary);
}
.dnb-upload__accepted-file-types-table.dnb-table {
  width: -webkit-fit-content;
  width: fit-content;
}
.dnb-upload__accepted-file-types-table.dnb-table thead th {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-basis);
  padding-top: 0;
}
.dnb-upload__accepted-file-types-table.dnb-table thead th:first-child {
  padding-left: 0;
}
.dnb-upload__accepted-file-types-table.dnb-table tbody td:first-child {
  padding-left: 0;
}
.dnb-upload--compact {
  padding: 0;
  border-radius: 0;
}
.dnb-upload--compact .dnb-upload__text {
  color: var(--color-black-55);
  font-size: var(--font-size-small);
}
.dnb-upload--compact .dnb-help-button__content .dnb-section {
  margin-bottom: 1rem;
}