@entur/form 7.0.9 → 7.0.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 +429 -429
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -3,245 +3,312 @@
3
3
  }
4
4
  /* DO NOT CHANGE!*/
5
5
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
6
- .eds-form-control-wrapper {
7
- --border-color: #7C7F9F;
8
- --border-color-hover: #aeb7e2;
6
+ .eds-feedback-text {
7
+ display: flex;
9
8
  align-items: center;
10
- background-color: #ffffff;
11
- border-radius: 0.25rem;
12
- border: 0.125rem solid var(--border-color);
13
- box-shadow: 0 0 0 transparent;
9
+ margin-top: 0.25rem;
10
+ }
11
+ .eds-feedback-text--info {
12
+ padding-left: calc(1rem + 0.125rem);
13
+ }
14
+ .eds-feedback-text__text {
14
15
  color: #181c56;
15
- display: flex;
16
- position: relative;
17
- width: 100%;
18
- min-height: 3rem;
19
- transition: border-color 0.1s ease-in-out;
20
- --textarea-label-background: $colors-brand-white;
21
- /*
22
- Some input controls require a darker design while inside a contrast block.
23
- These elements require the `--dark` modifier, even on the wrapper.
24
- */
25
16
  }
26
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
27
- --border-color: #181c56;
17
+ .eds-contrast .eds-feedback-text__text {
18
+ color: #ffffff;
28
19
  }
29
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
30
- --border-color: #181c56;
20
+
21
+ .eds-feedback-text__icon {
22
+ font-size: 1.5rem;
23
+ min-height: 1.5rem;
24
+ min-width: 1.5rem;
25
+ padding-right: 0.5rem;
26
+ position: relative;
27
+ top: -0.1rem;
31
28
  }
32
- .eds-contrast .eds-form-control-wrapper:hover {
33
- --border-color: #aeb7e2;
29
+ .eds-feedback-text__icon--success {
30
+ color: #1a8e60;
34
31
  }
35
- .eds-form-control-wrapper[focus-within] {
36
- box-shadow: inset 0 0 0 1px var(--border-color);
32
+ .eds-contrast .eds-feedback-text__icon--success {
33
+ color: #5ac39a;
37
34
  }
38
- .eds-form-control-wrapper:focus-within {
39
- box-shadow: inset 0 0 0 1px var(--border-color);
35
+ .eds-feedback-text__icon--error {
36
+ color: #d31b1b;
40
37
  }
41
- .eds-contrast .eds-form-control-wrapper[focus-within] {
42
- --border-color: #181c56;
43
- box-shadow: 0 0 0 0.125rem #aeb7e2;
38
+ .eds-contrast .eds-feedback-text__icon--error {
39
+ color: #ff9494;
44
40
  }
45
- .eds-contrast .eds-form-control-wrapper:focus-within {
46
- --border-color: #181c56;
47
- box-shadow: 0 0 0 0.125rem #aeb7e2;
41
+ .eds-feedback-text__icon--info {
42
+ color: #0082b9;
48
43
  }
49
- .eds-form-control-wrapper ::-moz-placeholder {
50
- color: #656782;
44
+ .eds-contrast .eds-feedback-text__icon--info {
45
+ color: #64b3e7;
51
46
  }
52
- .eds-form-control-wrapper ::placeholder {
53
- color: #656782;
47
+ .eds-feedback-text__icon--warning {
48
+ color: #ffca28;
54
49
  }
55
- .eds-form-control-wrapper--disabled {
56
- --border-color: transparent;
57
- background-color: #e9e9e9;
58
- pointer-events: none;
59
- color: #646464;
50
+ .eds-feedback-text__icon--warning circle {
51
+ fill: #181c56;
60
52
  }
61
- .eds-form-control-wrapper--disabled .eds-input-group__label {
62
- color: #646464;
53
+ .eds-contrast .eds-feedback-text__icon--warning {
54
+ color: #ffe082;
63
55
  }
64
- .eds-contrast .eds-form-control-wrapper--disabled {
65
- background: #292b6a;
66
- color: #8285a8;
56
+ /* DO NOT CHANGE!*/
57
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
58
+ .eds-checkbox__container {
59
+ display: flex;
60
+ align-items: center;
61
+ position: relative;
62
+ -webkit-appearance: none;
63
+ -moz-appearance: none;
64
+ appearance: none;
65
+ cursor: pointer;
66
+ -webkit-user-select: none;
67
+ -moz-user-select: none;
68
+ user-select: none;
69
+ width: -moz-fit-content;
70
+ width: fit-content;
71
+ margin: 0.5rem 0;
67
72
  }
68
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
69
- color: #8285a8;
73
+ .eds-checkbox__container--reduced-click-area {
74
+ height: -moz-fit-content;
75
+ height: fit-content;
70
76
  }
71
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
72
- display: none;
77
+ .eds-checkbox__container input {
78
+ position: absolute;
79
+ opacity: 0;
80
+ height: 0;
81
+ width: 0;
73
82
  }
74
- .eds-form-control-wrapper--readonly {
75
- --border-color: transparent;
76
- --textarea-label-background: $colors-greys-grey90;
77
- pointer-events: none;
78
- cursor: default;
79
- background: #f8f8f8;
83
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
84
+ background-color: #181c56;
80
85
  }
81
- .eds-contrast .eds-form-control-wrapper--readonly {
82
- --textarea-label-background: $colors-blues-blue10;
83
- background: #292b6a;
84
- color: #ffffff;
86
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
87
+ visibility: visible;
85
88
  }
86
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
87
- color: #aeb7e2;
89
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
90
+ stroke: #ffffff;
91
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
88
92
  }
89
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
90
- display: none;
93
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
94
+ fill: #ffffff;
91
95
  }
92
- .eds-form-control-wrapper--size-medium .eds-form-control,
93
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
94
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
95
- font-size: 1rem;
96
- line-height: 1rem;
96
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
97
+ opacity: 0.5;
97
98
  }
98
- .eds-form-control-wrapper--size-large {
99
- min-height: 4rem;
100
- padding: 0 0.5rem;
99
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
100
+ opacity: 0.5;
101
101
  }
102
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
103
- border-width: 0.25rem;
102
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
103
+ opacity: 0.5;
104
104
  }
105
- .eds-form-control-wrapper--size-large .eds-form-control,
106
- .eds-form-control-wrapper--size-large .eds-form-control__append,
107
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
108
- font-size: 1.5rem;
109
- line-height: 2.25rem;
105
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
106
+ opacity: 0.5;
110
107
  }
111
- .eds-form-control-wrapper--success {
112
- border-color: #1a8e60;
113
- --border-color: #1a8e60;
108
+ .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
109
+ opacity: 0.5;
114
110
  }
115
- .eds-form-control-wrapper--success:hover {
116
- border-color: #5ac39a;
111
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
112
+ background-color: #aeb7e2;
117
113
  }
118
- .eds-form-control-wrapper--success[focus-within] {
119
- border-color: #1a8e60;
114
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
115
+ stroke: #181c56;
120
116
  }
121
- .eds-form-control-wrapper--success:focus-within {
122
- border-color: #1a8e60;
117
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
118
+ fill: #181c56;
123
119
  }
124
- .eds-contrast .eds-form-control-wrapper--success {
125
- border-color: #5ac39a;
126
- --border-color: #5ac39a;
120
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
121
+ border-color: #292b6a;
122
+ background-color: #d1d4e3;
127
123
  }
128
- .eds-contrast .eds-form-control-wrapper--success:hover {
129
- border-color: #1a8e60;
124
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
125
+ border-color: #b6bee5;
126
+ background-color: rgba(174, 183, 226, 0.2);
130
127
  }
131
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
132
- --border-color: #5ac39a;
133
- border-color: #181c56;
128
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
129
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
130
+ border-color: transparent;
131
+ background-color: #54568c;
134
132
  }
135
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
136
- --border-color: #5ac39a;
137
- border-color: #181c56;
133
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
134
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
135
+ background-color: #b6bee5;
138
136
  }
139
- .eds-form-control-wrapper--error {
140
- border-color: #d31b1b;
141
- --border-color: #d31b1b;
137
+ .eds-checkbox__container:active input + .eds-checkbox__icon {
138
+ border-color: #16194d;
142
139
  }
143
- .eds-form-control-wrapper--error:hover {
144
- border-color: #ff9494;
140
+ .eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
141
+ border-color: #9da5cb;
145
142
  }
146
- .eds-form-control-wrapper--error[focus-within] {
147
- border-color: #d31b1b;
143
+ .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
144
+ .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
145
+ background-color: #16194d;
148
146
  }
149
- .eds-form-control-wrapper--error:focus-within {
150
- border-color: #d31b1b;
147
+ .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
148
+ .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
149
+ background-color: #9da5cb;
151
150
  }
152
- .eds-contrast .eds-form-control-wrapper--error {
153
- border-color: #ff9494;
154
- --border-color: #ff9494;
151
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
152
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
153
+ outline: none;
154
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
155
+ outline-offset: 0.125rem;
155
156
  }
156
- .eds-contrast .eds-form-control-wrapper--error:hover {
157
- border-color: #d31b1b;
157
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
158
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
159
+ outline: none;
160
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
161
+ outline-offset: 0.125rem;
158
162
  }
159
- .eds-contrast .eds-form-control-wrapper--error[focus-within] {
160
- border-color: #181c56;
161
- --border-color: #ff9494;
163
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
164
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
165
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
162
166
  }
163
- .eds-contrast .eds-form-control-wrapper--error:focus-within {
164
- border-color: #181c56;
165
- --border-color: #ff9494;
167
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
168
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
169
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
166
170
  }
167
- .eds-contrast .eds-form-control-wrapper--dark {
168
- background-color: #181c56;
169
- color: #ffffff;
171
+ .eds-checkbox--disabled {
172
+ pointer-events: none;
170
173
  }
171
- .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
172
- color: #aeb7e2;
174
+ .eds-checkbox--disabled .eds-checkbox__label {
175
+ opacity: 0.5;
173
176
  }
174
- .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
175
- color: #aeb7e2;
177
+ .eds-checkbox--disabled .eds-checkbox__icon {
178
+ opacity: 0.5;
176
179
  }
177
- .eds-contrast .eds-form-control-wrapper--dark:hover {
178
- border-color: #aeb7e2;
180
+ .eds-checkbox__icon {
181
+ box-sizing: border-box;
182
+ display: inline-flex;
183
+ justify-content: center;
184
+ align-items: center;
185
+ position: relative;
186
+ margin-right: 1rem;
187
+ height: 1.25rem;
188
+ width: 1.25rem;
189
+ border: 0.125rem solid #181c56;
190
+ border-radius: 0.125rem;
191
+ background-color: transparent;
192
+ color: #ffffff;
193
+ transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
179
194
  }
180
- .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
181
- background-color: #292b6a;
182
- border-color: #aeb7e2;
195
+ .eds-checkbox__icon--reduced-click-area {
196
+ margin-right: 0;
183
197
  }
184
- .eds-contrast .eds-form-control-wrapper--dark:focus-within {
185
- background-color: #292b6a;
198
+ .eds-contrast .eds-checkbox__icon {
186
199
  border-color: #aeb7e2;
187
200
  }
188
- .eds-contrast .eds-form-control-wrapper--dark * {
189
- background-color: transparent;
190
- color: inherit;
201
+ .eds-checkbox__icon .eds-checkbox-icon {
202
+ height: 1rem;
203
+ width: 1rem;
204
+ visibility: hidden;
191
205
  }
192
- .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
193
- background-color: #292b6a;
194
- color: #8285a8;
206
+ .eds-checkbox__icon .eds-checkbox-icon path {
207
+ transform-origin: 50% 50%;
208
+ stroke-dasharray: 48;
209
+ stroke-dashoffset: 48;
210
+ stroke-width: 0.375rem;
195
211
  }
196
212
 
197
- .eds-form-control {
198
- -webkit-appearance: none;
199
- -moz-appearance: none;
200
- appearance: none;
201
- background-color: transparent;
213
+ @keyframes stroke {
214
+ 100% {
215
+ stroke-dashoffset: 0;
216
+ }
217
+ }
218
+ /* DO NOT CHANGE!*/
219
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
220
+ .eds-fieldset {
221
+ margin: 0;
222
+ padding: 0;
202
223
  border: 0;
203
- color: inherit;
204
- display: block;
205
- font-family: inherit;
206
- line-height: 1rem;
207
- font-size: 1rem;
208
- padding: 20px 1rem 0.25rem;
209
- width: 100%;
210
224
  }
211
- .eds-form-control::-moz-placeholder {
212
- opacity: 0;
213
- -moz-transition: opacity 0.2s ease-in-out;
214
- transition: opacity 0.2s ease-in-out;
225
+ /* DO NOT CHANGE!*/
226
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
227
+ .eds-form-component--radio__container {
228
+ display: flex;
229
+ justify-content: center;
230
+ align-items: center;
231
+ position: relative;
232
+ cursor: pointer;
233
+ height: 2rem;
234
+ width: -moz-fit-content;
235
+ width: fit-content;
236
+ -webkit-user-select: none;
237
+ -moz-user-select: none;
238
+ user-select: none;
239
+ }
240
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
241
+ border-color: #54568c;
242
+ }
243
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
244
+ background-color: #54568c;
245
+ }
246
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
247
+ border-color: #8285a8;
248
+ }
249
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
250
+ background-color: #8285a8;
215
251
  }
216
- .eds-form-control::placeholder {
252
+ .eds-form-component--radio__container input {
253
+ position: absolute;
217
254
  opacity: 0;
218
- transition: opacity 0.2s ease-in-out;
255
+ cursor: pointer;
256
+ height: 0;
257
+ width: 0;
219
258
  }
220
- .eds-form-control:focus {
221
- outline: none;
259
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
260
+ height: 0.625rem;
261
+ width: 0.625rem;
222
262
  }
223
- .eds-form-control:focus::-moz-placeholder {
224
- opacity: 1;
263
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
264
+ outline: none;
265
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
266
+ outline-offset: 0.125rem;
225
267
  }
226
- .eds-form-control:focus::placeholder {
227
- opacity: 1;
268
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
269
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
228
270
  }
229
- .eds-form-control__prepend, .eds-form-control__append {
271
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
230
272
  position: relative;
231
- margin: 0 1rem;
232
- line-height: inherit;
273
+ height: 1.25rem;
274
+ width: 1.25rem;
275
+ margin-right: 1rem;
276
+ background-color: #ffffff;
277
+ border: 0.125rem solid #181c56;
278
+ border-radius: 50%;
279
+ display: flex;
280
+ align-items: center;
281
+ justify-content: center;
233
282
  }
234
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
235
- position: static;
283
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
284
+ background-color: #181c56;
285
+ border-color: #aeb7e2;
236
286
  }
237
- .eds-form-control__prepend svg, .eds-form-control__append svg {
238
- top: 0.125rem;
287
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
288
+ background: #d1d3d3;
289
+ border-color: #d1d3d3;
290
+ cursor: not-allowed;
239
291
  }
240
- .eds-form-control__prepend {
241
- margin-right: 0;
292
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
293
+ border-color: #d1d3d3;
242
294
  }
243
- .eds-form-control__append {
244
- margin-left: 0;
295
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
296
+ background: #d1d3d3;
297
+ border-color: #d1d3d3;
298
+ }
299
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
300
+ color: #656782;
301
+ }
302
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
303
+ display: block;
304
+ width: 0;
305
+ height: 0;
306
+ border-radius: 50%;
307
+ background-color: #181c56;
308
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
309
+ }
310
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
311
+ background-color: #aeb7e2;
245
312
  }
246
313
  /* DO NOT CHANGE!*/
247
314
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -376,319 +443,245 @@
376
443
  }
377
444
  /* DO NOT CHANGE!*/
378
445
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
379
- .eds-checkbox__container {
380
- display: flex;
446
+ .eds-form-control-wrapper {
447
+ --border-color: #7C7F9F;
448
+ --border-color-hover: #aeb7e2;
381
449
  align-items: center;
450
+ background-color: #ffffff;
451
+ border-radius: 0.25rem;
452
+ border: 0.125rem solid var(--border-color);
453
+ box-shadow: 0 0 0 transparent;
454
+ color: #181c56;
455
+ display: flex;
382
456
  position: relative;
383
- -webkit-appearance: none;
384
- -moz-appearance: none;
385
- appearance: none;
386
- cursor: pointer;
387
- -webkit-user-select: none;
388
- -moz-user-select: none;
389
- user-select: none;
390
- width: -moz-fit-content;
391
- width: fit-content;
392
- margin: 0.5rem 0;
393
- }
394
- .eds-checkbox__container--reduced-click-area {
395
- height: -moz-fit-content;
396
- height: fit-content;
397
- }
398
- .eds-checkbox__container input {
399
- position: absolute;
400
- opacity: 0;
401
- height: 0;
402
- width: 0;
403
- }
404
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
405
- background-color: #181c56;
406
- }
407
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
408
- visibility: visible;
409
- }
410
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
411
- stroke: #ffffff;
412
- animation: stroke ease-in-out 0.2s 0.1s forwards;
413
- }
414
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
415
- fill: #ffffff;
416
- }
417
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
418
- opacity: 0.5;
419
- }
420
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
421
- opacity: 0.5;
422
- }
423
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
424
- opacity: 0.5;
425
- }
426
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
427
- opacity: 0.5;
428
- }
429
- .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
430
- opacity: 0.5;
431
- }
432
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
433
- background-color: #aeb7e2;
457
+ width: 100%;
458
+ min-height: 3rem;
459
+ transition: border-color 0.1s ease-in-out;
460
+ --textarea-label-background: $colors-brand-white;
461
+ /*
462
+ Some input controls require a darker design while inside a contrast block.
463
+ These elements require the `--dark` modifier, even on the wrapper.
464
+ */
434
465
  }
