zarm-web/lib/tag/style/index.css

基于 React 的桌面端UI库

.zw-tag {
  display: inline-block;
  position: relative;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-size: var(--tag-font-size);
  border-width: 1px;
  border-style: solid;
  background-color: var(--tag-default-background);
  border-color: var(--tag-default-border);
  color: var(--tag-default-color);
  margin: 0 8px 8px 0;
  border-radius: var(--radius-md);
  cursor: default;
  /* tag sizes: default md */
  padding: 0 var(--tag-padding-h);
  font-size: var(--tag-font-size);
  height: var(--tag-height-md);
  line-height: var(--tag-height-md);
  /* tag preset color */
}
.zw-tag:hover {
  opacity: 0.8;
}
.zw-tag .zw-icon {
  margin-left: 8px;
  cursor: pointer;
}
.zw-tag--rect {
  border-radius: 0;
}

.zw-tag--round {
  border-radius: var(--tag-height-lg);
}

.zw-tag--unborder {
  border: hidden;
}

.zw-tag--checkable {
  cursor: pointer;
}

.zw-tag .zw-icon {
  font-size: var(--tag-icon-size);
}
.zw-tag--lg {
  padding: 0 var(--tag-padding-h-lg);
  font-size: var(--tag-font-size);
  height: var(--tag-height-lg);
  line-height: var(--tag-height-lg);
}
.zw-tag--lg .zw-icon {
  font-size: var(--tag-icon-size-lg);
}

.zw-tag--md {
  padding: 0 var(--tag-padding-h);
  font-size: var(--tag-font-size);
  height: var(--tag-height-md);
  line-height: var(--tag-height-md);
}
.zw-tag--md .zw-icon {
  font-size: var(--tag-icon-size);
}

.zw-tag--sm {
  padding: 0 var(--tag-padding-h);
  font-size: var(--tag-font-size);
  height: var(--tag-height-sm);
  line-height: var(--tag-height-sm);
}
.zw-tag--sm .zw-icon {
  font-size: var(--tag-icon-size);
}

.zw-tag--xs {
  padding: 0 var(--tag-padding-h);
  font-size: var(--tag-font-size);
  height: var(--tag-height-xs);
  line-height: var(--tag-height-xs);
}
.zw-tag--xs .zw-icon {
  font-size: var(--tag-icon-size-xs);
}

.zw-tag--green {
  background-color: rgba(var(--tag-color-green), 0.05);
  border-color: rgba(var(--tag-color-green), 0.3);
  color: rgba(var(--tag-color-green), 1);
}
.zw-tag--green.zw-tag--unborder {
  color: #fff;
  background-color: rgba(var(--tag-color-green), 1);
  border: hidden;
}

.zw-tag--blue {
  background-color: rgba(var(--tag-color-blue), 0.05);
  border-color: rgba(var(--tag-color-blue), 0.3);
  color: rgba(var(--tag-color-blue), 1);
}
.zw-tag--blue.zw-tag--unborder {
  color: #fff;
  background-color: rgba(var(--tag-color-blue), 1);
  border: hidden;
}

.zw-tag--orange {
  background-color: rgba(var(--tag-color-orange), 0.05);
  border-color: rgba(var(--tag-color-orange), 0.3);
  color: rgba(var(--tag-color-orange), 1);
}
.zw-tag--orange.zw-tag--unborder {
  color: #fff;
  background-color: rgba(var(--tag-color-orange), 1);
  border: hidden;
}

.zw-tag--red {
  background-color: rgba(var(--tag-color-red), 0.05);
  border-color: rgba(var(--tag-color-red), 0.3);
  color: rgba(var(--tag-color-red), 1);
}
.zw-tag--red.zw-tag--unborder {
  color: #fff;
  background-color: rgba(var(--tag-color-red), 1);
  border: hidden;
}

.zw-tag--checked {
  background-color: var(--tag-primary-color);
  border-color: transparent;
  color: var(--tag-default-background);
}
.zw-tag--checked:hover {
  background-color: var(--tag-primary-hover-background);
}
.zw-tag--checked:active {
  background-color: var(--tag-primary-active-background);
  border-color: var(--tag-primary-active-background);
}

.zw-tag--disabled {
  cursor: not-allowed;
  opacity: var(--tag-disabled-opacity);
  background-color: var(--tag-default-background);
  border-color: var(--tag-default-border);
  color: var(--tag-color-disabled);
}
.zw-tag--disabled:hover {
  background-color: var(--tag-default-background);
  color: var(--tag-color-disabled);
  opacity: var(--tag-disabled-opacity);
}