@entur/form 7.0.9 → 7.0.11

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 +425 -425
  2. package/package.json +7 -7
package/dist/styles.css CHANGED
@@ -3,379 +3,6 @@
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;
9
- 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;
14
- 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
- }
26
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
27
- --border-color: #181c56;
28
- }
29
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
30
- --border-color: #181c56;
31
- }
32
- .eds-contrast .eds-form-control-wrapper:hover {
33
- --border-color: #aeb7e2;
34
- }
35
- .eds-form-control-wrapper[focus-within] {
36
- box-shadow: inset 0 0 0 1px var(--border-color);
37
- }
38
- .eds-form-control-wrapper:focus-within {
39
- box-shadow: inset 0 0 0 1px var(--border-color);
40
- }
41
- .eds-contrast .eds-form-control-wrapper[focus-within] {
42
- --border-color: #181c56;
43
- box-shadow: 0 0 0 0.125rem #aeb7e2;
44
- }
45
- .eds-contrast .eds-form-control-wrapper:focus-within {
46
- --border-color: #181c56;
47
- box-shadow: 0 0 0 0.125rem #aeb7e2;
48
- }
49
- .eds-form-control-wrapper ::-moz-placeholder {
50
- color: #656782;
51
- }
52
- .eds-form-control-wrapper ::placeholder {
53
- color: #656782;
54
- }
55
- .eds-form-control-wrapper--disabled {
56
- --border-color: transparent;
57
- background-color: #e9e9e9;
58
- pointer-events: none;
59
- color: #646464;
60
- }
61
- .eds-form-control-wrapper--disabled .eds-input-group__label {
62
- color: #646464;
63
- }
64
- .eds-contrast .eds-form-control-wrapper--disabled {
65
- background: #292b6a;
66
- color: #8285a8;
67
- }
68
- .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
69
- color: #8285a8;
70
- }
71
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
72
- display: none;
73
- }
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;
80
- }
81
- .eds-contrast .eds-form-control-wrapper--readonly {
82
- --textarea-label-background: $colors-blues-blue10;
83
- background: #292b6a;
84
- color: #ffffff;
85
- }
86
- .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
87
- color: #aeb7e2;
88
- }
89
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
90
- display: none;
91
- }
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;
97
- }
98
- .eds-form-control-wrapper--size-large {
99
- min-height: 4rem;
100
- padding: 0 0.5rem;
101
- }
102
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
103
- border-width: 0.25rem;
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;
110
- }
111
- .eds-form-control-wrapper--success {
112
- border-color: #1a8e60;
113
- --border-color: #1a8e60;
114
- }
115
- .eds-form-control-wrapper--success:hover {
116
- border-color: #5ac39a;
117
- }
118
- .eds-form-control-wrapper--success[focus-within] {
119
- border-color: #1a8e60;
120
- }
121
- .eds-form-control-wrapper--success:focus-within {
122
- border-color: #1a8e60;
123
- }
124
- .eds-contrast .eds-form-control-wrapper--success {
125
- border-color: #5ac39a;
126
- --border-color: #5ac39a;
127
- }
128
- .eds-contrast .eds-form-control-wrapper--success:hover {
129
- border-color: #1a8e60;
130
- }
131
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
132
- --border-color: #5ac39a;
133
- border-color: #181c56;
134
- }
135
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
136
- --border-color: #5ac39a;
137
- border-color: #181c56;
138
- }
139
- .eds-form-control-wrapper--error {
140
- border-color: #d31b1b;
141
- --border-color: #d31b1b;
142
- }
143
- .eds-form-control-wrapper--error:hover {
144
- border-color: #ff9494;
145
- }
146
- .eds-form-control-wrapper--error[focus-within] {
147
- border-color: #d31b1b;
148
- }
149
- .eds-form-control-wrapper--error:focus-within {
150
- border-color: #d31b1b;
151
- }
152
- .eds-contrast .eds-form-control-wrapper--error {
153
- border-color: #ff9494;
154
- --border-color: #ff9494;
155
- }
156
- .eds-contrast .eds-form-control-wrapper--error:hover {
157
- border-color: #d31b1b;
158
- }
159
- .eds-contrast .eds-form-control-wrapper--error[focus-within] {
160
- border-color: #181c56;
161
- --border-color: #ff9494;
162
- }
163
- .eds-contrast .eds-form-control-wrapper--error:focus-within {
164
- border-color: #181c56;
165
- --border-color: #ff9494;
166
- }
167
- .eds-contrast .eds-form-control-wrapper--dark {
168
- background-color: #181c56;
169
- color: #ffffff;
170
- }
171
- .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
172
- color: #aeb7e2;
173
- }
174
- .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
175
- color: #aeb7e2;
176
- }
177
- .eds-contrast .eds-form-control-wrapper--dark:hover {
178
- border-color: #aeb7e2;
179
- }
180
- .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
181
- background-color: #292b6a;
182
- border-color: #aeb7e2;
183
- }
184
- .eds-contrast .eds-form-control-wrapper--dark:focus-within {
185
- background-color: #292b6a;
186
- border-color: #aeb7e2;
187
- }
188
- .eds-contrast .eds-form-control-wrapper--dark * {
189
- background-color: transparent;
190
- color: inherit;
191
- }
192
- .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
193
- background-color: #292b6a;
194
- color: #8285a8;
195
- }
196
-
197
- .eds-form-control {
198
- -webkit-appearance: none;
199
- -moz-appearance: none;
200
- appearance: none;
201
- background-color: transparent;
202
- 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
- }
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;
215
- }
216
- .eds-form-control::placeholder {
217
- opacity: 0;
218
- transition: opacity 0.2s ease-in-out;
219
- }
220
- .eds-form-control:focus {
221
- outline: none;
222
- }
223
- .eds-form-control:focus::-moz-placeholder {
224
- opacity: 1;
225
- }
226
- .eds-form-control:focus::placeholder {
227
- opacity: 1;
228
- }
229
- .eds-form-control__prepend, .eds-form-control__append {
230
- position: relative;
231
- margin: 0 1rem;
232
- line-height: inherit;
233
- }
234
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
235
- position: static;
236
- }
237
- .eds-form-control__prepend svg, .eds-form-control__append svg {
238
- top: 0.125rem;
239
- }
240
- .eds-form-control__prepend {
241
- margin-right: 0;
242
- }
243
- .eds-form-control__append {
244
- margin-left: 0;
245
- }
246
- /* DO NOT CHANGE!*/
247
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
248
- .eds-input-group {
249
- color: inherit;
250
- display: block;
251
- position: relative;
252
- }
253
- .eds-input-group__label {
254
- color: #656782;
255
- display: flex;
256
- font-size: 1rem;
257
- position: absolute;
258
- line-height: 1rem;
259
- height: 3rem;
260
- padding: 1rem;
261
- padding-left: 0;
262
- margin-left: 1rem;
263
- top: -0.125rem;
264
- 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;
265
- -webkit-user-select: none;
266
- -moz-user-select: none;
267
- user-select: none;
268
- pointer-events: none;
269
- }
270
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
271
- top: 0.375rem;
272
- font-size: 0.75rem;
273
- line-height: 0.75rem;
274
- height: 10px;
275
- padding: 0;
276
- margin-left: 1rem;
277
- }
278
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
279
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
280
- background: var(--textarea-label-background);
281
- width: calc(
282
- 100% - 1rem - 1rem - 4px
283
- );
284
- }
285
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
286
- top: 0.5rem;
287
- font-size: 0.875rem;
288
- line-height: 1rem;
289
- padding: 0;
290
- margin-left: 1rem;
291
- }
292
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
293
- color: #aeb7e2;
294
- }
295
- .eds-form-control-wrapper--size-large .eds-input-group__label {
296
- font-size: 1.5rem;
297
- line-height: 2.25rem;
298
- height: 4rem;
299
- }
300
- .eds-input-group__label--filled {
301
- top: 0.375rem;
302
- font-size: 0.75rem;
303
- line-height: 0.75rem;
304
- height: 10px;
305
- padding: 0;
306
- margin-left: 1rem;
307
- }
308
- .eds-textarea__label .eds-input-group__label--filled {
309
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
310
- background: var(--textarea-label-background);
311
- width: calc(
312
- 100% - 1rem - 1rem - 4px
313
- );
314
- }
315
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
316
- top: 0.5rem;
317
- font-size: 0.875rem;
318
- line-height: 1rem;
319
- padding: 0;
320
- margin-left: 1rem;
321
- }
322
- .eds-input-group__label-tooltip-icon {
323
- color: #0082b9;
324
- padding-left: 0.25rem;
325
- padding-right: 0.25rem;
326
- display: flex;
327
- align-items: center;
328
- cursor: help;
329
- font-size: 1rem;
330
- }
331
-
332
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
333
- top: 0.375rem;
334
- font-size: 0.75rem;
335
- line-height: 0.75rem;
336
- height: 10px;
337
- padding: 0;
338
- margin-left: 1rem;
339
- }
340
-
341
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
342
- top: 0.375rem;
343
- font-size: 0.75rem;
344
- line-height: 0.75rem;
345
- height: 10px;
346
- padding: 0;
347
- margin-left: 1rem;
348
- }
349
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
350
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
351
- background: var(--textarea-label-background);
352
- width: calc(
353
- 100% - 1rem - 1rem - 4px
354
- );
355
- }
356
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
357
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
358
- background: var(--textarea-label-background);
359
- width: calc(
360
- 100% - 1rem - 1rem - 4px
361
- );
362
- }
363
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
364
- top: 0.5rem;
365
- font-size: 0.875rem;
366
- line-height: 1rem;
367
- padding: 0;
368
- margin-left: 1rem;
369
- }
370
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
371
- top: 0.5rem;
372
- font-size: 0.875rem;
373
- line-height: 1rem;
374
- padding: 0;
375
- margin-left: 1rem;
376
- }
377
- /* DO NOT CHANGE!*/
378
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
379
6
  .eds-checkbox__container {
380
7
  display: flex;
381
8
  align-items: center;
@@ -538,62 +165,304 @@
538
165
  }
