@entur/form 8.0.2 → 8.1.0-RC.1
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.
- package/dist/BaseFormControl.d.ts +2 -0
- package/dist/TextArea.d.ts +9 -0
- package/dist/TextField.d.ts +9 -0
- package/dist/form.cjs.development.js +14 -4
- package/dist/form.cjs.development.js.map +1 -1
- package/dist/form.cjs.production.min.js +1 -1
- package/dist/form.cjs.production.min.js.map +1 -1
- package/dist/form.esm.js +14 -4
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +455 -455
- package/package.json +6 -6
package/dist/styles.css
CHANGED
|
@@ -1,3 +1,236 @@
|
|
|
1
|
+
.eds-fieldset {
|
|
2
|
+
margin: 0;
|
|
3
|
+
padding: 0;
|
|
4
|
+
border: 0;
|
|
5
|
+
}
|
|
6
|
+
/* DO NOT CHANGE!*/
|
|
7
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
8
|
+
.eds-feedback-text {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
margin-top: 0.25rem;
|
|
12
|
+
}
|
|
13
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
14
|
+
padding-left: calc(1rem + 0.125rem);
|
|
15
|
+
}
|
|
16
|
+
.eds-feedback-text__text {
|
|
17
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
18
|
+
}
|
|
19
|
+
.eds-contrast .eds-feedback-text__text {
|
|
20
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.eds-feedback-text__icon {
|
|
24
|
+
font-size: 1.5rem;
|
|
25
|
+
min-height: 1.5rem;
|
|
26
|
+
min-width: 1.5rem;
|
|
27
|
+
padding-right: 0.5rem;
|
|
28
|
+
position: relative;
|
|
29
|
+
top: -0.1rem;
|
|
30
|
+
}
|
|
31
|
+
.eds-feedback-text__icon--success {
|
|
32
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
33
|
+
}
|
|
34
|
+
.eds-feedback-text__icon--success circle {
|
|
35
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
36
|
+
}
|
|
37
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
38
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
39
|
+
}
|
|
40
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
41
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
42
|
+
}
|
|
43
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
44
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
45
|
+
}
|
|
46
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
47
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
48
|
+
}
|
|
49
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
50
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
51
|
+
}
|
|
52
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
53
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
54
|
+
}
|
|
55
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
56
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
57
|
+
}
|
|
58
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
59
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
60
|
+
}
|
|
61
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
62
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
63
|
+
}
|
|
64
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
65
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
66
|
+
}
|
|
67
|
+
.eds-feedback-text__icon--warning {
|
|
68
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
69
|
+
}
|
|
70
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
71
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
72
|
+
}
|
|
73
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
74
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
75
|
+
}
|
|
76
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
77
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
78
|
+
}
|
|
79
|
+
/* DO NOT CHANGE!*/
|
|
80
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
81
|
+
.eds-checkbox__container {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
position: relative;
|
|
85
|
+
-webkit-appearance: none;
|
|
86
|
+
-moz-appearance: none;
|
|
87
|
+
appearance: none;
|
|
88
|
+
cursor: pointer;
|
|
89
|
+
-webkit-user-select: none;
|
|
90
|
+
-moz-user-select: none;
|
|
91
|
+
user-select: none;
|
|
92
|
+
width: -moz-fit-content;
|
|
93
|
+
width: fit-content;
|
|
94
|
+
margin: 0.5rem 0;
|
|
95
|
+
}
|
|
96
|
+
.eds-checkbox__container--reduced-click-area {
|
|
97
|
+
height: -moz-fit-content;
|
|
98
|
+
height: fit-content;
|
|
99
|
+
}
|
|
100
|
+
.eds-checkbox__container input {
|
|
101
|
+
position: absolute;
|
|
102
|
+
opacity: 0;
|
|
103
|
+
height: 0;
|
|
104
|
+
width: 0;
|
|
105
|
+
}
|
|
106
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
107
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
108
|
+
}
|
|
109
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
110
|
+
visibility: visible;
|
|
111
|
+
}
|
|
112
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
113
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
114
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
115
|
+
}
|
|
116
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
117
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
118
|
+
}
|
|
119
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
120
|
+
opacity: 0.5;
|
|
121
|
+
}
|
|
122
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
123
|
+
opacity: 0.5;
|
|
124
|
+
}
|
|
125
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
126
|
+
opacity: 0.5;
|
|
127
|
+
}
|
|
128
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
129
|
+
opacity: 0.5;
|
|
130
|
+
}
|
|
131
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
132
|
+
opacity: 0.5;
|
|
133
|
+
}
|
|
134
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
135
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
136
|
+
}
|
|
137
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
138
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
139
|
+
}
|
|
140
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
141
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
142
|
+
}
|
|
143
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
144
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
145
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
146
|
+
}
|
|
147
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
148
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
149
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
150
|
+
}
|
|
151
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
152
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
153
|
+
border-color: transparent;
|
|
154
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
155
|
+
}
|
|
156
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
157
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
158
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
159
|
+
}
|
|
160
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
161
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
162
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
163
|
+
}
|
|
164
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
165
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
166
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
167
|
+
}
|
|
168
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
169
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
170
|
+
outline: 2px solid #181c56;
|
|
171
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
172
|
+
outline-offset: 0.125rem;
|
|
173
|
+
}
|
|
174
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
175
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
176
|
+
outline: 2px solid #181c56;
|
|
177
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
178
|
+
outline-offset: 0.125rem;
|
|
179
|
+
}
|
|
180
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
181
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
182
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
183
|
+
}
|
|
184
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
185
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
186
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
187
|
+
}
|
|
188
|
+
.eds-checkbox--disabled {
|
|
189
|
+
pointer-events: none;
|
|
190
|
+
}
|
|
191
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
192
|
+
opacity: 0.5;
|
|
193
|
+
}
|
|
194
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
195
|
+
opacity: 0.5;
|
|
196
|
+
}
|
|
197
|
+
.eds-checkbox__icon {
|
|
198
|
+
box-sizing: border-box;
|
|
199
|
+
display: inline-flex;
|
|
200
|
+
justify-content: center;
|
|
201
|
+
align-items: center;
|
|
202
|
+
position: relative;
|
|
203
|
+
margin-right: 1rem;
|
|
204
|
+
height: 1.25rem;
|
|
205
|
+
width: 1.25rem;
|
|
206
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
207
|
+
border-radius: 0.125rem;
|
|
208
|
+
background-color: transparent;
|
|
209
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
210
|
+
}
|
|
211
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
212
|
+
margin-right: 0;
|
|
213
|
+
}
|
|
214
|
+
.eds-contrast .eds-checkbox__icon {
|
|
215
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
216
|
+
}
|
|
217
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
218
|
+
height: 1rem;
|
|
219
|
+
width: 1rem;
|
|
220
|
+
visibility: hidden;
|
|
221
|
+
}
|
|
222
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
223
|
+
transform-origin: 50% 50%;
|
|
224
|
+
stroke-dasharray: 48;
|
|
225
|
+
stroke-dashoffset: 48;
|
|
226
|
+
stroke-width: 0.375rem;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@keyframes stroke {
|
|
230
|
+
100% {
|
|
231
|
+
stroke-dashoffset: 0;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
1
234
|
/* DO NOT CHANGE!*/
|
|
2
235
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
236
|
.eds-form-control__field-and-feedback-text {
|
|
@@ -207,204 +440,25 @@
|
|
|
207
440
|
margin-right: 0;
|
|
208
441
|
margin-left: 0.75rem;
|
|
209
442
|
}
|
|
210
|
-
.eds-fieldset {
|
|
211
|
-
margin: 0;
|
|
212
|
-
padding: 0;
|
|
213
|
-
border: 0;
|
|
214
|
-
}
|
|
215
443
|
/* DO NOT CHANGE!*/
|
|
216
444
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
217
|
-
.eds-
|
|
445
|
+
.eds-switch {
|
|
446
|
+
cursor: pointer;
|
|
447
|
+
-webkit-user-select: none;
|
|
448
|
+
-moz-user-select: none;
|
|
449
|
+
user-select: none;
|
|
450
|
+
padding: 0.5rem 0;
|
|
451
|
+
width: -moz-fit-content;
|
|
452
|
+
width: fit-content;
|
|
453
|
+
}
|
|
454
|
+
.eds-switch input {
|
|
455
|
+
opacity: 0;
|
|
456
|
+
pointer-events: none;
|
|
457
|
+
position: absolute;
|
|
458
|
+
}
|
|
459
|
+
.eds-switch--right {
|
|
218
460
|
display: flex;
|
|
219
|
-
|
|
220
|
-
margin-top: 0.25rem;
|
|
221
|
-
}
|
|
222
|
-
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
223
|
-
padding-left: calc(1rem + 0.125rem);
|
|
224
|
-
}
|
|
225
|
-
.eds-feedback-text__text {
|
|
226
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
227
|
-
}
|
|
228
|
-
.eds-contrast .eds-feedback-text__text {
|
|
229
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.eds-feedback-text__icon {
|
|
233
|
-
font-size: 1.5rem;
|
|
234
|
-
min-height: 1.5rem;
|
|
235
|
-
min-width: 1.5rem;
|
|
236
|
-
padding-right: 0.5rem;
|
|
237
|
-
position: relative;
|
|
238
|
-
top: -0.1rem;
|
|
239
|
-
}
|
|
240
|
-
.eds-feedback-text__icon--success {
|
|
241
|
-
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
242
|
-
}
|
|
243
|
-
.eds-feedback-text__icon--success circle {
|
|
244
|
-
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
245
|
-
}
|
|
246
|
-
.eds-contrast .eds-feedback-text__icon--success {
|
|
247
|
-
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
248
|
-
}
|
|
249
|
-
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
250
|
-
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
251
|
-
}
|
|
252
|
-
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
253
|
-
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
254
|
-
}
|
|
255
|
-
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
256
|
-
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
257
|
-
}
|
|
258
|
-
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
259
|
-
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
260
|
-
}
|
|
261
|
-
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
262
|
-
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
263
|
-
}
|
|
264
|
-
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
265
|
-
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
266
|
-
}
|
|
267
|
-
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
268
|
-
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
269
|
-
}
|
|
270
|
-
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
271
|
-
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
272
|
-
}
|
|
273
|
-
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
274
|
-
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
275
|
-
}
|
|
276
|
-
.eds-feedback-text__icon--warning {
|
|
277
|
-
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
278
|
-
}
|
|
279
|
-
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
280
|
-
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
281
|
-
}
|
|
282
|
-
.eds-contrast .eds-feedback-text__icon--warning {
|
|
283
|
-
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
284
|
-
}
|
|
285
|
-
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
286
|
-
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
287
|
-
}
|
|
288
|
-
/* DO NOT CHANGE!*/
|
|
289
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
290
|
-
.eds-input-group {
|
|
291
|
-
color: inherit;
|
|
292
|
-
display: block;
|
|
293
|
-
position: relative;
|
|
294
|
-
}
|
|
295
|
-
.eds-input-group__label {
|
|
296
|
-
color: var(--components-form-baseform-standard-text-label);
|
|
297
|
-
display: flex;
|
|
298
|
-
font-size: 1rem;
|
|
299
|
-
position: absolute;
|
|
300
|
-
line-height: 1rem;
|
|
301
|
-
height: 3rem;
|
|
302
|
-
padding-left: 0;
|
|
303
|
-
top: 1rem;
|
|
304
|
-
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;
|
|
305
|
-
-webkit-user-select: none;
|
|
306
|
-
-moz-user-select: none;
|
|
307
|
-
user-select: none;
|
|
308
|
-
pointer-events: none;
|
|
309
|
-
}
|
|
310
|
-
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
311
|
-
top: 0.375rem;
|
|
312
|
-
font-size: 0.75rem;
|
|
313
|
-
line-height: 0.75rem;
|
|
314
|
-
height: 10px;
|
|
315
|
-
padding: 0;
|
|
316
|
-
}
|
|
317
|
-
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
318
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
319
|
-
background: var(--textarea-label-background);
|
|
320
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
321
|
-
}
|
|
322
|
-
.eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
323
|
-
top: 0.5rem;
|
|
324
|
-
font-size: 0.875rem;
|
|
325
|
-
line-height: 1rem;
|
|
326
|
-
padding: 0;
|
|
327
|
-
}
|
|
328
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
329
|
-
top: 0.75rem;
|
|
330
|
-
font-size: 1.5rem;
|
|
331
|
-
line-height: 2.25rem;
|
|
332
|
-
}
|
|
333
|
-
.eds-input-group__label--filled {
|
|
334
|
-
top: 0.375rem;
|
|
335
|
-
font-size: 0.75rem;
|
|
336
|
-
line-height: 0.75rem;
|
|
337
|
-
height: 10px;
|
|
338
|
-
padding: 0;
|
|
339
|
-
}
|
|
340
|
-
.eds-textarea__label .eds-input-group__label--filled {
|
|
341
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
342
|
-
background: var(--textarea-label-background);
|
|
343
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
344
|
-
}
|
|
345
|
-
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
346
|
-
top: 0.5rem;
|
|
347
|
-
font-size: 0.875rem;
|
|
348
|
-
line-height: 1rem;
|
|
349
|
-
padding: 0;
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
353
|
-
top: 0.375rem;
|
|
354
|
-
font-size: 0.75rem;
|
|
355
|
-
line-height: 0.75rem;
|
|
356
|
-
height: 10px;
|
|
357
|
-
padding: 0;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
361
|
-
top: 0.375rem;
|
|
362
|
-
font-size: 0.75rem;
|
|
363
|
-
line-height: 0.75rem;
|
|
364
|
-
height: 10px;
|
|
365
|
-
padding: 0;
|
|
366
|
-
}
|
|
367
|
-
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
368
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
369
|
-
background: var(--textarea-label-background);
|
|
370
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
371
|
-
}
|
|
372
|
-
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
373
|
-
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
374
|
-
background: var(--textarea-label-background);
|
|
375
|
-
width: calc(100% - 1rem - 1rem - 4px);
|
|
376
|
-
}
|
|
377
|
-
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
378
|
-
top: 0.5rem;
|
|
379
|
-
font-size: 0.875rem;
|
|
380
|
-
line-height: 1rem;
|
|
381
|
-
padding: 0;
|
|
382
|
-
}
|
|
383
|
-
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
384
|
-
top: 0.5rem;
|
|
385
|
-
font-size: 0.875rem;
|
|
386
|
-
line-height: 1rem;
|
|
387
|
-
padding: 0;
|
|
388
|
-
}
|
|
389
|
-
/* DO NOT CHANGE!*/
|
|
390
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
391
|
-
.eds-switch {
|
|
392
|
-
cursor: pointer;
|
|
393
|
-
-webkit-user-select: none;
|
|
394
|
-
-moz-user-select: none;
|
|
395
|
-
user-select: none;
|
|
396
|
-
padding: 0.5rem 0;
|
|
397
|
-
width: -moz-fit-content;
|
|
398
|
-
width: fit-content;
|
|
399
|
-
}
|
|
400
|
-
.eds-switch input {
|
|
401
|
-
opacity: 0;
|
|
402
|
-
pointer-events: none;
|
|
403
|
-
position: absolute;
|
|
404
|
-
}
|
|
405
|
-
.eds-switch--right {
|
|
406
|
-
display: flex;
|
|
407
|
-
flex-direction: row;
|
|
461
|
+
flex-direction: row;
|
|
408
462
|
align-items: center;
|
|
409
463
|
}
|
|
410
464
|
.eds-switch--bottom {
|
|
@@ -471,276 +525,121 @@
|
|
|
471
525
|
fill: var(--eds-switch-color);
|
|
472
526
|
}
|
|
473
527
|
.eds-contrast :checked + .eds-switch__switch {
|
|
474
|
-
background-color: var(--eds-switch-contrast-color);
|
|
475
|
-
}
|
|
476
|
-
:focus + .eds-switch__switch {
|
|
477
|
-
outline: 2px solid #181c56;
|
|
478
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
479
|
-
outline-offset: 0.125rem;
|
|
480
|
-
}
|
|
481
|
-
.eds-contrast :focus + .eds-switch__switch {
|
|
482
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
483
|
-
}
|
|
484
|
-
.eds-switch__switch--large {
|
|
485
|
-
width: 3.75rem;
|
|
486
|
-
height: 2rem;
|
|
487
|
-
border-radius: 3.75rem;
|
|
488
|
-
}
|
|
489
|
-
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
490
|
-
left: 1.875rem;
|
|
491
|
-
}
|
|
492
|
-
.eds-switch__switch--large svg {
|
|
493
|
-
position: relative;
|
|
494
|
-
right: 0.05rem;
|
|
495
|
-
}
|
|
496
|
-
.eds-switch__label--large--right {
|
|
497
|
-
font-size: 1rem;
|
|
498
|
-
}
|
|
499
|
-
.eds-switch__label--large--bottom {
|
|
500
|
-
font-size: 0.875rem;
|
|
501
|
-
}
|
|
502
|
-
.eds-switch__label--medium--right {
|
|
503
|
-
font-size: 0.875rem;
|
|
504
|
-
}
|
|
505
|
-
.eds-switch__label--medium--bottom {
|
|
506
|
-
font-size: 0.75rem;
|
|
507
|
-
}
|
|
508
|
-
/* DO NOT CHANGE!*/
|
|
509
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
510
|
-
.eds-form-component--radio__container {
|
|
511
|
-
display: flex;
|
|
512
|
-
justify-content: center;
|
|
513
|
-
align-items: center;
|
|
514
|
-
position: relative;
|
|
515
|
-
cursor: pointer;
|
|
516
|
-
height: 2rem;
|
|
517
|
-
width: -moz-fit-content;
|
|
518
|
-
width: fit-content;
|
|
519
|
-
-webkit-user-select: none;
|
|
520
|
-
-moz-user-select: none;
|
|
521
|
-
user-select: none;
|
|
522
|
-
}
|
|
523
|
-
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
524
|
-
background-color: var(--components-form-radio-standard-fill-hover);
|
|
525
|
-
}
|
|
526
|
-
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
527
|
-
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
528
|
-
}
|
|
529
|
-
.eds-form-component--radio__container input {
|
|
530
|
-
position: absolute;
|
|
531
|
-
opacity: 0;
|
|
532
|
-
cursor: pointer;
|
|
533
|
-
height: 0;
|
|
534
|
-
width: 0;
|
|
535
|
-
}
|
|
536
|
-
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
537
|
-
height: 0.625rem;
|
|
538
|
-
width: 0.625rem;
|
|
539
|
-
}
|
|
540
|
-
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
541
|
-
outline: 2px solid #181c56;
|
|
542
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
543
|
-
outline-offset: 0.125rem;
|
|
544
|
-
}
|
|
545
|
-
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
546
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
547
|
-
}
|
|
548
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
549
|
-
position: relative;
|
|
550
|
-
height: 1.25rem;
|
|
551
|
-
width: 1.25rem;
|
|
552
|
-
margin-right: 1rem;
|
|
553
|
-
background-color: var(--components-form-radio-standard-fill-default);
|
|
554
|
-
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
555
|
-
border-radius: 50%;
|
|
556
|
-
display: flex;
|
|
557
|
-
align-items: center;
|
|
558
|
-
justify-content: center;
|
|
559
|
-
}
|
|
560
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
561
|
-
background-color: var(--components-form-radio-contrast-fill-default);
|
|
562
|
-
border-color: var(--components-form-radio-contrast-border);
|
|
563
|
-
}
|
|
564
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
565
|
-
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
566
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
567
|
-
cursor: not-allowed;
|
|
568
|
-
}
|
|
569
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
570
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
571
|
-
}
|
|
572
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
573
|
-
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
574
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
575
|
-
}
|
|
576
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
577
|
-
color: var(--components-form-baseform-contrast-text-disabled);
|
|
578
|
-
}
|
|
579
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
580
|
-
display: block;
|
|
581
|
-
width: 0;
|
|
582
|
-
height: 0;
|
|
583
|
-
border-radius: 50%;
|
|
584
|
-
background-color: var(--components-form-radio-standard-fill-selected);
|
|
585
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
586
|
-
}
|
|
587
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
588
|
-
background-color: var(--components-form-radio-contrast-icon);
|
|
589
|
-
}
|
|
590
|
-
/* DO NOT CHANGE!*/
|
|
591
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
592
|
-
.eds-checkbox__container {
|
|
593
|
-
display: flex;
|
|
594
|
-
align-items: center;
|
|
595
|
-
position: relative;
|
|
596
|
-
-webkit-appearance: none;
|
|
597
|
-
-moz-appearance: none;
|
|
598
|
-
appearance: none;
|
|
599
|
-
cursor: pointer;
|
|
600
|
-
-webkit-user-select: none;
|
|
601
|
-
-moz-user-select: none;
|
|
602
|
-
user-select: none;
|
|
603
|
-
width: -moz-fit-content;
|
|
604
|
-
width: fit-content;
|
|
605
|
-
margin: 0.5rem 0;
|
|
606
|
-
}
|
|
607
|
-
.eds-checkbox__container--reduced-click-area {
|
|
608
|
-
height: -moz-fit-content;
|
|
609
|
-
height: fit-content;
|
|
610
|
-
}
|
|
611
|
-
.eds-checkbox__container input {
|
|
612
|
-
position: absolute;
|
|
613
|
-
opacity: 0;
|
|
614
|
-
height: 0;
|
|
615
|
-
width: 0;
|
|
616
|
-
}
|
|
617
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
618
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
619
|
-
}
|
|
620
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
621
|
-
visibility: visible;
|
|
622
|
-
}
|
|
623
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
624
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
625
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
626
|
-
}
|
|
627
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
628
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
629
|
-
}
|
|
630
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
631
|
-
opacity: 0.5;
|
|
632
|
-
}
|
|
633
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
634
|
-
opacity: 0.5;
|
|
635
|
-
}
|
|
636
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
637
|
-
opacity: 0.5;
|
|
638
|
-
}
|
|
639
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
640
|
-
opacity: 0.5;
|
|
641
|
-
}
|
|
642
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
643
|
-
opacity: 0.5;
|
|
644
|
-
}
|
|
645
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
646
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
647
|
-
}
|
|
648
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
649
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
650
|
-
}
|
|
651
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
652
|
-
fill: var(--components-form-checkbox-contrast-icon);
|
|
653
|
-
}
|
|
654
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
655
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
656
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
657
|
-
}
|
|
658
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
659
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
660
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
661
|
-
}
|
|
662
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
663
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
664
|
-
border-color: transparent;
|
|
665
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
666
|
-
}
|
|
667
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
668
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
669
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
670
|
-
}
|
|
671
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
672
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
673
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
674
|
-
}
|
|
675
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
676
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
677
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
678
|
-
}
|
|
679
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
680
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
681
|
-
outline: 2px solid #181c56;
|
|
682
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
683
|
-
outline-offset: 0.125rem;
|
|
528
|
+
background-color: var(--eds-switch-contrast-color);
|
|
684
529
|
}
|
|
685
|
-
|
|
686
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
530
|
+
:focus + .eds-switch__switch {
|
|
687
531
|
outline: 2px solid #181c56;
|
|
688
532
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
689
533
|
outline-offset: 0.125rem;
|
|
690
534
|
}
|
|
691
|
-
.eds-contrast
|
|
692
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
535
|
+
.eds-contrast :focus + .eds-switch__switch {
|
|
693
536
|
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
694
537
|
}
|
|
695
|
-
.eds-
|
|
696
|
-
|
|
697
|
-
|
|
538
|
+
.eds-switch__switch--large {
|
|
539
|
+
width: 3.75rem;
|
|
540
|
+
height: 2rem;
|
|
541
|
+
border-radius: 3.75rem;
|
|
698
542
|
}
|
|
699
|
-
.eds-
|
|
700
|
-
|
|
543
|
+
:checked + .eds-switch__switch--large .eds-switch__circle {
|
|
544
|
+
left: 1.875rem;
|
|
701
545
|
}
|
|
702
|
-
.eds-
|
|
703
|
-
|
|
546
|
+
.eds-switch__switch--large svg {
|
|
547
|
+
position: relative;
|
|
548
|
+
right: 0.05rem;
|
|
704
549
|
}
|
|
705
|
-
.eds-
|
|
706
|
-
|
|
550
|
+
.eds-switch__label--large--right {
|
|
551
|
+
font-size: 1rem;
|
|
707
552
|
}
|
|
708
|
-
.eds-
|
|
709
|
-
|
|
710
|
-
|
|
553
|
+
.eds-switch__label--large--bottom {
|
|
554
|
+
font-size: 0.875rem;
|
|
555
|
+
}
|
|
556
|
+
.eds-switch__label--medium--right {
|
|
557
|
+
font-size: 0.875rem;
|
|
558
|
+
}
|
|
559
|
+
.eds-switch__label--medium--bottom {
|
|
560
|
+
font-size: 0.75rem;
|
|
561
|
+
}
|
|
562
|
+
/* DO NOT CHANGE!*/
|
|
563
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
564
|
+
.eds-form-component--radio__container {
|
|
565
|
+
display: flex;
|
|
711
566
|
justify-content: center;
|
|
712
567
|
align-items: center;
|
|
713
568
|
position: relative;
|
|
714
|
-
|
|
569
|
+
cursor: pointer;
|
|
570
|
+
height: 2rem;
|
|
571
|
+
width: -moz-fit-content;
|
|
572
|
+
width: fit-content;
|
|
573
|
+
-webkit-user-select: none;
|
|
574
|
+
-moz-user-select: none;
|
|
575
|
+
user-select: none;
|
|
576
|
+
}
|
|
577
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
578
|
+
background-color: var(--components-form-radio-standard-fill-hover);
|
|
579
|
+
}
|
|
580
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
581
|
+
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
582
|
+
}
|
|
583
|
+
.eds-form-component--radio__container input {
|
|
584
|
+
position: absolute;
|
|
585
|
+
opacity: 0;
|
|
586
|
+
cursor: pointer;
|
|
587
|
+
height: 0;
|
|
588
|
+
width: 0;
|
|
589
|
+
}
|
|
590
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
591
|
+
height: 0.625rem;
|
|
592
|
+
width: 0.625rem;
|
|
593
|
+
}
|
|
594
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
595
|
+
outline: 2px solid #181c56;
|
|
596
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
597
|
+
outline-offset: 0.125rem;
|
|
598
|
+
}
|
|
599
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
600
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
601
|
+
}
|
|
602
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
603
|
+
position: relative;
|
|
715
604
|
height: 1.25rem;
|
|
716
605
|
width: 1.25rem;
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
606
|
+
margin-right: 1rem;
|
|
607
|
+
background-color: var(--components-form-radio-standard-fill-default);
|
|
608
|
+
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
609
|
+
border-radius: 50%;
|
|
610
|
+
display: flex;
|
|
611
|
+
align-items: center;
|
|
612
|
+
justify-content: center;
|
|
721
613
|
}
|
|
722
|
-
.eds-
|
|
723
|
-
|
|
614
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
615
|
+
background-color: var(--components-form-radio-contrast-fill-default);
|
|
616
|
+
border-color: var(--components-form-radio-contrast-border);
|
|
724
617
|
}
|
|
725
|
-
.eds-
|
|
726
|
-
|
|
618
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
619
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
620
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
621
|
+
cursor: not-allowed;
|
|
727
622
|
}
|
|
728
|
-
.eds-
|
|
729
|
-
|
|
730
|
-
width: 1rem;
|
|
731
|
-
visibility: hidden;
|
|
623
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
624
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
732
625
|
}
|
|
733
|
-
.eds-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
stroke-dashoffset: 48;
|
|
737
|
-
stroke-width: 0.375rem;
|
|
626
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
627
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
628
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
738
629
|
}
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
630
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
631
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
632
|
+
}
|
|
633
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
634
|
+
display: block;
|
|
635
|
+
width: 0;
|
|
636
|
+
height: 0;
|
|
637
|
+
border-radius: 50%;
|
|
638
|
+
background-color: var(--components-form-radio-standard-fill-selected);
|
|
639
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
640
|
+
}
|
|
641
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
642
|
+
background-color: var(--components-form-radio-contrast-icon);
|
|
744
643
|
}
|
|
745
644
|
/* DO NOT CHANGE!*/
|
|
746
645
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -900,6 +799,107 @@ input:disabled + .eds-input-panel__container {
|
|
|
900
799
|
}
|
|
901
800
|
/* DO NOT CHANGE!*/
|
|
902
801
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
802
|
+
.eds-input-group {
|
|
803
|
+
color: inherit;
|
|
804
|
+
display: block;
|
|
805
|
+
position: relative;
|
|
806
|
+
}
|
|
807
|
+
.eds-input-group__label {
|
|
808
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
809
|
+
display: flex;
|
|
810
|
+
font-size: 1rem;
|
|
811
|
+
position: absolute;
|
|
812
|
+
line-height: 1rem;
|
|
813
|
+
height: 3rem;
|
|
814
|
+
padding-left: 0;
|
|
815
|
+
top: 1rem;
|
|
816
|
+
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;
|
|
817
|
+
-webkit-user-select: none;
|
|
818
|
+
-moz-user-select: none;
|
|
819
|
+
user-select: none;
|
|
820
|
+
pointer-events: none;
|
|
821
|
+
}
|
|
822
|
+
.eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
823
|
+
top: 0.375rem;
|
|
824
|
+
font-size: 0.75rem;
|
|
825
|
+
line-height: 0.75rem;
|
|
826
|
+
height: 10px;
|
|
827
|
+
padding: 0;
|
|
828
|
+
}
|
|
829
|
+
.eds-textarea__label .eds-form-control-wrapper--is-filled .eds-input-group__label {
|
|
830
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
831
|
+
background: var(--textarea-label-background);
|
|
832
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
833
|
+
}
|
|
834
|
+
.eds-form-control-wrapper--is-filled.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
835
|
+
top: 0.5rem;
|
|
836
|
+
font-size: 0.875rem;
|
|
837
|
+
line-height: 1rem;
|
|
838
|
+
padding: 0;
|
|
839
|
+
}
|
|
840
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label {
|
|
841
|
+
top: 0.75rem;
|
|
842
|
+
font-size: 1.5rem;
|
|
843
|
+
line-height: 2.25rem;
|
|
844
|
+
}
|
|
845
|
+
.eds-input-group__label--filled {
|
|
846
|
+
top: 0.375rem;
|
|
847
|
+
font-size: 0.75rem;
|
|
848
|
+
line-height: 0.75rem;
|
|
849
|
+
height: 10px;
|
|
850
|
+
padding: 0;
|
|
851
|
+
}
|
|
852
|
+
.eds-textarea__label .eds-input-group__label--filled {
|
|
853
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
854
|
+
background: var(--textarea-label-background);
|
|
855
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
856
|
+
}
|
|
857
|
+
.eds-form-control-wrapper--size-large .eds-input-group__label--filled {
|
|
858
|
+
top: 0.5rem;
|
|
859
|
+
font-size: 0.875rem;
|
|
860
|
+
line-height: 1rem;
|
|
861
|
+
padding: 0;
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
.eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
865
|
+
top: 0.375rem;
|
|
866
|
+
font-size: 0.75rem;
|
|
867
|
+
line-height: 0.75rem;
|
|
868
|
+
height: 10px;
|
|
869
|
+
padding: 0;
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
.eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
873
|
+
top: 0.375rem;
|
|
874
|
+
font-size: 0.75rem;
|
|
875
|
+
line-height: 0.75rem;
|
|
876
|
+
height: 10px;
|
|
877
|
+
padding: 0;
|
|
878
|
+
}
|
|
879
|
+
.eds-textarea__label .eds-form-control-wrapper[focus-within] .eds-input-group__label {
|
|
880
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
881
|
+
background: var(--textarea-label-background);
|
|
882
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
883
|
+
}
|
|
884
|
+
.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
|
|
885
|
+
box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
|
|
886
|
+
background: var(--textarea-label-background);
|
|
887
|
+
width: calc(100% - 1rem - 1rem - 4px);
|
|
888
|
+
}
|
|
889
|
+
.eds-form-control-wrapper--size-large[focus-within] .eds-input-group__label {
|
|
890
|
+
top: 0.5rem;
|
|
891
|
+
font-size: 0.875rem;
|
|
892
|
+
line-height: 1rem;
|
|
893
|
+
padding: 0;
|
|
894
|
+
}
|
|
895
|
+
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
896
|
+
top: 0.5rem;
|
|
897
|
+
font-size: 0.875rem;
|
|
898
|
+
line-height: 1rem;
|
|
899
|
+
padding: 0;
|
|
900
|
+
}
|
|
901
|
+
/* DO NOT CHANGE!*/
|
|
902
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
903
903
|
textarea.eds-form-control.eds-textarea {
|
|
904
904
|
min-height: 7.75rem;
|
|
905
905
|
resize: vertical;
|
|
@@ -954,17 +954,6 @@ textarea.eds-form-control.eds-textarea {
|
|
|
954
954
|
}
|
|
955
955
|
/* DO NOT CHANGE!*/
|
|
956
956
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
957
|
-
.eds-segmented-control {
|
|
958
|
-
margin-top: 0.25rem;
|
|
959
|
-
display: flex;
|
|
960
|
-
background: var(--components-form-segmentedcontrol-standard-background);
|
|
961
|
-
border-radius: 0.5rem;
|
|
962
|
-
}
|
|
963
|
-
.eds-contrast .eds-segmented-control {
|
|
964
|
-
background: var(--components-form-segmentedcontrol-contrast-background);
|
|
965
|
-
}
|
|
966
|
-
/* DO NOT CHANGE!*/
|
|
967
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
968
957
|
.eds-segmented-choice {
|
|
969
958
|
display: block;
|
|
970
959
|
flex: 1 1 0px;
|
|
@@ -1047,6 +1036,17 @@ textarea.eds-form-control.eds-textarea {
|
|
|
1047
1036
|
}
|
|
1048
1037
|
/* DO NOT CHANGE!*/
|
|
1049
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: var(--components-form-segmentedcontrol-standard-background);
|
|
1043
|
+
border-radius: 0.5rem;
|
|
1044
|
+
}
|
|
1045
|
+
.eds-contrast .eds-segmented-control {
|
|
1046
|
+
background: var(--components-form-segmentedcontrol-contrast-background);
|
|
1047
|
+
}
|
|
1048
|
+
/* DO NOT CHANGE!*/
|
|
1049
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1050
1050
|
/* DO NOT CHANGE!*/
|
|
1051
1051
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1052
1052
|
/* DO NOT CHANGE!*/
|