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