fine-true/lib/tag/index.less

A small and beautiful Vue3 version of the UI Library

/*
jiangbei 
*/

.fine-tag {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  border-width: 1px;
  border-style: solid;
  .fine-tag-close {
    margin-left: 3px;
    transform: scale(0.7);
    transition: all 0.25s;
    &:hover {
      transform: scale(1);
      font-weight: 600;
    }
  }
}
.fine-tag-text {
  white-space: nowrap;
  white-space: nowrap;
}
.fine-tag-size-large {
  padding: 0 10px;
  line-height: 34px;
  .fine-tag-text {
    font-size: 16px;
  }
  .fine-tag-close {
    font-size: 16px;
  }
}
.fine-tag-size-default {
  padding: 0 8px;
  line-height: 26px;
  .fine-tag-text {
    font-size: 14px;
  }
  .fine-tag-close {
    font-size: 14px;
  }
}
.fine-tag-size-small {
  padding: 0 5px;
  line-height: 20px;
  .fine-tag-text {
    font-size: 12px;
  }
  .fine-tag-close {
    font-size: 12px;
  }
}
/*
color
*/
.fine-tag-color-default {
  background: var(--fine-tag-default-background-color);
  border-color: var(--fine-tag-default-border-color);
  .fine-tag-close {
    color: var(--fine-tag-default-color);
  }
  .fine-tag-text {
    color: var(--fine-tag-default-color);
  }
}
.fine-tag-color-blue {
  background: var(--fine-tag-blue-background-color);
  border-color: var(--fine-tag-blue-border-color);
  .fine-tag-close {
    color: var(--fine-tag-blue-color);
  }
  .fine-tag-text {
    color: var(--fine-tag-blue-color);
  }
}

.fine-tag-color-red {
  background: var(--fine-tag-red-background-color);
  border-color: var(--fine-tag-red-border-color);
  .fine-tag-close {
    color: var(--fine-tag-red-color);
  }
  .fine-tag-text {
    color: var(--fine-tag-red-color);
  }
}

.fine-tag-color-orange {
  background: var(--fine-tag-orange-background-color);
  border-color: var(--fine-tag-orange-border-color);
  .fine-tag-close {
    color: var(--fine-tag-orange-color);
  }
  .fine-tag-text {
    color: var(--fine-tag-orange-color);
  }
}

.fine-tag-color-gray {
  background: var(--fine-tag-gray-background-color);
  border-color: var(--fine-tag-gray-border-color);
  .fine-tag-close {
    color: var(--fine-tag-gray-color);
  }
  .fine-tag-text {
    color: var(--fine-tag-gray-color);
  }
}
.fine-tag-color-green {
  background: var(--fine-tag-green-background-color);
  border-color: var(--fine-tag-green-border-color);
  .fine-tag-close {
    color: var(--fine-tag-green-color);
  }
  .fine-tag-text {
    color: var(--fine-tag-green-color);
  }
}
.fine-tag-color-pink {
  background: var(--fine-tag-pink-background-color);
  border-color: var(--fine-tag-pink-border-color);
  .fine-tag-close {
    color: var(--fine-tag-pink-color);
  }
  .fine-tag-text {
    color: var(--fine-tag-pink-color);
  }
}