@entur/form 7.0.18 → 7.0.20

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 +292 -292
  2. package/package.json +5 -5
package/dist/styles.css CHANGED
@@ -1,224 +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: #181c56;
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: #ffffff;
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: #ffffff;
40
- }
41
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
42
- opacity: 0.5;
43
- }
44
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
45
- opacity: 0.5;
46
- }
47
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
48
- opacity: 0.5;
49
- }
50
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
51
- opacity: 0.5;
52
- }
53
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
54
- opacity: 0.5;
55
- }
56
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
57
- background-color: #aeb7e2;
58
- }
59
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
60
- stroke: #181c56;
61
- }
62
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
63
- fill: #181c56;
64
- }
65
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
66
- border-color: #292b6a;
67
- background-color: #d1d4e3;
68
- }
69
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
70
- border-color: #b6bee5;
71
- background-color: rgba(174, 183, 226, 0.2);
72
- }
73
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
74
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
75
- border-color: transparent;
76
- background-color: #54568c;
77
- }
78
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
79
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
80
- background-color: #b6bee5;
81
- }
82
- .eds-checkbox__container:active input + .eds-checkbox__icon {
83
- border-color: #16194d;
84
- }
85
- .eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
86
- border-color: #9da5cb;
87
- }
88
- .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
89
- .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
90
- background-color: #16194d;
91
- }
92
- .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
93
- .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
94
- background-color: #9da5cb;
95
- }
96
- .eds-checkbox__container:focus + .eds-checkbox__icon,
97
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
98
- outline: none;
99
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
100
- outline-offset: 0.125rem;
101
- }
102
- .eds-checkbox__container:focus + .eds-checkbox__icon,
103
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
104
- outline: none;
105
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
106
- outline-offset: 0.125rem;
107
- }
108
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
109
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
110
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
111
- }
112
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
113
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
114
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
115
- }
116
- .eds-checkbox--disabled {
117
- pointer-events: none;
118
- }
119
- .eds-checkbox--disabled .eds-checkbox__label {
120
- opacity: 0.5;
121
- }
122
- .eds-checkbox--disabled .eds-checkbox__icon {
123
- opacity: 0.5;
124
- }
125
- .eds-checkbox__icon {
126
- box-sizing: border-box;
127
- display: inline-flex;
128
- justify-content: center;
129
- align-items: center;
130
- position: relative;
131
- margin-right: 1rem;
132
- height: 1.25rem;
133
- width: 1.25rem;
134
- border: 0.125rem solid #181c56;
135
- border-radius: 0.125rem;
136
- background-color: transparent;
137
- color: #ffffff;
138
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
139
- }
140
- .eds-checkbox__icon--reduced-click-area {
141
- margin-right: 0;
142
- }
143
- .eds-contrast .eds-checkbox__icon {
144
- border-color: #aeb7e2;
145
- }
146
- .eds-checkbox__icon .eds-checkbox-icon {
147
- height: 1rem;
148
- width: 1rem;
149
- visibility: hidden;
150
- }
151
- .eds-checkbox__icon .eds-checkbox-icon path {
152
- transform-origin: 50% 50%;
153
- stroke-dasharray: 48;
154
- stroke-dashoffset: 48;
155
- stroke-width: 0.375rem;
156
- }
157
-
158
- @keyframes stroke {
159
- 100% {
160
- stroke-dashoffset: 0;
161
- }
162
- }
163
- /* DO NOT CHANGE!*/
164
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
165
- .eds-feedback-text {
166
- display: flex;
167
- align-items: center;
168
- margin-top: 0.25rem;
169
- }
170
- .eds-feedback-text--info {
171
- padding-left: calc(1rem + 0.125rem);
172
- }
173
- .eds-feedback-text__text {
174
- color: #181c56;
175
- }
176
- .eds-contrast .eds-feedback-text__text {
177
- color: #ffffff;
178
- }
179
-
180
- .eds-feedback-text__icon {
181
- font-size: 1.5rem;
182
- min-height: 1.5rem;
183
- min-width: 1.5rem;
184
- padding-right: 0.5rem;
185
- position: relative;
186
- top: -0.1rem;
187
- }
188
- .eds-feedback-text__icon--success {
189
- color: #1a8e60;
190
- }
191
- .eds-contrast .eds-feedback-text__icon--success {
192
- color: #5ac39a;
193
- }
194
- .eds-feedback-text__icon--error {
195
- color: #d31b1b;
196
- }
197
- .eds-contrast .eds-feedback-text__icon--error {
198
- color: #ff9494;
199
- }
200
- .eds-feedback-text__icon--info {
201
- color: #0082b9;
202
- }
203
- .eds-contrast .eds-feedback-text__icon--info {
204
- color: #64b3e7;
205
- }
206
- .eds-feedback-text__icon--warning {
207
- color: #ffca28;
208
- }
209
- .eds-feedback-text__icon--warning circle {
210
- fill: #181c56;
211
- }
212
- .eds-contrast .eds-feedback-text__icon--warning {
213
- color: #ffe082;
214
- }
215
- .eds-fieldset {
216
- margin: 0;
217
- padding: 0;
218
- border: 0;
219
- }
220
- /* DO NOT CHANGE!*/
221
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
222
3
  .eds-form-control-wrapper {
223
4
  --border-color: #7C7F9F;
224
5
  --border-color-hover: #aeb7e2;
@@ -431,33 +212,178 @@
431
212
  }
