@qvant/qui-max/dist/css/q-select.css

A Vue 3 Design system for Web.

.q-select-tags {
  --field-color-base: var(--color-primary-black);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: calc(100% - 40px);
  padding: 8px 0 8px 8px;
  white-space: normal;
  pointer-events: none;
}
.q-select-tags_filterable:not(.q-select-tags_collapse-tags) .q-tag:last-of-type {
  max-width: 65%;
}
.q-select-tags.q-select-tags_collapse-tags {
  flex-wrap: nowrap;
}
.q-select-tags.q-select-tags_collapse-tags .q-tag + .q-tag {
  flex-shrink: 0;
}
.q-select-tags__input {
  z-index: 1;
  flex: 1;
  min-width: 24px;
  height: 20px;
  padding: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  color: var(--field-color-base);
  background-color: transparent;
  border: none;
  outline: none;
  appearance: none;
}
.q-select-tags__input:first-child {
  margin-left: 8px;
}

.q-select-dropdown {
  --dropdown-max-height: 204px;
  --dropdown-box-shadow-base: var(--box-shadow-primary);
  --dropdown-background-color-base: var(--color-tertiary-gray-light);
  position: absolute;
  z-index: 1001;
  width: 100%;
}
.q-select-dropdown__wrapper {
  width: 100%;
  overflow: hidden;
  background-color: var(--dropdown-background-color-base);
  border-radius: var(--border-radius-base);
  box-shadow: var(--dropdown-box-shadow-base);
}
.q-select-dropdown__empty {
  padding: 10px 16px 8px;
  margin: 0;
  color: rgb(var(--color-rgb-gray)/64%);
}
.q-select-dropdown__wrap {
  max-height: var(--dropdown-max-height);
}

.q-select {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  vertical-align: middle;
}
.q-select__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.q-select__input .q-input {
  height: inherit;
}
.q-select__input .q-input__inner {
  height: 100%;
  text-overflow: ellipsis;
  user-select: none;
}
.q-select__dropdown_animation-enter-active, .q-select__dropdown_animation-leave-active {
  transition: opacity var(--transition-spline-base) 0.25s;
}
.q-select__dropdown_animation-enter-active .q-select-dropdown__wrapper, .q-select__dropdown_animation-leave-active .q-select-dropdown__wrapper {
  transition: margin-top var(--transition-spline-base) 0.25s;
}
.q-select__dropdown_animation-enter-from, .q-select__dropdown_animation-leave-to {
  opacity: 0;
}
.q-select__dropdown_animation-enter-from .q-select-dropdown__wrapper, .q-select__dropdown_animation-leave-to .q-select-dropdown__wrapper {
  margin-top: -8px;
}