@entur/form 8.1.9 → 8.1.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 +541 -541
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -143,293 +143,193 @@
143
143
  stroke-dashoffset: 0;
144
144
  }
145
145
  }
146
- .eds-fieldset {
147
- margin: 0;
148
- padding: 0;
149
- border: 0;
150
- }
151
146
  /* DO NOT CHANGE!*/
152
147
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
153
- .eds-input-group {
154
- color: inherit;
155
- display: block;
156
- position: relative;
157
- }
158
- .eds-input-group__label {
159
- color: var(--components-form-baseform-standard-text-label);
148
+ .eds-form-control__field-and-feedback-text {
160
149
  display: flex;
161
- font-size: 1rem;
162
- position: absolute;
163
- line-height: 1rem;
164
- height: 3rem;
165
- padding-left: 0;
166
- top: 1rem;
167
- transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
168
- -webkit-user-select: none;
169
- -moz-user-select: none;
170
- user-select: none;
171
- pointer-events: none;
172
- }
173
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
174
- top: 0.375rem;
175
- font-size: 0.75rem;
176
- line-height: 0.75rem;
177
- height: 10px;
178
- padding: 0;
179
- }
180
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
181
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
182
- background: var(--textarea-label-background);
183
- width: calc(100% - 1rem - 1rem - 4px);
184
- }
185
- .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
186
- top: 0.5rem;
187
- font-size: 0.875rem;
188
- line-height: 1rem;
189
- padding: 0;
190
- }
191
- .eds-form-control-wrapper--size-large .eds-input-group__label {
192
- top: 0.75rem;
193
- font-size: 1.5rem;
194
- line-height: 2.25rem;
195
- }
196
- .eds-input-group__label--filled {
197
- top: 0.375rem;
198
- font-size: 0.75rem;
199
- line-height: 0.75rem;
200
- height: 10px;
201
- padding: 0;
202
- }
203
- .eds-textarea__label .eds-input-group__label--filled {
204
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
205
- background: var(--textarea-label-background);
206
- width: calc(100% - 1rem - 1rem - 4px);
207
- }
208
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
209
- top: 0.5rem;
210
- font-size: 0.875rem;
211
- line-height: 1rem;
212
- padding: 0;
213
- }
214
-
215
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
216
- top: 0.375rem;
217
- font-size: 0.75rem;
218
- line-height: 0.75rem;
219
- height: 10px;
220
- padding: 0;
221
- }
222
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
223
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
224
- background: var(--textarea-label-background);
225
- width: calc(100% - 1rem - 1rem - 4px);
150
+ flex-direction: column;
151
+ height: -moz-fit-content;
152
+ height: fit-content;
153
+ width: 100%;
226
154
  }
227
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
228
- top: 0.5rem;
229
- font-size: 0.875rem;
230
- line-height: 1rem;
231
- padding: 0;
155
+ .eds-form-control__field-and-feedback-text--has-tooltip {
156
+ padding-right: 2rem;
232
157
  }
233
- /* DO NOT CHANGE!*/
234
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
235
- .eds-form-component--radio__container {
158
+ .eds-form-control-wrapper {
236
159
  display: flex;
237
- justify-content: center;
238
160
  align-items: center;
239
161
  position: relative;
240
- cursor: pointer;
241
- height: 2rem;
242
- width: -moz-fit-content;
243
- width: fit-content;
244
- -webkit-user-select: none;
245
- -moz-user-select: none;
246
- user-select: none;
162
+ flex: 1;
163
+ min-height: 3rem;
164
+ padding-left: 1rem;
165
+ padding-right: 1rem;
166
+ background-color: var(--components-form-baseform-standard-fill-default);
167
+ border-radius: 0.25rem;
168
+ border: 0.125rem solid var(--components-form-baseform-standard-border-default);
169
+ box-shadow: 0 0 0 transparent;
170
+ color: var(--components-form-baseform-standard-text-content);
171
+ transition: border-color 0.1s ease-in-out;
247
172
  }
248
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
249
- background-color: var(--components-form-radio-standard-fill-hover);
173
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
174
+ border-color: var(--components-form-baseform-standard-border-interactive);
250
175
  }
251
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
252
- background-color: var(--components-form-radio-contrast-fill-hover);
176
+ .eds-contrast .eds-form-control-wrapper:hover {
177
+ border-color: var(--components-form-baseform-contrast-border-interactive);
253
178
  }