432
213
  .eds-form-control::placeholder {
433
214
  opacity: 0;
434
- transition: opacity 0.2s ease-in-out;
215
+ transition: opacity 0.2s ease-in-out;
216
+ }
217
+ .eds-form-control:focus {
218
+ outline: none;
219
+ }
220
+ .eds-form-control:focus::-moz-placeholder {
221
+ opacity: 1;
222
+ }
223
+ .eds-form-control:focus::placeholder {
224
+ opacity: 1;
225
+ }
226
+ .eds-form-control__prepend, .eds-form-control__append {
227
+ position: relative;
228
+ margin: 0 1rem;
229
+ line-height: inherit;
230
+ }
231
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
232
+ position: static;
233
+ }
234
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
235
+ top: 0.125rem;
236
+ }
237
+ .eds-form-control__prepend {
238
+ margin-right: 0;
239
+ }
240
+ .eds-form-control__append {
241
+ margin-left: 0;
242
+ }
243
+ /* DO NOT CHANGE!*/
244
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
245
+ .eds-feedback-text {
246
+ display: flex;
247
+ align-items: center;
248
+ margin-top: 0.25rem;
249
+ }
250
+ .eds-feedback-text--info {
251
+ padding-left: calc(1rem + 0.125rem);
252
+ }
253
+ .eds-feedback-text__text {
254
+ color: #181c56;
255
+ }
256
+ .eds-contrast .eds-feedback-text__text {
257
+ color: #ffffff;
258
+ }
259
+
260
+ .eds-feedback-text__icon {
261
+ font-size: 1.5rem;
262
+ min-height: 1.5rem;
263
+ min-width: 1.5rem;
264
+ padding-right: 0.5rem;
265
+ position: relative;
266
+ top: -0.1rem;
267
+ }
268
+ .eds-feedback-text__icon--success {
269
+ color: #1a8e60;
270
+ }
271
+ .eds-contrast .eds-feedback-text__icon--success {
272
+ color: #5ac39a;
273
+ }
274
+ .eds-feedback-text__icon--error {
275
+ color: #d31b1b;
276
+ }
277
+ .eds-contrast .eds-feedback-text__icon--error {
278
+ color: #ff9494;
279
+ }
280
+ .eds-feedback-text__icon--info {
281
+ color: #0082b9;
282
+ }
283
+ .eds-contrast .eds-feedback-text__icon--info {
284
+ color: #64b3e7;
285
+ }
286
+ .eds-feedback-text__icon--warning {
287
+ color: #ffca28;
288
+ }
289
+ .eds-feedback-text__icon--warning circle {
290
+ fill: #181c56;
291
+ }
292
+ .eds-contrast .eds-feedback-text__icon--warning {
293
+ color: #ffe082;
294
+ }
295
+ /* DO NOT CHANGE!*/
296
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
297
+ .eds-form-component--radio__container {
298
+ display: flex;
299
+ justify-content: center;
300
+ align-items: center;
301
+ position: relative;
302
+ cursor: pointer;
303
+ height: 2rem;
304
+ width: -moz-fit-content;
305
+ width: fit-content;
306
+ -webkit-user-select: none;
307
+ -moz-user-select: none;
308
+ user-select: none;
309
+ }
310
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
311
+ border-color: #54568c;
312
+ }
313
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
314
+ background-color: #54568c;
315
+ }
316
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
317
+ border-color: #8285a8;
318
+ }
319
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
320
+ background-color: #8285a8;
321
+ }
322
+ .eds-form-component--radio__container input {
323
+ position: absolute;
324
+ opacity: 0;
325
+ cursor: pointer;
326
+ height: 0;
327
+ width: 0;
435
328
  }
