@spaced-out/ui-design-system/lib/components/FileUpload/FileUpload.module.css

Sense UI components library

@value (
  colorTextSecondary,
  colorBackgroundPrimary,
  colorBackgroundTertiary,
  colorBorderTertiary,
  colorTextPrimary,
  colorTextTertiary,
  colorTextSuccess,
  colorTextDisabled,
  colorBorderPrimary,
  colorBorderSecondary,
  colorTextClickable,
  colorTextDanger,
  colorDangerLightest,
  colorInformationLightest,
  colorFocusPrimary
) from '../../styles/variables/_color.css';

@value (
  borderWidthNone,
  borderWidthPrimary,
  borderWidthTertiary,
  borderRadiusMedium
) from '../../styles/variables/_border.css';

@value (
  spaceXXSmall,
  spaceXSmall,
  spaceMedium,
  spaceLarge
) from '../../styles/variables/_space.css';

@value (
  size2,
  size18,
  size34
  size48,
  size50,
  size70,
  size125,
  size240,
  sizeFluid
) from '../../styles/variables/_size.css';

.wrapper {
  display: flex;
  flex-direction: column;
  width: sizeFluid;
  gap: spaceXSmall;
}

.dropzone {
  cursor: pointer;
  display: flex;
  flex-flow: column;
  gap: spaceXSmall;
  width: sizeFluid;
  padding: spaceLarge;
  justify-content: center;
  align-items: center;
  min-height: size125;
  border: borderWidthPrimary solid colorBorderPrimary;
  border-radius: borderRadiusMedium;
  outline: none;
  color: colorTextSecondary;
  background-color: colorBackgroundTertiary;
}

.dropzone:hover,
.dragActive {
  border-color: colorBorderTertiary;
  background-color: colorBackgroundPrimary;
}

.dropzone:focus {
  background-color: colorBackgroundPrimary;
  border-color: colorTextClickable;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.dropzone.disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: colorTextDisabled;
  border: borderWidthPrimary solid colorBorderPrimary;
  background-color: colorBackgroundPrimary;
}

.instruction {
  composes: buttonTextSmall from '../../styles/typography.module.css';
  color: inherit;
  text-decoration: underline;
  max-width: size125;
  text-align: center;
}

.secondaryInstruction {
  composes: bodySmall from '../../styles/typography.module.css';
  color: inherit;
  max-width: size240;
  text-align: center;
}

.files {
  display: flex;
  flex-flow: column;
  gap: spaceXSmall;
}

.file {
  display: flex;
  height: size50;
  padding: spaceXSmall;
  align-items: center;
  justify-content: space-between;
  gap: spaceXSmall;
  background-color: colorBackgroundPrimary;
  border-bottom: borderWidthPrimary solid colorBorderSecondary;
}

.fileInfo {
  display: flex;
  flex-flow: column;
  gap: spaceXSmall;
  width: sizeFluid;
}

.fileNameBlock {
  display: flex;
  composes: formLabelMedium from '../../styles/typography.module.css';
  color: colorTextPrimary;
  gap: spaceXXSmall;
  align-items: center;
}

.fileName {
  display: flex;
  color: inherit;
}

.fileError,
.fileSuccess {
  composes: bodySmall from '../../styles/typography.module.css';
  margin-left: calc(size18 + spaceXXSmall);
  margin-top: calc(spaceXSmall * -1);
}

.fileError {
  color: colorTextDanger;
}

.fileSuccess {
  color: colorTextSuccess;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: size18;
  min-height: size18;
}

.rightSection {
  display: flex;
}

.rightBlock {
  min-width: size34;
  min-height: size34;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label {
  display: flex;
  gap: spaceXXSmall;
  composes: formLabelSmall from '../../styles/typography.module.css';
  color: colorTextSecondary;
}

.required {
  color: colorTextDanger;
}