254
- .eds-form-component--radio__container input {
255
- position: absolute;
256
- opacity: 0;
257
- cursor: pointer;
258
- height: 0;
259
- width: 0;
179
+ .eds-form-control-wrapper:focus-within {
180
+ outline: 1px solid var(--components-form-baseform-standard-border-interactive);
260
181
  }
261
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
262
- height: 0.625rem;
263
- width: 0.625rem;
182
+ .eds-contrast .eds-form-control-wrapper:focus-within {
183
+ outline: var(--components-form-baseform-contrast-border-interactive);
264
184
  }
265
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
266
- outline: 2px solid #181c56;
267
- outline-color: var(--basecolors-stroke-focus-standard);
268
- outline-offset: 0.125rem;
185
+ .eds-form-control-wrapper ::-moz-placeholder {
186
+ color: var(--components-form-baseform-standard-text-label);
269
187
  }
270
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
271
- outline-color: var(--basecolors-stroke-focus-contrast);
188
+ .eds-form-control-wrapper ::placeholder {
189
+ color: var(--components-form-baseform-standard-text-label);
272
190
  }
273
- .eds-form-component--radio__container .eds-form-component--radio__radio {
274
- position: relative;
275
- height: 1.25rem;
276
- width: 1.25rem;
277
- margin-right: 1rem;
278
- background-color: var(--components-form-radio-standard-fill-default);
279
- border: 0.125rem solid var(--components-form-radio-standard-border);
280
- border-radius: 50%;
281
- display: flex;
282
- align-items: center;
283
- justify-content: center;
191
+ .eds-form-control-wrapper--disabled {
192
+ border-color: transparent;
193
+ background-color: var(--components-form-baseform-standard-fill-disabled);
194
+ pointer-events: none;
195
+ color: var(--components-form-baseform-standard-text-disabled);
284
196
  }
285
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
286
- background-color: var(--components-form-radio-contrast-fill-default);
287
- border-color: var(--components-form-radio-contrast-border);
197
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
198
+ color: var(--components-form-baseform-standard-text-disabled);
288
199
  }
289
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
290
- background: var(--components-form-baseform-contrast-fill-disabled);
291
- border-color: var(--components-form-baseform-contrast-text-disabled);
292
- cursor: not-allowed;
200
+ .eds-contrast .eds-form-control-wrapper--disabled {
201
+ border-color: transparent;
202
+ background-color: var(--components-form-baseform-contrast-fill-disabled);
203
+ color: var(--components-form-baseform-contrast-text-disabled);
293
204
  }
294
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
295
- border-color: var(--components-form-baseform-contrast-text-disabled);
205
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
206
+ color: var(--components-form-baseform-contrast-text-disabled);
296
207
  }
297
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
298
- background: var(--components-form-baseform-contrast-fill-disabled);
299
- border-color: var(--components-form-baseform-contrast-text-disabled);
208
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
209
+ display: none;
300
210
  }
301
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
302
- color: var(--components-form-baseform-contrast-text-disabled);
211
+ .eds-form-control-wrapper--readonly {
212
+ border-color: transparent;
213
+ pointer-events: none;
214
+ cursor: default;
215
+ background: var(--components-form-baseform-standard-fill-readonly);
216
+ border: var(--components-form-baseform-standard-fill-readonly);
303
217
  }
304
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
305
- display: block;
306
- width: 0;
307
- height: 0;
308
- border-radius: 50%;
309
- background-color: var(--components-form-radio-standard-fill-selected);
310
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
218
+ .eds-contrast .eds-form-control-wrapper--readonly {
219
+ background: var(--components-form-baseform-contrast-fill-readonly);
220
+ color: var(--components-form-baseform-contrast-text-description);
221
+ border: var(--components-form-baseform-contrast-fill-readonly);
311
222
  }
312
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
313
- background-color: var(--components-form-radio-contrast-icon);
223
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
224
+ color: var(--components-form-baseform-contrast-text-description);
314
225
  }
315
- /* DO NOT CHANGE!*/
316
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
317
- .eds-switch {
318
- cursor: pointer;
319
- -webkit-user-select: none;
320
- -moz-user-select: none;
321
- user-select: none;
322
- padding: 0.5rem 0;
323
- width: -moz-fit-content;
324
- width: fit-content;
226
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
227
+ display: none;
325
228
  }
326
- .eds-switch input {
327
- opacity: 0;
328
- pointer-events: none;
329
- position: absolute;
229
+ .eds-form-control-wrapper--size-medium .eds-form-control,
230
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
231
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
232
+ font-size: 1rem;
233
+ line-height: 1rem;
330
234
  }