539
166
  /* DO NOT CHANGE!*/
540
167
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
168
+ .eds-feedback-text {
169
+ display: flex;
170
+ align-items: center;
171
+ margin-top: 0.25rem;
172
+ }
173
+ .eds-feedback-text--info {
174
+ padding-left: calc(1rem + 0.125rem);
175
+ }
176
+ .eds-feedback-text__text {
177
+ color: #181c56;
178
+ }
179
+ .eds-contrast .eds-feedback-text__text {
180
+ color: #ffffff;
181
+ }
182
+
183
+ .eds-feedback-text__icon {
184
+ font-size: 1.5rem;
185
+ min-height: 1.5rem;
186
+ min-width: 1.5rem;
187
+ padding-right: 0.5rem;
188
+ position: relative;
189
+ top: -0.1rem;
190
+ }
191
+ .eds-feedback-text__icon--success {
192
+ color: #1a8e60;
193
+ }
194
+ .eds-contrast .eds-feedback-text__icon--success {
195
+ color: #5ac39a;
196
+ }
197
+ .eds-feedback-text__icon--error {
198
+ color: #d31b1b;
199
+ }
200
+ .eds-contrast .eds-feedback-text__icon--error {
201
+ color: #ff9494;
202
+ }
203
+ .eds-feedback-text__icon--info {
204
+ color: #0082b9;
205
+ }
206
+ .eds-contrast .eds-feedback-text__icon--info {
207
+ color: #64b3e7;
208
+ }
209
+ .eds-feedback-text__icon--warning {
210
+ color: #ffca28;
211
+ }
212
+ .eds-feedback-text__icon--warning circle {
213
+ fill: #181c56;
214
+ }
215
+ .eds-contrast .eds-feedback-text__icon--warning {
216
+ color: #ffe082;
217
+ }
218
+ /* DO NOT CHANGE!*/
219
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
541
220
  .eds-fieldset {
542
221
  margin: 0;
543
222
  padding: 0;
544
223
  border: 0;
545
224
  }
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;
225
+ /* DO NOT CHANGE!*/
226
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
227
+ .eds-form-control-wrapper {
228
+ --border-color: #7C7F9F;
229
+ --border-color-hover: #aeb7e2;
230
+ align-items: center;
231
+ background-color: #ffffff;
232
+ border-radius: 0.25rem;
233
+ border: 0.125rem solid var(--border-color);
234
+ box-shadow: 0 0 0 transparent;
235
+ color: #181c56;
236
+ display: flex;
237
+ position: relative;
238
+ width: 100%;
239
+ min-height: 3rem;
240
+ transition: border-color 0.1s ease-in-out;
241
+ --textarea-label-background: $colors-brand-white;
242
+ /*
243
+ Some input controls require a darker design while inside a contrast block.
244
+ These elements require the `--dark` modifier, even on the wrapper.
245
+ */
246
+ }
247
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
248
+ --border-color: #181c56;
249
+ }
250
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
251
+ --border-color: #181c56;
252
+ }
253
+ .eds-contrast .eds-form-control-wrapper:hover {
254
+ --border-color: #aeb7e2;
255
+ }
256
+ .eds-form-control-wrapper[focus-within] {
257
+ box-shadow: inset 0 0 0 1px var(--border-color);
258
+ }
259
+ .eds-form-control-wrapper:focus-within {
260
+ box-shadow: inset 0 0 0 1px var(--border-color);
261
+ }
262
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
263
+ --border-color: #181c56;
264
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
265
+ }
266
+ .eds-contrast .eds-form-control-wrapper:focus-within {
267
+ --border-color: #181c56;
268
+ box-shadow: 0 0 0 0.125rem #aeb7e2;
269
+ }
270
+ .eds-form-control-wrapper ::-moz-placeholder {
271
+ color: #656782;
272
+ }
273
+ .eds-form-control-wrapper ::placeholder {
274
+ color: #656782;
275
+ }
276
+ .eds-form-control-wrapper--disabled {
277
+ --border-color: transparent;
278
+ background-color: #e9e9e9;
279
+ pointer-events: none;
280
+ color: #646464;
281
+ }
282
+ .eds-form-control-wrapper--disabled .eds-input-group__label {
283
+ color: #646464;
284
+ }
285
+ .eds-contrast .eds-form-control-wrapper--disabled {
286
+ background: #292b6a;
287
+ color: #8285a8;
288
+ }
289
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
290
+ color: #8285a8;
291
+ }
292
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
293
+ display: none;
294
+ }
295
+ .eds-form-control-wrapper--readonly {
296
+ --border-color: transparent;
297
+ --textarea-label-background: $colors-greys-grey90;
298
+ pointer-events: none;
299
+ cursor: default;
300
+ background: #f8f8f8;
301
+ }
302
+ .eds-contrast .eds-form-control-wrapper--readonly {
303
+ --textarea-label-background: $colors-blues-blue10;
304
+ background: #292b6a;
305
+ color: #ffffff;
306
+ }
307
+ .eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
308
+ color: #aeb7e2;
309
+ }
310
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
311
+ display: none;
312
+ }
313
+ .eds-form-control-wrapper--size-medium .eds-form-control,
314
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
315
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
316
+ font-size: 1rem;
317
+ line-height: 1rem;
318
+ }
319
+ .eds-form-control-wrapper--size-large {
320
+ min-height: 4rem;
321
+ padding: 0 0.5rem;
322
+ }
323
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
324
+ border-width: 0.25rem;
325
+ }
326
+ .eds-form-control-wrapper--size-large .eds-form-control,
327
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
328
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
329
+ font-size: 1.5rem;
330
+ line-height: 2.25rem;
331
+ }
332
+ .eds-form-control-wrapper--success {
333
+ border-color: #1a8e60;
334
+ --border-color: #1a8e60;
335
+ }
336
+ .eds-form-control-wrapper--success:hover {
337
+ border-color: #5ac39a;
338
+ }
339
+ .eds-form-control-wrapper--success[focus-within] {
340
+ border-color: #1a8e60;
341
+ }
342
+ .eds-form-control-wrapper--success:focus-within {
343
+ border-color: #1a8e60;
344
+ }
345
+ .eds-contrast .eds-form-control-wrapper--success {
346
+ border-color: #5ac39a;
347
+ --border-color: #5ac39a;
348
+ }
349
+ .eds-contrast .eds-form-control-wrapper--success:hover {
350
+ border-color: #1a8e60;
351
+ }
352
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
353
+ --border-color: #5ac39a;
354
+ border-color: #181c56;
355
+ }
356
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
357
+ --border-color: #5ac39a;
358
+ border-color: #181c56;
359
+ }
360
+ .eds-form-control-wrapper--error {
361
+ border-color: #d31b1b;
362
+ --border-color: #d31b1b;
363
+ }
364
+ .eds-form-control-wrapper--error:hover {
365
+ border-color: #ff9494;
366
+ }
367
+ .eds-form-control-wrapper--error[focus-within] {
368
+ border-color: #d31b1b;
369
+ }
370
+ .eds-form-control-wrapper--error:focus-within {
371
+ border-color: #d31b1b;
372
+ }
373
+ .eds-contrast .eds-form-control-wrapper--error {
374
+ border-color: #ff9494;
375
+ --border-color: #ff9494;
376
+ }
377
+ .eds-contrast .eds-form-control-wrapper--error:hover {
378
+ border-color: #d31b1b;
379
+ }
380
+ .eds-contrast .eds-form-control-wrapper--error[focus-within] {
381
+ border-color: #181c56;
382
+ --border-color: #ff9494;
383
+ }
384
+ .eds-contrast .eds-form-control-wrapper--error:focus-within {
385
+ border-color: #181c56;
386
+ --border-color: #ff9494;
387
+ }
388
+ .eds-contrast .eds-form-control-wrapper--dark {
389
+ background-color: #181c56;
390
+ color: #ffffff;
391
+ }
392
+ .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
393
+ color: #aeb7e2;
394
+ }
395
+ .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
396
+ color: #aeb7e2;
552
397
  }
