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

Sense UI components library

@value (
  size160,
  size140,
  sizeFluid
) from '../../styles/variables/_size.css';

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

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

@value (
  colorTextPrimary,
  colorTextTertiary,
  colorBorderPrimary,
  colorFillPrimary,
  colorFocusPrimary,
  colorFocusDanger,
  colorTextDisabled,
  colorFillDisabled,
  colorTextDanger,
  colorBackgroundTertiary,
  colorBorderTertiary
) from '../../styles/variables/_color.css';

.container {
  color: colorTextPrimary;
  width: sizeFluid;
}

.box {
  display: flex;
  align-items: center;
  color: colorTextPrimary;
  gap: spaceSmall;
  height: size160;
  border: borderWidthPrimary solid colorBorderPrimary;
  background-color: colorBackgroundTertiary;
}

.wrapper:not(.withError) .box:not(.inputDisabled):not(.locked):hover {
  border-color: colorBorderTertiary;
}

.wrapper:not(.withError):focus-within
  .box:not(.inputDisabled):not(.locked):hover {
  border-color: colorFillPrimary;
}

.box textarea {
  padding: spaceXSmall spaceSmall;
}

.locked {
  border-style: dashed;
}

.medium {
  composes: formInputMedium from '../../styles/typography.module.css';
  height: size160;
  border-radius: borderRadiusMedium;
}

.small {
  composes: formInputSmall from '../../styles/typography.module.css';
  height: size140;
  border-radius: borderRadiusSmall;
}

.wrapper.withError .box {
  border-color: colorTextDanger;
}

.wrapper.withError:focus-within .box {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusDanger;
}

.box textarea {
  width: sizeFluid;
  height: sizeFluid;
  resize: none;
}

.wrapper:not(.withError):focus-within .box:not(.inputDisabled) {
  border-color: colorFillPrimary;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.inputDisabled {
  color: colorTextDisabled;
  border-color: colorBorderPrimary;
  background-color: colorFillDisabled;
}

textarea::placeholder {
  color: colorTextTertiary;
}

.inputDisabled textarea::placeholder {
  color: inherit;
}

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

.info {
  display: flex;
  justify-content: space-between;
}

.infoContent {
  display: flex;
}