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

Sense UI components library

@value (
  size18,
  size42,
  size30,
  size34,
  sizeFluid
) from '../../styles/variables/_size.css';

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

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

@value (
  colorTextPrimary,
  colorTextSecondary,
  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: spaceXSmall;
  height: size42;
  padding: spaceNone spaceSmall;
  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;
}

.locked {
  border-style: dashed;
}

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

.colorText {
  composes: formInputMedium from '../../styles/typography.module.css';
  color: colorTextSecondary;
}

.hasValue {
  color: colorTextPrimary;
}

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

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

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

.box input {
  width: sizeFluid;
  height: sizeFluid;
  cursor: inherit;
}

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

input::placeholder {
  color: colorTextTertiary;
}

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

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

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

.infoContent {
  display: flex;
}

.rightClickableIcon {
  cursor: pointer;
}

.rightClickableIcon.disabled {
  pointer-events: none;
}

.box.color {
  padding-right: spaceMedium;
}

.box > input[type='color'] {
  display: flex;
  cursor: pointer;
  align-items: center;
  width: fit-content;
  gap: spaceXSmall;
  padding: spaceNone;
  width: size18;
  height: size18;
  margin: spaceNone;
}

.box > input[type='color']::-webkit-color-swatch {
  display: flex;
  padding: spaceNone;
  align-self: center;
  border: none;
  min-width: size18;
  min-height: size18;
  border-radius: borderRadiusXSmall;
}

.hideNumberSpinner input[type='number']::-webkit-outer-spin-button,
.hideNumberSpinner input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide spinner in Firefox */
.hideNumberSpinner input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}