435
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
436
- stroke: #181c56;
466
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
467
+ --border-color: #181c56;
437
468
  }
438
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
439
- fill: #181c56;
469
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
470
+ --border-color: #181c56;
440
471
  }
441
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
442
- border-color: #292b6a;
443
- background-color: #d1d4e3;
472
+ .eds-contrast .eds-form-control-wrapper:hover {
473
+ --border-color: #aeb7e2;
444
474
  }
445
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
446
- border-color: #b6bee5;
447
- background-color: rgba(174, 183, 226, 0.2);
475
+ .eds-form-control-wrapper[focus-within] {
476
+ box-shadow: inset 0 0 0 1px var(--border-color);
448
477
  }
449
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
450
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
451
- border-color: transparent;
452
- background-color: #54568c;
478
+ .eds-form-control-wrapper:focus-within {
479
+ box-shadow: inset 0 0 0 1px var(--border-color);
453
480
  }
454
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
455
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
456
- background-color: #b6bee5;
481
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
482
+ --border-color: #181c56;
483
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
457
484
  }
458
- .eds-checkbox__container:active input + .eds-checkbox__icon {
459
- border-color: #16194d;
485
+ .eds-contrast .eds-form-control-wrapper:focus-within {
486
+ --border-color: #181c56;
487
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
460
488
  }
461
- .eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
462
- border-color: #9da5cb;
489
+ .eds-form-control-wrapper ::-moz-placeholder {
490
+ color: #656782;
463
491
  }
464
- .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
465
- .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
466
- background-color: #16194d;
492
+ .eds-form-control-wrapper ::placeholder {
493
+ color: #656782;
467
494
  }
468
- .eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
469
- .eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
470
- background-color: #9da5cb;
495
+ .eds-form-control-wrapper--disabled {
496
+ --border-color: transparent;
497
+ background-color: #e9e9e9;
498
+ pointer-events: none;
499
+ color: #646464;
471
500
  }
472
- .eds-checkbox__container:focus + .eds-checkbox__icon,
473
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
474
- outline: none;
475
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
476
- outline-offset: 0.125rem;
501
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
502
+ color: #646464;
477
503
  }
