benivo-ui-library/tagsSelect.less

Benivo UI library

.form-select-tags {
    .form-select-tags__multi-value {
        color: var(--grey-700);
        font-weight: @font-weight-medium;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 4px;
        background: var(--white);
        border: 1px solid var(--grey-300);
        border-radius: 6px;
        
        &:hover {
            background: var(--grey-100);
        }
    }

    .form-description {
        margin-top: 0.25rem;
    }
    
    .form-select-tags__multi-value__label {
        padding: 0;
        padding-left: 0;
        font-size: @small-font-size;
        color: var(--grey-700);
        display: flex;
        align-items: center;

    }
    
    .form-select-tags__multi-value__remove {
        padding: 0 4px;
        border-radius: 4px;
        color: var(--grey-500);
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
            background: var(--grey-200);
            color: var(--grey-700);
        }
    }
    
    .form-select-tags__control {
        border: 1px solid var(--grey-300) !important;
        box-shadow: none !important;
        margin-bottom: 6px;
        
        &:hover {
            border-color: var(--grey-400) !important;
        }
    }
    
    .form-select-tags__control--is-focused {
        border-color: var(--blue-500) !important;
        box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.1) !important;
    }
    
    .form-select-tags__input-container {
        input[type='text']  {
            height: unset !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        &:focus {
            box-shadow: none;
        }
    }
    
    .form-select-tags__indicator-separator {
        display: none;
    }

    .form-select-tags__dropdown-indicator {
        color: var(--grey-400);
        padding: 8px;
        
        &:hover {
            color: var(--grey-600);
        }
    }
}

.benivo-tag-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.benivo-tag-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.benivo-tag-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// Responsive adjustments
@media @md-max {
    .benivo-tag-icon {
        width: 24px;
        height: 24px;
    }
    
    .form-select-tags .form-select-tags__control {
        min-height: 48px;
    }
}