yonui-ys/lib/components/Tag/index.less

yonui ys

.u-tag {
  display: inline-block;
  line-height: 18px;
  margin-bottom: 3px!important;
  height: 20px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid #787878;
  background: #fff;
  margin-right: 4px;
  cursor: pointer;
  vertical-align: middle;
  color: #787878;
  .uf-close {
    transform: scale(.7);
    display: inline-block;
    padding: 0 0 0 5px;
    margin-top: -1px;
  }
  .u-tag-text{
    line-height: 18px;
  }
}

.uf-close:before {
  font-size: 12px;
}

.u-tag-color-pink {
  color: #f5317f;
  background: #fdd8e7;
  border-color: #fdd8e7;
}

.u-tag-color-red {
  color: #f04134;
  background: #fcdbd9;
  border-color: #fcdbd9;
}

.u-tag-color-orange {
  color: #f56a00;
  background: #fde3cf;
  border-color: #fde3cf;
}

.u-tag-color-cyan {
  color: #00a2ae;
  background: #cfedf0;
  border-color: #cfedf0;
}

.u-tag-color-blue {
  color: #108ee9;
  background: #d2eafb;
  border-color: #d2eafb;
}

.u-tag-color-purple {
  color: #7265e6;
  background: #e4e2fa;
  border-color: #e4e2fa;
}

.u-tag-color-green {
  color: #00a854;
  background: #cfefdf;
  border-color: #cfefdf;
}

.u-tag-checkable {
  display: inline-block;
  line-height: 20px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #505766;
  cursor: pointer;
  border: #fff 1px solid;

  &:hover {
    border-color: #D9D9D9;
  }

  &.u-tag-checkable-checked {
    border-color: #505766;
  }
}

.yon-row {
  .col-float {
    .u-tag-checkable {
      margin-right: 4px;
      margin-top: 2px;
    }
  }
}

@media screen and (min-width: 1300px) and (max-width:1370px) {
  .yon-row {
    .col-float {
      .u-tag-checkable {
        padding: 0 4px !important;
      }
    }
  }
}

@media screen and (min-width: 1250px) and (max-width:1299px) {
  .yon-row {
    .col-float {
      .u-tag-checkable {
        padding: 0 4px !important;
      }
    }
  }
}

// @media screen and (min-width: 1200px) and (max-width:1249px) {
//   .yon-row {
//     .col-float {
//       .u-tag-checkable {
//         padding: 0 2px;
//       }
//     }
//   }
// }