naive-ui/styles/Tag.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@mixin tag-size-mixin($size) {
  $height: map-get($--n-height, $size) - 6px;
  $font-size: (
    "small": 12px,
    "medium": 14px,
    "large": 14px
  );
  @include m($size + "-size") {
    line-height: $height;
    height: $height;
    font-size: map-get($font-size, $size);
    @include m(round) {
      padding-left: $height / 2;
      padding-right: $height / 2;
      border-radius: $height / 2;
      @include m(closable) {
        padding-right: 8px + $height / 2;
        @include e(close-mark) { 
          right: $height / 2 - 8px;
        }
      }
    }
  }
}

@mixin tag-type-mixin($type) {
  @include m($type + '-type') {
    @include not-m(checkable) {
      @include not-m(disabled) {
        box-shadow: inset 0 0 0 1px map-get($map: $--tag-border-color, $key: $type);
        color: map-get($map: $--tag-color, $key: $type);
        background-color: map-get($map: $--tag-background-color, $key: $type);
        @include e(close-mark) {
          path {
            fill: map-get($map: $--tag-close-mark-color, $key: $type);
          }
          &:hover {
            path {
              fill: map-get($map: $--tag-close-mark-color, $key: $type + '-hover');
            }
          }
          &:active {
            path {
              fill: map-get($map: $--tag-close-mark-color, $key: $type + '-active');
            }
          }
        }
        &:hover {
          background-color: map-get($map: $--tag-background-color, $key: $type + '-hover');
        }
        &:active {
          background-color: map-get($map: $--tag-background-color, $key: $type + '-active');
        }
      }
      @include m(disabled) {
        box-shadow: inset 0 0 0 1px map-get($map: $--tag-border-color, $key: $type + '-disabled');
        color: map-get($map: $--tag-color, $key: $type + '-disabled');
        background-color: map-get($map: $--tag-background-color, $key: $type + '-disabled');
        @include e(close-mark) {
          path {
            fill: map-get($map: $--tag-close-mark-color, $key: $type + '-disabled');
          }
        }
      }
    }
    
  }
}

@include themes-mixin {
  @include b(tag) {
    @include once {
      @include tag-size-mixin("small");
      @include tag-size-mixin("medium");
      @include tag-size-mixin("large");
      white-space: nowrap;
      position: relative;
      padding: 0 7px;
      border-radius: 4px;
      box-sizing: border-box;
      cursor: default;
      display: inline-block;
      transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
      @include e(close-mark) {
        cursor: pointer;
        path {
          transition: fill .2s $--n-ease-in-out-cubic-bezier;
        }
      }
      @include m(checkable) {
        cursor: pointer;
      }
      @include m(disabled) {
        cursor: not-allowed !important;
        @include e(close-mark) { 
          cursor: not-allowed !important;
        }
        @include m(checkable) {
          opacity: .4;
        }
      }
      @include m(closable) {
        padding-right: 18px;
        @include e(close-mark) {
          transition: color .3s $--n-ease-in-out-cubic-bezier;
          right: 3px;
          top: 50%;
          transform: translateY(-50%);
          height: 14px;
          width: 14px;
          line-height: 14px;
          position: absolute;
        }
      }
    }
    @include tag-type-mixin('default');
    @include tag-type-mixin('info');
    @include tag-type-mixin('success');
    @include tag-type-mixin('warning');
    @include tag-type-mixin('error');
    @include m(checkable) {
      box-shadow: none;
      color: map-get($--tag-color, 'checkable-default');
      background-color: map-get($map: $--tag-background-color, $key: 'checkable-default');
      @include not-m(disabled) {
        &:hover {
          @include not-m(checked) {
            color: map-get($--tag-color, 'checkable-hover');
          }
          background-color: map-get($map: $--tag-background-color, $key: 'checkable-hover');
        }
        &:active {
          @include not-m(checked) {
            color: map-get($--tag-color, 'checkable-active');
          }
          background-color: map-get($map: $--tag-background-color, $key: 'checkable-active');
        }
      }
      @include m(checked) {
        color: map-get($--tag-color, 'checkable-active');
        background-color: map-get($map: $--tag-background-color, $key: 'checkable-active');
        @include not-m(disabled) {
          &:hover {
            background-color: map-get($map: $--tag-background-color, $key: 'checkable-checked-hover');
          }
          &:active {
            background-color: map-get($map: $--tag-background-color, $key: 'checkable-checked-active');
          }
        }
      }
    }
  }
}