@entur/form 7.1.9 → 7.1.10
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 +289 -289
- package/package.json +5 -5
package/dist/styles.css
CHANGED
|
@@ -1,157 +1,187 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-
|
|
4
|
-
display: flex;
|
|
3
|
+
.eds-form-control-wrapper {
|
|
5
4
|
align-items: center;
|
|
5
|
+
background-color: var(--components-form-baseform-standard-fill-default);
|
|
6
|
+
border-radius: 0.25rem;
|
|
7
|
+
border: 0.125rem solid var(--components-form-baseform-standard-border-default);
|
|
8
|
+
box-shadow: 0 0 0 transparent;
|
|
9
|
+
color: var(--components-form-baseform-standard-text-content);
|
|
10
|
+
display: flex;
|
|
6
11
|
position: relative;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
cursor: pointer;
|
|
11
|
-
-webkit-user-select: none;
|
|
12
|
-
-moz-user-select: none;
|
|
13
|
-
user-select: none;
|
|
14
|
-
width: -moz-fit-content;
|
|
15
|
-
width: fit-content;
|
|
16
|
-
margin: 0.5rem 0;
|
|
12
|
+
width: 100%;
|
|
13
|
+
min-height: 3rem;
|
|
14
|
+
transition: border-color 0.1s ease-in-out;
|
|
17
15
|
}
|
|
18
|
-
.eds-
|
|
19
|
-
|
|
20
|
-
height: fit-content;
|
|
16
|
+
.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
|
|
17
|
+
border-color: var(--components-form-baseform-standard-border-interactive);
|
|
21
18
|
}
|
|
22
|
-
.eds-
|
|
23
|
-
|
|
24
|
-
opacity: 0;
|
|
25
|
-
height: 0;
|
|
26
|
-
width: 0;
|
|
19
|
+
.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
|
|
20
|
+
border-color: var(--components-form-baseform-standard-border-interactive);
|
|
27
21
|
}
|
|
28
|
-
.eds-
|
|
29
|
-
|
|
22
|
+
.eds-contrast .eds-form-control-wrapper:hover {
|
|
23
|
+
border-color: var(--components-form-baseform-contrast-border-interactive);
|
|
30
24
|
}
|
|
31
|
-
.eds-
|
|
32
|
-
|
|
25
|
+
.eds-form-control-wrapper[focus-within] {
|
|
26
|
+
outline: 1px solid var(--components-form-baseform-standard-border-interactive);
|
|
33
27
|
}
|
|
34
|
-
.eds-
|
|
35
|
-
|
|
36
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
28
|
+
.eds-form-control-wrapper:focus-within {
|
|
29
|
+
outline: 1px solid var(--components-form-baseform-standard-border-interactive);
|
|
37
30
|
}
|
|
38
|
-
.eds-
|
|
39
|
-
|
|
31
|
+
.eds-contrast .eds-form-control-wrapper[focus-within] {
|
|
32
|
+
outline: var(--components-form-baseform-contrast-border-interactive);
|
|
40
33
|
}
|
|
41
|
-
.eds-
|
|
42
|
-
|
|
34
|
+
.eds-contrast .eds-form-control-wrapper:focus-within {
|
|
35
|
+
outline: var(--components-form-baseform-contrast-border-interactive);
|
|
43
36
|
}
|
|
44
|
-
.eds-
|
|
45
|
-
|
|
37
|
+
.eds-form-control-wrapper ::-moz-placeholder {
|
|
38
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
46
39
|
}
|
|
47
|
-
.eds-
|
|
48
|
-
|
|
40
|
+
.eds-form-control-wrapper ::placeholder {
|
|
41
|
+
color: var(--components-form-baseform-standard-text-label);
|
|
49
42
|
}
|
|
50
|
-
.eds-
|
|
51
|
-
|
|
43
|
+
.eds-form-control-wrapper--disabled {
|
|
44
|
+
border-color: transparent;
|
|
45
|
+
background-color: var(--components-form-baseform-standard-fill-disabled);
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
color: var(--components-form-baseform-standard-text-disabled);
|
|
52
48
|
}
|
|
53
|
-
.eds-
|
|
54
|
-
|
|
49
|
+
.eds-form-control-wrapper--disabled .eds-input-group__label {
|
|
50
|
+
color: var(--components-form-baseform-standard-text-disabled);
|
|
55
51
|
}
|
|
56
|
-
.eds-contrast .eds-
|
|
57
|
-
|
|
52
|
+
.eds-contrast .eds-form-control-wrapper--disabled {
|
|
53
|
+
border-color: transparent;
|
|
54
|
+
background-color: var(--components-form-baseform-contrast-fill-disabled);
|
|
55
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
58
56
|
}
|
|
59
|
-
.eds-contrast .eds-
|
|
60
|
-
|
|
57
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
|
|
58
|
+
color: var(--components-form-baseform-contrast-text-disabled);
|
|
61
59
|
}
|
|
62
|
-
.eds-
|
|
63
|
-
|
|
60
|
+
.eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
|
|
61
|
+
display: none;
|
|
64
62
|
}
|
|
65
|
-
.eds-
|
|
66
|
-
border-color:
|
|
67
|
-
|
|
63
|
+
.eds-form-control-wrapper--readonly {
|
|
64
|
+
border-color: transparent;
|
|
65
|
+
pointer-events: none;
|
|
66
|
+
cursor: default;
|
|
67
|
+
background: var(--components-form-baseform-standard-fill-readonly);
|
|
68
|
+
border: var(--components-form-baseform-standard-fill-readonly);
|
|
68
69
|
}
|
|
69
|
-
.eds-contrast .eds-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
.eds-contrast .eds-form-control-wrapper--readonly {
|
|
71
|
+
background: var(--components-form-baseform-contrast-fill-readonly);
|
|
72
|
+
color: var(--components-form-baseform-contrast-text-description);
|
|
73
|
+
border: var(--components-form-baseform-contrast-fill-readonly);
|
|
72
74
|
}
|
|
73
|
-
.eds-
|
|
74
|
-
|
|
75
|
-
border-color: transparent;
|
|
76
|
-
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
75
|
+
.eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
|
|
76
|
+
color: var(--components-form-baseform-contrast-text-description);
|
|
77
77
|
}
|
|
78
|
-
.eds-
|
|
79
|
-
|
|
80
|
-
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
78
|
+
.eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
|
|
79
|
+
display: none;
|
|
81
80
|
}
|
|
82
|
-
.eds-
|
|
83
|
-
.eds-
|
|
84
|
-
|
|
81
|
+
.eds-form-control-wrapper--size-medium .eds-form-control,
|
|
82
|
+
.eds-form-control-wrapper--size-medium .eds-form-control__append,
|
|
83
|
+
.eds-form-control-wrapper--size-medium .eds-form-control__prepend {
|
|
84
|
+
font-size: 1rem;
|
|
85
|
+
line-height: 1rem;
|
|
85
86
|
}
|
|
86
|
-
.eds-
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
.eds-form-control-wrapper--size-large {
|
|
88
|
+
min-height: 4rem;
|
|
89
|
+
padding: 0 0.5rem;
|
|
89
90
|
}
|
|
90
|
-
.eds-
|
|
91
|
-
|
|
92
|
-
outline: 2px solid #181c56;
|
|
93
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
94
|
-
outline-offset: 0.125rem;
|
|
91
|
+
.eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
|
|
92
|
+
border-width: 0.25rem;
|
|
95
93
|
}
|
|
96
|
-
.eds-
|
|
97
|
-
.eds-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
94
|
+
.eds-form-control-wrapper--size-large .eds-form-control,
|
|
95
|
+
.eds-form-control-wrapper--size-large .eds-form-control__append,
|
|
96
|
+
.eds-form-control-wrapper--size-large .eds-form-control__prepend {
|
|
97
|
+
font-size: 1.5rem;
|
|
98
|
+
line-height: 2.25rem;
|
|
101
99
|
}
|
|
102
|
-
.eds-
|
|
103
|
-
|
|
104
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
100
|
+
.eds-form-control-wrapper--success {
|
|
101
|
+
border-color: var(--components-form-baseform-standard-border-success);
|
|
105
102
|
}
|
|
106
|
-
.eds-
|
|
107
|
-
|
|
108
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
103
|
+
.eds-form-control-wrapper--success[focus-within] {
|
|
104
|
+
border-color: var(--components-form-baseform-standard-border-success);
|
|
109
105
|
}
|
|
110
|
-
.eds-
|
|
111
|
-
|
|
106
|
+
.eds-form-control-wrapper--success:focus-within {
|
|
107
|
+
border-color: var(--components-form-baseform-standard-border-success);
|
|
112
108
|
}
|
|
113
|
-
.eds-
|
|
114
|
-
|
|
109
|
+
.eds-contrast .eds-form-control-wrapper--success {
|
|
110
|
+
border-color: var(--components-form-baseform-standard-border-success);
|
|
115
111
|
}
|
|
116
|
-
.eds-
|
|
117
|
-
|
|
112
|
+
.eds-contrast .eds-form-control-wrapper--success[focus-within] {
|
|
113
|
+
border-color: var(--components-form-baseform-contrast-border-success);
|
|
118
114
|
}
|
|
119
|
-
.eds-
|
|
120
|
-
|
|
121
|
-
display: inline-flex;
|
|
122
|
-
justify-content: center;
|
|
123
|
-
align-items: center;
|
|
124
|
-
position: relative;
|
|
125
|
-
margin-right: 1rem;
|
|
126
|
-
height: 1.25rem;
|
|
127
|
-
width: 1.25rem;
|
|
128
|
-
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
129
|
-
border-radius: 0.125rem;
|
|
130
|
-
background-color: transparent;
|
|
131
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
115
|
+
.eds-contrast .eds-form-control-wrapper--success:focus-within {
|
|
116
|
+
border-color: var(--components-form-baseform-contrast-border-success);
|
|
132
117
|
}
|
|
133
|
-
.eds-
|
|
134
|
-
|
|
118
|
+
.eds-form-control-wrapper--error, .eds-form-control-wrapper--negative {
|
|
119
|
+
border-color: var(--components-form-baseform-standard-border-negative);
|
|
135
120
|
}
|
|
136
|
-
.eds-
|
|
137
|
-
border-color: var(--components-form-
|
|
121
|
+
.eds-form-control-wrapper--error[focus-within], .eds-form-control-wrapper--negative[focus-within] {
|
|
122
|
+
border-color: var(--components-form-baseform-standard-border-negative);
|
|
138
123
|
}
|
|
139
|
-
.eds-
|
|
140
|
-
|
|
141
|
-
width: 1rem;
|
|
142
|
-
visibility: hidden;
|
|
124
|
+
.eds-form-control-wrapper--error:focus-within, .eds-form-control-wrapper--negative:focus-within {
|
|
125
|
+
border-color: var(--components-form-baseform-standard-border-negative);
|
|
143
126
|
}
|
|
144
|
-
.eds-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
127
|
+
.eds-contrast .eds-form-control-wrapper--error, .eds-contrast .eds-form-control-wrapper--negative {
|
|
128
|
+
border-color: var(--components-form-baseform-contrast-border-negative);
|
|
129
|
+
}
|
|
130
|
+
.eds-contrast .eds-form-control-wrapper--error[focus-within], .eds-contrast .eds-form-control-wrapper--negative[focus-within] {
|
|
131
|
+
border-color: var(--components-form-baseform-contrast-border-negative);
|
|
132
|
+
}
|
|
133
|
+
.eds-contrast .eds-form-control-wrapper--error:focus-within, .eds-contrast .eds-form-control-wrapper--negative:focus-within {
|
|
134
|
+
border-color: var(--components-form-baseform-contrast-border-negative);
|
|
149
135
|
}
|
|
150
136
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
137
|
+
.eds-form-control {
|
|
138
|
+
-webkit-appearance: none;
|
|
139
|
+
-moz-appearance: none;
|
|
140
|
+
appearance: none;
|
|
141
|
+
background-color: transparent;
|
|
142
|
+
border: 0;
|
|
143
|
+
color: var(--components-form-baseform-standard-text-content);
|
|
144
|
+
display: block;
|
|
145
|
+
font-family: inherit;
|
|
146
|
+
line-height: 1rem;
|
|
147
|
+
font-size: 1rem;
|
|
148
|
+
padding: 20px 1rem 0.25rem;
|
|
149
|
+
width: 100%;
|
|
150
|
+
}
|
|
151
|
+
.eds-form-control::-moz-placeholder {
|
|
152
|
+
opacity: 0;
|
|
153
|
+
-moz-transition: opacity 0.2s ease-in-out;
|
|
154
|
+
transition: opacity 0.2s ease-in-out;
|
|
155
|
+
}
|
|
156
|
+
.eds-form-control::placeholder {
|
|
157
|
+
opacity: 0;
|
|
158
|
+
transition: opacity 0.2s ease-in-out;
|
|
159
|
+
}
|
|
160
|
+
.eds-form-control:focus {
|
|
161
|
+
outline: none;
|
|
162
|
+
}
|
|
163
|
+
.eds-form-control:focus::-moz-placeholder {
|
|
164
|
+
opacity: 1;
|
|
165
|
+
}
|
|
166
|
+
.eds-form-control:focus::placeholder {
|
|
167
|
+
opacity: 1;
|
|
168
|
+
}
|
|
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;
|
|
155
185
|
}
|
|
156
186
|
/* DO NOT CHANGE!*/
|
|
157
187
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -269,203 +299,173 @@
|
|
|
269
299
|
}
|
|
270
300
|
.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
|
|
271
301
|
top: 0.5rem;
|
|
272
|
-
font-size: 0.875rem;
|
|
273
|
-
line-height: 1rem;
|
|
274
|
-
padding: 0;
|
|
275
|
-
margin-left: 1rem;
|
|
276
|
-
}
|
|
277
|
-
.eds-contrast .eds-form-control-wrapper .eds-tooltip {
|
|
278
|
-
background: var(--components-tooltip-tooltip-standard-fill);
|
|
279
|
-
color: var(--components-tooltip-tooltip-standard-text);
|
|
280
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
281
|
-
}
|
|
282
|
-
.eds-form-control-wrapper .eds-tooltip::after {
|
|
283
|
-
background: var(--components-tooltip-tooltip-standard-fill);
|
|
284
|
-
}
|
|
285
|
-
/* DO NOT CHANGE!*/
|
|
286
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
287
|
-
.eds-form-control-wrapper {
|
|
288
|
-
align-items: center;
|
|
289
|
-
background-color: var(--components-form-baseform-standard-fill-default);
|
|
290
|
-
border-radius: 0.25rem;
|
|
291
|
-
border: 0.125rem solid var(--components-form-baseform-standard-border-default);
|
|
292
|
-
box-shadow: 0 0 0 transparent;
|
|
293
|
-
color: var(--components-form-baseform-standard-text-content);
|
|
294
|
-
display: flex;
|
|
295
|
-
position: relative;
|
|
296
|
-
width: 100%;
|
|
297
|
-
min-height: 3rem;
|
|
298
|
-
transition: border-color 0.1s ease-in-out;
|
|
299
|
-
}
|
|
300
|
-
.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
|
|
301
|
-
border-color: var(--components-form-baseform-standard-border-interactive);
|
|
302
|
-
}
|
|
303
|
-
.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
|
|
304
|
-
border-color: var(--components-form-baseform-standard-border-interactive);
|
|
305
|
-
}
|
|
306
|
-
.eds-contrast .eds-form-control-wrapper:hover {
|
|
307
|
-
border-color: var(--components-form-baseform-contrast-border-interactive);
|
|
308
|
-
}
|
|
309
|
-
.eds-form-control-wrapper[focus-within] {
|
|
310
|
-
outline: 1px solid var(--components-form-baseform-standard-border-interactive);
|
|
311
|
-
}
|
|
312
|
-
.eds-form-control-wrapper:focus-within {
|
|
313
|
-
outline: 1px solid var(--components-form-baseform-standard-border-interactive);
|
|
314
|
-
}
|
|
315
|
-
.eds-contrast .eds-form-control-wrapper[focus-within] {
|
|
316
|
-
outline: var(--components-form-baseform-contrast-border-interactive);
|
|
317
|
-
}
|
|
318
|
-
.eds-contrast .eds-form-control-wrapper:focus-within {
|
|
319
|
-
outline: var(--components-form-baseform-contrast-border-interactive);
|
|
320
|
-
}
|
|
321
|
-
.eds-form-control-wrapper ::-moz-placeholder {
|
|
322
|
-
color: var(--components-form-baseform-standard-text-label);
|
|
323
|
-
}
|
|
324
|
-
.eds-form-control-wrapper ::placeholder {
|
|
325
|
-
color: var(--components-form-baseform-standard-text-label);
|
|
326
|
-
}
|
|
327
|
-
.eds-form-control-wrapper--disabled {
|
|
328
|
-
border-color: transparent;
|
|
329
|
-
background-color: var(--components-form-baseform-standard-fill-disabled);
|
|
330
|
-
pointer-events: none;
|
|
331
|
-
color: var(--components-form-baseform-standard-text-disabled);
|
|
302
|
+
font-size: 0.875rem;
|
|
303
|
+
line-height: 1rem;
|
|
304
|
+
padding: 0;
|
|
305
|
+
margin-left: 1rem;
|
|
332
306
|
}
|
|
333
|
-
.eds-form-control-wrapper
|
|
334
|
-
|
|
307
|
+
.eds-contrast .eds-form-control-wrapper .eds-tooltip {
|
|
308
|
+
background: var(--components-tooltip-tooltip-standard-fill);
|
|
309
|
+
color: var(--components-tooltip-tooltip-standard-text);
|
|
310
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
335
311
|
}
|
|
336
|
-
.eds-
|
|
337
|
-
|
|
338
|
-
background-color: var(--components-form-baseform-contrast-fill-disabled);
|
|
339
|
-
color: var(--components-form-baseform-contrast-text-disabled);
|
|
312
|
+
.eds-form-control-wrapper .eds-tooltip::after {
|
|
313
|
+
background: var(--components-tooltip-tooltip-standard-fill);
|
|
340
314
|
}
|
|
341
|
-
|
|
342
|
-
|
|
315
|
+
/* DO NOT CHANGE!*/
|
|
316
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
317
|
+
.eds-checkbox__container {
|
|
318
|
+
display: flex;
|
|
319
|
+
align-items: center;
|
|
320
|
+
position: relative;
|
|
321
|
+
-webkit-appearance: none;
|
|
322
|
+
-moz-appearance: none;
|
|
323
|
+
appearance: none;
|
|
324
|
+
cursor: pointer;
|
|
325
|
+
-webkit-user-select: none;
|
|
326
|
+
-moz-user-select: none;
|
|
327
|
+
user-select: none;
|
|
328
|
+
width: -moz-fit-content;
|
|
329
|
+
width: fit-content;
|
|
330
|
+
margin: 0.5rem 0;
|
|
343
331
|
}
|
|
344
|
-
.eds-
|
|
345
|
-
|
|
332
|
+
.eds-checkbox__container--reduced-click-area {
|
|
333
|
+
height: -moz-fit-content;
|
|
334
|
+
height: fit-content;
|
|
346
335
|
}
|
|
347
|
-
.eds-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
border: var(--components-form-baseform-standard-fill-readonly);
|
|
336
|
+
.eds-checkbox__container input {
|
|
337
|
+
position: absolute;
|
|
338
|
+
opacity: 0;
|
|
339
|
+
height: 0;
|
|
340
|
+
width: 0;
|
|
353
341
|
}
|
|
354
|
-
.eds-
|
|
355
|
-
background: var(--components-form-
|
|
356
|
-
color: var(--components-form-baseform-contrast-text-description);
|
|
357
|
-
border: var(--components-form-baseform-contrast-fill-readonly);
|
|
342
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
343
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
358
344
|
}
|
|
359
|
-
.eds-
|
|
360
|
-
|
|
345
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
346
|
+
visibility: visible;
|
|
361
347
|
}
|
|
362
|
-
.eds-
|
|
363
|
-
|
|
348
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
349
|
+
stroke: var(--components-form-checkbox-standard-icon);
|
|
350
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
364
351
|
}
|
|
365
|
-
.eds-
|
|
366
|
-
|
|
367
|
-
.eds-form-control-wrapper--size-medium .eds-form-control__prepend {
|
|
368
|
-
font-size: 1rem;
|
|
369
|
-
line-height: 1rem;
|
|
352
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
353
|
+
fill: var(--components-form-checkbox-standard-icon);
|
|
370
354
|
}
|
|
371
|
-
.eds-
|
|
372
|
-
|
|
373
|
-
padding: 0 0.5rem;
|
|
355
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
356
|
+
opacity: 0.5;
|
|
374
357
|
}
|
|
375
|
-
.eds-
|
|
376
|
-
|
|
358
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
359
|
+
opacity: 0.5;
|
|
377
360
|
}
|
|
378
|
-
.eds-
|
|
379
|
-
|
|
380
|
-
.eds-form-control-wrapper--size-large .eds-form-control__prepend {
|
|
381
|
-
font-size: 1.5rem;
|
|
382
|
-
line-height: 2.25rem;
|
|
361
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
362
|
+
opacity: 0.5;
|
|
383
363
|
}
|
|
384
|
-
.eds-
|
|
385
|
-
|
|
364
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
365
|
+
opacity: 0.5;
|
|
386
366
|
}
|
|
387
|
-
.eds-
|
|
388
|
-
|
|
367
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
368
|
+
opacity: 0.5;
|
|
389
369
|
}
|
|
390
|
-
.eds-
|
|
391
|
-
|
|
370
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
371
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
392
372
|
}
|
|
393
|
-
.eds-contrast .eds-
|
|
394
|
-
|
|
373
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
374
|
+
stroke: var(--components-form-checkbox-contrast-icon);
|
|
395
375
|
}
|
|
396
|
-
.eds-contrast .eds-
|
|
397
|
-
|
|
376
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
377
|
+
fill: var(--components-form-checkbox-contrast-icon);
|
|
398
378
|
}
|
|
399
|
-
.eds-
|
|
400
|
-
border-color: var(--components-form-
|
|
379
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
380
|
+
border-color: var(--components-form-checkbox-standard-border);
|
|
381
|
+
background-color: var(--components-form-checkbox-standard-fill-hover);
|
|
401
382
|
}
|
|
402
|
-
.eds-
|
|
403
|
-
border-color: var(--components-form-
|
|
383
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
384
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
385
|
+
background-color: var(--components-form-checkbox-contrast-fill-hover);
|
|
404
386
|
}
|
|
405
|
-
.eds-
|
|
406
|
-
|
|
387
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
388
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
389
|
+
border-color: transparent;
|
|
390
|
+
background-color: var(--components-form-checkbox-standard-fill-selectedhover);
|
|
407
391
|
}
|
|
408
|
-
.eds-
|
|
409
|
-
|
|
392
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
393
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
394
|
+
background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
|
|
410
395
|
}
|
|
411
|
-
.eds-
|
|
412
|
-
|
|
396
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
397
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
398
|
+
background-color: var(--components-form-checkbox-standard-fill-selected);
|
|
413
399
|
}
|
|
414
|
-
.eds-contrast .eds-
|
|
415
|
-
|
|
400
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
401
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
402
|
+
background-color: var(--components-form-checkbox-contrast-fill-selected);
|
|
416
403
|
}
|
|
417
|
-
.eds-
|
|
418
|
-
|
|
404
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
405
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
406
|
+
outline: 2px solid #181c56;
|
|
407
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
408
|
+
outline-offset: 0.125rem;
|
|
419
409
|
}
|
|
420
|
-
|
|
421
|
-
.eds-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
background-color: transparent;
|
|
426
|
-
border: 0;
|
|
427
|
-
color: var(--components-form-baseform-standard-text-content);
|
|
428
|
-
display: block;
|
|
429
|
-
font-family: inherit;
|
|
430
|
-
line-height: 1rem;
|
|
431
|
-
font-size: 1rem;
|
|
432
|
-
padding: 20px 1rem 0.25rem;
|
|
433
|
-
width: 100%;
|
|
410
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
411
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
412
|
+
outline: 2px solid #181c56;
|
|
413
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
414
|
+
outline-offset: 0.125rem;
|
|
434
415
|
}
|
|
435
|
-
.eds-
|
|
436
|
-
|
|
437
|
-
-
|
|
438
|
-
transition: opacity 0.2s ease-in-out;
|
|
416
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
417
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
418
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
439
419
|
}
|
|
440
|
-
.eds-
|
|
441
|
-
|
|
442
|
-
|
|
420
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
421
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
422
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
443
423
|
}
|
|
444
|
-
.eds-
|
|
445
|
-
|
|
424
|
+
.eds-checkbox--disabled {
|
|
425
|
+
pointer-events: none;
|
|
446
426
|
}
|
|
447
|
-
.eds-
|
|
448
|
-
opacity:
|
|
427
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
428
|
+
opacity: 0.5;
|
|
449
429
|
}
|
|
450
|
-
.eds-
|
|
451
|
-
opacity:
|
|
430
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
431
|
+
opacity: 0.5;
|
|
452
432
|
}
|
|
453
|
-
.eds-
|
|
433
|
+
.eds-checkbox__icon {
|
|
434
|
+
box-sizing: border-box;
|
|
435
|
+
display: inline-flex;
|
|
436
|
+
justify-content: center;
|
|
437
|
+
align-items: center;
|
|
454
438
|
position: relative;
|
|
455
|
-
margin:
|
|
456
|
-
|
|
439
|
+
margin-right: 1rem;
|
|
440
|
+
height: 1.25rem;
|
|
441
|
+
width: 1.25rem;
|
|
442
|
+
border: 0.125rem solid var(--components-form-checkbox-standard-border);
|
|
443
|
+
border-radius: 0.125rem;
|
|
444
|
+
background-color: transparent;
|
|
445
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
457
446
|
}
|
|
458
|
-
.eds-
|
|
459
|
-
|
|
447
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
448
|
+
margin-right: 0;
|
|
460
449
|
}
|
|
461
|
-
.eds-
|
|
462
|
-
|
|
450
|
+
.eds-contrast .eds-checkbox__icon {
|
|
451
|
+
border-color: var(--components-form-checkbox-contrast-border);
|
|
463
452
|
}
|
|
464
|
-
.eds-
|
|
465
|
-
|
|
453
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
454
|
+
height: 1rem;
|
|
455
|
+
width: 1rem;
|
|
456
|
+
visibility: hidden;
|
|
466
457
|
}
|
|
467
|
-
.eds-
|
|
468
|
-
|
|
458
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
459
|
+
transform-origin: 50% 50%;
|
|
460
|
+
stroke-dasharray: 48;
|
|
461
|
+
stroke-dashoffset: 48;
|
|
462
|
+
stroke-width: 0.375rem;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
@keyframes stroke {
|
|
466
|
+
100% {
|
|
467
|
+
stroke-dashoffset: 0;
|
|
468
|
+
}
|
|
469
469
|
}
|
|
470
470
|
/* DO NOT CHANGE!*/
|
|
471
471
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -551,6 +551,13 @@
|
|
|
551
551
|
}
|
|
552
552
|
/* DO NOT CHANGE!*/
|
|
553
553
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
554
|
+
textarea.eds-form-control.eds-textarea {
|
|
555
|
+
min-height: 7.75rem;
|
|
556
|
+
resize: vertical;
|
|
557
|
+
line-height: 1.5rem;
|
|
558
|
+
}
|
|
559
|
+
/* DO NOT CHANGE!*/
|
|
560
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
554
561
|
.eds-switch {
|
|
555
562
|
cursor: pointer;
|
|
556
563
|
-webkit-user-select: none;
|
|
@@ -670,13 +677,6 @@
|
|
|
670
677
|
}
|
|
671
678
|
/* DO NOT CHANGE!*/
|
|
672
679
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
673
|
-
textarea.eds-form-control.eds-textarea {
|
|
674
|
-
min-height: 7.75rem;
|
|
675
|
-
resize: vertical;
|
|
676
|
-
line-height: 1.5rem;
|
|
677
|
-
}
|
|
678
|
-
/* DO NOT CHANGE!*/
|
|
679
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
680
680
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
681
681
|
outline: 2px solid #181c56;
|
|
682
682
|
outline-color: var(--basecolors-stroke-focus-standard);
|
|
@@ -831,6 +831,11 @@ input:disabled + .eds-input-panel__container {
|
|
|
831
831
|
margin-top: 0.25rem;
|
|
832
832
|
word-wrap: break-word;
|
|
833
833
|
}
|
|
834
|
+
.eds-fieldset {
|
|
835
|
+
margin: 0;
|
|
836
|
+
padding: 0;
|
|
837
|
+
border: 0;
|
|
838
|
+
}
|
|
834
839
|
/* DO NOT CHANGE!*/
|
|
835
840
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
836
841
|
.eds-feedback-text {
|
|
@@ -904,11 +909,6 @@ input:disabled + .eds-input-panel__container {
|
|
|
904
909
|
.eds-contrast .eds-feedback-text__icon--warning circle {
|
|
905
910
|
fill: var(--components-form-feedbacktext-warning-contrast-icon-symbol);
|
|
906
911
|
}
|
|
907
|
-
.eds-fieldset {
|
|
908
|
-
margin: 0;
|
|
909
|
-
padding: 0;
|
|
910
|
-
border: 0;
|
|
911
|
-
}
|
|
912
912
|
/* DO NOT CHANGE!*/
|
|
913
913
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
914
914
|
.eds-textfield__clear-button {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.10",
|
|
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.17.
|
|
30
|
+
"@entur/icons": "^6.17.1",
|
|
31
31
|
"@entur/tokens": "^3.15.0",
|
|
32
|
-
"@entur/tooltip": "^2.7.
|
|
33
|
-
"@entur/typography": "^1.8.
|
|
32
|
+
"@entur/tooltip": "^2.7.9",
|
|
33
|
+
"@entur/typography": "^1.8.38",
|
|
34
34
|
"@entur/utils": "^0.11.1",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "8f5dd2a35e3794050cdc8664efeb078254404632"
|
|
38
38
|
}
|