@entur/form 5.4.1 → 5.4.2

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