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);
  }
}

@mixin tag-type-mixin($type) {
  @include m($type + '-type') {
    @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 $default-cubic-bezier;
      @include e(close-mark) {
        cursor: pointer;
        path {
          transition: fill .2s $default-cubic-bezier;
        }
      }
      @include m(disabled) {
        cursor: not-allowed !important;
        @include e(close-mark) { 
          cursor: not-allowed !important;
        }
      }
      @include m(closable) {
        padding-right: 18px;
        @include e(close-mark) {
          transition: color .3s $default-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');
  }
  //   &.n-tag--default-type {
  //     box-shadow: inset 0 0 0 1px rgba(99,226,183,1);
  //     color: rgba(99, 226, 183, 1);
  //     .n-tag__close-mark {
  //       color: rgba(99, 226, 183, 0.5);
  //       &:hover {
  //         color: rgba(99, 226, 183, 1);
  //       }
  //     }
  //     &:hover {
  //       background-color: rgba(99, 226, 183, 0.3);
  //     }
  //     &:active {
  //       background-color: rgba(99, 226, 183, 0.2);
  //     }
  //   }
  //   &.n-tag--success-type {
  //     box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
  //     color:  rgba(99, 226, 183, 1);
  //     .n-tag__close-mark {
  //       path {
  //         fill: rgba(99, 226, 183, 0.5);
  //       }
  //       &:hover {
  //         path{
  //           fill: rgba(99, 226, 183, 1); 
  //         }
  //       }
  //     }
  //     &:hover {
  //       background-color: rgba(99, 226, 183, 0.3);
  //     }
  //     &:active {
  //       background-color: rgba(99, 226, 183, 0.2);
  //     }
  //   }
  //   &.n-tag--info-type {
  //     box-shadow: inset 0 0 0 1px rgba(98, 187, 252, 1);
  //     color: rgba(98, 187, 252, 1);
  //     .n-tag__close-mark {
  //       color: rgba(98, 187, 252, 0.5);
  //       &:hover {
  //         color: rgba(98, 187, 252, 1);
  //       }
  //     }
  //     &:hover {
  //       background-color: rgba(98, 187, 252, 0.3);
  //     }
  //     &:active {
  //       background-color: rgba(98, 187, 252, 0.2);
  //     }
  //   }
  //   &.n-tag--warning-type {
  //     box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 1);
  //     color: rgba(245, 166, 35, 1);
  //     .n-tag__close-mark {
  //       color: rgba(245, 166, 35, 0.5);
  //       &:hover {
  //         color: rgba(245, 166, 35, 1);
  //       }
  //     }
  //     &:hover {
  //       background-color: rgba(245, 166, 35, 0.3);
  //     }
  //     &:active {
  //       background-color: rgba(245, 166, 35, 0.2);
  //     }
  //   }
  //   &.n-tag--error-type {
  //     box-shadow: inset 0 0 0 1px rgba(255, 146, 164, 1);
  //     color: rgba(255, 146, 164, 1);
  //     .n-tag__close-mark {
  //       color: rgba(255, 146, 164, 0.5);
  //       &:hover {
  //         color: rgba(255, 146, 164, 1);
  //       }
  //     }
  //     &:hover {
  //       background-color: rgba(255, 146, 164, 0.3);
  //     }
  //     &:active {
  //       background-color: rgba(255, 146, 164, 0.2);
  //     }
  //   }
  // }
}