@asi-ngtools/lib/styles/less/asi-input-chips.less

This project is a little components library, simple to use, which will help you to simplify your project.

asi-input-chips, .asi-input-chips {
  .base-component;
  label.input-label {
    color: @asi-input-label-color;
  }
  .chips {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    border-bottom: 1px solid #9e9e9e;
    margin-bottom: 8px;
    min-height: 45px;
    outline: none;
    transition: all .3s;
    &:focus-within {
      border-bottom: @asi-input-outline-border;
    }
    .chip {
      display: inline-block;
      height: 32px;
      font-size: 13px;
      font-weight: 500;
      color: #747474;
      line-height: 32px;
      padding: 0 12px;
      border-radius: 5px;
      background-color: #e4e4e4;
      margin-bottom: 5px;
      margin-right: 5px;
      vertical-align: middle;
      i {
        max-width: 0em;
        opacity: 0;
        transition: max-width .5s ease-out, opacity .5s ease-out, transform .3s cubic-bezier(0.68, -0.49, 0.26, 1.65);
        vertical-align: middle;
        transform: scale(0,0);
        &:hover {
          color: #4e4e4e;
          transition: color 0.2s;
          cursor: pointer;
        }
      }
      &:focus {
        background-color: @asi-ngtools-secondary-color;
        color: white;
        outline: none;
        i{
          opacity: 1;
          display: inline-block;
          max-width: 1em;
          transform: scale(1,1);
        }
      }
      &:hover i{
        display: inline-block;
        max-width: 1em;
        opacity: 1;
        transform: scale(1,1); 
      }
    }
    input {
      display: flex;
      flex: 1 0 auto;
      outline: none;
      background: none;
      border: 0;
      color: rgba(0,0,0,0.6);
      font-size: 16px;
      line-height: 32px;
    }
  }
}