1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | @use '../form';
|
13 | @use '../button/tokens' as *;
|
14 | @use '../../config' as *;
|
15 | @use '../../spacing' as *;
|
16 | @use '../../theme' as *;
|
17 | @use '../../type';
|
18 | @use '../../utilities/focus-outline' as *;
|
19 | @use '../../utilities/component-reset' as *;
|
20 | @use '../../utilities/visually-hidden' as *;
|
21 | @use '../../utilities/high-contrast-mode' as *;
|
22 | @use '../../utilities/skeleton' as *;
|
23 | @use '../../utilities/convert';
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | $radio-border-width: 1px !default;
|
29 |
|
30 |
|
31 |
|
32 |
|
33 | @mixin radio-button {
|
34 | .#{$prefix}--radio-button-group {
|
35 | @include reset;
|
36 |
|
37 | position: relative;
|
38 | display: flex;
|
39 | align-items: center;
|
40 | }
|
41 |
|
42 |
|
43 | .#{$prefix}--label + .#{$prefix}--form-item .#{$prefix}--radio-button-group {
|
44 | margin-block-start: 0;
|
45 | }
|
46 |
|
47 |
|
48 | .#{$prefix}--radio-button-group--vertical {
|
49 | flex-direction: column;
|
50 | align-items: flex-start;
|
51 |
|
52 | &.#{$prefix}--radio-button-group--label-left {
|
53 | align-items: flex-end;
|
54 | }
|
55 |
|
56 | .#{$prefix}--radio-button__label {
|
57 | margin-inline-end: 0;
|
58 | }
|
59 |
|
60 | .#{$prefix}--radio-button__label:not(:last-of-type) {
|
61 | margin-block-end: $spacing-03;
|
62 | }
|
63 | }
|
64 |
|
65 | .#{$prefix}--radio-button {
|
66 | @include visually-hidden;
|
67 |
|
68 | margin-block-start: 0.9rem;
|
69 | margin-inline-start: 0.63rem;
|
70 | visibility: inherit;
|
71 | }
|
72 |
|
73 | .#{$prefix}--radio-button__label {
|
74 | display: flex;
|
75 | align-items: center;
|
76 | cursor: pointer;
|
77 | margin-inline-end: $spacing-05;
|
78 | }
|
79 |
|
80 | .#{$prefix}--radio-button__label-text {
|
81 | @include type.type-style('body-compact-01');
|
82 |
|
83 | flex: 1;
|
84 | }
|
85 |
|
86 | .#{$prefix}--radio-button__appearance {
|
87 | @include reset;
|
88 |
|
89 | flex-shrink: 0;
|
90 | border: $radio-border-width solid $icon-primary;
|
91 | border-radius: 50%;
|
92 | background-color: transparent;
|
93 | block-size: convert.to-rem(18px);
|
94 | inline-size: convert.to-rem(18px);
|
95 | margin-block: convert.to-rem(1px) convert.to-rem(2px);
|
96 | margin-inline: convert.to-rem(2px) convert.to-rem(10px);
|
97 | }
|
98 |
|
99 | .#{$prefix}--radio-button-group--vertical
|
100 | .#{$prefix}--radio-button__appearance {
|
101 | margin-block: 0;
|
102 | }
|
103 |
|
104 | .#{$prefix}--radio-button:checked
|
105 | + .#{$prefix}--radio-button__label
|
106 | .#{$prefix}--radio-button__appearance {
|
107 | display: flex;
|
108 | align-items: center;
|
109 | justify-content: center;
|
110 | border-color: $icon-primary;
|
111 |
|
112 | &::before {
|
113 | position: relative;
|
114 | display: inline-block;
|
115 | border-radius: 50%;
|
116 | background-color: $icon-primary;
|
117 | block-size: 100%;
|
118 | content: '';
|
119 | inline-size: 100%;
|
120 | transform: scale(0.5);
|
121 |
|
122 |
|
123 | @include high-contrast-mode('icon-fill') {
|
124 | background-color: ButtonText;
|
125 | }
|
126 |
|
127 | @media print {
|
128 | print-color-adjust: exact;
|
129 | }
|
130 | }
|
131 | }
|
132 |
|
133 | .#{$prefix}--radio-button:disabled + .#{$prefix}--radio-button__label {
|
134 | color: $text-disabled;
|
135 | cursor: not-allowed;
|
136 | }
|
137 |
|
138 | .#{$prefix}--radio-button:disabled
|
139 | + .#{$prefix}--radio-button__label
|
140 | .#{$prefix}--radio-button__appearance,
|
141 | .#{$prefix}--radio-button:disabled:checked
|
142 | + .#{$prefix}--radio-button__label
|
143 | .#{$prefix}--radio-button__appearance {
|
144 |
|
145 | border-color: $icon-disabled;
|
146 |
|
147 | &::before {
|
148 | background-color: $text-disabled;
|
149 | }
|
150 | }
|
151 |
|
152 |
|
153 | .#{$prefix}--radio-button-group--readonly
|
154 | .#{$prefix}--radio-button
|
155 | + .#{$prefix}--radio-button__label
|
156 | .#{$prefix}--radio-button__appearance {
|
157 | border-color: $icon-disabled;
|
158 | }
|
159 |
|
160 | .#{$prefix}--radio-button-group--readonly .#{$prefix}--radio-button__label {
|
161 | cursor: default;
|
162 | }
|
163 |
|
164 | .#{$prefix}--radio-button-group--readonly
|
165 | .#{$prefix}--radio-button__label-text {
|
166 | cursor: text;
|
167 | user-select: text;
|
168 | }
|
169 |
|
170 |
|
171 | .#{$prefix}--radio-button-group--invalid
|
172 | .#{$prefix}--radio-button
|
173 | + .#{$prefix}--radio-button__label
|
174 | .#{$prefix}--radio-button__appearance {
|
175 | border-color: $support-error;
|
176 | }
|
177 |
|
178 | .#{$prefix}--radio-button__validation-msg {
|
179 | display: none;
|
180 | align-items: flex-end;
|
181 | margin-block-start: convert.to-rem(6px);
|
182 | }
|
183 |
|
184 | .#{$prefix}--radio-button__invalid-icon {
|
185 | fill: $support-error;
|
186 | margin-inline: convert.to-rem(3px) convert.to-rem(1px);
|
187 | }
|
188 |
|
189 | .#{$prefix}--radio-button__invalid-icon--warning {
|
190 | fill: $support-warning;
|
191 | }
|
192 |
|
193 | .#{$prefix}--radio-button__invalid-icon--warning path:first-of-type {
|
194 | fill: #000000;
|
195 | }
|
196 |
|
197 | .#{$prefix}--radio-button-group--invalid
|
198 | + .#{$prefix}--radio-button__validation-msg,
|
199 | .#{$prefix}--radio-button-group--warning
|
200 | + .#{$prefix}--radio-button__validation-msg {
|
201 | display: flex;
|
202 | }
|
203 |
|
204 | .#{$prefix}--radio-button-group--invalid
|
205 | + .#{$prefix}--radio-button__validation-msg
|
206 | .#{$prefix}--form-requirement,
|
207 | .#{$prefix}--radio-button-group--warning
|
208 | + .#{$prefix}--radio-button__validation-msg
|
209 | .#{$prefix}--form-requirement {
|
210 | display: block;
|
211 | overflow: visible;
|
212 | margin-block-start: 0;
|
213 | margin-inline-start: $spacing-03;
|
214 | max-block-size: 100%;
|
215 | }
|
216 |
|
217 | .#{$prefix}--radio-button-group--invalid
|
218 | + .#{$prefix}--radio-button__validation-msg
|
219 | .#{$prefix}--form-requirement {
|
220 | color: $text-error;
|
221 | }
|
222 |
|
223 | .#{$prefix}--radio-button-group ~ .#{$prefix}--form__helper-text {
|
224 | margin-block-start: convert.to-rem(6px);
|
225 | }
|
226 |
|
227 |
|
228 |
|
229 | .#{$prefix}--radio-button:focus
|
230 | + .#{$prefix}--radio-button__label
|
231 | .#{$prefix}--radio-button__appearance {
|
232 | outline: 2px solid $focus;
|
233 | outline-offset: 1.5px;
|
234 | }
|
235 |
|
236 |
|
237 | .#{$prefix}--radio-button__label.#{$prefix}--skeleton {
|
238 | @include skeleton;
|
239 |
|
240 | block-size: convert.to-rem(18px);
|
241 |
|
242 | inline-size: convert.to-rem(100px);
|
243 | }
|
244 |
|
245 | .#{$prefix}--radio-button__label.#{$prefix}--skeleton
|
246 | .#{$prefix}--radio-button__appearance {
|
247 | display: none;
|
248 | }
|
249 |
|
250 | .#{$prefix}--radio-button-wrapper .#{$prefix}--radio-button__label {
|
251 | display: flex;
|
252 | align-items: flex-start;
|
253 | justify-content: center;
|
254 | margin: 0;
|
255 | }
|
256 |
|
257 | .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
|
258 | margin-inline-end: $spacing-05;
|
259 | }
|
260 |
|
261 | .#{$prefix}--radio-button-group--vertical .#{$prefix}--radio-button-wrapper {
|
262 | margin-block-end: convert.to-rem(6px);
|
263 | margin-inline-end: 0;
|
264 | }
|
265 |
|
266 | .#{$prefix}--radio-button-group--vertical
|
267 | .#{$prefix}--radio-button-wrapper
|
268 | .#{$prefix}--radio-button__label {
|
269 | padding-block-start: convert.to-rem(2px);
|
270 | }
|
271 |
|
272 | .#{$prefix}--radio-button-group--label-right .#{$prefix}--radio-button__label,
|
273 | .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right
|
274 | .#{$prefix}--radio-button__label {
|
275 | flex-direction: row;
|
276 | }
|
277 |
|
278 | .#{$prefix}--radio-button-group--label-left .#{$prefix}--radio-button__label,
|
279 | .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
|
280 | .#{$prefix}--radio-button__label {
|
281 | flex-direction: row-reverse;
|
282 | }
|
283 |
|
284 | .#{$prefix}--radio-button-group--label-left
|
285 | .#{$prefix}--radio-button__appearance,
|
286 | .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
|
287 | .#{$prefix}--radio-button__appearance {
|
288 | margin-inline-end: 0;
|
289 | margin-inline-start: $spacing-03;
|
290 | }
|
291 |
|
292 |
|
293 | .#{$prefix}--radio-button-group--slug legend.#{$prefix}--label,
|
294 | .#{$prefix}--radio-button-wrapper--slug
|
295 | .#{$prefix}--radio-button__label-text {
|
296 | display: flex;
|
297 | }
|
298 |
|
299 | .#{$prefix}--radio-button-group--slug
|
300 | legend.#{$prefix}--label
|
301 | .#{$prefix}--slug,
|
302 | .#{$prefix}--radio-button-wrapper--slug
|
303 | .#{$prefix}--radio-button__label-text
|
304 | .#{$prefix}--slug {
|
305 | margin-inline-start: $spacing-03;
|
306 | }
|
307 |
|
308 | .#{$prefix}--radio-button-wrapper--slug
|
309 | .#{$prefix}--radio-button__label-text
|
310 | .#{$prefix}--slug__button--inline {
|
311 | line-height: inherit;
|
312 | margin-block-start: convert.to-rem(-1px);
|
313 | }
|
314 | }
|