@entur/form 7.1.2 → 7.1.4
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/styles.css +312 -312
- package/package.json +7 -7
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,233 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
+
.eds-feedback-text {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
margin-top: 0.25rem;
|
|
7
|
+
}
|
|
8
|
+
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
9
|
+
padding-left: calc(1rem + 0.125rem);
|
|
10
|
+
}
|
|
11
|
+
.eds-feedback-text__text {
|
|
12
|
+
color: var(--components-form-feedbacktext-information-standard-text);
|
|
13
|
+
}
|
|
14
|
+
.eds-contrast .eds-feedback-text__text {
|
|
15
|
+
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.eds-feedback-text__icon {
|
|
19
|
+
font-size: 1.5rem;
|
|
20
|
+
min-height: 1.5rem;
|
|
21
|
+
min-width: 1.5rem;
|
|
22
|
+
padding-right: 0.5rem;
|
|
23
|
+
position: relative;
|
|
24
|
+
top: -0.1rem;
|
|
25
|
+
}
|
|
26
|
+
.eds-feedback-text__icon--success {
|
|
27
|
+
color: var(--components-form-feedbacktext-success-standard-icon-fill);
|
|
28
|
+
}
|
|
29
|
+
.eds-feedback-text__icon--success circle {
|
|
30
|
+
fill: var(--components-form-feedbacktext-success-standard-icon-symbol);
|
|
31
|
+
}
|
|
32
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
33
|
+
color: var(--components-form-feedbacktext-success-contrast-icon-fill);
|
|
34
|
+
}
|
|
35
|
+
.eds-contrast .eds-feedback-text__icon--success circle {
|
|
36
|
+
fill: var(--components-form-feedbacktext-success-contrast-icon-symbol);
|
|
37
|
+
}
|
|
38
|
+
.eds-feedback-text__icon--error, .eds-feedback-text__icon--negative {
|
|
39
|
+
color: var(--components-form-feedbacktext-negative-standard-icon-fill);
|
|
40
|
+
}
|
|
41
|
+
.eds-feedback-text__icon--error circle, .eds-feedback-text__icon--negative circle {
|
|
42
|
+
fill: var(--components-form-feedbacktext-negative-standard-icon-symbol);
|
|
43
|
+
}
|
|
44
|
+
.eds-contrast .eds-feedback-text__icon--error, .eds-contrast .eds-feedback-text__icon--negative {
|
|
45
|
+
color: var(--components-form-feedbacktext-negative-contrast-icon-fill);
|
|
46
|
+
}
|
|
47
|
+
.eds-contrast .eds-feedback-text__icon--error circle, .eds-contrast .eds-feedback-text__icon--negative circle {
|
|
48
|
+
fill: var(--components-form-feedbacktext-negative-contrast-icon-symbol);
|
|
49
|
+
}
|
|
50
|
+
.eds-feedback-text__icon--info, .eds-feedback-text__icon--information {
|
|
51
|
+
color: var(--components-form-feedbacktext-information-standard-icon-fill);
|
|
52
|
+
}
|
|
53
|
+
.eds-feedback-text__icon--info circle, .eds-feedback-text__icon--information circle {
|
|
54
|
+
fill: var(--components-form-feedbacktext-information-standard-icon-symbol);
|
|
55
|
+
}
|
|
56
|
+
.eds-contrast .eds-feedback-text__icon--info, .eds-contrast .eds-feedback-text__icon--information {
|
|
57
|
+
color: var(--components-form-feedbacktext-information-contrast-icon-fill);
|
|
58
|
+
}
|
|
59
|
+
.eds-contrast .eds-feedback-text__icon--info circle, .eds-contrast .eds-feedback-text__icon--information circle {
|
|
60
|
+
fill: var(--components-form-feedbacktext-information-contrast-icon-symbol);
|
|
61
|
+
}
|
|
62
|
+
.eds-feedback-text__icon--warning {
|
|
63
|
+
color: var(--components-form-feedbacktext-warning-standard-icon-fill);
|
|
64
|
+
}
|
|
65
|
+
.eds-feedback-text__icon--warning .svg-exclamation {
|
|
66
|
+
fill: var(--components-form-feedbacktext-warning-standard-icon-symbol);
|
|
67
|
+
}
|
|
68
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
69
|
+
color: var(--components-form-feedbacktext-warning-contrast-icon-fill);
|
|
70
|
+
}
|
|
71
|
+
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
72
|
+
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
73
|
+
}
|
|
74
|
+
/* DO NOT CHANGE!*/
|
|
75
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
76
|
+
.eds-checkbox__container {
|
|
77
|
+
display: flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
position: relative;
|
|
80
|
+
-webkit-appearance: none;
|
|
81
|
+
-moz-appearance: none;
|
|
82
|
+
appearance: none;
|
|
83
|
+
cursor: pointer;
|
|
84
|
+
-webkit-user-select: none;
|
|
85
|
+
-moz-user-select: none;
|
|
86
|
+
user-select: none;
|
|
87
|
+
width: -moz-fit-content;
|
|
88
|
+
width: fit-content;
|
|
89
|
+
margin: 0.5rem 0;
|
|
90
|
+
}
|
|
91
|
+
.eds-checkbox__container--reduced-click-area {
|
|
92
|
+
height: -moz-fit-content;
|
|
93
|
+
height: fit-content;
|
|
94
|
+
}
|
|
95
|
+
.eds-checkbox__container input {
|
|
96
|
+
position: absolute;
|
|
97
|
+
opacity: 0;
|
|
98
|
+
height: 0;
|
|
99
|
+
width: 0;
|
|
100
|
+
}
|
|
101
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
102
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
103
|
+
}
|
|
104
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
105
|
+
visibility: visible;
|
|
106
|
+
}
|
|
107
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
108
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
109
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
110
|
+
}
|
|
111
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
112
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
113
|
+
}
|
|
114
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
115
|
+
opacity: 0.5;
|
|
116
|
+
}
|
|
117
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
118
|
+
opacity: 0.5;
|
|
119
|
+
}
|
|
120
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
121
|
+
opacity: 0.5;
|
|
122
|
+
}
|
|
123
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
124
|
+
opacity: 0.5;
|
|
125
|
+
}
|
|
126
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
127
|
+
opacity: 0.5;
|
|
128
|
+
}
|
|
129
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
130
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
131
|
+
}
|
|
132
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
133
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
134
|
+
}
|
|
135
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
136
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
137
|
+
}
|
|
138
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
139
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
140
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
141
|
+
}
|
|
142
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
143
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
144
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
145
|
+
}
|
|
146
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
147
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
148
|
+
border-color: transparent;
|
|
149
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
150
|
+
}
|
|
151
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
152
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
153
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
154
|
+
}
|
|
155
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
156
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
157
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
158
|
+
}
|
|
159
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
160
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
161
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
162
|
+
}
|
|
163
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
164
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
165
|
+
outline: 2px solid #181c56;
|
|
166
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
167
|
+
outline-offset: 0.125rem;
|
|
168
|
+
}
|
|
169
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
170
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
171
|
+
outline: 2px solid #181c56;
|
|
172
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
173
|
+
outline-offset: 0.125rem;
|
|
174
|
+
}
|
|
175
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
176
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
177
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
178
|
+
}
|
|
179
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
180
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
181
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
182
|
+
}
|
|
183
|
+
.eds-checkbox--disabled {
|
|
184
|
+
pointer-events: none;
|
|
185
|
+
}
|
|
186
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
187
|
+
opacity: 0.5;
|
|
188
|
+
}
|
|
189
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
190
|
+
opacity: 0.5;
|
|
191
|
+
}
|
|
192
|
+
.eds-checkbox__icon {
|
|
193
|
+
box-sizing: border-box;
|
|
194
|
+
display: inline-flex;
|
|
195
|
+
justify-content: center;
|
|
196
|
+
align-items: center;
|
|
197
|
+
position: relative;
|
|
198
|
+
margin-right: 1rem;
|
|
199
|
+
height: 1.25rem;
|
|
200
|
+
width: 1.25rem;
|
|
201
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
202
|
+
border-radius: 0.125rem;
|
|
203
|
+
background-color: transparent;
|
|
204
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
205
|
+
}
|
|
206
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
207
|
+
margin-right: 0;
|
|
208
|
+
}
|
|
209
|
+
.eds-contrast .eds-checkbox__icon {
|
|
210
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
211
|
+
}
|
|
212
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
213
|
+
height: 1rem;
|
|
214
|
+
width: 1rem;
|
|
215
|
+
visibility: hidden;
|
|
216
|
+
}
|
|
217
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
218
|
+
transform-origin: 50% 50%;
|
|
219
|
+
stroke-dasharray: 48;
|
|
220
|
+
stroke-dashoffset: 48;
|
|
221
|
+
stroke-width: 0.375rem;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
@keyframes stroke {
|
|
225
|
+
100% {
|
|
226
|
+
stroke-dashoffset: 0;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
/* DO NOT CHANGE!*/
|
|
230
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
231
|
.eds-form-control-wrapper {
|
|
4
232
|
align-items: center;
|
|
5
233
|
background-color: var(--components-form-baseform-standard-fill-default);
|
|
@@ -166,255 +394,109 @@
|
|
|
166
394
|
.eds-form-control:focus::placeholder {
|
|
167
395
|
opacity: 1;
|
|
168
396
|
}
|
|
169
|
-
.eds-form-control__prepend, .eds-form-control__append {
|
|
170
|
-
position: relative;
|
|
171
|
-
margin: 0 1rem;
|
|
172
|
-
line-height: inherit;
|
|
173
|
-
}
|
|
174
|
-
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
175
|
-
position: static;
|
|
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-checkbox__container {
|
|
194
|
-
display: flex;
|
|
195
|
-
align-items: center;
|
|
196
|
-
position: relative;
|
|
197
|
-
-webkit-appearance: none;
|
|
198
|
-
-moz-appearance: none;
|
|
199
|
-
appearance: none;
|
|
200
|
-
cursor: pointer;
|
|
201
|
-
-webkit-user-select: none;
|
|
202
|
-
-moz-user-select: none;
|
|
203
|
-
user-select: none;
|
|
204
|
-
width: -moz-fit-content;
|
|
205
|
-
width: fit-content;
|
|
206
|
-
margin: 0.5rem 0;
|
|
207
|
-
}
|
|
208
|
-
.eds-checkbox__container--reduced-click-area {
|
|
209
|
-
height: -moz-fit-content;
|
|
210
|
-
height: fit-content;
|
|
211
|
-
}
|
|
212
|
-
.eds-checkbox__container input {
|
|
213
|
-
position: absolute;
|
|
214
|
-
opacity: 0;
|
|
215
|
-
height: 0;
|
|
216
|
-
width: 0;
|
|
217
|
-
}
|
|
218
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
219
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
220
|
-
}
|
|
221
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
222
|
-
visibility: visible;
|
|
223
|
-
}
|
|
224
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
225
|
-
stroke: var(--components-form-checkbox-standard-icon);
|
|
226
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
227
|
-
}
|
|
228
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
229
|
-
fill: var(--components-form-checkbox-standard-icon);
|
|
230
|
-
}
|
|
231
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
232
|
-
opacity: 0.5;
|
|
233
|
-
}
|
|
234
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
235
|
-
opacity: 0.5;
|
|
236
|
-
}
|
|
237
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
238
|
-
opacity: 0.5;
|
|
239
|
-
}
|
|
240
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
241
|
-
opacity: 0.5;
|
|
242
|
-
}
|
|
243
|
-
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
244
|
-
opacity: 0.5;
|
|
245
|
-
}
|
|
246
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
247
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
248
|
-
}
|
|
249
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
250
|
-
stroke: var(--components-form-checkbox-contrast-icon);
|
|
251
|
-
}
|
|
252
|
-
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
253
|
-
fill: var(--components-form-checkbox-contrast-icon);
|
|
254
|
-
}
|
|
255
|
-
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
256
|
-
border-color: var(--components-form-checkbox-standard-border);
|
|
257
|
-
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
258
|
-
}
|
|
259
|
-
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
260
|
-
border-color: var(--components-form-checkbox-contrast-border);
|
|
261
|
-
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
262
|
-
}
|
|
263
|
-
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
264
|
-
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
265
|
-
border-color: transparent;
|
|
266
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
267
|
-
}
|
|
268
|
-
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
269
|
-
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
270
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
271
|
-
}
|
|
272
|
-
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
273
|
-
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
274
|
-
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
275
|
-
}
|
|
276
|
-
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
277
|
-
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
278
|
-
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
279
|
-
}
|
|
280
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
281
|
-
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
282
|
-
outline: 2px solid #181c56;
|
|
283
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
284
|
-
outline-offset: 0.125rem;
|
|
285
|
-
}
|
|
286
|
-
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
287
|
-
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
288
|
-
outline: 2px solid #181c56;
|
|
289
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
290
|
-
outline-offset: 0.125rem;
|
|
291
|
-
}
|
|
292
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
293
|
-
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
294
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
295
|
-
}
|
|
296
|
-
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
297
|
-
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
298
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
299
|
-
}
|
|
300
|
-
.eds-checkbox--disabled {
|
|
301
|
-
pointer-events: none;
|
|
302
|
-
}
|
|
303
|
-
.eds-checkbox--disabled .eds-checkbox__label {
|
|
304
|
-
opacity: 0.5;
|
|
305
|
-
}
|
|
306
|
-
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
307
|
-
opacity: 0.5;
|
|
308
|
-
}
|
|
309
|
-
.eds-checkbox__icon {
|
|
310
|
-
box-sizing: border-box;
|
|
311
|
-
display: inline-flex;
|
|
312
|
-
justify-content: center;
|
|
313
|
-
align-items: center;
|
|
397
|
+
.eds-form-control__prepend, .eds-form-control__append {
|
|
314
398
|
position: relative;
|
|
315
|
-
margin
|
|
316
|
-
height:
|
|
317
|
-
width: 1.25rem;
|
|
318
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
319
|
-
border-radius: 0.125rem;
|
|
320
|
-
background-color: transparent;
|
|
321
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
399
|
+
margin: 0 1rem;
|
|
400
|
+
line-height: inherit;
|
|
322
401
|
}
|
|
323
|
-
.eds-
|
|
324
|
-
|
|
402
|
+
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
403
|
+
position: static;
|
|
325
404
|
}
|
|
326
|
-
.eds-
|
|
327
|
-
|
|
405
|
+
.eds-form-control__prepend svg, .eds-form-control__append svg {
|
|
406
|
+
top: 0.125rem;
|
|
328
407
|
}
|
|
329
|
-
.eds-
|
|
330
|
-
|
|
331
|
-
width: 1rem;
|
|
332
|
-
visibility: hidden;
|
|
408
|
+
.eds-form-control__prepend {
|
|
409
|
+
margin-right: 0;
|
|
333
410
|
}
|
|
334
|
-
.eds-
|
|
335
|
-
|
|
336
|
-
stroke-dasharray: 48;
|
|
337
|
-
stroke-dashoffset: 48;
|
|
338
|
-
stroke-width: 0.375rem;
|
|
411
|
+
.eds-form-control__append {
|
|
412
|
+
margin-left: 0;
|
|
339
413
|
}
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
}
|
|
414
|
+
.eds-fieldset {
|
|
415
|
+
margin: 0;
|
|
416
|
+
padding: 0;
|
|
417
|
+
border: 0;
|
|
345
418
|
}
|
|
346
419
|
/* DO NOT CHANGE!*/
|
|
347
420
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
348
|
-
.eds-
|
|
421
|
+
.eds-form-component--radio__container {
|
|
349
422
|
display: flex;
|
|
423
|
+
justify-content: center;
|
|
350
424
|
align-items: center;
|
|
351
|
-
margin-top: 0.25rem;
|
|
352
|
-
}
|
|
353
|
-
.eds-feedback-text--info, .eds-feedback-text--information {
|
|
354
|
-
padding-left: calc(1rem + 0.125rem);
|
|
355
|
-
}
|
|
356
|
-
.eds-feedback-text__text {
|
|
357
|
-
color: var(--components-form-feedbacktext-information-standard-text);
|
|
358
|
-
}
|
|
359
|
-
.eds-contrast .eds-feedback-text__text {
|
|
360
|
-
color: var(--components-form-feedbacktext-information-contrast-text);
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
.eds-feedback-text__icon {
|
|
364
|
-
font-size: 1.5rem;
|
|
365
|
-
min-height: 1.5rem;
|
|
366
|
-
min-width: 1.5rem;
|
|
367
|
-
padding-right: 0.5rem;
|
|
368
425
|
position: relative;
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
426
|
+
cursor: pointer;
|
|
427
|
+
height: 2rem;
|
|
428
|
+
width: -moz-fit-content;
|
|
429
|
+
width: fit-content;
|
|
430
|
+
-webkit-user-select: none;
|
|
431
|
+
-moz-user-select: none;
|
|
432
|
+
user-select: none;
|
|
376
433
|
}
|
|
377
|
-
.eds-
|
|
378
|
-
color: var(--components-form-
|
|
434
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
435
|
+
background-color: var(--components-form-radio-standard-fill-hover);
|
|
379
436
|
}
|
|
380
|
-
.eds-contrast .eds-
|
|
381
|
-
|
|
437
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
438
|
+
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
382
439
|
}
|
|
383
|
-
.eds-
|
|
384
|
-
|
|
440
|
+
.eds-form-component--radio__container input {
|
|
441
|
+
position: absolute;
|
|
442
|
+
opacity: 0;
|
|
443
|
+
cursor: pointer;
|
|
444
|
+
height: 0;
|
|
445
|
+
width: 0;
|
|
385
446
|
}
|
|
386
|
-
.eds-
|
|
387
|
-
|
|
447
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
448
|
+
height: 0.625rem;
|
|
449
|
+
width: 0.625rem;
|
|
388
450
|
}
|
|
389
|
-
.eds-
|
|
390
|
-
|
|
451
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
452
|
+
outline: 2px solid #181c56;
|
|
453
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
454
|
+
outline-offset: 0.125rem;
|
|
391
455
|
}
|
|
392
|
-
.eds-contrast .eds-
|
|
393
|
-
|
|
456
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
457
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
394
458
|
}
|
|
395
|
-
.eds-
|
|
396
|
-
|
|
459
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
460
|
+
position: relative;
|
|
461
|
+
height: 1.25rem;
|
|
462
|
+
width: 1.25rem;
|
|
463
|
+
margin-right: 1rem;
|
|
464
|
+
background-color: var(--components-form-radio-standard-fill-default);
|
|
465
|
+
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
466
|
+
border-radius: 50%;
|
|
467
|
+
display: flex;
|
|
468
|
+
align-items: center;
|
|
469
|
+
justify-content: center;
|
|
397
470
|
}
|
|
398
|
-
.eds-
|
|
399
|
-
|
|
471
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
472
|
+
background-color: var(--components-form-radio-contrast-fill-default);
|
|
473
|
+
border-color: var(--components-form-radio-contrast-border);
|
|
400
474
|
}
|
|
401
|
-
.eds-
|
|
402
|
-
|
|
475
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
476
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
477
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
478
|
+
cursor: not-allowed;
|
|
403
479
|
}
|
|
404
|
-
.eds-
|
|
405
|
-
|
|
480
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
481
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
406
482
|
}
|
|
407
|
-
.eds-
|
|
408
|
-
|
|
483
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
484
|
+
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
485
|
+
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
409
486
|
}
|
|
410
|
-
.eds-
|
|
411
|
-
|
|
487
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
488
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
412
489
|
}
|
|
413
|
-
.eds-
|
|
414
|
-
|
|
490
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
491
|
+
display: block;
|
|
492
|
+
width: 0;
|
|
493
|
+
height: 0;
|
|
494
|
+
border-radius: 50%;
|
|
495
|
+
background-color: var(--components-form-radio-standard-fill-selected);
|
|
496
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
415
497
|
}
|
|
416
|
-
.eds-contrast .eds-
|
|
417
|
-
|
|
498
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
499
|
+
background-color: var(--components-form-radio-contrast-icon);
|
|
418
500
|
}
|
|
419
501
|
/* DO NOT CHANGE!*/
|
|
420
502
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -547,6 +629,13 @@
|
|
|
547
629
|
}
|
|
548
630
|
/* DO NOT CHANGE!*/
|
|
549
631
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
632
|
+
textarea.eds-form-control.eds-textarea {
|
|
633
|
+
min-height: 7.75rem;
|
|
634
|
+
resize: vertical;
|
|
635
|
+
line-height: 1.5rem;
|
|
636
|
+
}
|
|
637
|
+
/* DO NOT CHANGE!*/
|
|
638
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
550
639
|
.eds-switch {
|
|
551
640
|
cursor: pointer;
|
|
552
641
|
-webkit-user-select: none;
|
|
@@ -666,88 +755,6 @@
|
|
|
666
755
|
}
|
|
667
756
|
/* DO NOT CHANGE!*/
|
|
668
757
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
669
|
-
.eds-form-component--radio__container {
|
|
670
|
-
display: flex;
|
|
671
|
-
justify-content: center;
|
|
672
|
-
align-items: center;
|
|
673
|
-
position: relative;
|
|
674
|
-
cursor: pointer;
|
|
675
|
-
height: 2rem;
|
|
676
|
-
width: -moz-fit-content;
|
|
677
|
-
width: fit-content;
|
|
678
|
-
-webkit-user-select: none;
|
|
679
|
-
-moz-user-select: none;
|
|
680
|
-
user-select: none;
|
|
681
|
-
}
|
|
682
|
-
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
683
|
-
background-color: var(--components-form-radio-standard-fill-hover);
|
|
684
|
-
}
|
|
685
|
-
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
686
|
-
background-color: var(--components-form-radio-contrast-fill-hover);
|
|
687
|
-
}
|
|
688
|
-
.eds-form-component--radio__container input {
|
|
689
|
-
position: absolute;
|
|
690
|
-
opacity: 0;
|
|
691
|
-
cursor: pointer;
|
|
692
|
-
height: 0;
|
|
693
|
-
width: 0;
|
|
694
|
-
}
|
|
695
|
-
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
696
|
-
height: 0.625rem;
|
|
697
|
-
width: 0.625rem;
|
|
698
|
-
}
|
|
699
|
-
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
700
|
-
outline: 2px solid #181c56;
|
|
701
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
702
|
-
outline-offset: 0.125rem;
|
|
703
|
-
}
|
|
704
|
-
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
705
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
706
|
-
}
|
|
707
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
708
|
-
position: relative;
|
|
709
|
-
height: 1.25rem;
|
|
710
|
-
width: 1.25rem;
|
|
711
|
-
margin-right: 1rem;
|
|
712
|
-
background-color: var(--components-form-radio-standard-fill-default);
|
|
713
|
-
border: 0.125rem solid var(--components-form-radio-standard-border);
|
|
714
|
-
border-radius: 50%;
|
|
715
|
-
display: flex;
|
|
716
|
-
align-items: center;
|
|
717
|
-
justify-content: center;
|
|
718
|
-
}
|
|
719
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
720
|
-
background-color: var(--components-form-radio-contrast-fill-default);
|
|
721
|
-
border-color: var(--components-form-radio-contrast-border);
|
|
722
|
-
}
|
|
723
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
724
|
-
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
725
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
726
|
-
cursor: not-allowed;
|
|
727
|
-
}
|
|
728
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
729
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
730
|
-
}
|
|
731
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
732
|
-
background: var(--components-form-baseform-contrast-fill-disabled);
|
|
733
|
-
border-color: var(--components-form-baseform-contrast-text-disabled);
|
|
734
|
-
}
|
|
735
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
736
|
-
color: var(--components-form-baseform-contrast-text-disabled);
|
|
737
|
-
}
|
|
738
|
-
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
739
|
-
display: block;
|
|
740
|
-
width: 0;
|
|
741
|
-
height: 0;
|
|
742
|
-
border-radius: 50%;
|
|
743
|
-
background-color: var(--components-form-radio-standard-fill-selected);
|
|
744
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
745
|
-
}
|
|
746
|
-
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
747
|
-
background-color: var(--components-form-radio-contrast-icon);
|
|
748
|
-
}
|
|
749
|
-
/* DO NOT CHANGE!*/
|
|
750
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
751
758
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
752
759
|
outline: 2px solid #181c56;
|
|
753
760
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
@@ -904,13 +911,6 @@ input:disabled + .eds-input-panel__container {
|
|
|
904
911
|
}
|
|
905
912
|
/* DO NOT CHANGE!*/
|
|
906
913
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
907
|
-
textarea.eds-form-control.eds-textarea {
|
|
908
|
-
min-height: 7.75rem;
|
|
909
|
-
resize: vertical;
|
|
910
|
-
line-height: 1.5rem;
|
|
911
|
-
}
|
|
912
|
-
/* DO NOT CHANGE!*/
|
|
913
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
914
914
|
.eds-textfield__clear-button {
|
|
915
915
|
background: none;
|
|
916
916
|
border: none;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.4",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/form.esm.js",
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/icons": "^6.15.
|
|
31
|
-
"@entur/tokens": "^3.
|
|
32
|
-
"@entur/tooltip": "^2.7.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
34
|
-
"@entur/utils": "^0.11.
|
|
30
|
+
"@entur/icons": "^6.15.8",
|
|
31
|
+
"@entur/tokens": "^3.14.0",
|
|
32
|
+
"@entur/tooltip": "^2.7.4",
|
|
33
|
+
"@entur/typography": "^1.8.33",
|
|
34
|
+
"@entur/utils": "^0.11.1",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "bbca019e64cca63b6558abed97643bd12f0dca1b"
|
|
38
38
|
}
|