other / mew-iview

  @tag-prefix-cls: ~"@{css-prefix}tag";
  @tag-close-prefix-cls: ivu-icon-ios-close-empty;
  
  .@{tag-prefix-cls} {
      display: inline-block;
      height: 22px;
      line-height: 22px;
      margin: 2px 4px 2px 0;
      padding: 0 8px;

      border: 1px solid @border-color-split;

      border-radius: @btn-border-radius-small;

      background: @background-color-base;
      font-size: @tag-font-size;
      vertical-align: middle;
      opacity: 1;
      overflow: hidden;
      cursor: pointer;

      //transition: all @transition-time @ease-in-out;

      // for color and unchecked
      &:not(&-border):not(&-dot):not(&-checked){
          background: transparent;
          border: 0;

          color: @text-color;
          .@{tag-close-prefix-cls} {
              color: @text-color !important;
          }

      }
  

      &-color{
          &-red{
              color: @error-color !important;
          }
          &-green{
              color: @success-color !important;
          }
          &-blue{
              color: @link-color !important;
          }
          &-yellow{
              color: @warning-color !important;
          }
          &-white{
              color: rgb(255, 255, 255) !important;
          }
      }
  

      &-dot{
          height: 32px;
          line-height: 32px;
          border: 1px solid @border-color-split !important;
          color: @text-color !important;
          background: #fff !important;
          padding: 0 12px;
  
          &-inner{
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-right: 8px;
              border-radius: 50%;
              background: @border-color-split;
              position: relative;
              top: 1px;
          }
          .@{tag-close-prefix-cls} {
              color: #666 !important;
              margin-left: 12px !important;
          }
      }
  
      &-border{
          height: 24px;
          line-height: 24px;

          border: 1px solid @border-color-split;
          color: @border-color-split;

          background: #fff !important;
          position: relative;
  
          .@{tag-close-prefix-cls} {

              color: #666;

              margin-left: 12px !important;
          }
  
          &:after{
              content: "";
              display: none;
              width: 1px;

              background: currentColor;

              position: absolute;
              top: 0;
              bottom: 0;
              right: 22px;
          }
  
          &.@{tag-prefix-cls}-closable {
              &:after{
                  display: block;
              }
              .@{tag-close-prefix-cls} {
                  margin-left: 18px !important;
              }
          }
  
          &.@{tag-prefix-cls}-blue {
              color: @link-color !important;

              border: 1px solid @link-color !important;
  
              &:after{
                  background: @link-color;
              }
              .@{tag-close-prefix-cls}{
                  color: @link-color !important;
              }

          }
          &.@{tag-prefix-cls}-green {
              color: @success-color !important;

              border: 1px solid @success-color !important;
  
              &:after{
                  background: @success-color;
              }
              .@{tag-close-prefix-cls}{
                  color: @success-color !important;
              }

          }
          &.@{tag-prefix-cls}-yellow {
              color: @warning-color !important;

              border: 1px solid @warning-color !important;
  
              &:after{
                  background: @warning-color;
              }
              .@{tag-close-prefix-cls}{
                  color: @warning-color !important;
              }

          }
          &.@{tag-prefix-cls}-red {
              color: @error-color !important;

              border: 1px solid @error-color !important;
  
              &:after{
                  background: @error-color;
              }
              .@{tag-close-prefix-cls}{
                  color: @error-color !important;
              }

          }
      }
  

      &:hover {
          opacity: 0.85;
      }
  
      &,
      a,
      a:hover {

          // color: @text-color;

      }
  
      &-text {
          a:first-child:last-child {
              display: inline-block;
              margin: 0 -8px;
              padding: 0 8px;
          }

          color: @text-color;

      }
  
      .@{tag-close-prefix-cls} {
          .iconfont-size-under-12px(20px);
          cursor: pointer;

          margin-left: 8px;

          color: #666;
          opacity: 0.66;
          position: relative;
          top: 1px;

          //transition: all @transition-time @ease-in-out;

  
          &:hover {
              opacity: 1;
          }
      }
  
      &-blue,
      &-green,
      &-yellow,
      &-red {
          border: 0;
          &,
          a,
          a:hover,
          .@{tag-close-prefix-cls},
          .@{tag-close-prefix-cls}:hover {
              color: #fff;
          }
      }
  

      &-blue,
      &-blue&-dot &-dot-inner
      {

          background: @link-color;
      }
  

      &-green,
      &-green&-dot &-dot-inner
      {

          background: @success-color;
      }
  

      &-yellow,
      &-yellow&-dot &-dot-inner
      {

          background: @warning-color;
      }
  

      &-red,
      &-red&-dot &-dot-inner
      {

          background: @error-color;
      }

  }