xdesign-vue-next/es/select-input/style/index.css

XDesign Component for vue-next

.x-select-input {
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}
/** 宽度自适应场景，多选，预留图标的位置。带标签和不带标签的布局不同，故而间距不同 */
.x-select-input--multiple .x-input--auto-width.x-tag-input__with-suffix-icon.x-tag-input--with-tag .x-input {
  padding-right: var(--td-comp-paddingLR-xl);
}
.x-select-input--multiple .x-input--auto-width.x-tag-input__with-suffix-icon.x-tag-input--with-tag .x-input.x-size-l {
  padding-right: calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s));
}
.x-select-input--multiple .x-input--auto-width.x-tag-input__with-suffix-icon.x-is-empty .x-input {
  padding-right: var(--td-comp-paddingLR-s);
}
.x-select-input--multiple .x-input--auto-width.x-tag-input__with-suffix-icon.x-is-empty .x-input.x-size-l {
  padding-right: var(--td-comp-paddingLR-m);
}
/** 无边框模式 */
.x-select-input--borderless {
  /** 无边框模式的多选 */
}
.x-select-input--borderless .x-input {
  box-shadow: none;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.2s linear;
}
.x-select-input--borderless .x-input:hover:not(.x-input--focused) {
  border-color: var(--td-component-border);
  background-color: var(--td-bg-color-container-hover);
  border-radius: var(--td-radius-default);
}
.x-select-input--borderless .x-input--focused {
  border-color: var(--td-brand-color);
  box-shadow: 0 0 0 2px var(--td-brand-color-focus);
  background-color: var(--td-bg-color-specialcomponent);
}
.x-select-input--borderless.x-select-input--multiple:not(.x-select-input--empty).x-select-input--popup-visible input {
  display: inline-block;
}
.x-select-input--borderless.x-select-input--multiple:not(.x-select-input--empty).x-select-input--popup-visible .x-input {
  background-color: var(--td-bg-color-container-hover);
}
.x-select-input--borderless.x-tag-input {
  border: 0;
  box-shadow: none;
  background: transparent;
  transition: background-color 0.2s linear;
}
.x-select-input--borderless.x-tag-input:hover {
  background-color: var(--td-bg-color-container-hover);
  border-radius: var(--td-radius-default);
}