436
- .eds-form-control:focus {
437
- outline: none;
329
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
330
+ height: 0.625rem;
331
+ width: 0.625rem;
438
332
  }
439
- .eds-form-control:focus::-moz-placeholder {
440
- opacity: 1;
333
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
334
+ outline: none;
335
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
336
+ outline-offset: 0.125rem;
441
337
  }
442
- .eds-form-control:focus::placeholder {
443
- opacity: 1;
338
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
339
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
444
340
  }
445
- .eds-form-control__prepend, .eds-form-control__append {
341
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
446
342
  position: relative;
447
- margin: 0 1rem;
448
- line-height: inherit;
343
+ height: 1.25rem;
344
+ width: 1.25rem;
345
+ margin-right: 1rem;
346
+ background-color: #ffffff;
347
+ border: 0.125rem solid #181c56;
348
+ border-radius: 50%;
349
+ display: flex;
350
+ align-items: center;
351
+ justify-content: center;
449
352
  }
450
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
451
- position: static;
353
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
354
+ background-color: #181c56;
355
+ border-color: #aeb7e2;
452
356
  }
453
- .eds-form-control__prepend svg, .eds-form-control__append svg {
454
- top: 0.125rem;
357
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
358
+ background: #d1d3d3;
359
+ border-color: #d1d3d3;
360
+ cursor: not-allowed;
455
361
  }
456
- .eds-form-control__prepend {
457
- margin-right: 0;
362
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
363
+ border-color: #d1d3d3;
458
364
  }
459
- .eds-form-control__append {
460
- margin-left: 0;
365
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
366
+ background: #d1d3d3;
367
+ border-color: #d1d3d3;
368
+ }
369
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
370
+ color: #656782;
371
+ }
372
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
373
+ display: block;
374
+ width: 0;
375
+ height: 0;
376
+ border-radius: 50%;
377
+ background-color: #181c56;
378
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
379
+ }
380
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
381
+ background-color: #aeb7e2;
382
+ }
383
+ .eds-fieldset {
384
+ margin: 0;
385
+ padding: 0;
386
+ border: 0;
461
387
  }
462
388
  /* DO NOT CHANGE!*/
463
389
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -876,91 +802,165 @@ input:disabled + .eds-input-panel__container {
876
802
  }
877
803
  /* DO NOT CHANGE!*/
878
804
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
879
- .eds-form-component--radio__container {
805
+ .eds-checkbox__container {
880
806
  display: flex;
881
- justify-content: center;
882
807
  align-items: center;
883
808
  position: relative;
809
+ -webkit-appearance: none;
810
+ -moz-appearance: none;
811
+ appearance: none;
884
812
  cursor: pointer;
885
- height: 2rem;
886
- width: -moz-fit-content;
887
- width: fit-content;
888
813
  -webkit-user-select: none;
889
814
  -moz-user-select: none;
890
815
  user-select: none;
816
+ width: -moz-fit-content;
817
+ width: fit-content;
818
+ margin: 0.5rem 0;
891
819
  }
892
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
893
- border-color: #54568c;
894
- }
895
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
896
- background-color: #54568c;
897
- }
898
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
899
- border-color: #8285a8;
900
- }
901
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
902
- background-color: #8285a8;
820
+ .eds-checkbox__container--reduced-click-area {
821
+ height: -moz-fit-content;
822
+ height: fit-content;
903
823
  }
904
- .eds-form-component--radio__container input {
824
+ .eds-checkbox__container input {
905
825
  position: absolute;
906
826
  opacity: 0;
907
- cursor: pointer;
908
827
  height: 0;
909
828
  width: 0;
910
829
  }
911
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
912
- height: 0.625rem;
913
- width: 0.625rem;
830
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
831
+ background-color: #181c56;
914
832
  }
