mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-11 04:38:18 +00:00
Simplify select component selectors
This commit is contained in:
Ronan Berder
@@ -1,64 +1,64 @@
|
||||
/* Select */
|
||||
@layer components {
|
||||
*:not(select).select {
|
||||
.select:not(select) {
|
||||
@apply relative inline-flex;
|
||||
}
|
||||
|
||||
*:not(select).select > button {
|
||||
.select:not(select) > button {
|
||||
@apply flex w-fit items-center justify-between whitespace-nowrap font-normal outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
|
||||
}
|
||||
|
||||
*:not(select).select > button > span {
|
||||
.select:not(select) > button > span {
|
||||
@apply flex flex-1 truncate text-start;
|
||||
}
|
||||
|
||||
*:not(select).select > button > svg {
|
||||
.select:not(select) > button > svg {
|
||||
@apply shrink-0;
|
||||
}
|
||||
|
||||
*:not(select).select [data-popover] {
|
||||
.select:not(select) [data-popover] {
|
||||
@apply isolate overflow-x-hidden;
|
||||
min-width: max(100%, 9rem);
|
||||
}
|
||||
|
||||
*:not(select).select [role='listbox'] {
|
||||
.select:not(select) [role='listbox'] {
|
||||
@apply outline-hidden;
|
||||
}
|
||||
|
||||
*:not(select).select [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
|
||||
.select:not(select) [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
*: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 flex items-center justify-center truncate;
|
||||
}
|
||||
|
||||
*:not(select).select [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
.select:not(select) [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
@apply content-[attr(data-empty)];
|
||||
}
|
||||
|
||||
*:not(select).select [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
.select:not(select) [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
|
||||
@apply content-['No_results_found'];
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'] {
|
||||
.select:not(select) [role='option'] {
|
||||
@apply aria-hidden:hidden relative flex w-full cursor-default items-center truncate outline-hidden select-none aria-disabled:pointer-events-none aria-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'][aria-selected='true'] {
|
||||
.select:not(select) [role='option'][aria-selected='true'] {
|
||||
@apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'][aria-selected='true']:dir(rtl) {
|
||||
.select:not(select) [role='option'][aria-selected='true']:dir(rtl) {
|
||||
@apply bg-position-[center_left_0.5rem];
|
||||
}
|
||||
|
||||
*:not(select).select [role='separator'] {
|
||||
.select:not(select) [role='separator'] {
|
||||
@apply border-0;
|
||||
}
|
||||
|
||||
*:not(select).select:not([data-select-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover,
|
||||
*:not(select).select [role='option'].active {
|
||||
.select:not(select):not([data-select-initialized]) [role='option']:not([aria-disabled='true']):not(:disabled):hover,
|
||||
.select:not(select) [role='option'].active {
|
||||
@apply bg-accent text-accent-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
+12
-12
@@ -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-9 data-[size=sm]:h-8 gap-1.5 rounded-3xl border px-3 py-2 text-sm transition-[color,box-shadow,background-color] 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-3xl p-1.5 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-3 py-2.5 text-xs;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'] {
|
||||
.select:not(select) [role='option'] {
|
||||
@apply gap-2.5 rounded-2xl py-2 ps-3 pe-8 text-sm font-medium [&_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.5;
|
||||
}
|
||||
|
||||
*:not(select).select [role='separator'] {
|
||||
.select:not(select) [role='separator'] {
|
||||
@apply bg-border -mx-1.5 my-1.5 h-px;
|
||||
}
|
||||
|
||||
|
||||
+12
-12
@@ -460,51 +460,51 @@
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
.select:not(select) > button {
|
||||
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 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-none data-[size=sm]:rounded-none border bg-transparent py-2 ps-2.5 pe-2 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 [&_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/10 rounded-none shadow-md ring-1 duration-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
*:not(select).select [role='listbox'] {
|
||||
.select:not(select) [role='listbox'] {
|
||||
@apply scroll-py-1;
|
||||
}
|
||||
|
||||
*: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-xs;
|
||||
}
|
||||
|
||||
*:not(select).select [role='heading'] {
|
||||
.select:not(select) [role='heading'] {
|
||||
@apply text-muted-foreground px-2 py-2 text-xs;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'] {
|
||||
.select:not(select) [role='option'] {
|
||||
@apply gap-2 rounded-none py-2 ps-2 pe-8 text-xs [&_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;
|
||||
}
|
||||
|
||||
*:not(select).select [role='separator'] {
|
||||
.select:not(select) [role='separator'] {
|
||||
@apply bg-border -mx-1 h-px;
|
||||
}
|
||||
|
||||
|
||||
+12
-12
@@ -472,51 +472,51 @@
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
.select:not(select) > button {
|
||||
@apply border-input bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 data-[size=sm]:h-8 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_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 rounded-2xl p-1 shadow-2xl ring-1 duration-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
*:not(select).select [role='listbox'] {
|
||||
.select:not(select) [role='listbox'] {
|
||||
@apply scroll-py-1;
|
||||
}
|
||||
|
||||
*: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-3 py-2.5 text-xs;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'] {
|
||||
.select:not(select) [role='option'] {
|
||||
@apply gap-2.5 rounded-xl py-2 ps-3 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 p-1;
|
||||
}
|
||||
|
||||
*:not(select).select [role='separator'] {
|
||||
.select:not(select) [role='separator'] {
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
|
||||
+13
-13
@@ -472,55 +472,55 @@
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
.select:not(select) > button {
|
||||
@apply border-input bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 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-7 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
*: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-3.5;
|
||||
}
|
||||
|
||||
*:not(select).select [data-popover] {
|
||||
.select:not(select) [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-lg p-1 shadow-md ring-1 duration-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
*:not(select).select [role='listbox'] {
|
||||
.select:not(select) [role='listbox'] {
|
||||
@apply scroll-py-1;
|
||||
}
|
||||
|
||||
*: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 px-3 py-2 text-center text-xs;
|
||||
}
|
||||
|
||||
*:not(select).select [role='heading'] {
|
||||
.select:not(select) [role='heading'] {
|
||||
@apply text-muted-foreground px-2 py-1.5 text-xs;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'] {
|
||||
.select:not(select) [role='option'] {
|
||||
@apply min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'][aria-selected='true'] {
|
||||
.select:not(select) [role='option'][aria-selected='true'] {
|
||||
@apply pe-8;
|
||||
}
|
||||
|
||||
*: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 p-1;
|
||||
}
|
||||
|
||||
*:not(select).select [role='separator'] {
|
||||
.select:not(select) [role='separator'] {
|
||||
@apply bg-border/50 -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
|
||||
+12
-12
@@ -468,51 +468,51 @@
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
.select:not(select) > button {
|
||||
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 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-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors select-none 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/10 rounded-lg p-1 shadow-md ring-1 duration-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
*:not(select).select [role='listbox'] {
|
||||
.select:not(select) [role='listbox'] {
|
||||
@apply scroll-py-1;
|
||||
}
|
||||
|
||||
*: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-1.5 py-1 text-xs;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'] {
|
||||
.select:not(select) [role='option'] {
|
||||
@apply gap-1.5 rounded-md py-1 ps-1.5 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 p-1;
|
||||
}
|
||||
|
||||
*:not(select).select [role='separator'] {
|
||||
.select:not(select) [role='separator'] {
|
||||
@apply bg-border -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
|
||||
+12
-12
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
+12
-12
@@ -484,51 +484,51 @@
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
.select:not(select) > button {
|
||||
@apply border-transparent border-b-input bg-transparent focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 data-[size=sm]:h-9 gap-1.5 rounded-none border px-0 py-2 text-sm transition-[color,border-color] [&_svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
*: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-3.5;
|
||||
}
|
||||
|
||||
*:not(select).select [data-popover] {
|
||||
.select:not(select) [data-popover] {
|
||||
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-none p-1.5 shadow-md 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 px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'] {
|
||||
.select:not(select) [role='option'] {
|
||||
@apply gap-2.5 rounded-none py-2 ps-3 pe-8 text-sm [&_svg:not([class*='size-'])]:size-3.5;
|
||||
}
|
||||
|
||||
*: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.5;
|
||||
}
|
||||
|
||||
*:not(select).select [role='separator'] {
|
||||
.select:not(select) [role='separator'] {
|
||||
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
|
||||
}
|
||||
|
||||
|
||||
+12
-12
@@ -468,51 +468,51 @@
|
||||
@apply mb-1 w-full;
|
||||
}
|
||||
/* Select */
|
||||
*:not(select).select > button {
|
||||
.select:not(select) > button {
|
||||
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 data-[size=sm]:h-8 gap-1.5 rounded-md border bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs transition-[color,box-shadow] 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/10 rounded-md p-1 shadow-md ring-1 duration-100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
*:not(select).select [role='listbox'] {
|
||||
.select:not(select) [role='listbox'] {
|
||||
@apply scroll-py-1;
|
||||
}
|
||||
|
||||
*: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.5 text-xs;
|
||||
}
|
||||
|
||||
*:not(select).select [role='option'] {
|
||||
.select:not(select) [role='option'] {
|
||||
@apply gap-2 rounded-sm 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 p-1;
|
||||
}
|
||||
|
||||
*:not(select).select [role='separator'] {
|
||||
.select:not(select) [role='separator'] {
|
||||
@apply bg-border -mx-1 my-1 h-px;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user