@patternfly/patternfly/components/MultipleFileUpload/multiple-file-upload.css

Assets, source, tooling, and content for PatternFly 4

.pf-v5-c-multiple-file-upload {
  --pf-v5-c-multiple-file-upload--GridTemplateColumns: 1fr;
  --pf-v5-c-multiple-file-upload--Gap: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-multiple-file-upload__main--TextAlign: center;
  --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: auto;
  --pf-v5-c-multiple-file-upload__main--GridTemplateRows: auto;
  --pf-v5-c-multiple-file-upload__main--GridTemplateAreas:
    "title"
    "upload"
    "info";
  --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-global--spacer--md);
  --pf-v5-c-multiple-file-upload__main--PaddingTop: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-multiple-file-upload__main--PaddingRight: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-global--spacer--xl);
  --pf-v5-c-multiple-file-upload__main--PaddingLeft: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-multiple-file-upload__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-multiple-file-upload__main--BorderStyle: dashed;
  --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-global--BorderColor--100);
  --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
  --pf-v5-c-multiple-file-upload__title--Display: grid;
  --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: auto;
  --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-global--icon--Color--dark);
  --pf-v5-c-multiple-file-upload__title-text-separator--Display: block;
  --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-v5-global--FontSize--sm);
  --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-global--Color--200);
  --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
  --pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-v5-global--active-color--100);
  --pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-v5-global--palette--blue-50);
  --pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-v5-global--active-color--100);
  --pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-v5-global--active-color--100);
  --pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-v5-global--active-color--100);
  --pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
  --pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign: start;
  --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
  --pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
    "title upload"
    "info upload";
  --pf-v5-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--2xl);
  --pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-v5-global--spacer--lg);
  --pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
  --pf-v5-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-v5-global--spacer--xs);
  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
  --pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
  --pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
  --pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
  --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-v5-global--icon--Color--dark);
  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-global--spacer--md);
  --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-v5-global--spacer--md);
  --pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
  --pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
  --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-v5-global--BorderColor--100);
  --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-v5-global--icon--Color--dark);
  --pf-v5-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
  --pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
  --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-v5-global--spacer--sm);
  --pf-v5-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-v5-global--Color--200);
  display: grid;
  grid-template-columns: var(--pf-v5-c-multiple-file-upload--GridTemplateColumns);
  gap: var(--pf-v5-c-multiple-file-upload--Gap);
}
.pf-v5-c-multiple-file-upload.pf-m-horizontal {
  --pf-v5-c-multiple-file-upload--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
  --pf-v5-c-multiple-file-upload__main--TextAlign: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign);
  --pf-v5-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
  --pf-v5-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
  --pf-v5-c-multiple-file-upload__main--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--Gap);
  --pf-v5-c-multiple-file-upload__main--PaddingBottom: var(--pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
  --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
  --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-c-multiple-file-upload--m-horizontal__title--Gap);
  --pf-v5-c-multiple-file-upload__title-text-separator--Display: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
  --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
  --pf-v5-c-multiple-file-upload__info--MarginTop: var(--pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop);
}
.pf-v5-c-multiple-file-upload.pf-m-drag-over {
  --pf-v5-c-multiple-file-upload__main--BorderStyle: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle);
  --pf-v5-c-multiple-file-upload__main--BorderColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor);
  --pf-v5-c-multiple-file-upload__main--BackgroundColor: var(--pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
  --pf-v5-c-multiple-file-upload__title-text--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color);
  --pf-v5-c-multiple-file-upload__info--Color: var(--pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color);
}

