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

Sense UI components library

@value (
  spaceNone,
  spaceSmall,
  spaceXSmall,
  spaceXXSmall
) from '../../styles/variables/_space.css';
@value (
  colorFocusDanger,
  colorFillPrimary,
  colorFillDisabled,
  colorFocusPrimary,
  colorBorderDanger,
  colorBorderPrimary,
  colorBorderTertiary
) from '../../styles/variables/_color.css';
@value (
  borderWidthPrimary,
  borderRadiusMedium,
  borderRadiusSmall,
  borderWidthNone,
  borderWidthTertiary
) from '../../styles/variables/_border.css';
@value (
  size2,
  size4,
  size8,
  size26,
  size228,
  sizeFluid
) from '../../styles/variables/_size.css';

@value tokenListHeaderHeight: 18px;
@value smallBoxHeight: 34px;
@value mediumBoxHeight: 42px;

.box {
  display: flex;
  gap: size8;
  align-items: center;
  flex-wrap: wrap;
  width: sizeFluid;
  max-height: size228;
  flex: 0 0 auto;
  overflow: auto;
  cursor: pointer;
}

.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden) {
  border: borderWidthPrimary solid colorBorderPrimary;
}

.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden):hover {
  border: borderWidthPrimary solid colorBorderTertiary;
}

.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden):focus-within {
  border: borderWidthPrimary solid colorFillPrimary;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.box.withError {
  border: borderWidthPrimary solid colorBorderDanger;
}

.box.withError:focus-within {
  border: borderWidthPrimary solid colorBorderDanger;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusDanger;
}

.box.inputLocked {
  border: borderWidthPrimary solid colorBorderPrimary;
  border-style: dashed;
}

.box.inputDisabled {
  border: borderWidthPrimary solid colorBorderPrimary;
  background-color: colorFillDisabled;
}

.tokenListContainer {
  display: flex;
  position: relative;
  flex-flow: column;
  width: sizeFluid;
  gap: spaceXXSmall;
}

.tokenListHeader {
  display: flex;
  width: sizeFluid;
  height: tokenListHeaderHeight;
  justify-content: space-between;
}

.clearAllButton {
  cursor: pointer;
}

.clearAllButton:focus-visible {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.medium {
  border-radius: borderRadiusMedium;
  padding: spaceXSmall spaceSmall;
  min-height: mediumBoxHeight;
}

.small {
  border-radius: borderRadiusSmall;
  padding: spaceXXSmall spaceSmall;
  min-height: smallBoxHeight;
}

.inputMedium {
  composes: formInputMedium from '../../styles/typography.module.css';
  min-width: calc(sizeFluid/4);
  outline: none;
  border: none;
  background-color: transparent;
  padding: spaceNone spaceNone spaceNone spaceNone;
  flex: 1 0;
}

.inputSmall {
  composes: formInputSmall from '../../styles/typography.module.css';
  min-width: calc(sizeFluid/4);
  outline: none;
  border: none;
  background-color: transparent;
  padding: spaceNone spaceNone spaceNone spaceNone;
  flex: 1 0;
}

.lockIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.loaderContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: size26;
  height: size26;
  margin-left: auto;
}

.menuWrapper {
  width: var(--dropdown-width);
  z-index: var(--menu-elevation);
}