@entur/form 8.2.9 → 8.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/styles.css +342 -342
  2. package/package.json +6 -6
package/dist/styles.css CHANGED
@@ -1,227 +1,5 @@
1
1
  /* DO NOT CHANGE!*/
2
2
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- .eds-checkbox__container {
4
- display: flex;
5
- align-items: center;
6
- position: relative;
7
- -webkit-appearance: none;
8
- -moz-appearance: none;
9
- appearance: none;
10
- cursor: pointer;
11
- -webkit-user-select: none;
12
- -moz-user-select: none;
13
- user-select: none;
14
- width: -moz-fit-content;
15
- width: fit-content;
16
- margin: 0.5rem 0;
17
- }
18
- .eds-checkbox__container--reduced-click-area {
19
- height: -moz-fit-content;
20
- height: fit-content;
21
- }
22
- .eds-checkbox__container input {
23
- position: absolute;
24
- opacity: 0;
25
- height: 0;
26
- width: 0;
27
- }
28
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
29
- background-color: var(--components-form-checkbox-standard-fill-selected);
30
- }
31
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
32
- visibility: visible;
33
- }
34
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
35
- stroke: var(--components-form-checkbox-standard-icon);
36
- animation: stroke ease-in-out 0.2s 0.1s forwards;
37
- }
38
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
39
- fill: var(--components-form-checkbox-standard-icon);
40
- }
41
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
42
- background-color: var(--components-form-checkbox-standard-icon-disabled);
43
- }
44
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
45
- background-color: var(--components-form-checkbox-standard-icon-disabled);
46
- }
47
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
48
- background-color: var(--components-form-checkbox-standard-icon-disabled);
49
- }
50
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
51
- background-color: var(--components-form-checkbox-standard-icon-disabled);
52
- }
53
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
54
- background-color: var(--components-form-checkbox-standard-icon-disabled);
55
- }
56
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
57
- color: var(--components-form-checkbox-contrast-fill-selected);
58
- }
59
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
60
- stroke: var(--components-form-checkbox-contrast-icon);
61
- }
62
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
63
- fill: var(--components-form-checkbox-contrast-icon);
64
- }
65
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
66
- border-color: var(--components-form-checkbox-standard-border);
67
- background-color: var(--components-form-checkbox-standard-fill-hover);
68
- }
69
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
70
- border-color: var(--components-form-checkbox-contrast-border);
71
- background-color: var(--components-form-checkbox-contrast-fill-hover);
72
- }
73
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
74
- .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
75
- border-color: transparent;
76
- background-color: var(--components-form-checkbox-standard-fill-selectedhover);
77
- }
78
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
79
- .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
80
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
81
- }
82
- .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
83
- .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
84
- background-color: var(--components-form-checkbox-standard-fill-selected);
85
- }
86
- .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
87
- .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
88
- background-color: var(--components-form-checkbox-contrast-fill-selected);
89
- }
90
- .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
91
- outline: 2px solid #181c56;
92
- outline-color: var(--basecolors-stroke-focus-standard);
93
- outline-offset: 0.125rem;
94
- }
95
- .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
96
- outline-color: var(--basecolors-stroke-focus-contrast);
97
- }
98
- .eds-checkbox--disabled {
99
- cursor: not-allowed;
100
- }
101
- .eds-checkbox--disabled input {
102
- pointer-events: none;
103
- }
104
- .eds-checkbox--disabled .eds-checkbox__label {
105
- opacity: 0.5;
106
- }
107
- .eds-checkbox--disabled .eds-checkbox__icon {
108
- border-color: var(--components-form-checkbox-standard-icon-disabled);
109
- }
110
- .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
111
- border-color: var(--components-form-checkbox-contrast-icon-disabled);
112
- }
113
- .eds-checkbox__icon {
114
- box-sizing: border-box;
115
- display: inline-flex;
116
- justify-content: center;
117
- align-items: center;
118
- position: relative;
119
- margin-right: 1rem;
120
- height: 1.25rem;
121
- width: 1.25rem;
122
- border: 0.125rem solid var(--components-form-checkbox-standard-border);
123
- border-radius: 0.125rem;
124
- background-color: transparent;
125
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
126
- }
127
- .eds-checkbox__icon--reduced-click-area {
128
- margin-right: 0;
129
- }
130
- .eds-contrast .eds-checkbox__icon {
131
- border-color: var(--components-form-checkbox-contrast-border);
132
- }
133
- .eds-checkbox__icon .eds-checkbox-icon {
134
- height: 1rem;
135
- width: 1rem;
136
- visibility: hidden;
137
- }
138
- .eds-checkbox__icon .eds-checkbox-icon path {
139
- transform-origin: 50% 50%;
140
- stroke-dasharray: 48;
141
- stroke-dashoffset: 48;
142
- stroke-width: 0.375rem;
143
- }
144
-
145
- @keyframes stroke {
146
- 100% {
147
- stroke-dashoffset: 0;
148
- }
149
- }
150
- /* DO NOT CHANGE!*/
151
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
152
- .eds-feedback-text {
153
- display: flex;
154
- align-items: center;
155
- margin-top: 0.25rem;
156
- }
157
- .eds-feedback-text--info, .eds-feedback-text--information {
158
- padding-left: calc(1rem + 0.125rem);
159
- }
160
- .eds-feedback-text__text {
161
- color: var(--components-form-feedbacktext-information-standard-text);
162
- }
163
- .eds-contrast .eds-feedback-text__text {
164
- color: var(--components-form-feedbacktext-information-contrast-text);
165
- }
166
-
167
- .eds-feedback-text__icon {
168
- font-size: 1.5rem;
169
- min-height: 1.5rem;
170
- min-width: 1.5rem;
171
- padding-right: 0.5rem;
172
- position: relative;
173
- top: -0.1rem;
174
- }
175
- .eds-feedback-text__icon--success {
176
- color: var(--components-form-feedbacktext-success-standard-icon-fill);
177
- }
178
- .eds-feedback-text__icon--success circle {
179
- fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
180
- }
181
- .eds-contrast .eds-feedback-text__icon--success {
182
- color: var(--components-form-feedbacktext-success-contrast-icon-fill);
183
- }
184
- .eds-contrast .eds-feedback-text__icon--success circle {
185
- fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
186
- }
187
- .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
188
- color: var(--components-form-feedbacktext-negative-standard-icon-fill);
189
- }
190
- .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
191
- fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
192
- }
193
- .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
194
- color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
195
- }
196
- .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
197
- fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
198
- }
199
- .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
200
- color: var(--components-form-feedbacktext-information-standard-icon-fill);
201
- }
202
- .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
203
- fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
204
- }
205
- .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
206
- color: var(--components-form-feedbacktext-information-contrast-icon-fill);
207
- }
208
- .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
209
- fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
210
- }
211
- .eds-feedback-text__icon--warning {
212
- color: var(--components-form-feedbacktext-warning-standard-icon-fill);
213
- }
214
- .eds-feedback-text__icon--warning .svg-exclamation {
215
- fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
216
- }
217
- .eds-contrast .eds-feedback-text__icon--warning {
218
- color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
219
- }
220
- .eds-contrast .eds-feedback-text__icon--warning circle {
221
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
222
- }
223
- /* DO NOT CHANGE!*/
224
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
225
3
  .eds-form-control__field-and-feedback-text {
226
4
  display: flex;
227
5
  flex-direction: column;
@@ -385,48 +163,275 @@
385
163
  color: var(--components-form-baseform-standard-text-content);
386
164
  background-color: transparent;
387
165
  }
