@@ -135,130 +135,6 @@ textarea {
135135 }
136136}
137137
138- /* *
139- * 1. Remove any excess padding.
140- * 2. Correct margins for inline checkbox/radio labels.
141- */
142-
143- [type = " checkbox" ],
144- [type = " radio" ] {
145- position : relative ;
146- bottom : -2px ;
147- box-sizing : border-box ;
148- width : 16px ;
149- height : 16px ;
150- padding : 0 ; /* 1 */
151- border : 1px solid var (--clr-brdr-x-dark );
152- background : var (--clr-bkgd-form );
153- appearance : none ;
154-
155- + label {
156- margin : 0 0.5em 0 0 ; /* 2 */
157-
158- & :last-of-type {
159- margin : 0 ; /* 2 */
160- }
161- }
162-
163- & :hover {
164- filter : brightness (1.05 );
165- cursor : pointer ;
166- }
167-
168- & :active {
169- filter : brightness (0.95 );
170- }
171-
172- & :focus {
173- border-color : var (--clr-focus );
174- outline : 2px solid transparent ; // Allows for repainting in high contrast modes.
175- }
176-
177- & :not ([disabled ]) + label :hover {
178- cursor : pointer ;
179- }
180- }
181-
182- @include setup .dark-mode {
183- [type = " checkbox" ],
184- [type = " radio" ] {
185- & :hover {
186- border-color : var (--clr-brdr-x-lite );
187- }
188- }
189- }
190-
191- [type = " checkbox" ] {
192- & :checked {
193- border : 0 ;
194- background : var (--clr-text-demoted ) url (" data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E" );
195-
196- & :hover ,
197- & :active {
198- background-color : var (--clr-text );
199- }
200-
201- & :focus {
202- background-color : var (--clr-focus );
203- }
204- }
205-
206- & [disabled ]:checked {
207- background : var (color-text-visual-de-emphasis ) url (" data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E" );
208- }
209- }
210-
211- @include setup .dark-mode {
212- [type = " checkbox" ] {
213- & :checked {
214- background : var (--clr-text ) url (" data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23282d32' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E" );
215-
216- & :hover ,
217- & :active {
218- background-color : var (--clr-text-promoted );
219- }
220-
221- & :focus {
222- background-color : var (--clr-focus );
223- }
224- }
225-
226- & [disabled ]:checked {
227- background : var (--clr-text ) url (" data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23282d32' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E" );
228- }
229- }
230- }
231-
232- [type = " radio" ] {
233- border-radius : 100% ;
234-
235- & :checked {
236- border : 5px solid var (--clr-text-demoted );
237-
238- & :hover ,
239- & :active {
240- border-color : var (--clr-text );
241- }
242-
243- & :focus {
244- border-color : var (--clr-focus );
245- }
246- }
247- }
248-
249- @include setup .dark-mode {
250- [type = " radio" ]:checked {
251- & :hover ,
252- & :active {
253- border-color : var (--clr-text-promoted );
254- }
255-
256- & :focus {
257- border-color : var (--clr-focus );
258- }
259- }
260- }
261-
262138/* *
263139 * Remove the inner padding in Chrome and Safari on macOS.
264140 */
0 commit comments