553
- .eds-feedback-text--info {
554
- padding-left: calc(1rem + 0.125rem);
398
+ .eds-contrast .eds-form-control-wrapper--dark:hover {
399
+ border-color: #aeb7e2;
555
400
  }
556
- .eds-feedback-text__text {
557
- color: #181c56;
401
+ .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
402
+ background-color: #292b6a;
403
+ border-color: #aeb7e2;
558
404
  }
559
- .eds-contrast .eds-feedback-text__text {
560
- color: #ffffff;
405
+ .eds-contrast .eds-form-control-wrapper--dark:focus-within {
406
+ background-color: #292b6a;
407
+ border-color: #aeb7e2;
408
+ }
409
+ .eds-contrast .eds-form-control-wrapper--dark * {
410
+ background-color: transparent;
411
+ color: inherit;
412
+ }
413
+ .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
414
+ background-color: #292b6a;
415
+ color: #8285a8;
561
416
  }
562
417
 
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;
418
+ .eds-form-control {
419
+ -webkit-appearance: none;
420
+ -moz-appearance: none;
421
+ appearance: none;
422
+ background-color: transparent;
423
+ border: 0;
424
+ color: inherit;
425
+ display: block;
426
+ font-family: inherit;
427
+ line-height: 1rem;
428
+ font-size: 1rem;
429
+ padding: 20px 1rem 0.25rem;
430
+ width: 100%;
570
431
  }
571
- .eds-feedback-text__icon--success {
572
- color: #1a8e60;
432
+ .eds-form-control::-moz-placeholder {
433
+ opacity: 0;
434
+ -moz-transition: opacity 0.2s ease-in-out;
435
+ transition: opacity 0.2s ease-in-out;
573
436
  }
574
- .eds-contrast .eds-feedback-text__icon--success {
575
- color: #5ac39a;
437
+ .eds-form-control::placeholder {
438
+ opacity: 0;
439
+ transition: opacity 0.2s ease-in-out;
576
440
  }
577
- .eds-feedback-text__icon--error {
578
- color: #d31b1b;
441
+ .eds-form-control:focus {
442
+ outline: none;
579
443
  }
580
- .eds-contrast .eds-feedback-text__icon--error {
581
- color: #ff9494;
444
+ .eds-form-control:focus::-moz-placeholder {
445
+ opacity: 1;
582
446
  }
583
- .eds-feedback-text__icon--info {
584
- color: #0082b9;
447
+ .eds-form-control:focus::placeholder {
448
+ opacity: 1;
585
449
  }
586
- .eds-contrast .eds-feedback-text__icon--info {
587
- color: #64b3e7;
450
+ .eds-form-control__prepend, .eds-form-control__append {
451
+ position: relative;
452
+ margin: 0 1rem;
453
+ line-height: inherit;
588
454
  }
589
- .eds-feedback-text__icon--warning {
590
- color: #ffca28;
455
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
456
+ position: static;
591
457
  }
592
- .eds-feedback-text__icon--warning circle {
593
- fill: #181c56;
458
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
459
+ top: 0.125rem;
594
460
  }
595
- .eds-contrast .eds-feedback-text__icon--warning {
596
- color: #ffe082;
461
+ .eds-form-control__prepend {
462
+ margin-right: 0;
463
+ }
464
+ .eds-form-control__append {
465
+ margin-left: 0;
597
466
  }
598
467
  /* DO NOT CHANGE!*/
599
468
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -685,10 +554,134 @@
685
554
  }
686
555
  /* DO NOT CHANGE!*/
687
556
  /* 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;
557
+ .eds-input-group {
558
+ color: inherit;
559
+ display: block;
560
+ position: relative;
561
+ }
562
+ .eds-input-group__label {
563
+ color: #656782;
564
+ display: flex;
565
+ font-size: 1rem;
566
+ position: absolute;
567
+ line-height: 1rem;
568
+ height: 3rem;
569
+ padding: 1rem;
570
+ padding-left: 0;
571
+ margin-left: 1rem;
572
+ top: -0.125rem;
573
+ 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;
574
+ -webkit-user-select: none;
575
+ -moz-user-select: none;
576
+ user-select: none;
577
+ pointer-events: none;
578
+ }
579
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
580
+ top: 0.375rem;
581
+ font-size: 0.75rem;
582
+ line-height: 0.75rem;
583
+ height: 10px;
584
+ padding: 0;
585
+ margin-left: 1rem;
586
+ }
587
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
588
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
589
+ background: var(--textarea-label-background);
590
+ width: calc(
591
+ 100% - 1rem - 1rem - 4px
592
+ );
593
+ }
594
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
595
+ top: 0.5rem;
596
+ font-size: 0.875rem;
597
+ line-height: 1rem;
598
+ padding: 0;
599
+ margin-left: 1rem;
600
+ }
601
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
602
+ color: #aeb7e2;
603
+ }
604
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
605
+ font-size: 1.5rem;
606
+ line-height: 2.25rem;
607
+ height: 4rem;
608
+ }
609
+ .eds-input-group__label--filled {
610
+ top: 0.375rem;
611
+ font-size: 0.75rem;
612
+ line-height: 0.75rem;
613
+ height: 10px;
614
+ padding: 0;
615
+ margin-left: 1rem;
616
+ }
617
+ .eds-textarea__label .eds-input-group__label--filled {
618
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
619
+ background: var(--textarea-label-background);
620
+ width: calc(
621
+ 100% - 1rem - 1rem - 4px
622
+ );
623
+ }
624
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
625
+ top: 0.5rem;
626
+ font-size: 0.875rem;
627
+ line-height: 1rem;
628
+ padding: 0;
629
+ margin-left: 1rem;
630
+ }
631
+ .eds-input-group__label-tooltip-icon {
632
+ color: #0082b9;
633
+ padding-left: 0.25rem;
634
+ padding-right: 0.25rem;
635
+ display: flex;
636
+ align-items: center;
637
+ cursor: help;
638
+ font-size: 1rem;
639
+ }
640
+
641
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
642
+ top: 0.375rem;
643
+ font-size: 0.75rem;
644
+ line-height: 0.75rem;
645
+ height: 10px;
646
+ padding: 0;
647
+ margin-left: 1rem;
648
+ }
649
+
650
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
651
+ top: 0.375rem;
652
+ font-size: 0.75rem;
653
+ line-height: 0.75rem;
654
+ height: 10px;
655
+ padding: 0;
656
+ margin-left: 1rem;
657
+ }
658
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
659
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
660
+ background: var(--textarea-label-background);
661
+ width: calc(
662
+ 100% - 1rem - 1rem - 4px
663
+ );
664
+ }
665
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
666
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
667
+ background: var(--textarea-label-background);
668
+ width: calc(
669
+ 100% - 1rem - 1rem - 4px
670
+ );
671
+ }
672
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
673
+ top: 0.5rem;
674
+ font-size: 0.875rem;
675
+ line-height: 1rem;
676
+ padding: 0;
677
+ margin-left: 1rem;
678
+ }
679
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
680
+ top: 0.5rem;
681
+ font-size: 0.875rem;
682
+ line-height: 1rem;
683
+ padding: 0;
684
+ margin-left: 1rem;
692
685
  }
693
686
  /* DO NOT CHANGE!*/
694
687
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
@@ -848,6 +841,24 @@ textarea.eds-form-control.eds-textarea {
848
841
  }
849
842
  /* DO NOT CHANGE!*/
850
843
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
844
+ textarea.eds-form-control.eds-textarea {
845
+ min-height: 7.75rem;
846
+ resize: vertical;
847
+ line-height: 1.5rem;
848
+ }
849
+ /* DO NOT CHANGE!*/
850
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
851
+ .eds-segmented-control {
852
+ margin-top: 0.25rem;
853
+ display: flex;
854
+ background: #d1d4e3;
855
+ border-radius: 0.5rem;
856
+ }
857
+ .eds-contrast .eds-segmented-control {
858
+ background: #393d79;
859
+ }
860
+ /* DO NOT CHANGE!*/
861
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
851
862
  .eds-segmented-choice {
852
863
  display: block;
853
864
  flex: 1 1 0px;
@@ -919,17 +930,6 @@ textarea.eds-form-control.eds-textarea {
919
930
  }
920
931
  /* DO NOT CHANGE!*/
921
932
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
922
- .eds-segmented-control {
923
- margin-top: 0.25rem;
924
- display: flex;
925
- background: #d1d4e3;
926
- border-radius: 0.5rem;
927
- }
928
- .eds-contrast .eds-segmented-control {
929
- background: #393d79;
930
- }
931
- /* DO NOT CHANGE!*/
932
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
933
933
  .eds-input-panel[focus-within] .eds-input-panel__container {
934
934
  border-color: #181c56;
935
935
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/form",
3
- "version": "7.0.9",
3
+ "version": "7.0.11",
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.21",
33
+ "@entur/typography": "^1.8.2",
34
+ "@entur/utils": "^0.9.2",
35
35
  "classnames": "^2.3.1"
36
36
  },
37
- "gitHead": "8f124a94b17be084024892eca96ab800f18ceca2"
37
+ "gitHead": "a7f288d524c9ef12f3b78ea35b864c879c0f1cc3"
38
38
  }