Simplify select component selectors

This commit is contained in:
Ronan Berder
2026-06-26 11:56:36 +08:00
parent 7cd8a09de3
commit bf8f721662
9 changed files with 113 additions and 113 deletions
+12 -12
View File
@@ -480,51 +480,51 @@
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
.select:not(select) > button {
@apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 data-[size=sm]:h-7 gap-1.5 rounded-2xl border px-3 py-2 text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
}
*:not(select).select > button > span {
.select:not(select) > button > span {
@apply gap-1.5;
}
*:not(select).select > button > svg {
.select:not(select) > button > svg {
@apply text-muted-foreground size-4;
}
*:not(select).select [data-popover] {
.select:not(select) [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 rounded-2xl p-1 shadow-lg ring-1 duration-100;
}
*:not(select).select [role='listbox'] {
.select:not(select) [role='listbox'] {
@apply scroll-py-1.5;
}
*:not(select).select [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
.select:not(select) [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@apply py-6 text-center text-sm;
}
*:not(select).select [role='heading'] {
.select:not(select) [role='heading'] {
@apply text-muted-foreground px-2 py-1 text-xs;
}
*:not(select).select [role='option'] {
.select:not(select) [role='option'] {
@apply min-h-7 gap-2 rounded-xl py-1.5 ps-2 pe-8 text-sm [&_svg:not([class*='size-'])]:size-4;
}
*:not(select).select [role='option'].active,
*:not(select).select [role='option']:focus-visible {
.select:not(select) [role='option'].active,
.select:not(select) [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
*:not(select).select [role='group'] {
.select:not(select) [role='group'] {
@apply scroll-my-1.5 p-1;
}
*:not(select).select [role='separator'] {
.select:not(select) [role='separator'] {
@apply bg-border -mx-1 my-1 h-px;
}