388
- .eds-form-control::-moz-placeholder {
389
- opacity: 0;
390
- -moz-transition: opacity 0.2s ease-in-out;
391
- transition: opacity 0.2s ease-in-out;
166
+ .eds-form-control::-moz-placeholder {
167
+ opacity: 0;
168
+ -moz-transition: opacity 0.2s ease-in-out;
169
+ transition: opacity 0.2s ease-in-out;
170
+ }
171
+ .eds-form-control::placeholder {
172
+ opacity: 0;
173
+ transition: opacity 0.2s ease-in-out;
174
+ }
175
+ .eds-form-control:focus {
176
+ outline: none;
177
+ }
178
+ .eds-form-control:focus::-moz-placeholder {
179
+ opacity: 1;
180
+ }
181
+ .eds-form-control:focus::placeholder {
182
+ opacity: 1;
183
+ }
184
+ .eds-form-control__prepend, .eds-form-control__append {
185
+ position: relative;
186
+ line-height: inherit;
187
+ }
188
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
189
+ all: unset;
190
+ position: absolute;
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: center;
194
+ height: 1.5rem;
195
+ width: 1.5rem;
196
+ right: -2rem;
197
+ border-radius: 100%;
198
+ color: var(--primary-text-color);
199
+ cursor: pointer;
200
+ }
201
+ .eds-form-control__prepend {
202
+ margin-right: 0.75rem;
203
+ margin-left: 0;
204
+ }
205
+ .eds-form-control__append {
206
+ margin-right: 0;
207
+ margin-left: 0.75rem;
208
+ }
209
+ /* DO NOT CHANGE!*/
210
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
211
+ .eds-feedback-text {
212
+ display: flex;
213
+ align-items: center;
214
+ margin-top: 0.25rem;
215
+ }
216
+ .eds-feedback-text--info, .eds-feedback-text--information {
217
+ padding-left: calc(1rem + 0.125rem);
218
+ }
219
+ .eds-feedback-text__text {
220
+ color: var(--components-form-feedbacktext-information-standard-text);
221
+ }
222
+ .eds-contrast .eds-feedback-text__text {
223
+ color: var(--components-form-feedbacktext-information-contrast-text);
224
+ }
225
+
226
+ .eds-feedback-text__icon {
227
+ font-size: 1.5rem;
228
+ min-height: 1.5rem;
229
+ min-width: 1.5rem;
230
+ padding-right: 0.5rem;
231
+ position: relative;
232
+ top: -0.1rem;
233
+ }
234
+ .eds-feedback-text__icon--success {
235
+ color: var(--components-form-feedbacktext-success-standard-icon-fill);
236
+ }
237
+ .eds-feedback-text__icon--success circle {
238
+ fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
239
+ }
240
+ .eds-contrast .eds-feedback-text__icon--success {
241
+ color: var(--components-form-feedbacktext-success-contrast-icon-fill);
242
+ }
243
+ .eds-contrast .eds-feedback-text__icon--success circle {
244
+ fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
245
+ }
246
+ .eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
247
+ color: var(--components-form-feedbacktext-negative-standard-icon-fill);
248
+ }
249
+ .eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
250
+ fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
251
+ }
252
+ .eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
253
+ color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
254
+ }
255
+ .eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
256
+ fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
257
+ }
258
+ .eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
259
+ color: var(--components-form-feedbacktext-information-standard-icon-fill);
260
+ }
261
+ .eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
262
+ fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
263
+ }
264
+ .eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
265
+ color: var(--components-form-feedbacktext-information-contrast-icon-fill);
266
+ }
267
+ .eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
268
+ fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
269
+ }
270
+ .eds-feedback-text__icon--warning {
271
+ color: var(--components-form-feedbacktext-warning-standard-icon-fill);
272
+ }
273
+ .eds-feedback-text__icon--warning .svg-exclamation {
274
+ fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
275
+ }
276
+ .eds-contrast .eds-feedback-text__icon--warning {
277
+ color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
278
+ }
279
+ .eds-contrast .eds-feedback-text__icon--warning circle {
280
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
281
+ }
282
+ .eds-fieldset {
283
+ margin: 0;
284
+ padding: 0;
285
+ border: 0;
286
+ }
287
+ /* DO NOT CHANGE!*/
288
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
289
+ .eds-checkbox__container {
290
+ display: flex;
291
+ align-items: center;
292
+ position: relative;
293
+ -webkit-appearance: none;
294
+ -moz-appearance: none;
295
+ appearance: none;
296
+ cursor: pointer;
297
+ -webkit-user-select: none;
298
+ -moz-user-select: none;
299
+ user-select: none;
300
+ width: -moz-fit-content;
301
+ width: fit-content;
302
+ margin: 0.5rem 0;
303
+ }
304
+ .eds-checkbox__container--reduced-click-area {
305
+ height: -moz-fit-content;
306
+ height: fit-content;
307
+ }
308
+ .eds-checkbox__container input {
309
+ position: absolute;
310
+ opacity: 0;
311
+ height: 0;
312
+ width: 0;
313
+ }
314
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
315
+ background-color: var(--components-form-checkbox-standard-fill-selected);
316
+ }
317
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
318
+ visibility: visible;
319
+ }
320
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
321
+ stroke: var(--components-form-checkbox-standard-icon);
322
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
323
+ }
324
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
325
+ fill: var(--components-form-checkbox-standard-icon);
326
+ }
327
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
328
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
329
+ }
330
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
331
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
332
+ }
333
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
334
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
335
+ }
336
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
337
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
338
+ }
339
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
340
+ background-color: var(--components-form-checkbox-standard-icon-disabled);
341
+ }
342
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast {
343
+ color: var(--components-form-checkbox-contrast-fill-selected);
344
+ }
345
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast path {
346
+ stroke: var(--components-form-checkbox-contrast-icon);
347
+ }
348
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-contrast rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-contrast rect {
349
+ fill: var(--components-form-checkbox-contrast-icon);
350
+ }
351
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
352
+ border-color: var(--components-form-checkbox-standard-border);
353
+ background-color: var(--components-form-checkbox-standard-fill-hover);
354
+ }
355
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
356
+ border-color: var(--components-form-checkbox-contrast-border);
357
+ background-color: var(--components-form-checkbox-contrast-fill-hover);
358
+ }
359
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
360
+ .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
361
+ border-color: transparent;
362
+ background-color: var(--components-form-checkbox-standard-fill-selectedhover);
363
+ }
364
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
365
+ .eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
366
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
367
+ }
368
+ .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
369
+ .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
370
+ background-color: var(--components-form-checkbox-standard-fill-selected);
371
+ }
372
+ .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
373
+ .eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
374
+ background-color: var(--components-form-checkbox-contrast-fill-selected);
392
375
  }
