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

XDesign Component for vue-next

.x-tag {
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: 0px var(--td-comp-paddingLR-s);
  height: var(--td-comp-size-xs);
  font: var(--td-font-body-small);
  color: var(--td-text-color-anti);
  border-radius: var(--td-radius-default);
  border: 1px solid transparent;
  white-space: nowrap;
}
.x-tag .x-icon {
  margin-right: var(--td-comp-margin-xs);
  width: calc(var(--td-font-size-body-medium) + 2px);
  height: calc(var(--td-font-size-body-medium) + 2px);
  flex-shrink: 0;
}
.x-tag .x-tag__icon-close {
  margin-right: 0;
  margin-left: var(--td-comp-margin-s);
  font: var(--td-font-body-medium);
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
}
.x-tag--default {
  color: var(--td-text-color-primary);
  background-color: var(--td-bg-color-component);
}
.x-tag--default .x-tag__icon-close {
  color: var(--td-text-color-placeholder);
}
.x-tag--default .x-tag__icon-close:hover {
  color: var(--td-text-color-primary);
}
.x-tag--default.x-tag--checked {
  color: var(--td-text-color-anti);
  background-color: var(--td-brand-color);
}
.x-tag--default.x-tag--checked:hover {
  background-color: var(--td-brand-color-hover);
}
.x-tag--default:active {
  cursor: default;
}
.x-tag--default.x-tag--check {
  transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
  cursor: pointer;
}
.x-tag--default.x-tag--check:hover:not(.x-tag--checked):not(.x-tag--disabled) {
  background-color: var(--td-bg-color-component-hover);
}
.x-tag--default.x-tag--disabled {
  color: var(--td-text-color-disabled);
  background-color: var(--td-bg-color-component-disabled);
  cursor: not-allowed;
}
.x-tag--default.x-tag--disabled:hover {
  color: var(--td-text-color-disabled);
  background-color: var(--td-bg-color-component-disabled);
}
.x-tag--default.x-tag--disabled .x-icon:hover {
  cursor: pointer;
}
.x-tag--default.x-tag--outline {
  border-color: var(--td-component-border);
}
.x-tag--default.x-tag--light {
  background-color: var(--td-bg-color-secondarycontainer);
}
.x-tag--default.x-tag--light-outline {
  border-color: var(--td-component-border);
  background-color: var(--td-bg-color-secondarycontainer);
}
.x-tag--primary {
  background-color: var(--td-brand-color);
}
.x-tag--primary.x-tag--outline {
  border-color: var(--td-brand-color);
}
.x-tag--primary.x-tag--light {
  background-color: var(--td-brand-color-light);
}
.x-tag--primary.x-tag--light-outline {
  border-color: var(--td-brand-color);
  background-color: var(--td-brand-color-light);
}
.x-tag--primary.x-tag--light,
.x-tag--primary.x-tag--outline,
.x-tag--primary.x-tag--light-outline {
  color: var(--td-brand-color);
}
.x-tag--primary.x-tag--light .x-tag__icon-close:hover,
.x-tag--primary.x-tag--outline .x-tag__icon-close:hover,
.x-tag--primary.x-tag--light-outline .x-tag__icon-close:hover {
  color: var(--td-brand-color-hover);
}
.x-tag--success {
  background-color: var(--td-success-color);
}
.x-tag--success.x-tag--outline {
  border-color: var(--td-success-color);
}
.x-tag--success.x-tag--light {
  background-color: var(--td-success-color-light);
}
.x-tag--success.x-tag--light-outline {
  border-color: var(--td-success-color);
  background-color: var(--td-success-color-light);
}
.x-tag--success.x-tag--light,
.x-tag--success.x-tag--outline,
.x-tag--success.x-tag--light-outline {
  color: var(--td-success-color);
}
.x-tag--success.x-tag--light .x-tag__icon-close:hover,
.x-tag--success.x-tag--outline .x-tag__icon-close:hover,
.x-tag--success.x-tag--light-outline .x-tag__icon-close:hover {
  color: var(--td-success-color-hover);
}
.x-tag--warning {
  background-color: var(--td-warning-color);
}
.x-tag--warning.x-tag--outline {
  border-color: var(--td-warning-color);
}
.x-tag--warning.x-tag--light {
  background-color: var(--td-warning-color-light);
}
.x-tag--warning.x-tag--light-outline {
  border-color: var(--td-warning-color);
  background-color: var(--td-warning-color-light);
}
.x-tag--warning.x-tag--light,
.x-tag--warning.x-tag--outline,
.x-tag--warning.x-tag--light-outline {
  color: var(--td-warning-color);
}
.x-tag--warning.x-tag--light .x-tag__icon-close:hover,
.x-tag--warning.x-tag--outline .x-tag__icon-close:hover,
.x-tag--warning.x-tag--light-outline .x-tag__icon-close:hover {
  color: var(--td-warning-color-hover);
}
.x-tag--danger {
  background-color: var(--td-error-color);
}
.x-tag--danger.x-tag--outline {
  border-color: var(--td-error-color);
}
.x-tag--danger.x-tag--light {
  background-color: var(--td-error-color-light);
}
.x-tag--danger.x-tag--light-outline {
  border-color: var(--td-error-color);
  background-color: var(--td-error-color-light);
}
.x-tag--danger .x-tag__icon-close {
  fill: var(--td-error-color);
}
.x-tag--danger .x-tag__icon-close:hover {
  fill: var(--td-error-color-hover);
}
.x-tag--danger.x-tag--light,
.x-tag--danger.x-tag--outline,
.x-tag--danger.x-tag--light-outline {
  color: var(--td-error-color);
}
.x-tag--danger.x-tag--light .x-tag__icon-close:hover,
.x-tag--danger.x-tag--outline .x-tag__icon-close:hover,
.x-tag--danger.x-tag--light-outline .x-tag__icon-close:hover {
  color: var(--td-error-color-hover);
}
.x-tag--dark.x-tag:not(.x-tag--default) .x-tag__icon-close {
  color: var(--td-font-white-2);
}
.x-tag--dark.x-tag:not(.x-tag--default) .x-tag__icon-close:hover {
  color: var(--td-font-white-1);
}
.x-tag.x-tag--outline {
  background: transparent;
}
.x-tag.x-size-s {
  padding: 0px var(--td-comp-paddingLR-xs);
  height: var(--td-comp-size-xxs);
  font: var(--td-font-body-small);
}
.x-tag.x-size-s .x-icon {
  font-size: var(--td-font-body-small);
}
.x-tag.x-size-l {
  padding: 0px var(--td-comp-paddingLR-m);
  height: var(--td-comp-size-m);
  font: var(--td-font-body-medium);
}
.x-tag.x-size-l .x-icon {
  font: var(--td-font-body-medium);
}
.x-tag.x-tag--round {
  border-radius: var(--td-radius-extraLarge);
}
.x-tag.x-tag--mark {
  border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0;
}
.x-tag.x-tag--ellipsis .x-tag--text {
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
a .x-tag {
  cursor: pointer;
  transition: all 0.2s linear;
}
a .x-tag:hover {
  color: var(--td-brand-color);
  background-color: var(--td-bg-color-component-hover);
}
a .x-tag:active {
  color: var(--td-brand-color-active);
  background-color: var(--td-bg-color-component-active);
}