zent/css/tag.css

一套前端设计语言和基于React的实现

.zent-tag {
  color: #fff;
  color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
  border-color: #fff;
  border-color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
}
.zent-tag.zent-tag-size-medium {
  font-size: 14px;
}
.zent-tag.zent-tag-size-large {
  font-size: 14px;
  line-height: 18px;
}
.zent-tag.zent-tag-rounded {
  border-radius: 2px;
}
.zent-tag.zent-tag-closable .zent-tag-content {
  display: inline-block;
  margin-right: 4px;
}
.zent-tag.zent-tag-closable .zent-tag-close-btn {
  cursor: pointer;
  font-size: 12px;
  transform: translate(2px, 0);
}
.zent-tag.zent-tag-style-red {
  background-color: #d42f15;
  background-color: var(--theme-danger-color, var(--theme-error-2, #d42f15));
  border-color: #d42f15;
  border-color: var(--theme-danger-color, var(--theme-error-2, #d42f15));
}
.zent-tag.zent-tag-style-red-outline {
  border-color: #d42f15;
  border-color: var(--theme-danger-color, var(--theme-error-2, #d42f15));
  color: #d42f15;
  color: var(--theme-danger-color, var(--theme-error-4, #d42f15));
}
.zent-tag.zent-tag-style-green {
  background-color: #45a110;
  background-color: var(--theme-success-color, var(--theme-success-2, #45a110));
  border-color: #45a110;
  border-color: var(--theme-success-color, var(--theme-success-2, #45a110));
}
.zent-tag.zent-tag-style-green-outline {
  color: #45a110;
  color: var(--theme-success-color, var(--theme-success-2, #45a110));
  border-color: #45a110;
  border-color: var(--theme-success-color, var(--theme-success-4, #45a110));
}
.zent-tag.zent-tag-style-yellow {
  background-color: #ed6a18;
  background-color: var(--theme-warning-color, var(--theme-warn-2, #ed6a18));
  border-color: #ed6a18;
  border-color: var(--theme-warning-color, var(--theme-warn-2, #ed6a18));
}
.zent-tag.zent-tag-style-yellow-outline {
  color: #ed6a18;
  color: var(--theme-warning-color, var(--theme-warn-2, #ed6a18));
  border-color: #ed6a18;
  border-color: var(--theme-warning-color, var(--theme-warn-4, #ed6a18));
}
.zent-tag.zent-tag-style-blue {
  background-color: #155bd4;
  background-color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
  border-color: #155bd4;
  border-color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
}
.zent-tag.zent-tag-style-blue-outline {
  color: #155bd4;
  color: var(--theme-primary-bg, var(--theme-primary-4, #155bd4));
  border-color: #356fd4;
  border-color: var(--theme-primary-hover-bg, var(--theme-primary-6, #356fd4));
}
.zent-tag.zent-tag-style-grey {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
  border-color: #f7f7f7;
  border-color: var(--theme-body-bg, var(--theme-stroke-7, #f7f7f7));
  background-color: #f7f7f7;
  background-color: var(--theme-body-bg, var(--theme-stroke-7, #f7f7f7));
}
.zent-tag.zent-tag-style-grey-outline {
  color: #333;
  color: var(--theme-title-color, var(--theme-stroke-1, #333));
  border-color: #e0e0e0;
  border-color: var(--theme-default-border-color, var(--theme-stroke-5, #e0e0e0));
}
.zent-tag.zent-link-tag {
  padding: 0 4px;
}
.zent-tag.zent-link-tag .zent-tag-content {
  display: flex;
  align-items: center;
}
.zent-tag.zent-link-tag .zent-link-tag-right-icon {
  margin-right: -4px;
  font-size: 16px;
  color: #999;
  color: var(--theme-hint-color, #999);
}
.zent-tag.zent-link-tag:hover {
  cursor: pointer;
  color: #155bd4;
  color: var(--theme-primary-bg, #155bd4);
  border-color: #155bd4;
  border-color: var(--theme-primary-bg, #155bd4);
}
.zent-tag.zent-link-tag:hover .zent-link-tag-right-icon {
  color: #155bd4;
  color: var(--theme-primary-bg, #155bd4);
}
.zent-tag.zent-select-tag {
  cursor: pointer;
}
.zent-tag.zent-select-tag.zent-select-tag-selected {
  color: #155bd4;
  color: var(--theme-primary-bg, #155bd4);
  background-color: #f7f7f7;
  background-color: var(--theme-default-hover-bg, #f7f7f7);
  border-color: #f7f7f7;
  border-color: var(--theme-default-hover-bg, #f7f7f7);
}
.zent-tag a {
  color: inherit;
}