393
- .eds-form-control::placeholder {
394
- opacity: 0;
395
- transition: opacity 0.2s ease-in-out;
376
+ .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
377
+ outline: 2px solid #181c56;
378
+ outline-color: var(--basecolors-stroke-focus-standard);
379
+ outline-offset: 0.125rem;
396
380
  }
397
- .eds-form-control:focus {
398
- outline: none;
381
+ .eds-contrast .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
382
+ outline-color: var(--basecolors-stroke-focus-contrast);
399
383
  }
400
- .eds-form-control:focus::-moz-placeholder {
401
- opacity: 1;
384
+ .eds-checkbox--disabled {
385
+ cursor: not-allowed;
402
386
  }
403
- .eds-form-control:focus::placeholder {
404
- opacity: 1;
387
+ .eds-checkbox--disabled input {
388
+ pointer-events: none;
405
389
  }
406
- .eds-form-control__prepend, .eds-form-control__append {
407
- position: relative;
408
- line-height: inherit;
390
+ .eds-checkbox--disabled .eds-checkbox__label {
391
+ opacity: 0.5;
409
392
  }
410
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
411
- all: unset;
412
- position: absolute;
413
- display: flex;
414
- align-items: center;
415
- justify-content: center;
416
- height: 1.5rem;
417
- width: 1.5rem;
418
- right: -2rem;
419
- border-radius: 100%;
420
- color: var(--primary-text-color);
421
- cursor: pointer;
393
+ .eds-checkbox--disabled .eds-checkbox__icon {
394
+ border-color: var(--components-form-checkbox-standard-icon-disabled);
422
395
  }
423
- .eds-form-control__prepend {
424
- margin-right: 0.75rem;
425
- margin-left: 0;
396
+ .eds-contrast .eds-checkbox--disabled .eds-checkbox__icon {
397
+ border-color: var(--components-form-checkbox-contrast-icon-disabled);
426
398
  }
427
- .eds-form-control__append {
399
+ .eds-checkbox__icon {
400
+ box-sizing: border-box;
401
+ display: inline-flex;
402
+ justify-content: center;
403
+ align-items: center;
404
+ position: relative;
405
+ margin-right: 1rem;
406
+ height: 1.25rem;
407
+ width: 1.25rem;
408
+ border: 0.125rem solid var(--components-form-checkbox-standard-border);
409
+ border-radius: 0.125rem;
410
+ background-color: transparent;
411
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
412
+ }
413
+ .eds-checkbox__icon--reduced-click-area {
428
414
  margin-right: 0;
429
- margin-left: 0.75rem;
415
+ }
416
+ .eds-contrast .eds-checkbox__icon {
417
+ border-color: var(--components-form-checkbox-contrast-border);
418
+ }
419
+ .eds-checkbox__icon .eds-checkbox-icon {
420
+ height: 1rem;
421
+ width: 1rem;
422
+ visibility: hidden;
423
+ }
424
+ .eds-checkbox__icon .eds-checkbox-icon path {
425
+ transform-origin: 50% 50%;
426
+ stroke-dasharray: 48;
427
+ stroke-dashoffset: 48;
428
+ stroke-width: 0.375rem;
429
+ }
430
+
431
+ @keyframes stroke {
432
+ 100% {
433
+ stroke-dashoffset: 0;
434
+ }
430
435
  }
431
436
  /* DO NOT CHANGE!*/
432
437
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -516,11 +521,6 @@
516
521
  height: 3rem;
517
522
  line-height: 1rem;
518
523
  }
519
- .eds-fieldset {
520
- margin: 0;
521
- padding: 0;
522
- border: 0;
523
- }
524
524
  /* DO NOT CHANGE!*/
525
525
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
526
526
  .eds-form-component--radio__container {
@@ -1103,6 +1103,88 @@ input:disabled + .eds-input-panel__container {
1103
1103
  }
1104
1104
  /* DO NOT CHANGE!*/
1105
1105
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1106
+ .eds-segmented-choice {
1107
+ display: block;
1108
+ flex: 1 1 0px;
1109
+ }
1110
+ .eds-segmented-choice .eds-base-segmented {
1111
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
1112
+ background-color: var(--background-color);
1113
+ border-radius: 0.25rem;
1114
+ color: var(--components-form-segmentedcontrol-standard-text-unselected);
1115
+ cursor: pointer;
1116
+ font-size: 0.875rem;
1117
+ height: 1.5rem;
1118
+ line-height: 1.25rem;
1119
+ margin: 0.25rem;
1120
+ outline-color: transparent;
1121
+ padding: calc(0.25rem / 2) 0.75rem;
1122
+ text-align: center;
1123
+ -webkit-user-select: none;
1124
+ -moz-user-select: none;
1125
+ user-select: none;
1126
+ }
1127
+ .eds-segmented-choice .eds-base-segmented--large {
1128
+ font-size: 1rem;
1129
+ height: 2.5rem;
1130
+ line-height: 1.5rem;
1131
+ padding: 0.5rem 0.75rem;
1132
+ }
1133
+ .eds-contrast .eds-segmented-choice .eds-base-segmented {
1134
+ --background-color: var(--components-form-segmentedcontrol-contrast-background);
1135
+ color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1136
+ }
1137
+ .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1138
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1139
+ }
1140
+ .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1141
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1142
+ }
1143
+ .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1144
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1145
+ color: var(--components-form-segmentedcontrol-standard-text-unselected);
1146
+ }
1147
+ .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1148
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1149
+ color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1150
+ }
1151
+ .eds-segmented-choice input {
1152
+ -webkit-appearance: none;
1153
+ -moz-appearance: none;
1154
+ appearance: none;
1155
+ position: absolute;
1156
+ opacity: 0;
1157
+ height: 0;
1158
+ width: 0;
1159
+ }
1160
+ .eds-segmented-choice input:checked + .eds-base-segmented {
1161
+ --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
1162
+ color: var(--components-form-segmentedcontrol-standard-text-selected);
1163
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1164
+ }
1165
+ .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
1166
+ --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
1167
+ box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1168
+ color: var(--components-form-segmentedcontrol-contrast-text-selected);
1169
+ }
1170
+ .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1171
+ outline: 2px solid #181c56;
1172
+ outline-color: var(--basecolors-stroke-focus-standard);
1173
+ outline-offset: 0.125rem;
1174
+ }
1175
+ .eds-contrast .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1176
+ outline-color: var(--basecolors-stroke-focus-contrast);
1177
+ }
1178
+ .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1179
+ outline: 2px solid #181c56;
1180
+ outline-color: var(--basecolors-stroke-focus-standard);
1181
+ outline-offset: 0.125rem;
1182
+ }
1183
+ .eds-contrast .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1184
+ outline-color: var(--basecolors-stroke-focus-contrast);
1185
+ }
1186
+ /* DO NOT CHANGE!*/
1187
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1106
1188
  /* DO NOT CHANGE!*/