331
- .eds-switch--right {
332
- display: flex;
333
- flex-direction: row;
334
- align-items: center;
235
+ .eds-form-control-wrapper--size-large {
236
+ min-height: 4rem;
335
237
  }
336
- .eds-switch--bottom {
337
- display: flex;
338
- flex-direction: column;
339
- align-items: center;
238
+ .eds-form-control-wrapper--size-large .eds-form-control,
239
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
240
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
241
+ font-size: 1.5rem;
340
242
  }
341
- .eds-switch__circle {
342
- border-radius: 50%;
343
- height: 1.25rem;
344
- width: 1.25rem;
345
- content: "";
346
- display: flex;
347
- align-items: center;
348
- justify-content: center;
349
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
350
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
351
- background-color: var(--components-form-switch-standard-switch);
352
- top: 0.125rem;
353
- left: 0.125rem;
354
- position: relative;
243
+ .eds-form-control-wrapper--success {
244
+ border-color: var(--components-form-baseform-standard-border-success);
355
245
  }
356
- .eds-switch__switch--large .eds-switch__circle {
357
- height: 1.75rem;
358
- width: 1.75rem;
246
+ .eds-form-control-wrapper--success:focus-within {
247
+ border-color: var(--components-form-baseform-standard-border-success);
359
248
  }
360
- .eds-contrast .eds-switch__circle {
361
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
249
+ .eds-contrast .eds-form-control-wrapper--success {
250
+ border-color: var(--components-form-baseform-standard-border-success);
362
251
  }
363
- .eds-switch__switch {
364
- position: relative;
365
- background-color: var(--components-form-switch-standard-fill-false);
366
- content: "";
367
- display: block;
368
- transition: background-color 0.1s ease-in-out;
369
- height: 1.5rem;
370
- width: 3rem;
371
- border-radius: 1.5rem;
372
- box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
252
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
253
+ border-color: var(--components-form-baseform-contrast-border-success);
373
254
  }
374
- .eds-contrast .eds-switch__switch {
375
- background-color: var(--components-form-switch-contrast-fill-false);
255
+ .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
256
+ border-color: var(--components-form-baseform-standard-border-negative);
376
257
  }
377
- .eds-switch--right .eds-switch__switch {
378
- margin-right: 0.75rem;
258
+ .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
259
+ border-color: var(--components-form-baseform-standard-border-negative);
379
260
  }
380
- .eds-switch__switch svg g,
381
- .eds-switch__switch path {
382
- fill: var(--components-form-switch-standard-icon-false);
383
- transition: fill ease-in-out 0.1s;
261
+ .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
262
+ border-color: var(--components-form-baseform-contrast-border-negative);
384
263
  }
385
- .eds-contrast .eds-switch__switch svg g,
386
- .eds-contrast .eds-switch__switch path {
387
- fill: var(--components-form-switch-contrast-icon-false);
264
+ .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
265
+ border-color: var(--components-form-baseform-contrast-border-negative);
388
266
  }
389
- :checked + .eds-switch__switch {
390
- background-color: var(--eds-switch-color);
267
+ .eds-contrast .eds-form-control .eds-tooltip {
268
+ background: var(--components-tooltip-tooltip-standard-fill);
269
+ color: var(--components-tooltip-tooltip-standard-text);
270
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
391
271
  }
392
- :checked + .eds-switch__switch .eds-switch__circle {
393
- left: 1.625rem;
272
+ .eds-form-control .eds-tooltip::after {
273
+ background: var(--components-tooltip-tooltip-standard-fill);
394
274
  }
395
- :checked + .eds-switch__switch .eds-switch__circle svg g,
396
- :checked + .eds-switch__switch .eds-switch__circle path {
397
- fill: var(--eds-switch-color);
275
+
276
+ .eds-form-control {
277
+ display: block;
278
+ -webkit-appearance: none;
279
+ -moz-appearance: none;
280
+ appearance: none;
281
+ width: 100%;
282
+ height: 100%;
283
+ padding: 20px 0rem 0.25rem;
284
+ font-family: inherit;
285
+ font-size: 1rem;
286
+ line-height: 1rem;
287
+ border: 0;
288
+ color: var(--components-form-baseform-standard-text-content);
289
+ background-color: transparent;
398
290
  }
399
- .eds-contrast :checked + .eds-switch__switch {
400
- background-color: var(--eds-switch-contrast-color);
291
+ .eds-form-control::-moz-placeholder {
292
+ opacity: 0;
293
+ -moz-transition: opacity 0.2s ease-in-out;
294
+ transition: opacity 0.2s ease-in-out;
401
295
  }
402
- :focus + .eds-switch__switch {
403
- outline: 2px solid #181c56;
404
- outline-color: var(--basecolors-stroke-focus-standard);
405
- outline-offset: 0.125rem;
296
+ .eds-form-control::placeholder {
297
+ opacity: 0;
298
+ transition: opacity 0.2s ease-in-out;
406
299
  }
407
- .eds-contrast :focus + .eds-switch__switch {
408
- outline-color: var(--basecolors-stroke-focus-contrast);
300
+ .eds-form-control:focus {
301
+ outline: none;
409
302
  }
410
- .eds-switch__switch--large {
411
- width: 3.75rem;
412
- height: 2rem;
413
- border-radius: 3.75rem;
303
+ .eds-form-control:focus::-moz-placeholder {
304
+ opacity: 1;
414
305
  }
415
- :checked + .eds-switch__switch--large .eds-switch__circle {
416
- left: 1.875rem;
306
+ .eds-form-control:focus::placeholder {
307
+ opacity: 1;
417
308
  }
418
- .eds-switch__switch--large svg {
309
+ .eds-form-control__prepend, .eds-form-control__append {
419
310
  position: relative;
420
- right: 0.05rem;
421
- }
422
- .eds-switch__label--large--right {
423
- font-size: 1rem;
311
+ line-height: inherit;
424
312
  }
425
- .eds-switch__label--large--bottom {
426
- font-size: 0.875rem;
313
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
314
+ all: unset;
315
+ position: absolute;
316
+ display: flex;
317
+ align-items: center;
318
+ justify-content: center;
319
+ height: 1.5rem;
320
+ width: 1.5rem;
321
+ right: -2rem;
322
+ border-radius: 100%;
323
+ color: var(--primary-text-color);
324
+ cursor: pointer;
427
325
  }
428
- .eds-switch__label--medium--right {
429
- font-size: 0.875rem;
326
+ .eds-form-control__prepend {
327
+ margin-right: 0.75rem;
328
+ margin-left: 0;
430
329
  }
431
- .eds-switch__label--medium--bottom {
432
- font-size: 0.75rem;
330
+ .eds-form-control__append {
331
+ margin-right: 0;
332
+ margin-left: 0.75rem;
433
333
  }
434
334
  /* DO NOT CHANGE!*/
435
335
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -501,344 +401,214 @@
501
401
  .eds-contrast .eds-feedback-text__icon--warning {
502
402
  color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
503
403
  }
504
- .eds-contrast .eds-feedback-text__icon--warning circle {
505
- fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
506
- }
507
- /* DO NOT CHANGE!*/
508
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
509
- .eds-input-panel:focus-within .eds-input-panel__container {
510
- outline: 2px solid #181c56;
511
- outline-color: var(--basecolors-stroke-focus-standard);
512
- outline-offset: 0.125rem;
513
- }
514
- .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
515
- outline-color: var(--basecolors-stroke-focus-contrast);
516
- }
517
- .eds-input-panel > input {
518
- position: absolute;
519
- opacity: 0;
520
- cursor: pointer;
521
- height: 0;
522
- width: 0;
523
- }
524
- .eds-input-panel > input:checked + .eds-input-panel__container {
525
- border-color: var(--components-form-basepanel-standard-border-selected);
526
- background: var(--components-form-basepanel-standard-fill-selected);
527
- }
528
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
529
- border-color: var(--components-form-basepanel-contrast-border-selected);
530
- background: var(--components-form-basepanel-contrast-fill-selected);
531
- }
532
- .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
533
- width: 0.75rem;
534
- height: 0.75rem;
535
- }
536
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
537
- background-color: var(--components-form-radio-contrast-icon);
538
- }
539
- .eds-input-panel > input:checked + .eds-input-panel__container:hover {
540
- background-color: var(--components-form-basepanel-standard-fill-hover);
541
- /* The following styling is needed to sync the inner checkbox/radiobutton's
542
- hover state styling with the inputPanel container */
543
- }
544
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
545
- background-color: var(--components-form-basepanel-contrast-fill-hover);
546
- }
547
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
548
- background-color: var(--components-form-basepanel-standard-fill-hover);
549
- border-color: var(--components-form-basepanel-standard-border-selected);
550
- }
551
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
552
- background-color: var(--components-form-basepanel-contrast-fill-hover);
553
- border-color: var(--components-form-basepanel-contrast-border-selected);
554
- }
555
- .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
556
- border-color: transparent;
557
- }
558
- .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
559
- background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
560
- }
561
- .eds-input-panel__container {
562
- background: var(--components-form-basepanel-standard-fill-default);
563
- border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
564
- color: var(--components-form-basepanel-standard-text-accent);
565
- border-radius: 0.25rem;
566
- display: flex;
567
- flex-direction: column;
568
- justify-content: flex-start;
569
- min-width: 20rem;
570
- position: relative;
571
- padding: 1rem;
572
- -webkit-user-select: none;
573
- -moz-user-select: none;
574
- user-select: none;
575
- width: -moz-fit-content;
576
- width: fit-content;
577
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
578
- }
579
- .eds-contrast .eds-input-panel__container {
580
- background-color: var(--components-form-basepanel-contrast-fill-default);
581
- border-color: var(--components-form-basepanel-contrast-border-default);
582
- color: var(--components-form-basepanel-contrast-text-accent);
583
- }
584
- .eds-input-panel__container:hover {
585
- background-color: var(--components-form-basepanel-standard-fill-hover);
586
- /* The following styling is needed to sync the inner checkbox/radiobutton's
587
- hover state styling with the inputPanel container */
588
- }
589
- .eds-contrast .eds-input-panel__container:hover {
590
- background-color: var(--components-form-basepanel-contrast-fill-hover);
591
- }
592
- .eds-input-panel__container:hover .eds-checkbox__icon,
593
- .eds-input-panel__container:hover .eds-form-component--radio__radio {
594
- background-color: var(--components-form-basepanel-standard-fill-hover);
595
- border-color: var(--components-form-basepanel-standard-border-selected);
596
- }
597
- .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
598
- .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
599
- background-color: var(--components-form-basepanel-contrast-fill-hover);
600
- border-color: var(--components-form-basepanel-contrast-border-selected);
601
- }
602
- input:disabled + .eds-input-panel__container {
603
- background: var(--components-form-basepanel-standard-fill-disabled);
604
- border-color: var(--components-form-basepanel-standard-border-disabled);
605
- color: var(--components-form-basepanel-standard-text-disabled);
606
- cursor: not-allowed;
607
- }
608
- .eds-contrast input:disabled + .eds-input-panel__container {
609
- background: var(--components-form-basepanel-contrast-fill-disabled);
610
- border-style: dashed;
611
- border-color: var(--components-form-basepanel-contrast-border-disabled);
612
- color: var(--components-form-basepanel-contrast-text-disabled);
613
- }
614
- .eds-input-panel__container .eds-checkbox__icon,
615
- .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
616
- .eds-input-panel__container .eds-form-component--radio__radio {
617
- width: 1.5rem;
618
- height: 1.5rem;
619
- margin-right: 0;
620
- }
621
- .eds-input-panel--medium .eds-input-panel__title {
622
- font-size: 1rem;
623
- font-weight: 500;
624
- }
625
- .eds-input-panel--medium.eds-input-panel__container {
626
- padding-bottom: 1rem;
627
- min-height: 3.75rem;
628
- }
629
- .eds-input-panel--large.eds-input-panel__container {
630
- min-height: 6rem;
631
- }
632
- .eds-input-panel--large .eds-input-panel__title {
633
- font-size: 1.25rem;
634
- font-weight: 500;
635
- line-height: 1.875rem;
636
- }
637
- .eds-input-panel__title-wrapper {
638
- display: flex;
639
- justify-content: space-between;
640
- align-items: center;
641
- }
642
- .eds-input-panel__secondary-label-and-icon-wrapper {
643
- display: flex;
644
- justify-content: center;
645
- align-items: center;
646
- gap: 0.75rem;
647
- }
648
- .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
649
- margin: 0;
650
- }
651
- .eds-input-panel__additional-content {
652
- margin-top: 0.25rem;
653
- word-wrap: break-word;
654
- }
655
- /* DO NOT CHANGE!*/
656
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
657
- .eds-form-control__field-and-feedback-text {
658
- display: flex;
659
- flex-direction: column;
660
- height: -moz-fit-content;
661
- height: fit-content;
662
- width: 100%;
663
- }
664
- .eds-form-control__field-and-feedback-text--has-tooltip {
665
- padding-right: 2rem;
666
- }
667
- .eds-form-control-wrapper {
668
- display: flex;
669
- align-items: center;
670
- position: relative;
671
- flex: 1;
672
- min-height: 3rem;
673
- padding-left: 1rem;
674
- padding-right: 1rem;
675
- background-color: var(--components-form-baseform-standard-fill-default);
676
- border-radius: 0.25rem;
677
- border: 0.125rem solid var(--components-form-baseform-standard-border-default);
678
- box-shadow: 0 0 0 transparent;
679
- color: var(--components-form-baseform-standard-text-content);
680
- transition: border-color 0.1s ease-in-out;
681
- }
682
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
683
- border-color: var(--components-form-baseform-standard-border-interactive);
684
- }
685
- .eds-contrast .eds-form-control-wrapper:hover {
686
- border-color: var(--components-form-baseform-contrast-border-interactive);
687
- }
688
- .eds-form-control-wrapper:focus-within {
689
- outline: 1px solid var(--components-form-baseform-standard-border-interactive);
690
- }
691
- .eds-contrast .eds-form-control-wrapper:focus-within {
692
- outline: var(--components-form-baseform-contrast-border-interactive);
693
- }
694
- .eds-form-control-wrapper ::-moz-placeholder {
695
- color: var(--components-form-baseform-standard-text-label);
404
+ .eds-contrast .eds-feedback-text__icon--warning circle {
405
+ fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
696
406
  }
697
- .eds-form-control-wrapper ::placeholder {
698
- color: var(--components-form-baseform-standard-text-label);
407
+ .eds-fieldset {
408
+ margin: 0;
409
+ padding: 0;
410
+ border: 0;
699
411
  }
700
- .eds-form-control-wrapper--disabled {
701
- border-color: transparent;
702
- background-color: var(--components-form-baseform-standard-fill-disabled);
412
+ /* DO NOT CHANGE!*/
413
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
414
+ .eds-switch {
415
+ cursor: pointer;
416
+ -webkit-user-select: none;
417
+ -moz-user-select: none;
418
+ user-select: none;
419
+ padding: 0.5rem 0;
420
+ width: -moz-fit-content;
421
+ width: fit-content;
422
+ }
423
+ .eds-switch input {
424
+ opacity: 0;
703
425
  pointer-events: none;
704
- color: var(--components-form-baseform-standard-text-disabled);
426
+ position: absolute;
705
427
  }
706
- .eds-form-control-wrapper--disabled .eds-input-group__label {
707
- color: var(--components-form-baseform-standard-text-disabled);
428
+ .eds-switch--right {
429
+ display: flex;
430
+ flex-direction: row;
431
+ align-items: center;
708
432
  }
709
- .eds-contrast .eds-form-control-wrapper--disabled {
710
- border-color: transparent;
711
- background-color: var(--components-form-baseform-contrast-fill-disabled);
712
- color: var(--components-form-baseform-contrast-text-disabled);
433
+ .eds-switch--bottom {
434
+ display: flex;
435
+ flex-direction: column;
436
+ align-items: center;
713
437
  }
714
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
715
- color: var(--components-form-baseform-contrast-text-disabled);
438
+ .eds-switch__circle {
439
+ border-radius: 50%;
440
+ height: 1.25rem;
441
+ width: 1.25rem;
442
+ content: "";
443
+ display: flex;
444
+ align-items: center;
445
+ justify-content: center;
446
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
447
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
448
+ background-color: var(--components-form-switch-standard-switch);
449
+ top: 0.125rem;
450
+ left: 0.125rem;
451
+ position: relative;
716
452
  }
717
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
718
- display: none;
453
+ .eds-switch__switch--large .eds-switch__circle {
454
+ height: 1.75rem;
455
+ width: 1.75rem;
719
456
  }
720
- .eds-form-control-wrapper--readonly {
721
- border-color: transparent;
722
- pointer-events: none;
723
- cursor: default;
724
- background: var(--components-form-baseform-standard-fill-readonly);
725
- border: var(--components-form-baseform-standard-fill-readonly);
457
+ .eds-contrast .eds-switch__circle {
458
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5);
726
459
  }
727
- .eds-contrast .eds-form-control-wrapper--readonly {
728
- background: var(--components-form-baseform-contrast-fill-readonly);
729
- color: var(--components-form-baseform-contrast-text-description);
730
- border: var(--components-form-baseform-contrast-fill-readonly);
460
+ .eds-switch__switch {
461
+ position: relative;
462
+ background-color: var(--components-form-switch-standard-fill-false);
463
+ content: "";
464
+ display: block;
465
+ transition: background-color 0.1s ease-in-out;
466
+ height: 1.5rem;
467
+ width: 3rem;
468
+ border-radius: 1.5rem;
469
+ box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.1);
731
470
  }
732
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
733
- color: var(--components-form-baseform-contrast-text-description);
471
+ .eds-contrast .eds-switch__switch {
472
+ background-color: var(--components-form-switch-contrast-fill-false);
734
473
  }
735
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
736
- display: none;
474
+ .eds-switch--right .eds-switch__switch {
475
+ margin-right: 0.75rem;
737
476
  }
738
- .eds-form-control-wrapper--size-medium .eds-form-control,
739
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
740
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
741
- font-size: 1rem;
742
- line-height: 1rem;
477
+ .eds-switch__switch svg g,
478
+ .eds-switch__switch path {
479
+ fill: var(--components-form-switch-standard-icon-false);
480
+ transition: fill ease-in-out 0.1s;
743
481
  }
744
- .eds-form-control-wrapper--size-large {
745
- min-height: 4rem;
482
+ .eds-contrast .eds-switch__switch svg g,
483
+ .eds-contrast .eds-switch__switch path {
484
+ fill: var(--components-form-switch-contrast-icon-false);
746
485
  }
747
- .eds-form-control-wrapper--size-large .eds-form-control,
748
- .eds-form-control-wrapper--size-large .eds-form-control__append,
749
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
750
- font-size: 1.5rem;
486
+ :checked + .eds-switch__switch {
487
+ background-color: var(--eds-switch-color);
751
488
  }
752
- .eds-form-control-wrapper--success {
753
- border-color: var(--components-form-baseform-standard-border-success);
489
+ :checked + .eds-switch__switch .eds-switch__circle {
490
+ left: 1.625rem;
754
491
  }
755
- .eds-form-control-wrapper--success:focus-within {
756
- border-color: var(--components-form-baseform-standard-border-success);
492
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
493
+ :checked + .eds-switch__switch .eds-switch__circle path {
494
+ fill: var(--eds-switch-color);
757
495
  }
758
- .eds-contrast .eds-form-control-wrapper--success {
759
- border-color: var(--components-form-baseform-standard-border-success);
496
+ .eds-contrast :checked + .eds-switch__switch {
497
+ background-color: var(--eds-switch-contrast-color);
760
498
  }
761
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
762
- border-color: var(--components-form-baseform-contrast-border-success);
499
+ :focus + .eds-switch__switch {
500
+ outline: 2px solid #181c56;
501
+ outline-color: var(--basecolors-stroke-focus-standard);
502
+ outline-offset: 0.125rem;
763
503
  }
764
- .eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
765
- border-color: var(--components-form-baseform-standard-border-negative);
504
+ .eds-contrast :focus + .eds-switch__switch {
505
+ outline-color: var(--basecolors-stroke-focus-contrast);
766
506
  }
767
- .eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
768
- border-color: var(--components-form-baseform-standard-border-negative);
507
+ .eds-switch__switch--large {
508
+ width: 3.75rem;
509
+ height: 2rem;
510
+ border-radius: 3.75rem;
769
511
  }
770
- .eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
771
- border-color: var(--components-form-baseform-contrast-border-negative);
512
+ :checked + .eds-switch__switch--large .eds-switch__circle {
513
+ left: 1.875rem;
772
514
  }
773
- .eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
774
- border-color: var(--components-form-baseform-contrast-border-negative);
515
+ .eds-switch__switch--large svg {
516
+ position: relative;
517
+ right: 0.05rem;
775
518
  }
776
- .eds-contrast .eds-form-control .eds-tooltip {
777
- background: var(--components-tooltip-tooltip-standard-fill);
778
- color: var(--components-tooltip-tooltip-standard-text);
779
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
519
+ .eds-switch__label--large--right {
520
+ font-size: 1rem;
780
521
  }
781
- .eds-form-control .eds-tooltip::after {
782
- background: var(--components-tooltip-tooltip-standard-fill);
522
+ .eds-switch__label--large--bottom {
523
+ font-size: 0.875rem;
783
524
  }
784
-
785
- .eds-form-control {
525
+ .eds-switch__label--medium--right {
526
+ font-size: 0.875rem;
527
+ }
528
+ .eds-switch__label--medium--bottom {
529
+ font-size: 0.75rem;
530
+ }
531
+ /* DO NOT CHANGE!*/
532
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
533
+ .eds-input-group {
534
+ color: inherit;
786
535
  display: block;
787
- -webkit-appearance: none;
788
- -moz-appearance: none;
789
- appearance: none;
790
- width: 100%;
791
- height: 100%;
792
- padding: 20px 0rem 0.25rem;
793
- font-family: inherit;
536
+ position: relative;
537
+ }
538
+ .eds-input-group__label {
539
+ color: var(--components-form-baseform-standard-text-label);
540
+ display: flex;
794
541
  font-size: 1rem;
542
+ position: absolute;
795
543
  line-height: 1rem;
796
- border: 0;
797
- color: var(--components-form-baseform-standard-text-content);
798
- background-color: transparent;
544
+ height: 3rem;
545
+ padding-left: 0;
546
+ top: 1rem;
547
+ transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out, padding 0.2s ease-in-out, line-height ease-in-out 0.2s;
548
+ -webkit-user-select: none;
549
+ -moz-user-select: none;
550
+ user-select: none;
551
+ pointer-events: none;
799
552
  }
800
- .eds-form-control::-moz-placeholder {
801
- opacity: 0;
802
- -moz-transition: opacity 0.2s ease-in-out;
803
- transition: opacity 0.2s ease-in-out;
553
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
554
+ top: 0.375rem;
555
+ font-size: 0.75rem;
556
+ line-height: 0.75rem;
557
+ height: 10px;
558
+ padding: 0;
804
559
  }
805
- .eds-form-control::placeholder {
806
- opacity: 0;
807
- transition: opacity 0.2s ease-in-out;
560
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
561
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
562
+ background: var(--textarea-label-background);
563
+ width: calc(100% - 1rem - 1rem - 4px);
808
564
  }
809
- .eds-form-control:focus {
810
- outline: none;
565
+ .eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
566
+ top: 0.5rem;
567
+ font-size: 0.875rem;
568
+ line-height: 1rem;
569
+ padding: 0;
811
570
  }
812
- .eds-form-control:focus::-moz-placeholder {
813
- opacity: 1;
571
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
572
+ top: 0.75rem;
573
+ font-size: 1.5rem;
574
+ line-height: 2.25rem;
814
575
  }
815
- .eds-form-control:focus::placeholder {
816
- opacity: 1;
576
+ .eds-input-group__label--filled {
577
+ top: 0.375rem;
578
+ font-size: 0.75rem;
579
+ line-height: 0.75rem;
580
+ height: 10px;
581
+ padding: 0;
817
582
  }
818
- .eds-form-control__prepend, .eds-form-control__append {
819
- position: relative;
820
- line-height: inherit;
583
+ .eds-textarea__label .eds-input-group__label--filled {
584
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
585
+ background: var(--textarea-label-background);
586
+ width: calc(100% - 1rem - 1rem - 4px);
821
587
  }
822
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
823
- all: unset;
824
- position: absolute;
825
- display: flex;
826
- align-items: center;
827
- justify-content: center;
828
- height: 1.5rem;
829
- width: 1.5rem;
830
- right: -2rem;
831
- border-radius: 100%;
832
- color: var(--primary-text-color);
833
- cursor: pointer;
588
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
589
+ top: 0.5rem;
590
+ font-size: 0.875rem;
591
+ line-height: 1rem;
592
+ padding: 0;
834
593
  }
835
- .eds-form-control__prepend {
836
- margin-right: 0.75rem;
837
- margin-left: 0;
594
+
595
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
596
+ top: 0.375rem;
597
+ font-size: 0.75rem;
598
+ line-height: 0.75rem;
599
+ height: 10px;
600
+ padding: 0;
838
601
  }
839
- .eds-form-control__append {
840
- margin-right: 0;
841
- margin-left: 0.75rem;
602
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
603
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
604
+ background: var(--textarea-label-background);
605
+ width: calc(100% - 1rem - 1rem - 4px);
606
+ }
607
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
608
+ top: 0.5rem;
609
+ font-size: 0.875rem;
610
+ line-height: 1rem;
611
+ padding: 0;
842
612
  }
843
613
  /* DO NOT CHANGE!*/
844
614
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -1006,6 +776,236 @@ input:disabled + .eds-input-panel__container {
1006
776
  }
1007
777
  /* DO NOT CHANGE!*/
1008
778
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
779
+ .eds-form-component--radio__container {
780
+ display: flex;
781
+ justify-content: center;
782
+ align-items: center;
783
+ position: relative;
784
+ cursor: pointer;
785
+ height: 2rem;
786
+ width: -moz-fit-content;
787
+ width: fit-content;
788
+ -webkit-user-select: none;
789
+ -moz-user-select: none;
790
+ user-select: none;
791
+ }
792
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
793
+ background-color: var(--components-form-radio-standard-fill-hover);
794
+ }
795
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
796
+ background-color: var(--components-form-radio-contrast-fill-hover);
797
+ }
798
+ .eds-form-component--radio__container input {
799
+ position: absolute;
800
+ opacity: 0;
801
+ cursor: pointer;
802
+ height: 0;
803
+ width: 0;
804
+ }
805
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
806
+ height: 0.625rem;
807
+ width: 0.625rem;
808
+ }
809
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
810
+ outline: 2px solid #181c56;
811
+ outline-color: var(--basecolors-stroke-focus-standard);
812
+ outline-offset: 0.125rem;
813
+ }
814
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
815
+ outline-color: var(--basecolors-stroke-focus-contrast);
816
+ }
817
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
818
+ position: relative;
819
+ height: 1.25rem;
820
+ width: 1.25rem;
821
+ margin-right: 1rem;
822
+ background-color: var(--components-form-radio-standard-fill-default);
823
+ border: 0.125rem solid var(--components-form-radio-standard-border);
824
+ border-radius: 50%;
825
+ display: flex;
826
+ align-items: center;
827
+ justify-content: center;
828
+ }
829
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
830
+ background-color: var(--components-form-radio-contrast-fill-default);
831
+ border-color: var(--components-form-radio-contrast-border);
832
+ }
833
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
834
+ background: var(--components-form-baseform-contrast-fill-disabled);
835
+ border-color: var(--components-form-baseform-contrast-text-disabled);
836
+ cursor: not-allowed;
837
+ }
838
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
839
+ border-color: var(--components-form-baseform-contrast-text-disabled);
840
+ }
841
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
842
+ background: var(--components-form-baseform-contrast-fill-disabled);
843
+ border-color: var(--components-form-baseform-contrast-text-disabled);
844
+ }
845
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
846
+ color: var(--components-form-baseform-contrast-text-disabled);
847
+ }
848
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
849
+ display: block;
850
+ width: 0;
851
+ height: 0;
852
+ border-radius: 50%;
853
+ background-color: var(--components-form-radio-standard-fill-selected);
854
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
855
+ }
856
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
857
+ background-color: var(--components-form-radio-contrast-icon);
858
+ }
859
+ /* DO NOT CHANGE!*/
860
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
861
+ .eds-input-panel:focus-within .eds-input-panel__container {
862
+ outline: 2px solid #181c56;
863
+ outline-color: var(--basecolors-stroke-focus-standard);
864
+ outline-offset: 0.125rem;
865
+ }
866
+ .eds-contrast .eds-input-panel:focus-within .eds-input-panel__container {
867
+ outline-color: var(--basecolors-stroke-focus-contrast);
868
+ }
869
+ .eds-input-panel > input {
870
+ position: absolute;
871
+ opacity: 0;
872
+ cursor: pointer;
873
+ height: 0;
874
+ width: 0;
875
+ }
876
+ .eds-input-panel > input:checked + .eds-input-panel__container {
877
+ border-color: var(--components-form-basepanel-standard-border-selected);
878
+ background: var(--components-form-basepanel-standard-fill-selected);
879
+ }
880
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container {
881
+ border-color: var(--components-form-basepanel-contrast-border-selected);
882
+ background: var(--components-form-basepanel-contrast-fill-selected);
883
+ }
884
+ .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
885
+ width: 0.75rem;
886
+ height: 0.75rem;
887
+ }
888
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container .eds-form-component--radio__circle {
889
+ background-color: var(--components-form-radio-contrast-icon);
890
+ }
891
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover {
892
+ background-color: var(--components-form-basepanel-standard-fill-hover);
893
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
894
+ hover state styling with the inputPanel container */
895
+ }
896
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover {
897
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
898
+ }
899
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
900
+ background-color: var(--components-form-basepanel-standard-fill-hover);
901
+ border-color: var(--components-form-basepanel-standard-border-selected);
902
+ }
903
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-form-component--radio__radio {
904
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
905
+ border-color: var(--components-form-basepanel-contrast-border-selected);
906
+ }
907
+ .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
908
+ border-color: transparent;
909
+ }
910
+ .eds-contrast .eds-input-panel > input:checked + .eds-input-panel__container:hover .eds-checkbox__icon {
911
+ background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
912
+ }
913
+ .eds-input-panel__container {
914
+ background: var(--components-form-basepanel-standard-fill-default);
915
+ border: 0.125rem solid var(--components-form-basepanel-standard-border-default);
916
+ color: var(--components-form-basepanel-standard-text-accent);
917
+ border-radius: 0.25rem;
918
+ display: flex;
919
+ flex-direction: column;
920
+ justify-content: flex-start;
921
+ min-width: 20rem;
922
+ position: relative;
923
+ padding: 1rem;
924
+ -webkit-user-select: none;
925
+ -moz-user-select: none;
926
+ user-select: none;
927
+ width: -moz-fit-content;
928
+ width: fit-content;
929
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
930
+ }
931
+ .eds-contrast .eds-input-panel__container {
932
+ background-color: var(--components-form-basepanel-contrast-fill-default);
933
+ border-color: var(--components-form-basepanel-contrast-border-default);
934
+ color: var(--components-form-basepanel-contrast-text-accent);
935
+ }
936
+ .eds-input-panel__container:hover {
937
+ background-color: var(--components-form-basepanel-standard-fill-hover);
938
+ /* The following styling is needed to sync the inner checkbox/radiobutton's
939
+ hover state styling with the inputPanel container */
940
+ }
941
+ .eds-contrast .eds-input-panel__container:hover {
942
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
943
+ }
944
+ .eds-input-panel__container:hover .eds-checkbox__icon,
945
+ .eds-input-panel__container:hover .eds-form-component--radio__radio {
946
+ background-color: var(--components-form-basepanel-standard-fill-hover);
947
+ border-color: var(--components-form-basepanel-standard-border-selected);
948
+ }
949
+ .eds-contrast .eds-input-panel__container:hover .eds-checkbox__icon,
950
+ .eds-contrast .eds-input-panel__container:hover .eds-form-component--radio__radio {
951
+ background-color: var(--components-form-basepanel-contrast-fill-hover);
952
+ border-color: var(--components-form-basepanel-contrast-border-selected);
953
+ }
954
+ input:disabled + .eds-input-panel__container {
955
+ background: var(--components-form-basepanel-standard-fill-disabled);
956
+ border-color: var(--components-form-basepanel-standard-border-disabled);
957
+ color: var(--components-form-basepanel-standard-text-disabled);
958
+ cursor: not-allowed;
959
+ }
960
+ .eds-contrast input:disabled + .eds-input-panel__container {
961
+ background: var(--components-form-basepanel-contrast-fill-disabled);
962
+ border-style: dashed;
963
+ border-color: var(--components-form-basepanel-contrast-border-disabled);
964
+ color: var(--components-form-basepanel-contrast-text-disabled);
965
+ }
966
+ .eds-input-panel__container .eds-checkbox__icon,
967
+ .eds-input-panel__container .eds-checkbox__icon .eds-checkbox__icon,
968
+ .eds-input-panel__container .eds-form-component--radio__radio {
969
+ width: 1.5rem;
970
+ height: 1.5rem;
971
+ margin-right: 0;
972
+ }
973
+ .eds-input-panel--medium .eds-input-panel__title {
974
+ font-size: 1rem;
975
+ font-weight: 500;
976
+ }
977
+ .eds-input-panel--medium.eds-input-panel__container {
978
+ padding-bottom: 1rem;
979
+ min-height: 3.75rem;
980
+ }
981
+ .eds-input-panel--large.eds-input-panel__container {
982
+ min-height: 6rem;
983
+ }
984
+ .eds-input-panel--large .eds-input-panel__title {
985
+ font-size: 1.25rem;
986
+ font-weight: 500;
987
+ line-height: 1.875rem;
988
+ }
989
+ .eds-input-panel__title-wrapper {
990
+ display: flex;
991
+ justify-content: space-between;
992
+ align-items: center;
993
+ }
994
+ .eds-input-panel__secondary-label-and-icon-wrapper {
995
+ display: flex;
996
+ justify-content: center;
997
+ align-items: center;
998
+ gap: 0.75rem;
999
+ }
1000
+ .eds-input-panel__secondary-label-and-icon-wrapper .eds-checkbox__container {
1001
+ margin: 0;
1002
+ }
1003
+ .eds-input-panel__additional-content {
1004
+ margin-top: 0.25rem;
1005
+ word-wrap: break-word;
1006
+ }
1007
+ /* DO NOT CHANGE!*/
1008
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1009
1009
  .eds-textfield__clear-button {
1010
1010
  background: none;
1011
1011
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "8.1.9",
3
+ "version": "8.1.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.2.37",
31
- "@entur/icons": "^7.5.1",
32
- "@entur/tokens": "^3.17.4",
33
- "@entur/tooltip": "^5.1.5",
34
- "@entur/typography": "^1.8.50",
30
+ "@entur/button": "^3.2.38",
31
+ "@entur/icons": "^7.6.0",
32
+ "@entur/tokens": "^3.17.5",
33
+ "@entur/tooltip": "^5.1.6",
34
+ "@entur/typography": "^1.8.51",
35
35
  "@entur/utils": "^0.12.2",
36
36
  "classnames": "^2.3.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "dts-cli": "2.0.5"
40
40
  },
41
- "gitHead": "835e1335b390f48b80379ae6c473ac89041a392a"
41
+ "gitHead": "1a989376d61ab59a8c554a9cab733039aef8b2eb"
42
42
  }