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

XDesign Component for vue-next

@keyframes t-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes t-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes t-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.x-icon-loading {
  animation: t-spin 1s linear infinite;
}
@keyframes t-zoom-out {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}
.x-tag-input {
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  /** 设计稿：未填充标签场景，边距和已填充不同 */
}
.x-tag-input .x-tag {
  vertical-align: middle;
  animation: t-fade-in 0.2s ease-in-out;
  margin: 3px var(--td-comp-margin-xs) 3px 0;
}
.x-tag-input .x-tag-input__drag_wrapper + .x-tag-input__drag_wrapper {
  margin-left: var(--td-comp-margin-xs);
}
.x-tag-input .x-input {
  overflow: hidden;
  min-height: var(--td-comp-size-m);
  height: fit-content;
  padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs);
}
.x-tag-input .x-input .x-input__suffix-icon {
  right: var(--td-comp-margin-s);
}
.x-tag-input .x-input.x-size-s {
  padding: 0 var(--td-comp-paddingLR-xxs) 0 var(--td-comp-margin-xs);
  min-height: var(--td-comp-size-xs);
}
.x-tag-input .x-input.x-size-s .x-tag {
  margin: 1px var(--td-comp-margin-xs) 1px 0;
}
.x-tag-input .x-input.x-size-l {
  min-height: var(--td-comp-size-xl);
  padding-right: var(--td-comp-paddingLR-m);
}
.x-tag-input .x-input.x-size-l .x-input__suffix-icon {
  right: var(--td-comp-margin-m);
}
.x-tag-input.x-is-empty .x-input__inner {
  margin-left: var(--td-comp-margin-xs);
}
.x-tag-input:hover .x-input__inner,
.x-tag-input .x-input--focused .x-input__inner {
  min-width: 20px;
}
.x-tag-input .x-tag-input__prefix {
  margin-left: var(--td-comp-margin-xs);
  line-height: 1;
}
.x-tag-input .x-tag-input__prefix > .x-icon {
  color: var(--td-text-color-placeholder);
}
.x-tag-input .x-input .x-input__prefix:not(:empty) {
  margin-right: 0;
}
.x-tag-input.x-input--auto-width .x-input.x-input--focused {
  padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs));
}
.x-tag-input.x-input--auto-width .x-input__prefix {
  white-space: nowrap;
}
.x-tag-input__suffix-clear {
  cursor: pointer;
}
.x-tag-input--break-line:not(.x-is-empty) .x-input {
  display: block;
}
.x-tag-input--break-line:not(.x-is-empty) .x-input.x-input--prefix > .x-input__prefix {
  display: inline;
  text-align: left;
}
.x-tag-input--break-line:not(.x-is-empty) .x-input .x-input__suffix-icon {
  position: absolute;
  bottom: 0;
}
.x-tag-input--break-line:not(.x-is-empty) .x-tag-input__prefix {
  vertical-align: middle;
}
.x-tag-input__prefix {
  width: max-content;
  display: inline-block;
  margin-right: var(--td-comp-margin-s);
}
/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */
.x-tag-input--break-line.x-tag-input--with-tag:not(.x-input--auto-width) .x-input,
.x-tag-input.x-input--auto-width:hover .x-input {
  padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs));
}
.x-tag-input--break-line.x-tag-input--with-tag:not(.x-input--auto-width) .x-size-l .x-input,
.x-tag-input.x-input--auto-width:hover .x-size-l .x-input {
  padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs));
}
/** auto-width 模式，左右边距相同 */
.x-tag-input.x-input--auto-width .x-input {
  padding-right: 0;
}