calcite-combobox.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-combobox-input-height: the height of the combobox input
 */

:host {
  @apply block relative;
}

:host([disabled]) {
  @apply pointer-events-none select-none opacity-50;
}

:host([scale="s"]) {
  @apply text--2;
  --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
  --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
  --calcite-combobox-input-height: theme("spacing.6");
}

:host([scale="m"]) {
  @apply text--1;
  --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
  --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
  --calcite-combobox-input-height: theme("spacing.8");
}

:host([scale="l"]) {
  @apply text-0;
  --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
  --calcite-combobox-item-spacing-unit-s: theme("spacing.3");
  --calcite-combobox-input-height: theme("spacing.11");
}

.wrapper {
  @apply flex
    bg-foreground-1
    text-color-1
    focus-base;
  box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
  padding: 0 var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l);
}

:host(:focus-within) .wrapper,
.wrapper--active {
  @apply focus-inset;
}

.wrapper--single {
  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
  @apply cursor-pointer flex-nowrap;
}

.grid-input {
  @apply flex
    flex-grow
    flex-wrap
    items-center
    p-0
    truncate;
}

.input {
  @apply flex-grow
  font-inherit
  p-0
  bg-transparent
  border-none
  text-color-1
  appearance-none;
  font-size: inherit;
  height: var(--calcite-combobox-input-height);
  line-height: var(--calcite-combobox-input-height);
  min-width: 120px;
  margin-bottom: var(--calcite-combobox-item-spacing-unit-s);
  &:focus {
    @apply outline-none;
  }
}

.input--transparent {
  @apply opacity-0;
}

.input--single {
  @apply mb-0 mt-0 p-0;
}

.wrapper--active .input-single {
  @apply cursor-text;
}

.input--hidden {
  @apply w-0
  min-w-0
  opacity-0
  pointer-events-none;
}

.input--icon {
  padding: 0 var(--calcite-combobox-item-spacing-unit-l);
}

.input-wrap {
  @apply flex flex-grow;
}

.input-wrap--single {
  @apply flex-auto overflow-hidden;
}

.label {
  @apply p-0
    flex
    font-normal
    flex-auto
    pointer-events-none
    truncate
    max-w-full;
  height: var(--calcite-combobox-input-height);
  line-height: var(--calcite-combobox-input-height);
}

.label--spaced {
  @apply py-0;
  padding-left: var(--calcite-combobox-item-spacing-unit-l);
  padding-right: var(--calcite-combobox-item-spacing-unit-l);
}

.icon-end,
.icon-start {
  @apply cursor-pointer
    flex items-center
    w-4;
}

.icon-end {
  @apply flex-none;
}

.popper-container {
  @apply w-full;
  @include popperContainer();
  @include popperWrapper();
}

@include popperElemAnim(".popper-container");

.popper-container--active {
  @include popperWrapperActive();
}

.screen-readers-only {
  @apply sr-only;
}

.list-container {
  @apply overflow-y-auto
    max-h-screen
    bg-foreground-1;
  width: var(--calcite-dropdown-width);
}

.list {
  @apply block m-0 p-0;
}

.list--hide {
  @apply h-0 overflow-hidden;
}

.chip {
  margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
  margin-inline: 0 var(--calcite-combobox-item-spacing-unit-s);
  max-width: 100%;
}

.chip--active {
  @apply bg-foreground-3;
}

.chip:last-of-type {
  margin-inline-end: 0;
}

.item {
  @apply block;
}

@include hidden-form-input();