1107
1189
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1108
1190
  /* DO NOT CHANGE!*/
@@ -1700,85 +1782,3 @@ input:disabled + .eds-input-panel__container {
1700
1782
  :root {
1701
1783
  --eds-form: 1;
1702
1784
  }
1703
- /* DO NOT CHANGE!*/
1704
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1705
- .eds-segmented-choice {
1706
- display: block;
1707
- flex: 1 1 0px;
1708
- }
1709
- .eds-segmented-choice .eds-base-segmented {
1710
- --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
1711
- background-color: var(--background-color);
1712
- border-radius: 0.25rem;
1713
- color: var(--components-form-segmentedcontrol-standard-text-unselected);
1714
- cursor: pointer;
1715
- font-size: 0.875rem;
1716
- height: 1.5rem;
1717
- line-height: 1.25rem;
1718
- margin: 0.25rem;
1719
- outline-color: transparent;
1720
- padding: calc(0.25rem / 2) 0.75rem;
1721
- text-align: center;
1722
- -webkit-user-select: none;
1723
- -moz-user-select: none;
1724
- user-select: none;
1725
- }
1726
- .eds-segmented-choice .eds-base-segmented--large {
1727
- font-size: 1rem;
1728
- height: 2.5rem;
1729
- line-height: 1.5rem;
1730
- padding: 0.5rem 0.75rem;
1731
- }
1732
- .eds-contrast .eds-segmented-choice .eds-base-segmented {
1733
- --background-color: var(--components-form-segmentedcontrol-contrast-background);
1734
- color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1735
- }
1736
- .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1737
- --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1738
- }
1739
- .eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
1740
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1741
- }
1742
- .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1743
- --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
1744
- color: var(--components-form-segmentedcontrol-standard-text-unselected);
1745
- }
1746
- .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1747
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
1748
- color: var(--components-form-segmentedcontrol-contrast-text-unselected);
1749
- }
1750
- .eds-segmented-choice input {
1751
- -webkit-appearance: none;
1752
- -moz-appearance: none;
1753
- appearance: none;
1754
- position: absolute;
1755
- opacity: 0;
1756
- height: 0;
1757
- width: 0;
1758
- }
1759
- .eds-segmented-choice input:checked + .eds-base-segmented {
1760
- --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
1761
- color: var(--components-form-segmentedcontrol-standard-text-selected);
1762
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
1763
- }
1764
- .eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
1765
- --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
1766
- box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
1767
- color: var(--components-form-segmentedcontrol-contrast-text-selected);
1768
- }
1769
- .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1770
- outline: 2px solid #181c56;
1771
- outline-color: var(--basecolors-stroke-focus-standard);
1772
- outline-offset: 0.125rem;
1773
- }
1774
- .eds-contrast .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
1775
- outline-color: var(--basecolors-stroke-focus-contrast);
1776
- }
1777
- .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1778
- outline: 2px solid #181c56;
1779
- outline-color: var(--basecolors-stroke-focus-standard);
1780
- outline-offset: 0.125rem;
1781
- }
1782
- .eds-contrast .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
1783
- outline-color: var(--basecolors-stroke-focus-contrast);
1784
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.2.9",
3
+ "version": "8.2.10",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,16 +27,16 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/button": "^3.3.9",
31
- "@entur/icons": "^7.12.0",
30
+ "@entur/button": "^3.3.10",
31
+ "@entur/icons": "^7.13.0",
32
32
  "@entur/tokens": "^3.19.1",
33
- "@entur/tooltip": "^5.2.9",
34
- "@entur/typography": "^1.9.9",
33
+ "@entur/tooltip": "^5.2.10",
34
+ "@entur/typography": "^1.9.10",
35
35
  "@entur/utils": "^0.12.3",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "db5f805386b0e22e938d3d0fbc6d283088502658"
41
+ "gitHead": "fce8c4670732d7dd2742d18f0d7759a364ba2c3c"
42
42
  }