nodejs.org/apps/site/components/Common/Select/index.module.css at 7dd604c4a74143bbe5c1564b7b552836f9df3646 · nodejs/nodejs.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
.select {
  @apply inline-flex
    flex-col
    gap-1.5;

  .label {
    @apply block
      w-full
      text-sm
      font-medium
      text-neutral-800
      dark:text-neutral-200;
  }

  .trigger {
    @apply shadow-xs
      inline-flex
      h-11
      w-full
      min-w-[17rem]
      items-center
      justify-between
      gap-2
      rounded
      border
      border-neutral-300
      bg-white
      px-3.5
      py-2.5
      text-left
      text-base
      font-medium
      text-neutral-900
      outline-none
      focus:border-neutral-500
      focus:ring-1
      focus:ring-neutral-500
      data-[placeholder]:text-neutral-800
      dark:border-neutral-800
      dark:bg-neutral-950
      dark:text-white
      dark:focus:border-neutral-600
      dark:focus:ring-neutral-600
      dark:data-[placeholder]:text-neutral-200;
  }

  .trigger span {
    @apply flex
      h-5
      items-center
      gap-2;
  }

  .icon {
    @apply size-5
      text-neutral-600
      dark:text-neutral-400;
  }
}

.dropdown {
  @apply max-h-48
    max-w-xs
    overflow-hidden
    overflow-y-auto
    rounded-md
    border
    border-neutral-200
    bg-white
    shadow-lg
    dark:border-neutral-800
    dark:bg-neutral-950;

  .item {
    @apply select-none
      truncate
      px-2.5
      py-1.5
      text-sm
      font-medium;
  }

  .text {
    @apply text-neutral-800
      data-[highlighted]:bg-green-500
      data-[highlighted]:text-white
      data-[highlighted]:outline-none
      dark:text-neutral-200
      dark:data-[highlighted]:bg-green-600
      dark:data-[highlighted]:text-white;
  }

  .text > span {
    @apply flex
      items-center
      gap-2;
  }

  .text > span > span {
    @apply max-w-64
      truncate
      text-wrap;
  }

  .label {
    @apply text-neutral-600
      dark:text-neutral-400;
  }
}

.dropdown:has(.label) .text > span {
  &:has(svg) > svg {
    @apply ml-3;
  }

  &:not(&:has(svg)) > span {
    @apply ml-3;
  }
}

.inline {
  .trigger {
    @apply h-auto
      min-w-fit
      px-2.5
      py-2
      text-sm
      font-medium;
  }

  .icon {
    @apply size-4;
  }

  .text {
    @apply text-neutral-900
      data-[highlighted]:bg-neutral-100
      data-[disabled]:text-neutral-600
      data-[highlighted]:text-neutral-900
      dark:text-white
      dark:data-[highlighted]:bg-neutral-900
      dark:data-[disabled]:text-neutral-700
      dark:data-[highlighted]:text-white;
  }

  &.dropdown {
    @apply mt-1
      w-[calc(100%+1.5rem)]
      rounded;
  }
}