The Node.js® Website
keii.dev
1.select {
2 @apply inline-flex
3 flex-col
4 gap-1.5;
5
6 .label {
7 @apply block
8 w-full
9 text-sm
10 font-medium
11 text-neutral-800
12 dark:text-neutral-200;
13 }
14
15 .trigger {
16 @apply inline-flex
17 h-11
18 w-full
19 min-w-[17rem]
20 items-center
21 justify-between
22 gap-2
23 rounded
24 border
25 border-neutral-300
26 bg-white
27 px-3.5
28 py-2.5
29 text-left
30 text-base
31 font-medium
32 text-neutral-900
33 shadow-xs
34 outline-none
35 focus:border-neutral-500
36 focus:ring-1
37 focus:ring-neutral-500
38 data-[placeholder]:text-neutral-800
39 dark:border-neutral-800
40 dark:bg-neutral-950
41 dark:text-white
42 dark:focus:border-neutral-600
43 dark:focus:ring-neutral-600
44 dark:data-[placeholder]:text-neutral-200;
45 }
46
47 .trigger span {
48 @apply flex
49 h-5
50 items-center
51 gap-2;
52 }
53
54 .icon {
55 @apply size-5
56 text-neutral-600
57 dark:text-neutral-400;
58 }
59}
60
61.dropdown {
62 @apply max-h-48
63 max-w-xs
64 overflow-hidden
65 overflow-y-auto
66 rounded-md
67 border
68 border-neutral-200
69 bg-white
70 shadow-lg
71 dark:border-neutral-800
72 dark:bg-neutral-950;
73
74 .item {
75 @apply truncate
76 px-2.5
77 py-1.5
78 text-sm
79 font-medium;
80 }
81
82 .text {
83 @apply text-neutral-800
84 data-[highlighted]:bg-green-500
85 data-[highlighted]:text-white
86 data-[highlighted]:outline-none
87 dark:text-neutral-200
88 dark:data-[highlighted]:bg-green-600;
89 }
90
91 .text > span {
92 @apply flex
93 items-center
94 gap-2;
95 }
96
97 .text > span > span {
98 @apply truncate;
99 }
100
101 .label {
102 @apply text-neutral-600
103 dark:text-neutral-400;
104 }
105}
106
107.dropdown:has(.label) .text > span > span {
108 @apply pl-3;
109}
110
111.inline {
112 .trigger {
113 @apply h-auto
114 min-w-fit
115 px-2.5
116 py-2
117 text-sm
118 font-medium;
119 }
120
121 .icon {
122 @apply size-4;
123 }
124
125 .text {
126 @apply text-neutral-900
127 data-[highlighted]:bg-neutral-100
128 data-[disabled]:text-neutral-600
129 data-[highlighted]:text-neutral-900
130 dark:text-white
131 dark:data-[highlighted]:bg-neutral-900
132 dark:data-[disabled]:text-neutral-700;
133 }
134
135 &.dropdown {
136 @apply mt-1
137 w-[calc(100%+1.5rem)]
138 rounded;
139 }
140}