@arco-design/web-vue/es/tag/style/index.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import '../../style/mixins/index.less';
@import './token.less';

@tag-prefix-cls: ~'@{prefix}-tag';

@colors: red, orangered, orange, gold, lime, green, cyan, blue, arcoblue, purple,
  pinkpurple, magenta, gray;

.@{tag-prefix-cls} {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: @tag-size-default;
  padding: @tag-padding-vertical @tag-padding-horizontal;
  color: @tag-default-color-text;
  font-weight: @tag-text-font-weight;
  font-size: @tag-size-default-font-size;
  line-height: @tag-size-default - @tag-border-width * 2 - @tag-padding-vertical *
    2;
  vertical-align: middle;
  border: @tag-border-width @tag-border-type transparent;
  border-radius: @tag-border-radius;
  .text-ellipsis();

  .icon-hover(@tag-prefix-cls, 12px, 16px);
  .icon-hover-bg(@tag-prefix-cls, @tag-default-color-bg_hover);

  &-checkable {
    cursor: pointer;
    transition: all @transition-duration-1 @transition-timing-function-linear;
  }

  &-checkable:hover {
    background-color: @tag-color-bg-not-checked_hover;
  }

  &-checked {
    background-color: @tag-default-color-bg;
    border-color: @tag-default-color-border;
  }

  &-checkable&-checked:hover {
    background-color: @tag-default-color-bg_hover;
    border-color: @tag-default-color-border_hover;
  }

  &-bordered,
  &-checkable&-checked&-bordered:hover {
    border-color: @tag-default-bordered-color-border;
  }

  // Size
  &-size-small {
    height: @tag-size-small;
    font-size: @tag-size-small-font-size;
    line-height: @tag-size-small - @tag-border-width * 2;
  }

  &-size-medium {
    height: @tag-size-medium;
    font-size: @tag-size-medium-font-size;
    line-height: @tag-size-medium - @tag-border-width * 2;
  }

  &-size-large {
    height: @tag-size-large;
    font-size: @tag-size-large-font-size;
    line-height: @tag-size-large - @tag-border-width * 2;
  }

  &-hide {
    display: none;
  }

  &-loading {
    cursor: default;
    opacity: 0.8;
  }

  &-icon {
    margin-right: @tag-icon-margin-right;
    color: @tag-default-color-icon;
  }

  &-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  each(@colors, {
    &&-checked&-@{value} {
      color: ~'@{tag-@{value}-color-text}';
      background-color: ~'@{tag-@{value}-color-bg}';
      border: @tag-border-width @tag-border-type ~'@{tag-@{value}-color-border}';

      .icon-hover-bg(@tag-prefix-cls, ~'@{tag-@{value}-color-icon-bg_hover}');
    }

    &&-checkable&-checked&-@{value}&:hover {
      background-color: ~'@{tag-@{value}-color-bg_hover}';
      border-color: ~'@{tag-@{value}-color-border_hover}';
    }

    &-checked&-@{value}&-bordered,
    &-checked&-@{value}&-bordered:hover {
      border-color: ~'@{tag-@{value}-bordered-color-border}';
    }

    &&-checked&-@{value} &-icon,
    &&-checked&-@{value} &-close-btn,
    &&-checked&-@{value} &-loading-icon {
      color: ~'@{tag-@{value}-color-icon}';
    }
  });

  &&-custom-color {
    color: @tag-custom-color-text;

    .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);
  }

  & &-close-btn {
    margin-left: 4px;
    font-size: 12px;

    > svg {
      position: relative;
    }
  }

  & &-loading-icon {
    margin-left: 4px;
    font-size: 12px;
  }
}

@{arco-theme-tag}[arco-theme='dark'] {
  .@{tag-prefix-cls}-checked {
    color: rgba(255, 255, 255, 0.9);
  }

  each(@colors, {
    .@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value} {
      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.2)';

      .icon-hover-bg(@tag-prefix-cls, ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)');
    }

    .@{tag-prefix-cls}-checkable.@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value}:hover {
      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)';
    }
  });
}

.@{tag-prefix-cls}-rtl {
  direction: rtl;

  .@{tag-prefix-cls} {
    &-icon {
      margin-right: 0;
      margin-left: @tag-icon-margin-right;
    }

    &-close-btn,
    &-loading-icon {
      margin-right: 4px;
      margin-left: 0;
    }
  }
}