@entur/form 5.4.4 → 5.4.5

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 (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/styles.css +758 -758
  3. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -2,979 +2,969 @@
2
2
  --eds-form: 1;
3
3
  }/* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- .eds-form-control-wrapper {
6
- --border-color: #181c56;
7
- --border-color-hover: #aeb7e2;
8
- align-items: center;
9
- background-color: #ffffff;
10
- border-radius: 0.25rem;
11
- border: 0.125rem solid #d1d3d3;
12
- box-shadow: 0 0 0 transparent;
13
- color: #181c56;
14
- display: flex;
15
- position: relative;
16
- width: 100%;
17
- min-height: 3rem;
18
- transition: border-color 0.1s ease-in-out;
19
- --textarea-label-background: $colors-brand-white;
20
- /*
21
- Some input controls require a darker design while inside a contrast block.
22
- These elements require the `--dark` modifier, even on the wrapper.
23
- */
24
- }
25
- .eds-contrast .eds-form-control-wrapper {
26
- --border-color: #aeb7e2;
27
- background-color: #ffffff;
28
- border-color: #54568c;
29
- }
30
- .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
31
- border-color: #181c56;
32
- }
33
- .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
34
- border-color: #181c56;
35
- }
36
- .eds-contrast .eds-form-control-wrapper:hover {
37
- border-color: #aeb7e2;
38
- background: #ebebf1;
39
- }
40
- .eds-form-control-wrapper[focus-within] {
41
- box-shadow: inset 0 0 0 1px var(--border-color);
42
- }
43
- .eds-form-control-wrapper:focus-within {
44
- box-shadow: inset 0 0 0 1px var(--border-color);
45
- }
46
- .eds-contrast .eds-form-control-wrapper[focus-within] {
47
- border-color: #181c56;
48
- --border-color: #aeb7e2;
49
- box-shadow: 0 0 0 0.125rem var(--border-color);
5
+ textarea.eds-form-control.eds-textarea {
6
+ min-height: 7.75rem;
7
+ resize: vertical;
8
+ line-height: 1.5rem;
9
+ }/* DO NOT CHANGE!*/
10
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
11
+ .eds-fieldset {
12
+ margin: 0;
13
+ padding: 0;
14
+ border: 0;
50
15
  }
51
- .eds-contrast .eds-form-control-wrapper:focus-within {
52
- border-color: #181c56;
53
- --border-color: #aeb7e2;
54
- box-shadow: 0 0 0 0.125rem var(--border-color);
16
+ .eds-fieldset .eds-legend {
17
+ margin: 0 0 0.5rem;
18
+ }/* DO NOT CHANGE!*/
19
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
20
+ .eds-textfield__clear-button {
21
+ background: none;
22
+ border: none;
23
+ border-radius: 50%;
24
+ color: inherit;
25
+ cursor: pointer;
26
+ display: flex;
27
+ font: inherit;
28
+ font-size: 1rem;
29
+ line-height: 1rem;
30
+ padding: 0.5rem;
31
+ margin-right: -0.75rem;
55
32
  }
56
- .eds-form-control-wrapper ::-moz-placeholder {
57
- color: #656782;
33
+ .eds-textfield__clear-button-wrapper {
34
+ display: flex;
35
+ align-items: center;
58
36
  }
59
- .eds-form-control-wrapper :-ms-input-placeholder {
60
- color: #656782;
37
+ .eds-textfield__clear-button:hover {
38
+ background: #f3f3f3;
61
39
  }
62
- .eds-form-control-wrapper ::placeholder {
63
- color: #656782;
40
+ .eds-textfield__clear-button:focus {
41
+ outline: none;
42
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
64
43
  }
65
- .eds-form-control-wrapper--disabled {
44
+
45
+ .eds-textfield__divider {
46
+ content: "";
47
+ display: block;
66
48
  background-color: #e9e9e9;
67
- color: #656782;
68
- border-color: transparent;
69
- pointer-events: none;
49
+ height: 1.5rem;
50
+ width: 1px;
70
51
  }
71
- .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
72
- display: none;
52
+ .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
53
+ background-color: #8285a8;
54
+ }/* DO NOT CHANGE!*/
55
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
56
+ .eds-feedback-text {
57
+ display: flex;
58
+ align-items: center;
59
+ margin-top: 0.25rem;
73
60
  }
74
- .eds-contrast .eds-form-control-wrapper--disabled {
75
- background: #292b6a;
76
- border-color: transparent;
77
- color: #8285a8;
61
+ .eds-feedback-text--info {
62
+ padding-left: calc(1rem + 0.125rem);
78
63
  }
79
- .eds-form-control-wrapper--readonly {
80
- pointer-events: none;
81
- cursor: default;
82
- border-color: transparent;
83
- background: #f8f8f8;
84
- --textarea-label-background: $colors-greys-grey90;
64
+ .eds-feedback-text__text {
65
+ color: #181c56;
85
66
  }
86
- .eds-contrast .eds-form-control-wrapper--readonly {
87
- background: #292b6a;
88
- --textarea-label-background: $colors-blues-blue10;
67
+ .eds-contrast .eds-feedback-text__text {
89
68
  color: #ffffff;
90
- border-color: transparent;
91
- }
92
- .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
93
- display: none;
94
69
  }
95
- .eds-form-control-wrapper--size-medium .eds-form-control,
96
- .eds-form-control-wrapper--size-medium .eds-form-control__append,
97
- .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
98
- font-size: 1rem;
99
- line-height: 1rem;
100
- }
101
- .eds-form-control-wrapper--size-large {
102
- min-height: 4rem;
103
- padding: 0 0.5rem;
104
- }
105
- .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
106
- border-width: 0.25rem;
107
- }
108
- .eds-form-control-wrapper--size-large .eds-form-control,
109
- .eds-form-control-wrapper--size-large .eds-form-control__append,
110
- .eds-form-control-wrapper--size-large .eds-form-control__prepend {
70
+
71
+ .eds-feedback-text__icon {
111
72
  font-size: 1.5rem;
112
- line-height: 2.25rem;
113
- }
114
- .eds-form-control-wrapper--success {
115
- border-color: #1a8e60;
116
- --border-color: #1a8e60;
117
- }
118
- .eds-form-control-wrapper--success:hover {
119
- border-color: #5ac39a;
73
+ min-height: 1.5rem;
74
+ min-width: 1.5rem;
75
+ padding-right: 0.5rem;
76
+ position: relative;
77
+ top: -0.1rem;
120
78
  }
121
- .eds-form-control-wrapper--success[focus-within] {
122
- border-color: #1a8e60;
79
+ .eds-feedback-text__icon--success {
80
+ color: #1a8e60;
123
81
  }
124
- .eds-form-control-wrapper--success:focus-within {
125
- border-color: #1a8e60;
82
+ .eds-contrast .eds-feedback-text__icon--success {
83
+ color: #5ac39a;
126
84
  }
127
- .eds-contrast .eds-form-control-wrapper--success {
128
- border-color: #5ac39a;
129
- --border-color: #5ac39a;
85
+ .eds-feedback-text__icon--error {
86
+ color: #d31b1b;
130
87
  }
131
- .eds-contrast .eds-form-control-wrapper--success:hover {
132
- border-color: #1a8e60;
88
+ .eds-contrast .eds-feedback-text__icon--error {
89
+ color: #ff9494;
133
90
  }
134
- .eds-contrast .eds-form-control-wrapper--success[focus-within] {
135
- --border-color: #5ac39a;
136
- border-color: #181c56;
91
+ .eds-feedback-text__icon--info {
92
+ color: #0082b9;
137
93
  }
138
- .eds-contrast .eds-form-control-wrapper--success:focus-within {
139
- --border-color: #5ac39a;
140
- border-color: #181c56;
94
+ .eds-contrast .eds-feedback-text__icon--info {
95
+ color: #64b3e7;
141
96
  }
142
- .eds-form-control-wrapper--error {
143
- border-color: #d31b1b;
144
- --border-color: #d31b1b;
97
+ .eds-feedback-text__icon--warning {
98
+ color: #ffca28;
145
99
  }
146
- .eds-form-control-wrapper--error:hover {
147
- border-color: #ff9494;
100
+ .eds-feedback-text__icon--warning circle {
101
+ fill: #181c56;
148
102
  }
149
- .eds-form-control-wrapper--error[focus-within] {
150
- border-color: #d31b1b;
103
+ .eds-contrast .eds-feedback-text__icon--warning {
104
+ color: #ffe082;
105
+ }/* DO NOT CHANGE!*/
106
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
107
+ .eds-form-component--radio__container {
108
+ display: flex;
109
+ justify-content: center;
110
+ align-items: center;
111
+ position: relative;
112
+ cursor: pointer;
113
+ height: 2rem;
114
+ width: -webkit-fit-content;
115
+ width: -moz-fit-content;
116
+ width: fit-content;
117
+ -webkit-user-select: none;
118
+ -moz-user-select: none;
119
+ -ms-user-select: none;
120
+ user-select: none;
151
121
  }
152
- .eds-form-control-wrapper--error:focus-within {
153
- border-color: #d31b1b;
122
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
123
+ border-color: #54568c;
154
124
  }
155
- .eds-contrast .eds-form-control-wrapper--error {
156
- border-color: #ff9494;
157
- --border-color: #ff9494;
125
+ .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
126
+ background-color: #54568c;
158
127
  }
159
- .eds-contrast .eds-form-control-wrapper--error:hover {
160
- border-color: #d31b1b;
128
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
129
+ border-color: #8285a8;
161
130
  }
162
- .eds-contrast .eds-form-control-wrapper--error[focus-within] {
163
- border-color: #181c56;
164
- --border-color: #ff9494;
131
+ .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
132
+ background-color: #8285a8;
165
133
  }
166
- .eds-contrast .eds-form-control-wrapper--error:focus-within {
167
- border-color: #181c56;
168
- --border-color: #ff9494;
134
+ .eds-form-component--radio__container input {
135
+ position: absolute;
136
+ opacity: 0;
137
+ cursor: pointer;
138
+ height: 0;
139
+ width: 0;
169
140
  }
170
- .eds-contrast .eds-form-control-wrapper--dark {
171
- background-color: #181c56;
172
- color: #ffffff;
141
+ .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
142
+ height: 0.625rem;
143
+ width: 0.625rem;
173
144
  }
174
- .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
175
- color: #aeb7e2;
145
+ .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
146
+ outline: none;
147
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
148
+ outline-offset: 0.125rem;
176
149
  }
177
- .eds-contrast .eds-form-control-wrapper--dark :-ms-input-placeholder {
178
- color: #aeb7e2;
150
+ .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
151
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
179
152
  }
180
- .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
181
- color: #aeb7e2;
153
+ .eds-form-component--radio__container .eds-form-component--radio__radio {
154
+ position: relative;
155
+ height: 1.25rem;
156
+ width: 1.25rem;
157
+ margin-right: 1rem;
158
+ background-color: #ffffff;
159
+ border: 0.125rem solid #181c56;
160
+ border-radius: 50%;
161
+ display: flex;
162
+ align-items: center;
163
+ justify-content: center;
182
164
  }
183
- .eds-contrast .eds-form-control-wrapper--dark:hover {
165
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
166
+ background-color: #181c56;
184
167
  border-color: #aeb7e2;
185
168
  }
186
- .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
187
- background-color: #292b6a;
188
- border-color: #aeb7e2;
169
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
170
+ background: #d1d3d3;
171
+ border-color: #d1d3d3;
172
+ cursor: not-allowed;
189
173
  }
190
- .eds-contrast .eds-form-control-wrapper--dark:focus-within {
191
- background-color: #292b6a;
192
- border-color: #aeb7e2;
174
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
175
+ border-color: #d1d3d3;
193
176
  }
194
- .eds-contrast .eds-form-control-wrapper--dark * {
195
- background-color: transparent;
196
- color: inherit;
177
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
178
+ background: #d1d3d3;
179
+ border-color: #d1d3d3;
197
180
  }
198
- .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
199
- background-color: #292b6a;
200
- color: #8285a8;
181
+ .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
182
+ color: #656782;
201
183
  }
202
-
203
- .eds-form-control {
184
+ .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
185
+ display: block;
186
+ width: 0;
187
+ height: 0;
188
+ border-radius: 50%;
189
+ background-color: #181c56;
190
+ transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
191
+ }
192
+ .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
193
+ background-color: #aeb7e2;
194
+ }/* DO NOT CHANGE!*/
195
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
196
+ .eds-checkbox__container {
197
+ display: flex;
198
+ align-items: center;
199
+ position: relative;
204
200
  -webkit-appearance: none;
205
201
  -moz-appearance: none;
206
202
  appearance: none;
207
- background-color: transparent;
208
- border: 0;
209
- color: inherit;
210
- display: block;
211
- font-family: inherit;
212
- line-height: 1rem;
213
- font-size: 1rem;
214
- padding: 20px 1rem 0.25rem;
215
- width: 100%;
203
+ cursor: pointer;
204
+ height: 2rem;
205
+ -webkit-user-select: none;
206
+ -moz-user-select: none;
207
+ -ms-user-select: none;
208
+ user-select: none;
209
+ width: -webkit-fit-content;
210
+ width: -moz-fit-content;
211
+ width: fit-content;
216
212
  }
217
- .eds-form-control::-moz-placeholder {
218
- opacity: 0;
219
- -moz-transition: opacity 0.2s ease-in-out;
220
- transition: opacity 0.2s ease-in-out;
213
+ .eds-checkbox__container--reduced-click-area {
214
+ height: -webkit-fit-content;
215
+ height: -moz-fit-content;
216
+ height: fit-content;
221
217
  }
222
- .eds-form-control:-ms-input-placeholder {
218
+ .eds-checkbox__container input {
219
+ position: absolute;
223
220
  opacity: 0;
224
- -ms-transition: opacity 0.2s ease-in-out;
225
- transition: opacity 0.2s ease-in-out;
221
+ height: 0;
222
+ width: 0;
226
223
  }
227
- .eds-form-control::placeholder {
228
- opacity: 0;
229
- transition: opacity 0.2s ease-in-out;
224
+ .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
225
+ background-color: #181c56;
230
226
  }
231
- .eds-form-control:focus {
232
- outline: none;
227
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
228
+ visibility: visible;
233
229
  }
234
- .eds-form-control:focus::-moz-placeholder {
235
- opacity: 1;
230
+ .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
231
+ stroke: #ffffff;
232
+ -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
233
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
236
234
  }
237
- .eds-form-control:focus:-ms-input-placeholder {
238
- opacity: 1;
235
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
236
+ opacity: 0.5;
239
237
  }
240
- .eds-form-control:focus::placeholder {
241
- opacity: 1;
238
+ .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
239
+ opacity: 0.5;
242
240
  }
243
- .eds-form-control__prepend, .eds-form-control__append {
244
- position: relative;
245
- margin: 0 1rem;
246
- line-height: inherit;
241
+ .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
242
+ background: #54568c;
247
243
  }
248
- .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
249
- position: static;
244
+ .eds-checkbox__container:hover input + .eds-checkbox__icon {
245
+ border-color: #54568c;
246
+ background: #f3f3f3;
250
247
  }
251
- .eds-form-control__prepend svg, .eds-form-control__append svg {
252
- top: 0.125rem;
248
+ .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
249
+ border-color: #656782;
250
+ background: #292b6a;
253
251
  }
254
- .eds-form-control__prepend {
255
- margin-right: 0;
252
+ .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
253
+ .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
254
+ border-color: #54568c;
255
+ background-color: #54568c;
256
256
  }
257
- .eds-form-control__append {
258
- margin-left: 0;
259
- }/* DO NOT CHANGE!*/
260
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
261
- textarea.eds-form-control.eds-textarea {
262
- min-height: 7.75rem;
263
- resize: vertical;
264
- line-height: 1.5rem;
265
- }/* DO NOT CHANGE!*/
266
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
267
- .eds-fieldset {
268
- margin: 0;
269
- padding: 0;
270
- border: 0;
257
+ .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
258
+ .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
259
+ background: #8285a8;
260
+ border-color: #8285a8;
271
261
  }
272
- .eds-fieldset .eds-legend {
273
- margin: 0 0 0.5rem;
274
- }/* DO NOT CHANGE!*/
275
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
276
- .eds-feedback-text {
277
- display: flex;
278
- align-items: center;
279
- margin-top: 0.25rem;
262
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
263
+ .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
264
+ outline: none;
265
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
266
+ outline-offset: 0.125rem;
280
267
  }
281
- .eds-feedback-text--info {
282
- padding-left: calc(1rem + 0.125rem);
268
+ .eds-checkbox__container:focus + .eds-checkbox__icon,
269
+ .eds-checkbox__container :focus-within + .eds-checkbox__icon {
270
+ outline: none;
271
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
272
+ outline-offset: 0.125rem;
283
273
  }
284
- .eds-feedback-text__text {
285
- color: #181c56;
274
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
275
+ .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
276
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
286
277
  }
287
- .eds-contrast .eds-feedback-text__text {
288
- color: #ffffff;
278
+ .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
279
+ .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
280
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
289
281
  }
290
-
291
- .eds-feedback-text__icon {
292
- font-size: 1.5rem;
293
- min-height: 1.5rem;
294
- min-width: 1.5rem;
295
- padding-right: 0.5rem;
296
- position: relative;
297
- top: -0.1rem;
282
+ .eds-checkbox--disabled {
283
+ pointer-events: none;
298
284
  }
299
- .eds-feedback-text__icon--success {
300
- color: #1a8e60;
285
+ .eds-checkbox--disabled .eds-checkbox__label {
286
+ opacity: 0.5;
301
287
  }
302
- .eds-contrast .eds-feedback-text__icon--success {
303
- color: #5ac39a;
288
+ .eds-checkbox--disabled .eds-checkbox__icon {
289
+ opacity: 0.5;
304
290
  }
305
- .eds-feedback-text__icon--error {
306
- color: #d31b1b;
291
+ .eds-checkbox__icon {
292
+ display: inline-flex;
293
+ justify-content: center;
294
+ align-items: center;
295
+ position: relative;
296
+ margin-right: 1rem;
297
+ height: 1.25rem;
298
+ width: 1.25rem;
299
+ border: 0.125rem solid #181c56;
300
+ border-radius: 0.0625rem;
301
+ background-color: transparent;
302
+ color: #ffffff;
307
303
  }
308
- .eds-contrast .eds-feedback-text__icon--error {
309
- color: #ff9494;
304
+ .eds-checkbox__icon--reduced-click-area {
305
+ margin-right: 0;
310
306
  }
311
- .eds-feedback-text__icon--info {
312
- color: #0082b9;
307
+ .eds-contrast .eds-checkbox__icon {
308
+ border-color: #54568c;
313
309
  }
314
- .eds-contrast .eds-feedback-text__icon--info {
315
- color: #64b3e7;
310
+ .eds-checkbox__icon .eds-checkbox-icon {
311
+ height: 1rem;
312
+ width: 1rem;
313
+ visibility: hidden;
316
314
  }
317
- .eds-feedback-text__icon--warning {
318
- color: #ffca28;
315
+ .eds-checkbox__icon .eds-checkbox-icon__path {
316
+ transform-origin: 50% 50%;
317
+ stroke-dasharray: 48;
318
+ stroke-dashoffset: 48;
319
+ stroke-width: 0.375rem;
319
320
  }
320
- .eds-feedback-text__icon--warning circle {
321
- fill: #181c56;
321
+
322
+ @-webkit-keyframes stroke {
323
+ 100% {
324
+ stroke-dashoffset: 0;
325
+ }
322
326
  }
323
- .eds-contrast .eds-feedback-text__icon--warning {
324
- color: #ffe082;
327
+
328
+ @keyframes stroke {
329
+ 100% {
330
+ stroke-dashoffset: 0;
331
+ }
325
332
  }/* DO NOT CHANGE!*/
326
333
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
327
- .eds-form-component--radio__container {
328
- display: flex;
329
- justify-content: center;
330
- align-items: center;
331
- position: relative;
334
+ .eds-switch {
332
335
  cursor: pointer;
333
- height: 2rem;
334
- width: -webkit-fit-content;
335
- width: -moz-fit-content;
336
- width: fit-content;
337
336
  -webkit-user-select: none;
338
337
  -moz-user-select: none;
339
338
  -ms-user-select: none;
340
339
  user-select: none;
340
+ padding: 0.5rem 0;
341
+ width: -webkit-fit-content;
342
+ width: -moz-fit-content;
343
+ width: fit-content;
341
344
  }
342
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
343
- border-color: #54568c;
345
+ .eds-switch input {
346
+ opacity: 0;
347
+ pointer-events: none;
348
+ position: absolute;
344
349
  }
345
- .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
346
- background-color: #54568c;
350
+ .eds-switch--right {
351
+ display: flex;
352
+ flex-direction: row;
353
+ align-items: center;
347
354
  }
348
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
349
- border-color: #8285a8;
355
+ .eds-switch--bottom {
356
+ display: flex;
357
+ flex-direction: column;
358
+ align-items: center;
350
359
  }
351
- .eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
352
- background-color: #8285a8;
360
+ .eds-switch__circle {
361
+ border-radius: 50%;
362
+ height: 1.25rem;
363
+ width: 1.25rem;
364
+ content: "";
365
+ display: flex;
366
+ align-items: center;
367
+ justify-content: center;
368
+ transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
369
+ box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
370
+ background-color: #ffffff;
371
+ top: 0.125rem;
372
+ left: 0.125rem;
373
+ position: relative;
353
374
  }
354
- .eds-form-component--radio__container input {
355
- position: absolute;
356
- opacity: 0;
357
- cursor: pointer;
358
- height: 0;
359
- width: 0;
375
+ .eds-switch__switch--large .eds-switch__circle {
376
+ height: 1.75rem;
377
+ width: 1.75rem;
360
378
  }
361
- .eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
362
- height: 0.625rem;
363
- width: 0.625rem;
379
+ .eds-switch .eds-switch__switch svg g,
380
+ .eds-switch .eds-switch__switch path {
381
+ fill: #949494;
382
+ transition: fill ease-in-out 0.1s;
364
383
  }
365
- .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
384
+ .eds-switch__switch {
385
+ position: relative;
386
+ background-color: #d1d3d3;
387
+ content: "";
388
+ display: block;
389
+ transition: background-color 0.1s ease-in-out;
390
+ height: 1.5rem;
391
+ width: 3rem;
392
+ border-radius: 1.5rem;
393
+ }
394
+ .eds-switch--right .eds-switch__switch {
395
+ margin-right: 0.75rem;
396
+ }
397
+ :checked + .eds-switch__switch {
398
+ background-color: var(--eds-switch-color);
399
+ }
400
+ :checked + .eds-switch__switch .eds-switch__circle {
401
+ left: 1.625rem;
402
+ }
403
+ :checked + .eds-switch__switch .eds-switch__circle svg g,
404
+ :checked + .eds-switch__switch .eds-switch__circle path {
405
+ fill: var(--eds-switch-color);
406
+ }
407
+ .eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
408
+ .eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
409
+ fill: var(--eds-switch-color);
410
+ }
411
+ .eds-contrast :checked + .eds-switch__switch {
412
+ background-color: var(--eds-switch-contrast-color);
413
+ }
414
+ :focus + .eds-switch__switch {
366
415
  outline: none;
367
416
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
368
417
  outline-offset: 0.125rem;
369
418
  }
370
- .eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
419
+ .eds-contrast :focus + .eds-switch__switch {
371
420
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
372
421
  }
373
- .eds-form-component--radio__container .eds-form-component--radio__radio {
374
- position: relative;
375
- height: 1.25rem;
376
- width: 1.25rem;
377
- margin-right: 1rem;
378
- background-color: #ffffff;
379
- border: 0.125rem solid #181c56;
380
- border-radius: 50%;
381
- display: flex;
382
- align-items: center;
383
- justify-content: center;
384
- }
385
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
386
- background-color: #181c56;
387
- border-color: #aeb7e2;
422
+ .eds-contrast .eds-switch__switch {
423
+ background-color: #54568c;
388
424
  }
389
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
390
- background: #d1d3d3;
391
- border-color: #d1d3d3;
392
- cursor: not-allowed;
425
+ .eds-switch__switch--large {
426
+ width: 3.75rem;
427
+ height: 2rem;
428
+ border-radius: 3.75rem;
393
429
  }
394
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
395
- border-color: #d1d3d3;
430
+ :checked + .eds-switch__switch--large .eds-switch__circle {
431
+ left: 1.875rem;
396
432
  }
397
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
398
- background: #d1d3d3;
399
- border-color: #d1d3d3;
433
+ .eds-switch__label--large--right {
434
+ font-size: 1rem;
400
435
  }
401
- .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
402
- color: #656782;
436
+ .eds-switch__label--large--bottom {
437
+ font-size: 0.875rem;
403
438
  }
404
- .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
405
- display: block;
406
- width: 0;
407
- height: 0;
408
- border-radius: 50%;
409
- background-color: #181c56;
410
- transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
439
+ .eds-switch__label--medium--right {
440
+ font-size: 0.875rem;
411
441
  }
412
- .eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
413
- background-color: #aeb7e2;
442
+ .eds-switch__label--medium--bottom {
443
+ font-size: 0.75rem;
414
444
  }/* DO NOT CHANGE!*/
415
445
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
416
- .eds-checkbox__container {
417
- display: flex;
418
- align-items: center;
419
- position: relative;
420
- -webkit-appearance: none;
421
- -moz-appearance: none;
422
- appearance: none;
423
- cursor: pointer;
424
- height: 2rem;
425
- -webkit-user-select: none;
426
- -moz-user-select: none;
427
- -ms-user-select: none;
428
- user-select: none;
429
- width: -webkit-fit-content;
430
- width: -moz-fit-content;
431
- width: fit-content;
446
+ .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
447
+ border-color: #181c56;
448
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
432
449
  }
433
- .eds-checkbox__container--reduced-click-area {
434
- height: -webkit-fit-content;
435
- height: -moz-fit-content;
436
- height: fit-content;
450
+ .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
451
+ border-color: #181c56;
452
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
437
453
  }
438
- .eds-checkbox__container input {
454
+ .eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
455
+ border-color: #ffffff;
456
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
457
+ }
458
+ .eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
459
+ border-color: #ffffff;
460
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
461
+ }
462
+ .eds-radio-panel__wrapper input {
439
463
  position: absolute;
440
464
  opacity: 0;
465
+ cursor: pointer;
441
466
  height: 0;
442
467
  width: 0;
443
468
  }
444
- .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
469
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
470
+ border-color: #181c56;
471
+ background: #f5f5f8;
472
+ }
473
+ .eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
474
+ border-color: #aeb7e2;
475
+ background: #393d79;
476
+ }
477
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
445
478
  background-color: #181c56;
479
+ border-color: #181c56;
446
480
  }
447
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
481
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
448
482
  visibility: visible;
449
483
  }
450
- .eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon__path {
451
- stroke: #ffffff;
484
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
485
+ stroke: #5ac39a;
452
486
  -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
453
487
  animation: stroke ease-in-out 0.2s 0.1s forwards;
454
488
  }
455
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
489
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
456
490
  opacity: 0.5;
457
491
  }
458
- .eds-checkbox__container input:checked + .eds-checkbox__icon--disabled .eds-checkbox-icon__path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled .eds-checkbox-icon__path {
492
+ .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
459
493
  opacity: 0.5;
460
494
  }
461
- .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
462
- background: #54568c;
463
- }
464
- .eds-checkbox__container:hover input + .eds-checkbox__icon {
465
- border-color: #54568c;
466
- background: #f3f3f3;
467
- }
468
- .eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
469
- border-color: #656782;
470
- background: #292b6a;
471
- }
472
- .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
473
- .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
495
+ .eds-radio-panel__container {
496
+ background: #ffffff;
497
+ border: 0.125rem solid #d1d3d3;
498
+ border-radius: 0.25rem;
499
+ display: flex;
500
+ flex-direction: column;
501
+ justify-content: flex-start;
502
+ min-width: 20rem;
503
+ position: relative;
504
+ padding: 1rem;
505
+ -webkit-user-select: none;
506
+ -moz-user-select: none;
507
+ -ms-user-select: none;
508
+ user-select: none;
509
+ width: -webkit-fit-content;
510
+ width: -moz-fit-content;
511
+ width: fit-content;
512
+ }
513
+ .eds-contrast .eds-radio-panel__container {
514
+ background: #181c56;
474
515
  border-color: #54568c;
475
- background-color: #54568c;
476
516
  }
477
- .eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
478
- .eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
479
- background: #8285a8;
480
- border-color: #8285a8;
517
+ .eds-radio-panel__title-wrapper {
518
+ display: flex;
519
+ justify-content: space-between;
520
+ align-items: center;
481
521
  }
482
- .eds-checkbox__container:focus + .eds-checkbox__icon,
483
- .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
484
- outline: none;
485
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
486
- outline-offset: 0.125rem;
522
+ .eds-radio-panel__label {
523
+ display: flex;
524
+ justify-content: center;
487
525
  }
488
- .eds-checkbox__container:focus + .eds-checkbox__icon,
489
- .eds-checkbox__container :focus-within + .eds-checkbox__icon {
490
- outline: none;
491
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
492
- outline-offset: 0.125rem;
526
+ .eds-radio-panel__check {
527
+ height: 2rem;
528
+ width: 2rem;
529
+ margin-left: 1rem;
530
+ border-radius: 50%;
531
+ border: 0.125rem solid #e9e9e9;
532
+ display: flex;
533
+ align-items: center;
534
+ justify-content: center;
535
+ background: #ffffff;
536
+ transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
493
537
  }
494
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
495
- .eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
496
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
538
+ .eds-contrast .eds-radio-panel__check {
539
+ background: #181c56;
540
+ border-color: #54568c;
497
541
  }
498
- .eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
499
- .eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
500
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
542
+ .eds-radio-panel__additional-content {
543
+ margin-top: 0.25rem;
544
+ word-wrap: break-word;
501
545
  }
502
- .eds-checkbox--disabled {
503
- pointer-events: none;
546
+ .eds-radio-panel--medium .eds-radio-panel__title {
547
+ font-size: 1rem;
548
+ font-weight: 500;
504
549
  }
505
- .eds-checkbox--disabled .eds-checkbox__label {
506
- opacity: 0.5;
550
+ .eds-radio-panel--medium.eds-radio-panel__container {
551
+ padding-bottom: 1rem;
552
+ min-height: 3.75rem;
507
553
  }
508
- .eds-checkbox--disabled .eds-checkbox__icon {
509
- opacity: 0.5;
554
+ .eds-radio-panel--large.eds-radio-panel__container {
555
+ min-height: 6.5rem;
510
556
  }
511
- .eds-checkbox__icon {
512
- display: inline-flex;
513
- justify-content: center;
514
- align-items: center;
515
- position: relative;
516
- margin-right: 1rem;
517
- height: 1.25rem;
518
- width: 1.25rem;
519
- border: 0.125rem solid #181c56;
520
- border-radius: 0.0625rem;
521
- background-color: transparent;
522
- color: #ffffff;
557
+ .eds-radio-panel--large .eds-radio-panel__title-wrapper {
558
+ height: 2rem;
523
559
  }
524
- .eds-checkbox__icon--reduced-click-area {
525
- margin-right: 0;
560
+ .eds-radio-panel--large .eds-radio-panel__title {
561
+ font-size: 1.25rem;
562
+ font-weight: 500;
563
+ line-height: 1.875rem;
526
564
  }
527
- .eds-contrast .eds-checkbox__icon {
565
+ .eds-radio-panel--disabled {
566
+ background: #f3f3f3;
567
+ border-color: #f3f3f3;
568
+ color: #656782;
569
+ }
570
+ .eds-contrast .eds-radio-panel--disabled {
571
+ background: #181c56;
572
+ border-style: dashed;
528
573
  border-color: #54568c;
574
+ color: #babbcf;
529
575
  }
530
- .eds-checkbox__icon .eds-checkbox-icon {
531
- height: 1rem;
532
- width: 1rem;
533
- visibility: hidden;
576
+
577
+ .eds-checkbox-icon {
578
+ width: 1.5em;
579
+ height: 1.5em;
534
580
  }
535
- .eds-checkbox__icon .eds-checkbox-icon__path {
581
+ .eds-checkbox-icon__path {
536
582
  transform-origin: 50% 50%;
537
583
  stroke-dasharray: 48;
538
584
  stroke-dashoffset: 48;
539
585
  stroke-width: 0.375rem;
540
- }
541
-
542
- @-webkit-keyframes stroke {
543
- 100% {
544
- stroke-dashoffset: 0;
545
- }
546
- }
547
-
548
- @keyframes stroke {
549
- 100% {
550
- stroke-dashoffset: 0;
551
- }
552
586
  }/* DO NOT CHANGE!*/
553
587
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
554
- .eds-switch {
555
- cursor: pointer;
588
+ .eds-input-group {
589
+ color: inherit;
590
+ display: block;
591
+ position: relative;
592
+ }
593
+ .eds-input-group__label {
594
+ color: #656782;
595
+ display: flex;
596
+ font-size: 1rem;
597
+ position: absolute;
598
+ line-height: 1rem;
599
+ height: 3rem;
600
+ padding: 1rem;
601
+ padding-left: 0;
602
+ margin-left: 1rem;
603
+ top: -0.125rem;
604
+ 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;
556
605
  -webkit-user-select: none;
557
606
  -moz-user-select: none;
558
607
  -ms-user-select: none;
559
608
  user-select: none;
560
- padding: 0.5rem 0;
561
- width: -webkit-fit-content;
562
- width: -moz-fit-content;
563
- width: fit-content;
564
- }
565
- .eds-switch input {
566
- opacity: 0;
567
609
  pointer-events: none;
568
- position: absolute;
569
610
  }
570
- .eds-switch--right {
571
- display: flex;
572
- flex-direction: row;
573
- align-items: center;
611
+ .eds-form-control-wrapper--is-filled .eds-input-group__label {
612
+ top: calc(0.5rem - 0.125rem);
613
+ font-size: 0.75rem;
614
+ line-height: 0.75rem;
615
+ height: 10px;
616
+ padding: 0;
617
+ margin-left: 1rem;
574
618
  }
575
- .eds-switch--bottom {
576
- display: flex;
577
- flex-direction: column;
578
- align-items: center;
619
+ .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
620
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
621
+ background: var(--textarea-label-background);
622
+ width: calc( 100% - 1rem - 1rem - 4px );
579
623
  }
580
- .eds-switch__circle {
581
- border-radius: 50%;
582
- height: 1.25rem;
583
- width: 1.25rem;
584
- content: "";
585
- display: flex;
586
- align-items: center;
587
- justify-content: center;
588
- transition: left 0.1s ease-in-out, background-color 0.1s ease-in-out;
589
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
590
- background-color: #ffffff;
591
- top: 0.125rem;
592
- left: 0.125rem;
593
- position: relative;
624
+ .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
625
+ top: 0.5rem;
626
+ font-size: 0.875rem;
627
+ line-height: 1rem;
628
+ padding: 0;
629
+ margin-left: 1rem;
594
630
  }
595
- .eds-switch__switch--large .eds-switch__circle {
596
- height: 1.75rem;
597
- width: 1.75rem;
631
+ .eds-contrast .eds-input-group__label {
632
+ color: #8285a8;
598
633
  }
599
- .eds-switch .eds-switch__switch svg g,
600
- .eds-switch .eds-switch__switch path {
601
- fill: #949494;
602
- transition: fill ease-in-out 0.1s;
634
+ .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
635
+ color: #aeb7e2;
603
636
  }
604
- .eds-switch__switch {
605
- position: relative;
606
- background-color: #d1d3d3;
607
- content: "";
608
- display: block;
609
- transition: background-color 0.1s ease-in-out;
610
- height: 1.5rem;
611
- width: 3rem;
612
- border-radius: 1.5rem;
637
+ .eds-form-control-wrapper--size-large .eds-input-group__label {
638
+ font-size: 1.5rem;
639
+ line-height: 2.25rem;
640
+ height: 4rem;
613
641
  }
614
- .eds-switch--right .eds-switch__switch {
615
- margin-right: 0.75rem;
642
+ .eds-input-group__label--filled {
643
+ top: calc(0.5rem - 0.125rem);
644
+ font-size: 0.75rem;
645
+ line-height: 0.75rem;
646
+ height: 10px;
647
+ padding: 0;
648
+ margin-left: 1rem;
616
649
  }
617
- :checked + .eds-switch__switch {
618
- background-color: var(--eds-switch-color);
650
+ .eds-textarea__label .eds-input-group__label--filled {
651
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
652
+ background: var(--textarea-label-background);
653
+ width: calc( 100% - 1rem - 1rem - 4px );
619
654
  }
620
- :checked + .eds-switch__switch .eds-switch__circle {
621
- left: 1.625rem;
655
+ .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
656
+ top: 0.5rem;
657
+ font-size: 0.875rem;
658
+ line-height: 1rem;
659
+ padding: 0;
660
+ margin-left: 1rem;
622
661
  }
623
- :checked + .eds-switch__switch .eds-switch__circle svg g,
624
- :checked + .eds-switch__switch .eds-switch__circle path {
625
- fill: var(--eds-switch-color);
662
+ .eds-input-group__label-tooltip-icon {
663
+ color: #0082b9;
664
+ padding-left: 0.25rem;
665
+ padding-right: 0.25rem;
666
+ display: flex;
667
+ align-items: center;
668
+ cursor: help;
669
+ font-size: 1rem;
670
+ }
671
+
672
+ .eds-form-control-wrapper[focus-within] .eds-input-group__label {
673
+ top: calc(0.5rem - 0.125rem);
674
+ font-size: 0.75rem;
675
+ line-height: 0.75rem;
676
+ height: 10px;
677
+ padding: 0;
678
+ margin-left: 1rem;
679
+ }
680
+
681
+ .eds-form-control-wrapper:focus-within .eds-input-group__label {
682
+ top: calc(0.5rem - 0.125rem);
683
+ font-size: 0.75rem;
684
+ line-height: 0.75rem;
685
+ height: 10px;
686
+ padding: 0;
687
+ margin-left: 1rem;
626
688
  }
627
- .eds-contrast :checked + .eds-switch__switch .eds-switch__circle svg g,
628
- .eds-contrast :checked + .eds-switch__switch .eds-switch__circle path {
629
- fill: var(--eds-switch-color);
689
+ .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
690
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
691
+ background: var(--textarea-label-background);
692
+ width: calc( 100% - 1rem - 1rem - 4px );
630
693
  }
631
- .eds-contrast :checked + .eds-switch__switch {
632
- background-color: var(--eds-switch-contrast-color);
694
+ .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
695
+ box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
696
+ background: var(--textarea-label-background);
697
+ width: calc( 100% - 1rem - 1rem - 4px );
633
698
  }
634
- :focus + .eds-switch__switch {
635
- outline: none;
636
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
637
- outline-offset: 0.125rem;
699
+ .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
700
+ top: 0.5rem;
701
+ font-size: 0.875rem;
702
+ line-height: 1rem;
703
+ padding: 0;
704
+ margin-left: 1rem;
638
705
  }
639
- .eds-contrast :focus + .eds-switch__switch {
640
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
706
+ .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
707
+ top: 0.5rem;
708
+ font-size: 0.875rem;
709
+ line-height: 1rem;
710
+ padding: 0;
711
+ margin-left: 1rem;
712
+ }/* DO NOT CHANGE!*/
713
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
714
+ .eds-form-control-wrapper {
715
+ --border-color: #181c56;
716
+ --border-color-hover: #aeb7e2;
717
+ align-items: center;
718
+ background-color: #ffffff;
719
+ border-radius: 0.25rem;
720
+ border: 0.125rem solid #d1d3d3;
721
+ box-shadow: 0 0 0 transparent;
722
+ color: #181c56;
723
+ display: flex;
724
+ position: relative;
725
+ width: 100%;
726
+ min-height: 3rem;
727
+ transition: border-color 0.1s ease-in-out;
728
+ --textarea-label-background: $colors-brand-white;
729
+ /*
730
+ Some input controls require a darker design while inside a contrast block.
731
+ These elements require the `--dark` modifier, even on the wrapper.
732
+ */
641
733
  }
642
- .eds-contrast .eds-switch__switch {
643
- background-color: #54568c;
734
+ .eds-contrast .eds-form-control-wrapper {
735
+ --border-color: #aeb7e2;
736
+ background-color: #ffffff;
737
+ border-color: #54568c;
644
738
  }
645
- .eds-switch__switch--large {
646
- width: 3.75rem;
647
- height: 2rem;
648
- border-radius: 3.75rem;
739
+ .eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
740
+ border-color: #181c56;
649
741
  }
650
- :checked + .eds-switch__switch--large .eds-switch__circle {
651
- left: 1.875rem;
742
+ .eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
743
+ border-color: #181c56;
652
744
  }
653
- .eds-switch__label--large--right {
654
- font-size: 1rem;
745
+ .eds-contrast .eds-form-control-wrapper:hover {
746
+ border-color: #aeb7e2;
747
+ background: #ebebf1;
655
748
  }
656
- .eds-switch__label--large--bottom {
657
- font-size: 0.875rem;
749
+ .eds-form-control-wrapper[focus-within] {
750
+ box-shadow: inset 0 0 0 1px var(--border-color);
658
751
  }
659
- .eds-switch__label--medium--right {
660
- font-size: 0.875rem;
752
+ .eds-form-control-wrapper:focus-within {
753
+ box-shadow: inset 0 0 0 1px var(--border-color);
661
754
  }
662
- .eds-switch__label--medium--bottom {
663
- font-size: 0.75rem;
664
- }/* DO NOT CHANGE!*/
665
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
666
- .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
755
+ .eds-contrast .eds-form-control-wrapper[focus-within] {
667
756
  border-color: #181c56;
668
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
757
+ --border-color: #aeb7e2;
758
+ box-shadow: 0 0 0 0.125rem var(--border-color);
669
759
  }
670
- .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
760
+ .eds-contrast .eds-form-control-wrapper:focus-within {
671
761
  border-color: #181c56;
672
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
762
+ --border-color: #aeb7e2;
763
+ box-shadow: 0 0 0 0.125rem var(--border-color);
673
764
  }
674
- .eds-contrast .eds-radio-panel__wrapper[focus-within] .eds-radio-panel__container {
675
- border-color: #ffffff;
676
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
765
+ .eds-form-control-wrapper ::-moz-placeholder {
766
+ color: #656782;
677
767
  }
678
- .eds-contrast .eds-radio-panel__wrapper:focus-within .eds-radio-panel__container {
679
- border-color: #ffffff;
680
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
768
+ .eds-form-control-wrapper :-ms-input-placeholder {
769
+ color: #656782;
681
770
  }
682
- .eds-radio-panel__wrapper input {
683
- position: absolute;
684
- opacity: 0;
685
- cursor: pointer;
686
- height: 0;
687
- width: 0;
771
+ .eds-form-control-wrapper ::placeholder {
772
+ color: #656782;
688
773
  }
689
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
690
- border-color: #181c56;
691
- background: #f5f5f8;
774
+ .eds-form-control-wrapper--disabled {
775
+ background-color: #e9e9e9;
776
+ color: #656782;
777
+ border-color: transparent;
778
+ pointer-events: none;
692
779
  }
693
- .eds-contrast .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container {
694
- border-color: #aeb7e2;
695
- background: #393d79;
780
+ .eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
781
+ display: none;
696
782
  }
697
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check {
698
- background-color: #181c56;
699
- border-color: #181c56;
783
+ .eds-contrast .eds-form-control-wrapper--disabled {
784
+ background: #292b6a;
785
+ border-color: transparent;
786
+ color: #8285a8;
700
787
  }
701
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon {
702
- visibility: visible;
788
+ .eds-form-control-wrapper--readonly {
789
+ pointer-events: none;
790
+ cursor: default;
791
+ border-color: transparent;
792
+ background: #f8f8f8;
793
+ --textarea-label-background: $colors-greys-grey90;
703
794
  }
704
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check .eds-checkbox-icon__path {
705
- stroke: #5ac39a;
706
- -webkit-animation: stroke ease-in-out 0.2s 0.1s forwards;
707
- animation: stroke ease-in-out 0.2s 0.1s forwards;
795
+ .eds-contrast .eds-form-control-wrapper--readonly {
796
+ background: #292b6a;
797
+ --textarea-label-background: $colors-blues-blue10;
798
+ color: #ffffff;
799
+ border-color: transparent;
708
800
  }
709
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled {
710
- opacity: 0.5;
801
+ .eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
802
+ display: none;
711
803
  }
712
- .eds-radio-panel__wrapper input:checked + .eds-radio-panel__container .eds-radio-panel__check--disabled .eds-checkbox-icon__path {
713
- opacity: 0.5;
804
+ .eds-form-control-wrapper--size-medium .eds-form-control,
805
+ .eds-form-control-wrapper--size-medium .eds-form-control__append,
806
+ .eds-form-control-wrapper--size-medium .eds-form-control__prepend {
807
+ font-size: 1rem;
808
+ line-height: 1rem;
714
809
  }
715
- .eds-radio-panel__container {
716
- background: #ffffff;
717
- border: 0.125rem solid #d1d3d3;
718
- border-radius: 0.25rem;
719
- display: flex;
720
- flex-direction: column;
721
- justify-content: flex-start;
722
- min-width: 20rem;
723
- position: relative;
724
- padding: 1rem;
725
- -webkit-user-select: none;
726
- -moz-user-select: none;
727
- -ms-user-select: none;
728
- user-select: none;
729
- width: -webkit-fit-content;
730
- width: -moz-fit-content;
731
- width: fit-content;
810
+ .eds-form-control-wrapper--size-large {
811
+ min-height: 4rem;
812
+ padding: 0 0.5rem;
732
813
  }
733
- .eds-contrast .eds-radio-panel__container {
734
- background: #181c56;
735
- border-color: #54568c;
814
+ .eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
815
+ border-width: 0.25rem;
736
816
  }
737
- .eds-radio-panel__title-wrapper {
738
- display: flex;
739
- justify-content: space-between;
740
- align-items: center;
817
+ .eds-form-control-wrapper--size-large .eds-form-control,
818
+ .eds-form-control-wrapper--size-large .eds-form-control__append,
819
+ .eds-form-control-wrapper--size-large .eds-form-control__prepend {
820
+ font-size: 1.5rem;
821
+ line-height: 2.25rem;
741
822
  }
742
- .eds-radio-panel__label {
743
- display: flex;
744
- justify-content: center;
823
+ .eds-form-control-wrapper--success {
824
+ border-color: #1a8e60;
825
+ --border-color: #1a8e60;
745
826
  }
746
- .eds-radio-panel__check {
747
- height: 2rem;
748
- width: 2rem;
749
- margin-left: 1rem;
750
- border-radius: 50%;
751
- border: 0.125rem solid #e9e9e9;
752
- display: flex;
753
- align-items: center;
754
- justify-content: center;
755
- background: #ffffff;
756
- transition: background ease-in-out 0.1s, border-color ease-in-out 0.1s;
827
+ .eds-form-control-wrapper--success:hover {
828
+ border-color: #5ac39a;
757
829
  }
758
- .eds-contrast .eds-radio-panel__check {
759
- background: #181c56;
760
- border-color: #54568c;
830
+ .eds-form-control-wrapper--success[focus-within] {
831
+ border-color: #1a8e60;
761
832
  }
762
- .eds-radio-panel__additional-content {
763
- margin-top: 0.25rem;
764
- word-wrap: break-word;
833
+ .eds-form-control-wrapper--success:focus-within {
834
+ border-color: #1a8e60;
765
835
  }
766
- .eds-radio-panel--medium .eds-radio-panel__title {
767
- font-size: 1rem;
768
- font-weight: 500;
836
+ .eds-contrast .eds-form-control-wrapper--success {
837
+ border-color: #5ac39a;
838
+ --border-color: #5ac39a;
769
839
  }
770
- .eds-radio-panel--medium.eds-radio-panel__container {
771
- padding-bottom: 1rem;
772
- min-height: 3.75rem;
840
+ .eds-contrast .eds-form-control-wrapper--success:hover {
841
+ border-color: #1a8e60;
773
842
  }
774
- .eds-radio-panel--large.eds-radio-panel__container {
775
- min-height: 6.5rem;
843
+ .eds-contrast .eds-form-control-wrapper--success[focus-within] {
844
+ --border-color: #5ac39a;
845
+ border-color: #181c56;
776
846
  }
777
- .eds-radio-panel--large .eds-radio-panel__title-wrapper {
778
- height: 2rem;
847
+ .eds-contrast .eds-form-control-wrapper--success:focus-within {
848
+ --border-color: #5ac39a;
849
+ border-color: #181c56;
779
850
  }
780
- .eds-radio-panel--large .eds-radio-panel__title {
781
- font-size: 1.25rem;
782
- font-weight: 500;
783
- line-height: 1.875rem;
851
+ .eds-form-control-wrapper--error {
852
+ border-color: #d31b1b;
853
+ --border-color: #d31b1b;
784
854
  }
785
- .eds-radio-panel--disabled {
786
- background: #f3f3f3;
787
- border-color: #f3f3f3;
788
- color: #656782;
855
+ .eds-form-control-wrapper--error:hover {
856
+ border-color: #ff9494;
789
857
  }
790
- .eds-contrast .eds-radio-panel--disabled {
791
- background: #181c56;
792
- border-style: dashed;
793
- border-color: #54568c;
794
- color: #babbcf;
858
+ .eds-form-control-wrapper--error[focus-within] {
859
+ border-color: #d31b1b;
795
860
  }
796
-
797
- .eds-checkbox-icon {
798
- width: 1.5em;
799
- height: 1.5em;
861
+ .eds-form-control-wrapper--error:focus-within {
862
+ border-color: #d31b1b;
800
863
  }
801
- .eds-checkbox-icon__path {
802
- transform-origin: 50% 50%;
803
- stroke-dasharray: 48;
804
- stroke-dashoffset: 48;
805
- stroke-width: 0.375rem;
806
- }/* DO NOT CHANGE!*/
807
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
808
- .eds-input-group {
809
- color: inherit;
810
- display: block;
811
- position: relative;
864
+ .eds-contrast .eds-form-control-wrapper--error {
865
+ border-color: #ff9494;
866
+ --border-color: #ff9494;
812
867
  }
813
- .eds-input-group__label {
814
- color: #656782;
815
- display: flex;
816
- font-size: 1rem;
817
- position: absolute;
818
- line-height: 1rem;
819
- height: 3rem;
820
- padding: 1rem;
821
- padding-left: 0;
822
- margin-left: 1rem;
823
- top: -0.125rem;
824
- 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;
825
- -webkit-user-select: none;
826
- -moz-user-select: none;
827
- -ms-user-select: none;
828
- user-select: none;
829
- pointer-events: none;
868
+ .eds-contrast .eds-form-control-wrapper--error:hover {
869
+ border-color: #d31b1b;
830
870
  }
831
- .eds-form-control-wrapper--is-filled .eds-input-group__label {
832
- top: calc(0.5rem - 0.125rem);
833
- font-size: 0.75rem;
834
- line-height: 0.75rem;
835
- height: 10px;
836
- padding: 0;
837
- margin-left: 1rem;
871
+ .eds-contrast .eds-form-control-wrapper--error[focus-within] {
872
+ border-color: #181c56;
873
+ --border-color: #ff9494;
838
874
  }
839
- .eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
840
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
841
- background: var(--textarea-label-background);
842
- width: calc( 100% - 1rem - 1rem - 4px );
875
+ .eds-contrast .eds-form-control-wrapper--error:focus-within {
876
+ border-color: #181c56;
877
+ --border-color: #ff9494;
843
878
  }
844
- .eds-form-control-wrapper--size-large .eds-form-control-wrapper--is-filled .eds-input-group__label {
845
- top: 0.5rem;
846
- font-size: 0.875rem;
847
- line-height: 1rem;
848
- padding: 0;
849
- margin-left: 1rem;
879
+ .eds-contrast .eds-form-control-wrapper--dark {
880
+ background-color: #181c56;
881
+ color: #ffffff;
850
882
  }
851
- .eds-contrast .eds-input-group__label {
852
- color: #8285a8;
883
+ .eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
884
+ color: #aeb7e2;
853
885
  }
854
- .eds-contrast .eds-form-control-wrapper--dark .eds-input-group__label {
886
+ .eds-contrast .eds-form-control-wrapper--dark :-ms-input-placeholder {
855
887
  color: #aeb7e2;
856
888
  }
857
- .eds-form-control-wrapper--size-large .eds-input-group__label {
858
- font-size: 1.5rem;
859
- line-height: 2.25rem;
860
- height: 4rem;
889
+ .eds-contrast .eds-form-control-wrapper--dark ::placeholder {
890
+ color: #aeb7e2;
861
891
  }
862
- .eds-input-group__label--filled {
863
- top: calc(0.5rem - 0.125rem);
864
- font-size: 0.75rem;
865
- line-height: 0.75rem;
866
- height: 10px;
867
- padding: 0;
868
- margin-left: 1rem;
892
+ .eds-contrast .eds-form-control-wrapper--dark:hover {
893
+ border-color: #aeb7e2;
869
894
  }
870
- .eds-textarea__label .eds-input-group__label--filled {
871
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
872
- background: var(--textarea-label-background);
873
- width: calc( 100% - 1rem - 1rem - 4px );
895
+ .eds-contrast .eds-form-control-wrapper--dark[focus-within] {
896
+ background-color: #292b6a;
897
+ border-color: #aeb7e2;
874
898
  }
875
- .eds-form-control-wrapper--size-large .eds-input-group__label--filled {
876
- top: 0.5rem;
877
- font-size: 0.875rem;
878
- line-height: 1rem;
879
- padding: 0;
880
- margin-left: 1rem;
899
+ .eds-contrast .eds-form-control-wrapper--dark:focus-within {
900
+ background-color: #292b6a;
901
+ border-color: #aeb7e2;
881
902
  }
882
- .eds-input-group__label-tooltip-icon {
883
- color: #0082b9;
884
- padding-left: 0.25rem;
885
- padding-right: 0.25rem;
886
- display: flex;
887
- align-items: center;
888
- cursor: help;
889
- font-size: 1rem;
903
+ .eds-contrast .eds-form-control-wrapper--dark * {
904
+ background-color: transparent;
905
+ color: inherit;
890
906
  }
891
-
892
- .eds-form-control-wrapper[focus-within] .eds-input-group__label {
893
- top: calc(0.5rem - 0.125rem);
894
- font-size: 0.75rem;
895
- line-height: 0.75rem;
896
- height: 10px;
897
- padding: 0;
898
- margin-left: 1rem;
907
+ .eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
908
+ background-color: #292b6a;
909
+ color: #8285a8;
899
910
  }
900
911
 
901
- .eds-form-control-wrapper:focus-within .eds-input-group__label {
902
- top: calc(0.5rem - 0.125rem);
903
- font-size: 0.75rem;
904
- line-height: 0.75rem;
905
- height: 10px;
906
- padding: 0;
907
- margin-left: 1rem;
912
+ .eds-form-control {
913
+ -webkit-appearance: none;
914
+ -moz-appearance: none;
915
+ appearance: none;
916
+ background-color: transparent;
917
+ border: 0;
918
+ color: inherit;
919
+ display: block;
920
+ font-family: inherit;
921
+ line-height: 1rem;
922
+ font-size: 1rem;
923
+ padding: 20px 1rem 0.25rem;
924
+ width: 100%;
908
925
  }
909
- .eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
910
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
911
- background: var(--textarea-label-background);
912
- width: calc( 100% - 1rem - 1rem - 4px );
926
+ .eds-form-control::-moz-placeholder {
927
+ opacity: 0;
928
+ -moz-transition: opacity 0.2s ease-in-out;
929
+ transition: opacity 0.2s ease-in-out;
913
930
  }
914
- .eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
915
- box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
916
- background: var(--textarea-label-background);
917
- width: calc( 100% - 1rem - 1rem - 4px );
931
+ .eds-form-control:-ms-input-placeholder {
932
+ opacity: 0;
933
+ -ms-transition: opacity 0.2s ease-in-out;
934
+ transition: opacity 0.2s ease-in-out;
918
935
  }
919
- .eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
920
- top: 0.5rem;
921
- font-size: 0.875rem;
922
- line-height: 1rem;
923
- padding: 0;
924
- margin-left: 1rem;
936
+ .eds-form-control::placeholder {
937
+ opacity: 0;
938
+ transition: opacity 0.2s ease-in-out;
925
939
  }
926
- .eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
927
- top: 0.5rem;
928
- font-size: 0.875rem;
929
- line-height: 1rem;
930
- padding: 0;
931
- margin-left: 1rem;
932
- }/* DO NOT CHANGE!*/
933
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
934
- .eds-textfield__clear-button {
935
- background: none;
936
- border: none;
937
- border-radius: 50%;
938
- color: inherit;
939
- cursor: pointer;
940
- display: flex;
941
- font: inherit;
942
- font-size: 1rem;
943
- line-height: 1rem;
944
- padding: 0.5rem;
945
- margin-right: -0.75rem;
940
+ .eds-form-control:focus {
941
+ outline: none;
946
942
  }
947
- .eds-textfield__clear-button-wrapper {
948
- display: flex;
949
- align-items: center;
943
+ .eds-form-control:focus::-moz-placeholder {
944
+ opacity: 1;
950
945
  }
951
- .eds-textfield__clear-button:hover {
952
- background: #f3f3f3;
946
+ .eds-form-control:focus:-ms-input-placeholder {
947
+ opacity: 1;
953
948
  }
954
- .eds-textfield__clear-button:focus {
955
- outline: none;
956
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
949
+ .eds-form-control:focus::placeholder {
950
+ opacity: 1;
957
951
  }
958
-
959
- .eds-textfield__divider {
960
- content: "";
961
- display: block;
962
- background-color: #e9e9e9;
963
- height: 1.5rem;
964
- width: 1px;
952
+ .eds-form-control__prepend, .eds-form-control__append {
953
+ position: relative;
954
+ margin: 0 1rem;
955
+ line-height: inherit;
965
956
  }
966
- .eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
967
- background-color: #8285a8;
968
- }/* DO NOT CHANGE!*/
969
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
970
- .eds-segmented-control {
971
- margin-top: 0.25rem;
972
- display: flex;
973
- background: #d1d4e3;
974
- border-radius: 0.25rem;
957
+ .eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
958
+ position: static;
975
959
  }
976
- .eds-contrast .eds-segmented-control {
977
- background: #393d79;
960
+ .eds-form-control__prepend svg, .eds-form-control__append svg {
961
+ top: 0.125rem;
962
+ }
963
+ .eds-form-control__prepend {
964
+ margin-right: 0;
965
+ }
966
+ .eds-form-control__append {
967
+ margin-left: 0;
978
968
  }/* DO NOT CHANGE!*/
979
969
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
980
970
  .eds-segmented-choice {
@@ -1044,4 +1034,14 @@ textarea.eds-form-control.eds-textarea {
1044
1034
  }
1045
1035
  .eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
1046
1036
  --background-color: #d1d4e3;
1037
+ }/* DO NOT CHANGE!*/
1038
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
1039
+ .eds-segmented-control {
1040
+ margin-top: 0.25rem;
1041
+ display: flex;
1042
+ background: #d1d4e3;
1043
+ border-radius: 0.25rem;
1044
+ }
1045
+ .eds-contrast .eds-segmented-control {
1046
+ background: #393d79;
1047
1047
  }