.pf-v5-c-multiple-file-upload__main {
  display: grid;
  grid-template-areas: var(--pf-v5-c-multiple-file-upload__main--GridTemplateAreas);
  grid-template-rows: var(--pf-v5-c-multiple-file-upload__main--GridTemplateRows);
  grid-template-columns: var(--pf-v5-c-multiple-file-upload__main--GridTemplateColumns);
  gap: var(--pf-v5-c-multiple-file-upload__main--Gap);
  padding-block-start: var(--pf-v5-c-multiple-file-upload__main--PaddingTop);
  padding-block-end: var(--pf-v5-c-multiple-file-upload__main--PaddingBottom);
  padding-inline-start: var(--pf-v5-c-multiple-file-upload__main--PaddingLeft);
  padding-inline-end: var(--pf-v5-c-multiple-file-upload__main--PaddingRight);
  text-align: var(--pf-v5-c-multiple-file-upload__main--TextAlign);
  background-color: var(--pf-v5-c-multiple-file-upload__main--BackgroundColor);
  border: var(--pf-v5-c-multiple-file-upload__main--BorderWidth) var(--pf-v5-c-multiple-file-upload__main--BorderStyle) var(--pf-v5-c-multiple-file-upload__main--BorderColor);
}

.pf-v5-c-multiple-file-upload__title {
  display: var(--pf-v5-c-multiple-file-upload__title--Display);
  grid-area: title;
  grid-template-columns: var(--pf-v5-c-multiple-file-upload__title--GridTemplateColumns);
  gap: var(--pf-v5-c-multiple-file-upload__title--Gap);
}

.pf-v5-c-multiple-file-upload__title-icon {
  color: var(--pf-v5-c-multiple-file-upload__title-icon--Color);
}

.pf-v5-c-multiple-file-upload__title-text {
  color: var(--pf-v5-c-multiple-file-upload__title-text--Color, inherit);
}

.pf-v5-c-multiple-file-upload__title-text-separator {
  display: var(--pf-v5-c-multiple-file-upload__title-text-separator--Display);
  margin-block-start: var(--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop);
}

.pf-v5-c-multiple-file-upload__upload {
  grid-area: upload;
}

.pf-v5-c-multiple-file-upload__info {
  grid-area: info;
  margin-block-start: var(--pf-v5-c-multiple-file-upload__info--MarginTop);
  font-size: var(--pf-v5-c-multiple-file-upload__info--FontSize);
  color: var(--pf-v5-c-multiple-file-upload__info--Color);
}

.pf-v5-c-multiple-file-upload__status,
.pf-v5-c-multiple-file-upload__status-item-main {
  min-width: 0;
}

.pf-v5-c-multiple-file-upload__status-progress {
  display: grid;
  grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns);
  gap: var(--pf-v5-c-multiple-file-upload__status-progress--Gap);
}

.pf-v5-c-multiple-file-upload__status-progress-icon {
  color: var(--pf-v5-c-multiple-file-upload__status-progress-icon--Color);
}

.pf-v5-c-multiple-file-upload__status-item {
  display: grid;
  grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns);
  gap: var(--pf-v5-c-multiple-file-upload__status-item--Gap);
  padding-block-start: var(--pf-v5-c-multiple-file-upload__status-item--PaddingTop);
  padding-block-end: var(--pf-v5-c-multiple-file-upload__status-item--PaddingBottom);
  border-block-end: var(--pf-v5-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-v5-c-multiple-file-upload__status-item--BorderColor);
}
.pf-v5-c-multiple-file-upload__status-item:first-child {
  --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop);
}

.pf-v5-c-multiple-file-upload__status-item-icon {
  color: var(--pf-v5-c-multiple-file-upload__status-item-icon--Color);
}

.pf-v5-c-multiple-file-upload__status-item-close {
  margin-block-start: var(--pf-v5-c-multiple-file-upload__status-item-close--MarginTop);
}

.pf-v5-c-multiple-file-upload__status-item-progress {
  display: grid;
  grid-template-columns: var(--pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
  gap: var(--pf-v5-c-multiple-file-upload__status-item-progress--Gap);
}

.pf-v5-c-multiple-file-upload__status-item-progress-text {
  color: var(--pf-v5-c-multiple-file-upload__status-item-progress-text--Color);
}

.pf-v5-c-multiple-file-upload__status-item-progress-size {
  color: var(--pf-v5-c-multiple-file-upload__status-item-progress-size--Color);
}