45 lines
1.2 KiB
CSS
45 lines
1.2 KiB
CSS
/* Container */
|
|
.chips {
|
|
@apply flex flex-wrap items-center gap-1.5 px-2 py-1.5 w-full
|
|
rounded-lg border border-gray-300 dark:border-gray-600
|
|
bg-white dark:bg-gray-800
|
|
focus-within:ring-2 focus-within:border-transparent
|
|
cursor-text transition-colors duration-150;
|
|
}
|
|
|
|
.chips-invalid {
|
|
@apply border-red-500 focus-within:ring-red-500;
|
|
}
|
|
|
|
.chips-disabled {
|
|
@apply opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-700;
|
|
}
|
|
|
|
/* Chip item */
|
|
.chips-item {
|
|
@apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm
|
|
bg-indigo-100 dark:bg-indigo-900/40
|
|
text-indigo-700 dark:text-indigo-300
|
|
select-none outline-none
|
|
focus-visible:ring-2 focus-visible:ring-indigo-500;
|
|
}
|
|
|
|
.chips-item[data-focused='true'] {
|
|
@apply ring-2 ring-indigo-500;
|
|
}
|
|
|
|
.chips-item-label {
|
|
@apply leading-none;
|
|
}
|
|
|
|
.chips-item-remove {
|
|
@apply flex items-center justify-center rounded-full
|
|
text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-100
|
|
transition-colors duration-100;
|
|
}
|
|
|
|
/* Input */
|
|
.chips-input {
|
|
@apply flex-1 min-w-[80px] outline-none bg-transparent text-sm
|
|
text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500;
|
|
}
|