atproto blogging
nonbinary.computer
1.select {
2 position: relative;
3}
4
5.select-trigger {
6 position: relative;
7 display: flex;
8 box-sizing: border-box;
9 flex-direction: row;
10 align-items: center;
11 justify-content: space-between;
12 padding: 0.25rem;
13 padding: 8px 12px;
14 border: none;
15 border-radius: 0.5rem;
16 border-radius: calc(0.5rem);
17 background: none;
18 background: var(--light, var(--primary-color))
19 var(--dark, var(--primary-color-3));
20 box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
21 var(--dark, var(--primary-color-7));
22 color: var(--secondary-color-4);
23 cursor: pointer;
24 gap: 0.25rem;
25 transition: background-color 100ms ease-out;
26}
27
28.select-trigger span[data-placeholder="true"] {
29 color: var(--secondary-color-5);
30}
31
32.select[data-state="open"] .select-trigger {
33 pointer-events: none;
34}
35
36.select-expand-icon {
37 width: 20px;
38 height: 20px;
39 fill: none;
40 stroke: var(--primary-color-7);
41 stroke-linecap: round;
42 stroke-linejoin: round;
43 stroke-width: 2;
44}
45
46.select-check-icon {
47 width: 1rem;
48 height: 1rem;
49 fill: none;
50 stroke: var(--secondary-color-5);
51 stroke-linecap: round;
52 stroke-linejoin: round;
53 stroke-width: 2;
54}
55
56.select[data-disabled="true"] .select-trigger {
57 color: var(--secondary-color-5);
58 cursor: not-allowed;
59}
60
61.select-trigger:hover:not([data-disabled="true"]),
62.select-trigger:focus-visible {
63 background: var(--light, var(--primary-color-4))
64 var(--dark, var(--primary-color-5));
65 color: var(--secondary-color-1);
66 outline: none;
67}
68
69.select-list {
70 position: absolute;
71 z-index: 1000;
72 top: 100%;
73 left: 0;
74 min-width: 100%;
75 box-sizing: border-box;
76 padding: 0.25rem;
77 border-radius: 0.5rem;
78 margin-top: 0.25rem;
79 background: var(--light, var(--primary-color))
80 var(--dark, var(--primary-color-5));
81 box-shadow: inset 0 0 0 1px var(--light, var(--primary-color-6))
82 var(--dark, var(--primary-color-7));
83 opacity: 0;
84 pointer-events: none;
85 transform-origin: top;
86 will-change: transform, opacity;
87}
88
89.select-list[data-state="closed"] {
90 animation: select-list-animate-out 150ms ease-in forwards;
91 pointer-events: none;
92}
93
94@keyframes select-list-animate-out {
95 0% {
96 opacity: 1;
97 transform: scale(1) translateY(0);
98 }
99
100 100% {
101 opacity: 0;
102 transform: scale(0.95) translateY(-2px);
103 }
104}
105
106.select-list[data-state="open"] {
107 animation: select-list-animate-in 150ms ease-out forwards;
108 pointer-events: auto;
109}
110
111@keyframes select-list-animate-in {
112 0% {
113 opacity: 0;
114 transform: scale(0.95) translateY(-2px);
115 }
116
117 100% {
118 opacity: 1;
119 transform: scale(1) translateY(0);
120 }
121}
122
123.select-option {
124 display: flex;
125 align-items: center;
126 justify-content: space-between;
127 padding: 8px 12px;
128 border-radius: calc(0.5rem - 0.25rem);
129 cursor: pointer;
130 font-size: 14px;
131}
132
133.select-option[data-disabled="true"] {
134 color: var(--secondary-color-5);
135 cursor: not-allowed;
136}
137
138.select-option:hover:not([data-disabled="true"]),
139.select-option:focus-visible {
140 background: var(--light, var(--primary-color-4))
141 var(--dark, var(--primary-color-7));
142 color: var(--secondary-color-1);
143 outline: none;
144}
145
146.select-group-label {
147 padding: 4px 12px;
148 color: var(--secondary-color-5);
149 font-size: 0.75rem;
150}
151
152[data-disabled="true"] {
153 cursor: not-allowed;
154 opacity: 0.5;
155}