Monorepo for Tangled
appview: style radio input element
Signed-off-by: eti <eti@eti.tf>
+47
-1
+47
-1
input.css
+47
-1
input.css
···
92
92
label {
93
93
@apply block text-gray-900 text-sm py-2 dark:text-gray-100;
94
94
}
95
+
95
96
input,
96
97
textarea {
97
98
@apply block rounded p-3
···
99
100
border border-gray-300 dark:border-gray-600
100
101
focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
101
102
}
103
+
102
104
input[type="checkbox"] {
103
105
@apply appearance-none size-4 p-0 rounded
104
106
bg-transparent border border-gray-200
···
111
113
disabled:indeterminate:bg-gray-100 disabled:indeterminate:border-gray-200
112
114
dark:border-gray-600
113
115
dark:hover:bg-gray-700
114
-
dark:checked:bg-gray-100 dark:checked:border-transparent
116
+
dark:checked:bg-gray-100
115
117
dark:checked:hover:bg-gray-200
118
+
dark:checked:border-gray-400
116
119
dark:indeterminate:bg-gray-100 dark:indeterminate:border-transparent
117
120
dark:disabled:bg-gray-700 dark:disabled:border-gray-600
118
121
dark:disabled:checked:bg-gray-500 dark:disabled:checked:border-transparent
···
142
145
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>");
143
146
}
144
147
}
148
+
149
+
input[type="radio"] {
150
+
@apply appearance-none size-4 p-0 rounded-full bg-transparent border
151
+
152
+
border-gray-400 hover:border-gray-900
153
+
hover:bg-gray-200
154
+
155
+
disabled:cursor-not-allowed
156
+
disabled:border-gray-300
157
+
disabled:checked:border-gray-300
158
+
disabled:hover:bg-inherit
159
+
160
+
dark:border-gray-400 dark:hover:border-gray-100
161
+
162
+
dark:hover:bg-gray-600
163
+
164
+
dark:checked:border-gray-400
165
+
166
+
dark:disabled:border-gray-500
167
+
dark:disabled:checked:border-gray-500
168
+
169
+
focus:outline-none focus:ring-1
170
+
focus:ring-gray-400 dark:focus:ring-gray-500;
171
+
172
+
background-position: center;
173
+
background-repeat: no-repeat;
174
+
background-size: 8px;
175
+
}
176
+
input[type="radio"]:checked {
177
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>");
178
+
}
179
+
input[type="radio"]:disabled:checked {
180
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>");
181
+
}
182
+
@media (prefers-color-scheme: dark) {
183
+
input[type="radio"]:checked {
184
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>");
185
+
}
186
+
input[type="radio"]:disabled:checked {
187
+
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>");
188
+
}
189
+
}
190
+
145
191
details summary::-webkit-details-marker {
146
192
display: none;
147
193
}