915
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
833
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
834
+ visibility: visible;
835
+ }
836
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
837
+ stroke: #ffffff;
838
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
839
+ }
840
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
841
+ fill: #ffffff;
842
+ }
843
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
844
+ opacity: 0.5;
845
+ }
846
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
847
+ opacity: 0.5;
848
+ }
849
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
850
+ opacity: 0.5;
851
+ }
852
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
853
+ opacity: 0.5;
854
+ }
855
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
856
+ opacity: 0.5;
857
+ }
858
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
859
+ background-color: #aeb7e2;
860
+ }
861
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
862
+ stroke: #181c56;
863
+ }
864
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
865
+ fill: #181c56;
866
+ }
867
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
868
+ border-color: #292b6a;
869
+ background-color: #d1d4e3;
870
+ }
871
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
872
+ border-color: #b6bee5;
873
+ background-color: rgba(174, 183, 226, 0.2);
874
+ }
875
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
876
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
877
+ border-color: transparent;
878
+ background-color: #54568c;
879
+ }
880
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
881
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
882
+ background-color: #b6bee5;
883
+ }
884
+ .eds-checkbox__container:active input + .eds-checkbox__icon {
885
+ border-color: #16194d;
886
+ }
887
+ .eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
888
+ border-color: #9da5cb;
889
+ }
890
+ .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
891
+ .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
892
+ background-color: #16194d;
893
+ }
894
+ .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
895
+ .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
896
+ background-color: #9da5cb;
897
+ }
898
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
899
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
916
900
  outline: none;
917
901
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
918
902
  outline-offset: 0.125rem;
919
903
  }
920
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
904
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
905
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
906
+ outline: none;
907
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
908
+ outline-offset: 0.125rem;
909
+ }
910
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
911
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
921
912
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
922
913
  }
923
- .eds-form-component--radio__container .eds-form-component--radio__radio {
914
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
915
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
916
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
917
+ }
918
+ .eds-checkbox--disabled {
919
+ pointer-events: none;
920
+ }
921
+ .eds-checkbox--disabled .eds-checkbox__label {
922
+ opacity: 0.5;
923
+ }
924
+ .eds-checkbox--disabled .eds-checkbox__icon {
925
+ opacity: 0.5;
926
+ }
927
+ .eds-checkbox__icon {
928
+ box-sizing: border-box;
929
+ display: inline-flex;
930
+ justify-content: center;
931
+ align-items: center;
924
932
  position: relative;
933
+ margin-right: 1rem;
925
934
  height: 1.25rem;
926
935
  width: 1.25rem;
927
- margin-right: 1rem;
928
- background-color: #ffffff;
929
936
  border: 0.125rem solid #181c56;
930
- border-radius: 50%;
931
- display: flex;
932
- align-items: center;
933
- justify-content: center;
934
- }
935
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
936
- background-color: #181c56;
937
- border-color: #aeb7e2;
938
- }
939
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
940
- background: #d1d3d3;
941
- border-color: #d1d3d3;
942
- cursor: not-allowed;
937
+ border-radius: 0.125rem;
938
+ background-color: transparent;
939
+ color: #ffffff;
940
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
943
941
  }
944
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
945
- border-color: #d1d3d3;
942
+ .eds-checkbox__icon--reduced-click-area {
943
+ margin-right: 0;
946
944
  }
947
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
948
- background: #d1d3d3;
949
- border-color: #d1d3d3;
945
+ .eds-contrast .eds-checkbox__icon {
946
+ border-color: #aeb7e2;
950
947
  }
951
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
952
- color: #656782;
948
+ .eds-checkbox__icon .eds-checkbox-icon {
949
+ height: 1rem;
950
+ width: 1rem;
951
+ visibility: hidden;
953
952
  }
954
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
955
- display: block;
956
- width: 0;
957
- height: 0;
958
- border-radius: 50%;
959
- background-color: #181c56;
960
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
953
+ .eds-checkbox__icon .eds-checkbox-icon path {
954
+ transform-origin: 50% 50%;
955
+ stroke-dasharray: 48;
956
+ stroke-dashoffset: 48;
957
+ stroke-width: 0.375rem;
961
958
  }
962
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
963
- background-color: #aeb7e2;
959
+
960
+ @keyframes stroke {
961
+ 100% {
962
+ stroke-dashoffset: 0;
963
+ }
964
964
  }
965
965
  /* DO NOT CHANGE!*/
966
966
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.18",
3
+ "version": "7.0.20",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/form.esm.js",
@@ -27,12 +27,12 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^6.5.0",
30
+ "@entur/icons": "^6.8.0",
31
31
  "@entur/tokens": "^3.10.0",
32
- "@entur/tooltip": "^2.6.27",
33
- "@entur/typography": "^1.8.8",
32
+ "@entur/tooltip": "^2.6.29",
33
+ "@entur/typography": "^1.8.10",
34
34
  "@entur/utils": "^0.9.5",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "72e76df00ea0a7313bd2c55e23aa96ad1e291ef1"
37
+ "gitHead": "9e5cbcf10c3e18dff42f0afb3b4cb40df557c14c"
38
38
  }