478
- .eds-checkbox__container:focus + .eds-checkbox__icon,
479
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
480
- outline: none;
481
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
482
- outline-offset: 0.125rem;
504
+ .eds-contrast .eds-form-control-wrapper--disabled {
505
+ background: #292b6a;
506
+ color: #8285a8;
483
507
  }
484
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
485
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
486
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
508
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
509
+ color: #8285a8;
487
510
  }
488
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
489
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
490
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
511
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
512
+ display: none;
491
513
  }
492
- .eds-checkbox--disabled {
514
+ .eds-form-control-wrapper--readonly {
515
+ --border-color: transparent;
516
+ --textarea-label-background: $colors-greys-grey90;
493
517
  pointer-events: none;
518
+ cursor: default;
519
+ background: #f8f8f8;
494
520
  }
495
- .eds-checkbox--disabled .eds-checkbox__label {
496
- opacity: 0.5;
521
+ .eds-contrast .eds-form-control-wrapper--readonly {
522
+ --textarea-label-background: $colors-blues-blue10;
523
+ background: #292b6a;
524
+ color: #ffffff;
497
525
  }
498
- .eds-checkbox--disabled .eds-checkbox__icon {
499
- opacity: 0.5;
526
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
527
+ color: #aeb7e2;
500
528
  }
501
- .eds-checkbox__icon {
502
- box-sizing: border-box;
503
- display: inline-flex;
504
- justify-content: center;
505
- align-items: center;
506
- position: relative;
507
- margin-right: 1rem;
508
- height: 1.25rem;
509
- width: 1.25rem;
510
- border: 0.125rem solid #181c56;
511
- border-radius: 0.125rem;
512
- background-color: transparent;
513
- color: #ffffff;
514
- transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
529
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
530
+ display: none;
531
+ }
532
+ .eds-form-control-wrapper--size-medium .eds-form-control,
533
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
534
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
535
+ font-size: 1rem;
536
+ line-height: 1rem;
515
537
  }
516
- .eds-checkbox__icon--reduced-click-area {
517
- margin-right: 0;
538
+ .eds-form-control-wrapper--size-large {
539
+ min-height: 4rem;
540
+ padding: 0 0.5rem;
518
541
  }
519
- .eds-contrast .eds-checkbox__icon {
520
- border-color: #aeb7e2;
542
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
543
+ border-width: 0.25rem;
521
544
  }
522
- .eds-checkbox__icon .eds-checkbox-icon {
523
- height: 1rem;
524
- width: 1rem;
525
- visibility: hidden;
545
+ .eds-form-control-wrapper--size-large .eds-form-control,
546
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
547
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
548
+ font-size: 1.5rem;
549
+ line-height: 2.25rem;
526
550
  }
527
- .eds-checkbox__icon .eds-checkbox-icon path {
528
- transform-origin: 50% 50%;
529
- stroke-dasharray: 48;
530
- stroke-dashoffset: 48;
531
- stroke-width: 0.375rem;
551
+ .eds-form-control-wrapper--success {
552
+ border-color: #1a8e60;
553
+ --border-color: #1a8e60;
532
554
  }
533
-
534
- @keyframes stroke {
535
- 100% {
536
- stroke-dashoffset: 0;
537
- }
555
+ .eds-form-control-wrapper--success:hover {
556
+ border-color: #5ac39a;
538
557
  }
539
- /* DO NOT CHANGE!*/
540
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
541
- .eds-fieldset {
542
- margin: 0;
543
- padding: 0;
544
- border: 0;
558
+ .eds-form-control-wrapper--success[focus-within] {
559
+ border-color: #1a8e60;
545
560
  }
546
- /* DO NOT CHANGE!*/
547
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
548
- .eds-feedback-text {
549
- display: flex;
550
- align-items: center;
551
- margin-top: 0.25rem;
561
+ .eds-form-control-wrapper--success:focus-within {
562
+ border-color: #1a8e60;
552
563
  }
553
- .eds-feedback-text--info {
554
- padding-left: calc(1rem + 0.125rem);
564
+ .eds-contrast .eds-form-control-wrapper--success {
565
+ border-color: #5ac39a;
566
+ --border-color: #5ac39a;
555
567
  }
556
- .eds-feedback-text__text {
557
- color: #181c56;
568
+ .eds-contrast .eds-form-control-wrapper--success:hover {
569
+ border-color: #1a8e60;
558
570
  }
559
- .eds-contrast .eds-feedback-text__text {
560
- color: #ffffff;
571
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
572
+ --border-color: #5ac39a;
573
+ border-color: #181c56;
561
574
  }
562
-
563
- .eds-feedback-text__icon {
564
- font-size: 1.5rem;
565
- min-height: 1.5rem;
566
- min-width: 1.5rem;
567
- padding-right: 0.5rem;
568
- position: relative;
569
- top: -0.1rem;
575
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
576
+ --border-color: #5ac39a;
577
+ border-color: #181c56;
570
578
  }
571
- .eds-feedback-text__icon--success {
572
- color: #1a8e60;
579
+ .eds-form-control-wrapper--error {
580
+ border-color: #d31b1b;
581
+ --border-color: #d31b1b;
573
582
  }
574
- .eds-contrast .eds-feedback-text__icon--success {
575
- color: #5ac39a;
583
+ .eds-form-control-wrapper--error:hover {
584
+ border-color: #ff9494;
576
585
  }
577
- .eds-feedback-text__icon--error {
578
- color: #d31b1b;
586
+ .eds-form-control-wrapper--error[focus-within] {
587
+ border-color: #d31b1b;
579
588
  }
580
- .eds-contrast .eds-feedback-text__icon--error {
581
- color: #ff9494;
589
+ .eds-form-control-wrapper--error:focus-within {
590
+ border-color: #d31b1b;
582
591
  }
583
- .eds-feedback-text__icon--info {
584
- color: #0082b9;
592
+ .eds-contrast .eds-form-control-wrapper--error {
593
+ border-color: #ff9494;
594
+ --border-color: #ff9494;
585
595
  }
586
- .eds-contrast .eds-feedback-text__icon--info {
587
- color: #64b3e7;
596
+ .eds-contrast .eds-form-control-wrapper--error:hover {
597
+ border-color: #d31b1b;
588
598
  }
589
- .eds-feedback-text__icon--warning {
590
- color: #ffca28;
599
+ .eds-contrast .eds-form-control-wrapper--error[focus-within] {
600
+ border-color: #181c56;
601
+ --border-color: #ff9494;
591
602
  }
592
- .eds-feedback-text__icon--warning circle {
593
- fill: #181c56;
603
+ .eds-contrast .eds-form-control-wrapper--error:focus-within {
604
+ border-color: #181c56;
605
+ --border-color: #ff9494;
594
606
  }
595
- .eds-contrast .eds-feedback-text__icon--warning {
596
- color: #ffe082;
607
+ .eds-contrast .eds-form-control-wrapper--dark {
608
+ background-color: #181c56;
609
+ color: #ffffff;
597
610
  }
598
- /* DO NOT CHANGE!*/
599
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
600
- .eds-form-component--radio__container {
601
- display: flex;
602
- justify-content: center;
603
- align-items: center;
604
- position: relative;
605
- cursor: pointer;
606
- height: 2rem;
607
- width: -moz-fit-content;
608
- width: fit-content;
609
- -webkit-user-select: none;
610
- -moz-user-select: none;
611
- user-select: none;
611
+ .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
612
+ color: #aeb7e2;
612
613
  }
613
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
614
- border-color: #54568c;
614
+ .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
615
+ color: #aeb7e2;
615
616
  }
616
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
617
- background-color: #54568c;
617
+ .eds-contrast .eds-form-control-wrapper--dark:hover {
618
+ border-color: #aeb7e2;
618
619
  }
619
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
620
- border-color: #8285a8;
620
+ .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
621
+ background-color: #292b6a;
622
+ border-color: #aeb7e2;
621
623
  }
622
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
623
- background-color: #8285a8;
624
+ .eds-contrast .eds-form-control-wrapper--dark:focus-within {
625
+ background-color: #292b6a;
626
+ border-color: #aeb7e2;
624
627
  }
625
- .eds-form-component--radio__container input {
626
- position: absolute;
627
- opacity: 0;
628
- cursor: pointer;
629
- height: 0;
630
- width: 0;
628
+ .eds-contrast .eds-form-control-wrapper--dark * {
629
+ background-color: transparent;
630
+ color: inherit;
631
631
  }
632
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
633
- height: 0.625rem;
634
- width: 0.625rem;
632
+ .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
633
+ background-color: #292b6a;
634
+ color: #8285a8;
635
635
  }
636
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
637
- outline: none;
638
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
639
- outline-offset: 0.125rem;
636
+
637
+ .eds-form-control {
638
+ -webkit-appearance: none;
639
+ -moz-appearance: none;
640
+ appearance: none;
641
+ background-color: transparent;
642
+ border: 0;
643
+ color: inherit;
644
+ display: block;
645
+ font-family: inherit;
646
+ line-height: 1rem;
647
+ font-size: 1rem;
648
+ padding: 20px 1rem 0.25rem;
649
+ width: 100%;
640
650
  }
641
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
642
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
651
+ .eds-form-control::-moz-placeholder {
652
+ opacity: 0;
653
+ -moz-transition: opacity 0.2s ease-in-out;
654
+ transition: opacity 0.2s ease-in-out;
643
655
  }
644
- .eds-form-component--radio__container .eds-form-component--radio__radio {
645
- position: relative;
646
- height: 1.25rem;
647
- width: 1.25rem;
648
- margin-right: 1rem;
649
- background-color: #ffffff;
650
- border: 0.125rem solid #181c56;
651
- border-radius: 50%;
652
- display: flex;
653
- align-items: center;
654
- justify-content: center;
656
+ .eds-form-control::placeholder {
657
+ opacity: 0;
658
+ transition: opacity 0.2s ease-in-out;
655
659
  }
656
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
657
- background-color: #181c56;
658
- border-color: #aeb7e2;
660
+ .eds-form-control:focus {
661
+ outline: none;
659
662
  }
660
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
661
- background: #d1d3d3;
662
- border-color: #d1d3d3;
663
- cursor: not-allowed;
663
+ .eds-form-control:focus::-moz-placeholder {
664
+ opacity: 1;
664
665
  }
665
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
666
- border-color: #d1d3d3;
666
+ .eds-form-control:focus::placeholder {
667
+ opacity: 1;
667
668
  }
668
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
669
- background: #d1d3d3;
670
- border-color: #d1d3d3;
669
+ .eds-form-control__prepend, .eds-form-control__append {
670
+ position: relative;
671
+ margin: 0 1rem;
672
+ line-height: inherit;
671
673
  }
672
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
673
- color: #656782;
674
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
675
+ position: static;
674
676
  }
675
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
676
- display: block;
677
- width: 0;
678
- height: 0;
679
- border-radius: 50%;
680
- background-color: #181c56;
681
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
677
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
678
+ top: 0.125rem;
682
679
  }
683
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
684
- background-color: #aeb7e2;
680
+ .eds-form-control__prepend {
681
+ margin-right: 0;
685
682
  }
686
- /* DO NOT CHANGE!*/
687
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
688
- textarea.eds-form-control.eds-textarea {
689
- min-height: 7.75rem;
690
- resize: vertical;
691
- line-height: 1.5rem;
683
+ .eds-form-control__append {
684
+ margin-left: 0;
692
685
  }
693
686
  /* DO NOT CHANGE!*/
694
687
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -811,6 +804,13 @@ textarea.eds-form-control.eds-textarea {
811
804
  }
812
805
  /* DO NOT CHANGE!*/
813
806
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
807
+ textarea.eds-form-control.eds-textarea {
808
+ min-height: 7.75rem;
809
+ resize: vertical;
810
+ line-height: 1.5rem;
811
+ }
812
+ /* DO NOT CHANGE!*/
813
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
814
814
  .eds-textfield__clear-button {
815
815
  background: none;
816
816
  border: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.9",
3
+ "version": "7.0.10",
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.3.0",
31
- "@entur/tokens": "^3.9.0",
32
- "@entur/tooltip": "^2.6.19",
33
- "@entur/typography": "^1.8.0",
34
- "@entur/utils": "^0.9.0",
30
+ "@entur/icons": "^6.3.1",
31
+ "@entur/tokens": "^3.10.0",
32
+ "@entur/tooltip": "^2.6.20",
33
+ "@entur/typography": "^1.8.1",
34
+ "@entur/utils": "^0.9.1",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "8f124a94b17be084024892eca96ab800f18ceca2"
37
+ "gitHead": "de2304501aabbda4457d9dbfe30671786b91474e"
38
38
  }