@entur/form 7.0.8 → 7.0.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 +466 -466
- package/package.json +7 -7
package/dist/styles.css
CHANGED
|
@@ -3,297 +3,312 @@
|
|
|
3
3
|
}
|
|
4
4
|
/* DO NOT CHANGE!*/
|
|
5
5
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
6
|
-
.eds-
|
|
7
|
-
--border-color: #7C7F9F;
|
|
8
|
-
--border-color-hover: #aeb7e2;
|
|
9
|
-
align-items: center;
|
|
10
|
-
background-color: #ffffff;
|
|
11
|
-
border-radius: 0.25rem;
|
|
12
|
-
border: 0.125rem solid var(--border-color);
|
|
13
|
-
box-shadow: 0 0 0 transparent;
|
|
14
|
-
color: #181c56;
|
|
6
|
+
.eds-feedback-text {
|
|
15
7
|
display: flex;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
min-height: 3rem;
|
|
19
|
-
transition: border-color 0.1s ease-in-out;
|
|
20
|
-
--textarea-label-background: $colors-brand-white;
|
|
21
|
-
/*
|
|
22
|
-
Some input controls require a darker design while inside a contrast block.
|
|
23
|
-
These elements require the `--dark` modifier, even on the wrapper.
|
|
24
|
-
*/
|
|
25
|
-
}
|
|
26
|
-
.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
|
|
27
|
-
--border-color: #181c56;
|
|
8
|
+
align-items: center;
|
|
9
|
+
margin-top: 0.25rem;
|
|
28
10
|
}
|
|
29
|
-
.eds-
|
|
30
|
-
|
|
11
|
+
.eds-feedback-text--info {
|
|
12
|
+
padding-left: calc(1rem + 0.125rem);
|
|
31
13
|
}
|
|
32
|
-
.eds-
|
|
33
|
-
|
|
14
|
+
.eds-feedback-text__text {
|
|
15
|
+
color: #181c56;
|
|
34
16
|
}
|
|
35
|
-
.eds-
|
|
36
|
-
|
|
17
|
+
.eds-contrast .eds-feedback-text__text {
|
|
18
|
+
color: #ffffff;
|
|
37
19
|
}
|
|
38
|
-
|
|
39
|
-
|
|
20
|
+
|
|
21
|
+
.eds-feedback-text__icon {
|
|
22
|
+
font-size: 1.5rem;
|
|
23
|
+
min-height: 1.5rem;
|
|
24
|
+
min-width: 1.5rem;
|
|
25
|
+
padding-right: 0.5rem;
|
|
26
|
+
position: relative;
|
|
27
|
+
top: -0.1rem;
|
|
40
28
|
}
|
|
41
|
-
.eds-
|
|
42
|
-
|
|
43
|
-
box-shadow: 0 0 0 0.125rem #aeb7e2;
|
|
29
|
+
.eds-feedback-text__icon--success {
|
|
30
|
+
color: #1a8e60;
|
|
44
31
|
}
|
|
45
|
-
.eds-contrast .eds-
|
|
46
|
-
|
|
47
|
-
box-shadow: 0 0 0 0.125rem #aeb7e2;
|
|
32
|
+
.eds-contrast .eds-feedback-text__icon--success {
|
|
33
|
+
color: #5ac39a;
|
|
48
34
|
}
|
|
49
|
-
.eds-
|
|
50
|
-
color: #
|
|
35
|
+
.eds-feedback-text__icon--error {
|
|
36
|
+
color: #d31b1b;
|
|
51
37
|
}
|
|
52
|
-
.eds-
|
|
53
|
-
color: #
|
|
38
|
+
.eds-contrast .eds-feedback-text__icon--error {
|
|
39
|
+
color: #ff9494;
|
|
54
40
|
}
|
|
55
|
-
.eds-
|
|
56
|
-
|
|
57
|
-
background-color: #e9e9e9;
|
|
58
|
-
pointer-events: none;
|
|
59
|
-
color: #646464;
|
|
41
|
+
.eds-feedback-text__icon--info {
|
|
42
|
+
color: #0082b9;
|
|
60
43
|
}
|
|
61
|
-
.eds-
|
|
62
|
-
color: #
|
|
44
|
+
.eds-contrast .eds-feedback-text__icon--info {
|
|
45
|
+
color: #64b3e7;
|
|
63
46
|
}
|
|
64
|
-
.eds-
|
|
65
|
-
|
|
66
|
-
color: #8285a8;
|
|
47
|
+
.eds-feedback-text__icon--warning {
|
|
48
|
+
color: #ffca28;
|
|
67
49
|
}
|
|
68
|
-
.eds-
|
|
69
|
-
|
|
50
|
+
.eds-feedback-text__icon--warning circle {
|
|
51
|
+
fill: #181c56;
|
|
70
52
|
}
|
|
71
|
-
.eds-
|
|
72
|
-
|
|
53
|
+
.eds-contrast .eds-feedback-text__icon--warning {
|
|
54
|
+
color: #ffe082;
|
|
73
55
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
56
|
+
/* DO NOT CHANGE!*/
|
|
57
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
58
|
+
.eds-checkbox__container {
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
position: relative;
|
|
62
|
+
-webkit-appearance: none;
|
|
63
|
+
-moz-appearance: none;
|
|
64
|
+
appearance: none;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
-webkit-user-select: none;
|
|
67
|
+
-moz-user-select: none;
|
|
68
|
+
user-select: none;
|
|
69
|
+
width: -moz-fit-content;
|
|
70
|
+
width: fit-content;
|
|
71
|
+
margin: 0.5rem 0;
|
|
80
72
|
}
|
|
81
|
-
.eds-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
color: #ffffff;
|
|
73
|
+
.eds-checkbox__container--reduced-click-area {
|
|
74
|
+
height: -moz-fit-content;
|
|
75
|
+
height: fit-content;
|
|
85
76
|
}
|
|
86
|
-
.eds-
|
|
87
|
-
|
|
77
|
+
.eds-checkbox__container input {
|
|
78
|
+
position: absolute;
|
|
79
|
+
opacity: 0;
|
|
80
|
+
height: 0;
|
|
81
|
+
width: 0;
|
|
88
82
|
}
|
|
89
|
-
.eds-
|
|
90
|
-
|
|
83
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
84
|
+
background-color: #181c56;
|
|
91
85
|
}
|
|
92
|
-
.eds-
|
|
93
|
-
|
|
94
|
-
.eds-form-control-wrapper--size-medium .eds-form-control__prepend {
|
|
95
|
-
font-size: 1rem;
|
|
96
|
-
line-height: 1rem;
|
|
86
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
87
|
+
visibility: visible;
|
|
97
88
|
}
|
|
98
|
-
.eds-
|
|
99
|
-
|
|
100
|
-
|
|
89
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
90
|
+
stroke: #ffffff;
|
|
91
|
+
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
101
92
|
}
|
|
102
|
-
.eds-
|
|
103
|
-
|
|
93
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
94
|
+
fill: #ffffff;
|
|
104
95
|
}
|
|
105
|
-
.eds-
|
|
106
|
-
|
|
107
|
-
.eds-form-control-wrapper--size-large .eds-form-control__prepend {
|
|
108
|
-
font-size: 1.5rem;
|
|
109
|
-
line-height: 2.25rem;
|
|
96
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
97
|
+
opacity: 0.5;
|
|
110
98
|
}
|
|
111
|
-
.eds-
|
|
112
|
-
|
|
113
|
-
--border-color: #1a8e60;
|
|
99
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
100
|
+
opacity: 0.5;
|
|
114
101
|
}
|
|
115
|
-
.eds-
|
|
116
|
-
|
|
102
|
+
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled rect {
|
|
103
|
+
opacity: 0.5;
|
|
117
104
|
}
|
|
118
|
-
.eds-
|
|
119
|
-
|
|
105
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled path {
|
|
106
|
+
opacity: 0.5;
|
|
120
107
|
}
|
|
121
|
-
.eds-
|
|
122
|
-
|
|
108
|
+
.eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled rect {
|
|
109
|
+
opacity: 0.5;
|
|
123
110
|
}
|
|
124
|
-
.eds-contrast .eds-
|
|
125
|
-
|
|
126
|
-
--border-color: #5ac39a;
|
|
111
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
112
|
+
background-color: #aeb7e2;
|
|
127
113
|
}
|
|
128
|
-
.eds-contrast .eds-
|
|
129
|
-
|
|
114
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon path, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon path {
|
|
115
|
+
stroke: #181c56;
|
|
130
116
|
}
|
|
131
|
-
.eds-contrast .eds-
|
|
132
|
-
|
|
133
|
-
border-color: #181c56;
|
|
117
|
+
.eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon rect {
|
|
118
|
+
fill: #181c56;
|
|
134
119
|
}
|
|
135
|
-
.eds-
|
|
136
|
-
|
|
137
|
-
|
|
120
|
+
.eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
121
|
+
border-color: #292b6a;
|
|
122
|
+
background-color: #d1d4e3;
|
|
138
123
|
}
|
|
139
|
-
.eds-
|
|
140
|
-
border-color: #
|
|
141
|
-
|
|
124
|
+
.eds-contrast .eds-checkbox__container:hover input + .eds-checkbox__icon {
|
|
125
|
+
border-color: #b6bee5;
|
|
126
|
+
background-color: rgba(174, 183, 226, 0.2);
|
|
142
127
|
}
|
|
143
|
-
.eds-
|
|
144
|
-
|
|
128
|
+
.eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
129
|
+
.eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
130
|
+
border-color: transparent;
|
|
131
|
+
background-color: #54568c;
|
|
145
132
|
}
|
|
146
|
-
.eds-
|
|
147
|
-
|
|
133
|
+
.eds-contrast .eds-checkbox__container:hover input:checked + .eds-checkbox__icon,
|
|
134
|
+
.eds-contrast .eds-checkbox__container:hover input:indeterminate + .eds-checkbox__icon {
|
|
135
|
+
background-color: #b6bee5;
|
|
148
136
|
}
|
|
149
|
-
.eds-
|
|
150
|
-
border-color: #
|
|
137
|
+
.eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
138
|
+
border-color: #16194d;
|
|
151
139
|
}
|
|
152
|
-
.eds-contrast .eds-
|
|
153
|
-
border-color: #
|
|
154
|
-
--border-color: #ff9494;
|
|
140
|
+
.eds-contrast .eds-checkbox__container:active input + .eds-checkbox__icon {
|
|
141
|
+
border-color: #9da5cb;
|
|
155
142
|
}
|
|
156
|
-
.eds-
|
|
157
|
-
|
|
143
|
+
.eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
144
|
+
.eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
145
|
+
background-color: #16194d;
|
|
158
146
|
}
|
|
159
|
-
.eds-contrast .eds-
|
|
160
|
-
|
|
161
|
-
|
|
147
|
+
.eds-contrast .eds-checkbox__container:active input:checked + .eds-checkbox__icon,
|
|
148
|
+
.eds-contrast .eds-checkbox__container:active input:indeterminate + .eds-checkbox__icon {
|
|
149
|
+
background-color: #9da5cb;
|
|
162
150
|
}
|
|
163
|
-
.eds-
|
|
164
|
-
|
|
165
|
-
|
|
151
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
152
|
+
.eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
153
|
+
outline: none;
|
|
154
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
155
|
+
outline-offset: 0.125rem;
|
|
166
156
|
}
|
|
167
|
-
.eds-
|
|
168
|
-
|
|
169
|
-
|
|
157
|
+
.eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
158
|
+
.eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
159
|
+
outline: none;
|
|
160
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
161
|
+
outline-offset: 0.125rem;
|
|
170
162
|
}
|
|
171
|
-
.eds-contrast .eds-
|
|
172
|
-
|
|
163
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
164
|
+
.eds-contrast .eds-checkbox__container [focus-within] + .eds-checkbox__icon {
|
|
165
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
173
166
|
}
|
|
174
|
-
.eds-contrast .eds-
|
|
175
|
-
|
|
167
|
+
.eds-contrast .eds-checkbox__container:focus + .eds-checkbox__icon,
|
|
168
|
+
.eds-contrast .eds-checkbox__container :focus-within + .eds-checkbox__icon {
|
|
169
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
176
170
|
}
|
|
177
|
-
.eds-
|
|
178
|
-
|
|
171
|
+
.eds-checkbox--disabled {
|
|
172
|
+
pointer-events: none;
|
|
179
173
|
}
|
|
180
|
-
.eds-
|
|
181
|
-
|
|
182
|
-
border-color: #aeb7e2;
|
|
174
|
+
.eds-checkbox--disabled .eds-checkbox__label {
|
|
175
|
+
opacity: 0.5;
|
|
183
176
|
}
|
|
184
|
-
.eds-
|
|
185
|
-
|
|
186
|
-
border-color: #aeb7e2;
|
|
177
|
+
.eds-checkbox--disabled .eds-checkbox__icon {
|
|
178
|
+
opacity: 0.5;
|
|
187
179
|
}
|
|
188
|
-
.eds-
|
|
180
|
+
.eds-checkbox__icon {
|
|
181
|
+
box-sizing: border-box;
|
|
182
|
+
display: inline-flex;
|
|
183
|
+
justify-content: center;
|
|
184
|
+
align-items: center;
|
|
185
|
+
position: relative;
|
|
186
|
+
margin-right: 1rem;
|
|
187
|
+
height: 1.25rem;
|
|
188
|
+
width: 1.25rem;
|
|
189
|
+
border: 0.125rem solid #181c56;
|
|
190
|
+
border-radius: 0.125rem;
|
|
189
191
|
background-color: transparent;
|
|
190
|
-
color:
|
|
191
|
-
|
|
192
|
-
.eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
|
|
193
|
-
background-color: #292b6a;
|
|
194
|
-
color: #8285a8;
|
|
192
|
+
color: #ffffff;
|
|
193
|
+
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
195
194
|
}
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
-webkit-appearance: none;
|
|
199
|
-
-moz-appearance: none;
|
|
200
|
-
appearance: none;
|
|
201
|
-
background-color: transparent;
|
|
202
|
-
border: 0;
|
|
203
|
-
color: inherit;
|
|
204
|
-
display: block;
|
|
205
|
-
font-family: inherit;
|
|
206
|
-
line-height: 1rem;
|
|
207
|
-
font-size: 1rem;
|
|
208
|
-
padding: 20px 1rem 0.25rem;
|
|
209
|
-
width: 100%;
|
|
195
|
+
.eds-checkbox__icon--reduced-click-area {
|
|
196
|
+
margin-right: 0;
|
|
210
197
|
}
|
|
211
|
-
.eds-
|
|
212
|
-
|
|
213
|
-
-moz-transition: opacity 0.2s ease-in-out;
|
|
214
|
-
transition: opacity 0.2s ease-in-out;
|
|
198
|
+
.eds-contrast .eds-checkbox__icon {
|
|
199
|
+
border-color: #aeb7e2;
|
|
215
200
|
}
|
|
216
|
-
.eds-
|
|
217
|
-
|
|
218
|
-
|
|
201
|
+
.eds-checkbox__icon .eds-checkbox-icon {
|
|
202
|
+
height: 1rem;
|
|
203
|
+
width: 1rem;
|
|
204
|
+
visibility: hidden;
|
|
219
205
|
}
|
|
220
|
-
.eds-
|
|
221
|
-
|
|
206
|
+
.eds-checkbox__icon .eds-checkbox-icon path {
|
|
207
|
+
transform-origin: 50% 50%;
|
|
208
|
+
stroke-dasharray: 48;
|
|
209
|
+
stroke-dashoffset: 48;
|
|
210
|
+
stroke-width: 0.375rem;
|
|
222
211
|
}
|
|
223
|
-
|
|
224
|
-
|
|
212
|
+
|
|
213
|
+
@keyframes stroke {
|
|
214
|
+
100% {
|
|
215
|
+
stroke-dashoffset: 0;
|
|
216
|
+
}
|
|
225
217
|
}
|
|
226
|
-
|
|
227
|
-
|
|
218
|
+
/* DO NOT CHANGE!*/
|
|
219
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
220
|
+
.eds-fieldset {
|
|
221
|
+
margin: 0;
|
|
222
|
+
padding: 0;
|
|
223
|
+
border: 0;
|
|
228
224
|
}
|
|
229
|
-
|
|
225
|
+
/* DO NOT CHANGE!*/
|
|
226
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
227
|
+
.eds-form-component--radio__container {
|
|
228
|
+
display: flex;
|
|
229
|
+
justify-content: center;
|
|
230
|
+
align-items: center;
|
|
230
231
|
position: relative;
|
|
231
|
-
|
|
232
|
-
|
|
232
|
+
cursor: pointer;
|
|
233
|
+
height: 2rem;
|
|
234
|
+
width: -moz-fit-content;
|
|
235
|
+
width: fit-content;
|
|
236
|
+
-webkit-user-select: none;
|
|
237
|
+
-moz-user-select: none;
|
|
238
|
+
user-select: none;
|
|
233
239
|
}
|
|
234
|
-
.eds-form-
|
|
235
|
-
|
|
240
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
241
|
+
border-color: #54568c;
|
|
236
242
|
}
|
|
237
|
-
.eds-form-
|
|
238
|
-
|
|
243
|
+
.eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
244
|
+
background-color: #54568c;
|
|
239
245
|
}
|
|
240
|
-
.eds-form-
|
|
241
|
-
|
|
246
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio {
|
|
247
|
+
border-color: #8285a8;
|
|
242
248
|
}
|
|
243
|
-
.eds-form-
|
|
244
|
-
|
|
249
|
+
.eds-contrast .eds-form-component--radio__container :hover ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
250
|
+
background-color: #8285a8;
|
|
245
251
|
}
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
+
.eds-form-component--radio__container input {
|
|
253
|
+
position: absolute;
|
|
254
|
+
opacity: 0;
|
|
255
|
+
cursor: pointer;
|
|
256
|
+
height: 0;
|
|
257
|
+
width: 0;
|
|
252
258
|
}
|
|
253
|
-
.eds-
|
|
254
|
-
|
|
259
|
+
.eds-form-component--radio__container input:checked ~ .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
260
|
+
height: 0.625rem;
|
|
261
|
+
width: 0.625rem;
|
|
255
262
|
}
|
|
256
|
-
.eds-
|
|
257
|
-
|
|
263
|
+
.eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
264
|
+
outline: none;
|
|
265
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
266
|
+
outline-offset: 0.125rem;
|
|
258
267
|
}
|
|
259
|
-
.eds-contrast .eds-
|
|
260
|
-
|
|
268
|
+
.eds-contrast .eds-form-component--radio__container input:focus ~ .eds-form-component--radio__radio {
|
|
269
|
+
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
261
270
|
}
|
|
262
|
-
|
|
263
|
-
.eds-feedback-text__icon {
|
|
264
|
-
font-size: 1.5rem;
|
|
265
|
-
min-height: 1.5rem;
|
|
266
|
-
min-width: 1.5rem;
|
|
267
|
-
padding-right: 0.5rem;
|
|
271
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
268
272
|
position: relative;
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
color: #
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
273
|
+
height: 1.25rem;
|
|
274
|
+
width: 1.25rem;
|
|
275
|
+
margin-right: 1rem;
|
|
276
|
+
background-color: #ffffff;
|
|
277
|
+
border: 0.125rem solid #181c56;
|
|
278
|
+
border-radius: 50%;
|
|
279
|
+
display: flex;
|
|
280
|
+
align-items: center;
|
|
281
|
+
justify-content: center;
|
|
276
282
|
}
|
|
277
|
-
.eds-
|
|
278
|
-
color: #
|
|
283
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio {
|
|
284
|
+
background-color: #181c56;
|
|
285
|
+
border-color: #aeb7e2;
|
|
279
286
|
}
|
|
280
|
-
.eds-
|
|
281
|
-
|
|
287
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
288
|
+
background: #d1d3d3;
|
|
289
|
+
border-color: #d1d3d3;
|
|
290
|
+
cursor: not-allowed;
|
|
282
291
|
}
|
|
283
|
-
.eds-
|
|
284
|
-
color: #
|
|
292
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled:hover {
|
|
293
|
+
border-color: #d1d3d3;
|
|
285
294
|
}
|
|
286
|
-
.eds-contrast .eds-
|
|
287
|
-
|
|
295
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled {
|
|
296
|
+
background: #d1d3d3;
|
|
297
|
+
border-color: #d1d3d3;
|
|
288
298
|
}
|
|
289
|
-
.eds-
|
|
290
|
-
color: #
|
|
299
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio.eds-form-component--radio__radio--disabled ~ .eds-form-component--radio__label {
|
|
300
|
+
color: #656782;
|
|
291
301
|
}
|
|
292
|
-
.eds-
|
|
293
|
-
|
|
302
|
+
.eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
303
|
+
display: block;
|
|
304
|
+
width: 0;
|
|
305
|
+
height: 0;
|
|
306
|
+
border-radius: 50%;
|
|
307
|
+
background-color: #181c56;
|
|
308
|
+
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
294
309
|
}
|
|
295
|
-
.eds-contrast .eds-
|
|
296
|
-
color: #
|
|
310
|
+
.eds-contrast .eds-form-component--radio__container .eds-form-component--radio__radio .eds-form-component--radio__circle {
|
|
311
|
+
background-color: #aeb7e2;
|
|
297
312
|
}
|
|
298
313
|
/* DO NOT CHANGE!*/
|
|
299
314
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -428,304 +443,245 @@
|
|
|
428
443
|
}
|
|
429
444
|
/* DO NOT CHANGE!*/
|
|
430
445
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
431
|
-
.eds-
|
|
432
|
-
|
|
446
|
+
.eds-form-control-wrapper {
|
|
447
|
+
--border-color: #7C7F9F;
|
|
448
|
+
--border-color-hover: #aeb7e2;
|
|
433
449
|
align-items: center;
|
|
450
|
+
background-color: #ffffff;
|
|
451
|
+
border-radius: 0.25rem;
|
|
452
|
+
border: 0.125rem solid var(--border-color);
|
|
453
|
+
box-shadow: 0 0 0 transparent;
|
|
454
|
+
color: #181c56;
|
|
455
|
+
display: flex;
|
|
434
456
|
position: relative;
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
width: fit-content;
|
|
444
|
-
margin: 0.5rem 0;
|
|
445
|
-
}
|
|
446
|
-
.eds-checkbox__container--reduced-click-area {
|
|
447
|
-
height: -moz-fit-content;
|
|
448
|
-
height: fit-content;
|
|
449
|
-
}
|
|
450
|
-
.eds-checkbox__container input {
|
|
451
|
-
position: absolute;
|
|
452
|
-
opacity: 0;
|
|
453
|
-
height: 0;
|
|
454
|
-
width: 0;
|
|
455
|
-
}
|
|
456
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon {
|
|
457
|
-
background-color: #181c56;
|
|
458
|
-
}
|
|
459
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon {
|
|
460
|
-
visibility: visible;
|
|
461
|
-
}
|
|
462
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon path, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon path {
|
|
463
|
-
stroke: #ffffff;
|
|
464
|
-
animation: stroke ease-in-out 0.2s 0.1s forwards;
|
|
465
|
-
}
|
|
466
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon .eds-checkbox-icon rect, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon .eds-checkbox-icon rect {
|
|
467
|
-
fill: #ffffff;
|
|
468
|
-
}
|
|
469
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled, .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--disabled {
|
|
470
|
-
opacity: 0.5;
|
|
471
|
-
}
|
|
472
|
-
.eds-checkbox__container input:checked + .eds-checkbox__icon--disabled path {
|
|
473
|
-
opacity: 0.5;
|
|
457
|
+
width: 100%;
|
|
458
|
+
min-height: 3rem;
|
|
459
|
+
transition: border-color 0.1s ease-in-out;
|
|
460
|
+
--textarea-label-background: $colors-brand-white;
|
|
461
|
+
/*
|
|
462
|
+
Some input controls require a darker design while inside a contrast block.
|
|
463
|
+
These elements require the `--dark` modifier, even on the wrapper.
|
|
464
|
+
*/
|
|
474
465
|
}
|
|
475
|
-
.eds-
|
|
476
|
-
|
|
466
|
+
.eds-form-control-wrapper[focus-within], .eds-form-control-wrapper:hover {
|
|
467
|
+
--border-color: #181c56;
|
|
477
468
|
}
|
|
478
|
-
.eds-
|
|
479
|
-
|
|
469
|
+
.eds-form-control-wrapper:focus-within, .eds-form-control-wrapper:hover {
|
|
470
|
+
--border-color: #181c56;
|
|
480
471
|
}
|
|
481
|
-
.eds-
|
|
482
|
-
|
|
472
|
+
.eds-contrast .eds-form-control-wrapper:hover {
|
|
473
|
+
--border-color: #aeb7e2;
|
|
483
474
|
}
|
|
484
|
-
.eds-
|
|
485
|
-
|
|
475
|
+
.eds-form-control-wrapper[focus-within] {
|
|
476
|
+
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
486
477
|
}
|
|
487
|
-
.eds-
|
|
488
|
-
|
|
478
|
+
.eds-form-control-wrapper:focus-within {
|
|
479
|
+
box-shadow: inset 0 0 0 1px var(--border-color);
|
|
489
480
|
}
|
|
490
|
-
.eds-contrast .eds-
|
|
491
|
-
|
|
481
|
+
.eds-contrast .eds-form-control-wrapper[focus-within] {
|
|
482
|
+
--border-color: #181c56;
|
|
483
|
+
box-shadow: 0 0 0 0.125rem #aeb7e2;
|
|
492
484
|
}
|
|
493
|
-
.eds-
|
|
494
|
-
border-color: #
|
|
495
|
-
|
|
485
|
+
.eds-contrast .eds-form-control-wrapper:focus-within {
|
|
486
|
+
--border-color: #181c56;
|
|
487
|
+
box-shadow: 0 0 0 0.125rem #aeb7e2;
|
|
496
488
|
}
|
|
497
|
-
.eds-
|
|
498
|
-
|
|
499
|
-
background-color: rgba(174, 183, 226, 0.2);
|
|
489
|
+
.eds-form-control-wrapper ::-moz-placeholder {
|
|
490
|
+
color: #656782;
|
|
500
491
|
}
|
|
501
|
-
.eds-
|
|
502
|
-
|
|
503
|
-
border-color: transparent;
|
|
504
|
-
background-color: #54568c;
|
|
492
|
+
.eds-form-control-wrapper ::placeholder {
|
|
493
|
+
color: #656782;
|
|
505
494
|
}
|
|
506
|
-
.eds-
|
|
507
|
-
|
|
508
|
-
background-color: #
|
|
495
|
+
.eds-form-control-wrapper--disabled {
|
|
496
|
+
--border-color: transparent;
|
|
497
|
+
background-color: #e9e9e9;
|
|
498
|
+
pointer-events: none;
|
|
499
|
+
color: #646464;
|
|
509
500
|
}
|
|
510
|
-
.eds-
|
|
511
|
-
|
|
501
|
+
.eds-form-control-wrapper--disabled .eds-input-group__label {
|
|
502
|
+
color: #646464;
|
|
512
503
|
}
|
|
513
|
-
.eds-contrast .eds-
|
|
514
|
-
|
|
504
|
+
.eds-contrast .eds-form-control-wrapper--disabled {
|
|
505
|
+
background: #292b6a;
|
|
506
|
+
color: #8285a8;
|
|
515
507
|
}
|
|
516
|
-
.eds-
|
|
517
|
-
|
|
518
|
-
background-color: #16194d;
|
|
508
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-input-group__label {
|
|
509
|
+
color: #8285a8;
|
|
519
510
|
}
|
|
520
|
-
.eds-
|
|
521
|
-
|
|
522
|
-
background-color: #9da5cb;
|
|
511
|
+
.eds-form-control-wrapper--disabled::before, .eds-form-control-wrapper--disabled::after {
|
|
512
|
+
display: none;
|
|
523
513
|
}
|
|
524
|
-
.eds-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
514
|
+
.eds-form-control-wrapper--readonly {
|
|
515
|
+
--border-color: transparent;
|
|
516
|
+
--textarea-label-background: $colors-greys-grey90;
|
|
517
|
+
pointer-events: none;
|
|
518
|
+
cursor: default;
|
|
519
|
+
background: #f8f8f8;
|
|
529
520
|
}
|
|
530
|
-
.eds-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
outline-offset: 0.125rem;
|
|
521
|
+
.eds-contrast .eds-form-control-wrapper--readonly {
|
|
522
|
+
--textarea-label-background: $colors-blues-blue10;
|
|
523
|
+
background: #292b6a;
|
|
524
|
+
color: #ffffff;
|
|
535
525
|
}
|
|
536
|
-
.eds-contrast .eds-
|
|
537
|
-
|
|
538
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
526
|
+
.eds-contrast .eds-form-control-wrapper--readonly .eds-input-group__label {
|
|
527
|
+
color: #aeb7e2;
|
|
539
528
|
}
|
|
540
|
-
.eds-
|
|
541
|
-
|
|
542
|
-
box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
|
|
529
|
+
.eds-form-control-wrapper--readonly::before, .eds-form-control-wrapper--readonly::after {
|
|
530
|
+
display: none;
|
|
543
531
|
}
|
|
544
|
-
.eds-
|
|
545
|
-
|
|
532
|
+
.eds-form-control-wrapper--size-medium .eds-form-control,
|
|
533
|
+
.eds-form-control-wrapper--size-medium .eds-form-control__append,
|
|
534
|
+
.eds-form-control-wrapper--size-medium .eds-form-control__prepend {
|
|
535
|
+
font-size: 1rem;
|
|
536
|
+
line-height: 1rem;
|
|
546
537
|
}
|
|
547
|
-
.eds-
|
|
548
|
-
|
|
538
|
+
.eds-form-control-wrapper--size-large {
|
|
539
|
+
min-height: 4rem;
|
|
540
|
+
padding: 0 0.5rem;
|
|
549
541
|
}
|
|
550
|
-
.eds-
|
|
551
|
-
|
|
542
|
+
.eds-form-control-wrapper--size-large::before, .eds-form-control-wrapper--size-large::after {
|
|
543
|
+
border-width: 0.25rem;
|
|
552
544
|
}
|
|
553
|
-
.eds-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
position: relative;
|
|
559
|
-
margin-right: 1rem;
|
|
560
|
-
height: 1.25rem;
|
|
561
|
-
width: 1.25rem;
|
|
562
|
-
border: 0.125rem solid #181c56;
|
|
563
|
-
border-radius: 0.125rem;
|
|
564
|
-
background-color: transparent;
|
|
565
|
-
color: #ffffff;
|
|
566
|
-
transition: border-color 0.1s ease-in-out, background-color 0.1s ease-in-out;
|
|
545
|
+
.eds-form-control-wrapper--size-large .eds-form-control,
|
|
546
|
+
.eds-form-control-wrapper--size-large .eds-form-control__append,
|
|
547
|
+
.eds-form-control-wrapper--size-large .eds-form-control__prepend {
|
|
548
|
+
font-size: 1.5rem;
|
|
549
|
+
line-height: 2.25rem;
|
|
567
550
|
}
|
|
568
|
-
.eds-
|
|
569
|
-
|
|
551
|
+
.eds-form-control-wrapper--success {
|
|
552
|
+
border-color: #1a8e60;
|
|
553
|
+
--border-color: #1a8e60;
|
|
570
554
|
}
|
|
571
|
-
.eds-
|
|
572
|
-
border-color: #
|
|
555
|
+
.eds-form-control-wrapper--success:hover {
|
|
556
|
+
border-color: #5ac39a;
|
|
573
557
|
}
|
|
574
|
-
.eds-
|
|
575
|
-
|
|
576
|
-
width: 1rem;
|
|
577
|
-
visibility: hidden;
|
|
558
|
+
.eds-form-control-wrapper--success[focus-within] {
|
|
559
|
+
border-color: #1a8e60;
|
|
578
560
|
}
|
|
579
|
-
.eds-
|
|
580
|
-
|
|
581
|
-
stroke-dasharray: 48;
|
|
582
|
-
stroke-dashoffset: 48;
|
|
583
|
-
stroke-width: 0.375rem;
|
|
561
|
+
.eds-form-control-wrapper--success:focus-within {
|
|
562
|
+
border-color: #1a8e60;
|
|
584
563
|
}
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
stroke-dashoffset: 0;
|
|
589
|
-
}
|
|
564
|
+
.eds-contrast .eds-form-control-wrapper--success {
|
|
565
|
+
border-color: #5ac39a;
|
|
566
|
+
--border-color: #5ac39a;
|
|
590
567
|
}
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
.eds-fieldset {
|
|
594
|
-
margin: 0;
|
|
595
|
-
padding: 0;
|
|
596
|
-
border: 0;
|
|
568
|
+
.eds-contrast .eds-form-control-wrapper--success:hover {
|
|
569
|
+
border-color: #1a8e60;
|
|
597
570
|
}
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
display: flex;
|
|
602
|
-
justify-content: center;
|
|
603
|
-
align-items: center;
|
|
604
|
-
position: relative;
|
|
605
|
-
cursor: pointer;
|
|
606
|
-
height: 2rem;
|
|
607
|
-
width: -moz-fit-content;
|
|
608
|
-
width: fit-content;
|
|
609
|
-
-webkit-user-select: none;
|
|
610
|
-
-moz-user-select: none;
|
|
611
|
-
user-select: none;
|
|
571
|
+
.eds-contrast .eds-form-control-wrapper--success[focus-within] {
|
|
572
|
+
--border-color: #5ac39a;
|
|
573
|
+
border-color: #181c56;
|
|
612
574
|
}
|
|
613
|
-
.eds-
|
|
614
|
-
border-color: #
|
|
575
|
+
.eds-contrast .eds-form-control-wrapper--success:focus-within {
|
|
576
|
+
--border-color: #5ac39a;
|
|
577
|
+
border-color: #181c56;
|
|
615
578
|
}
|
|
616
|
-
.eds-form-
|
|
617
|
-
|
|
579
|
+
.eds-form-control-wrapper--error {
|
|
580
|
+
border-color: #d31b1b;
|
|
581
|
+
--border-color: #d31b1b;
|
|
618
582
|
}
|
|
619
|
-
.eds-
|
|
620
|
-
border-color: #
|
|
583
|
+
.eds-form-control-wrapper--error:hover {
|
|
584
|
+
border-color: #ff9494;
|
|
621
585
|
}
|
|
622
|
-
.eds-
|
|
623
|
-
|
|
586
|
+
.eds-form-control-wrapper--error[focus-within] {
|
|
587
|
+
border-color: #d31b1b;
|
|
624
588
|
}
|
|
625
|
-
.eds-form-
|
|
626
|
-
|
|
627
|
-
opacity: 0;
|
|
628
|
-
cursor: pointer;
|
|
629
|
-
height: 0;
|
|
630
|
-
width: 0;
|
|
589
|
+
.eds-form-control-wrapper--error:focus-within {
|
|
590
|
+
border-color: #d31b1b;
|
|
631
591
|
}
|
|
632
|
-
.eds-
|
|
633
|
-
|
|
634
|
-
|
|
592
|
+
.eds-contrast .eds-form-control-wrapper--error {
|
|
593
|
+
border-color: #ff9494;
|
|
594
|
+
--border-color: #ff9494;
|
|
635
595
|
}
|
|
636
|
-
.eds-
|
|
637
|
-
|
|
638
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
639
|
-
outline-offset: 0.125rem;
|
|
596
|
+
.eds-contrast .eds-form-control-wrapper--error:hover {
|
|
597
|
+
border-color: #d31b1b;
|
|
640
598
|
}
|
|
641
|
-
.eds-contrast .eds-form-
|
|
642
|
-
|
|
599
|
+
.eds-contrast .eds-form-control-wrapper--error[focus-within] {
|
|
600
|
+
border-color: #181c56;
|
|
601
|
+
--border-color: #ff9494;
|
|
643
602
|
}
|
|
644
|
-
.eds-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
width: 1.25rem;
|
|
648
|
-
margin-right: 1rem;
|
|
649
|
-
background-color: #ffffff;
|
|
650
|
-
border: 0.125rem solid #181c56;
|
|
651
|
-
border-radius: 50%;
|
|
652
|
-
display: flex;
|
|
653
|
-
align-items: center;
|
|
654
|
-
justify-content: center;
|
|
603
|
+
.eds-contrast .eds-form-control-wrapper--error:focus-within {
|
|
604
|
+
border-color: #181c56;
|
|
605
|
+
--border-color: #ff9494;
|
|
655
606
|
}
|
|
656
|
-
.eds-contrast .eds-form-
|
|
607
|
+
.eds-contrast .eds-form-control-wrapper--dark {
|
|
657
608
|
background-color: #181c56;
|
|
658
|
-
|
|
609
|
+
color: #ffffff;
|
|
659
610
|
}
|
|
660
|
-
.eds-
|
|
661
|
-
|
|
662
|
-
border-color: #d1d3d3;
|
|
663
|
-
cursor: not-allowed;
|
|
611
|
+
.eds-contrast .eds-form-control-wrapper--dark ::-moz-placeholder {
|
|
612
|
+
color: #aeb7e2;
|
|
664
613
|
}
|
|
665
|
-
.eds-
|
|
666
|
-
|
|
614
|
+
.eds-contrast .eds-form-control-wrapper--dark ::placeholder {
|
|
615
|
+
color: #aeb7e2;
|
|
667
616
|
}
|
|
668
|
-
.eds-contrast .eds-form-
|
|
669
|
-
|
|
670
|
-
border-color: #d1d3d3;
|
|
617
|
+
.eds-contrast .eds-form-control-wrapper--dark:hover {
|
|
618
|
+
border-color: #aeb7e2;
|
|
671
619
|
}
|
|
672
|
-
.eds-
|
|
673
|
-
color: #
|
|
620
|
+
.eds-contrast .eds-form-control-wrapper--dark[focus-within] {
|
|
621
|
+
background-color: #292b6a;
|
|
622
|
+
border-color: #aeb7e2;
|
|
674
623
|
}
|
|
675
|
-
.eds-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
height: 0;
|
|
679
|
-
border-radius: 50%;
|
|
680
|
-
background-color: #181c56;
|
|
681
|
-
transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
|
|
624
|
+
.eds-contrast .eds-form-control-wrapper--dark:focus-within {
|
|
625
|
+
background-color: #292b6a;
|
|
626
|
+
border-color: #aeb7e2;
|
|
682
627
|
}
|
|
683
|
-
.eds-contrast .eds-form-
|
|
684
|
-
background-color:
|
|
628
|
+
.eds-contrast .eds-form-control-wrapper--dark * {
|
|
629
|
+
background-color: transparent;
|
|
630
|
+
color: inherit;
|
|
685
631
|
}
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
min-height: 7.75rem;
|
|
690
|
-
resize: vertical;
|
|
691
|
-
line-height: 1.5rem;
|
|
632
|
+
.eds-contrast .eds-form-control-wrapper--dark.eds-form-control-wrapper--disabled {
|
|
633
|
+
background-color: #292b6a;
|
|
634
|
+
color: #8285a8;
|
|
692
635
|
}
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
636
|
+
|
|
637
|
+
.eds-form-control {
|
|
638
|
+
-webkit-appearance: none;
|
|
639
|
+
-moz-appearance: none;
|
|
640
|
+
appearance: none;
|
|
641
|
+
background-color: transparent;
|
|
642
|
+
border: 0;
|
|
699
643
|
color: inherit;
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
font: inherit;
|
|
703
|
-
font-size: 1rem;
|
|
644
|
+
display: block;
|
|
645
|
+
font-family: inherit;
|
|
704
646
|
line-height: 1rem;
|
|
705
|
-
|
|
706
|
-
|
|
647
|
+
font-size: 1rem;
|
|
648
|
+
padding: 20px 1rem 0.25rem;
|
|
649
|
+
width: 100%;
|
|
707
650
|
}
|
|
708
|
-
.eds-
|
|
709
|
-
|
|
710
|
-
|
|
651
|
+
.eds-form-control::-moz-placeholder {
|
|
652
|
+
opacity: 0;
|
|
653
|
+
-moz-transition: opacity 0.2s ease-in-out;
|
|
654
|
+
transition: opacity 0.2s ease-in-out;
|
|
711
655
|
}
|
|
712
|
-
.eds-
|
|
713
|
-
|
|
656
|
+
.eds-form-control::placeholder {
|
|
657
|
+
opacity: 0;
|
|
658
|
+
transition: opacity 0.2s ease-in-out;
|
|
714
659
|
}
|
|
715
|
-
.eds-
|
|
660
|
+
.eds-form-control:focus {
|
|
716
661
|
outline: none;
|
|
717
|
-
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
718
662
|
}
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
content: "";
|
|
722
|
-
display: block;
|
|
723
|
-
background-color: #e9e9e9;
|
|
724
|
-
height: 1.5rem;
|
|
725
|
-
width: 1px;
|
|
663
|
+
.eds-form-control:focus::-moz-placeholder {
|
|
664
|
+
opacity: 1;
|
|
726
665
|
}
|
|
727
|
-
.eds-
|
|
728
|
-
|
|
666
|
+
.eds-form-control:focus::placeholder {
|
|
667
|
+
opacity: 1;
|
|
668
|
+
}
|
|
669
|
+
.eds-form-control__prepend, .eds-form-control__append {
|
|
670
|
+
position: relative;
|
|
671
|
+
margin: 0 1rem;
|
|
672
|
+
line-height: inherit;
|
|
673
|
+
}
|
|
674
|
+
.eds-form-control__prepend--tooltip, .eds-form-control__append--tooltip {
|
|
675
|
+
position: static;
|
|
676
|
+
}
|
|
677
|
+
.eds-form-control__prepend svg, .eds-form-control__append svg {
|
|
678
|
+
top: 0.125rem;
|
|
679
|
+
}
|
|
680
|
+
.eds-form-control__prepend {
|
|
681
|
+
margin-right: 0;
|
|
682
|
+
}
|
|
683
|
+
.eds-form-control__append {
|
|
684
|
+
margin-left: 0;
|
|
729
685
|
}
|
|
730
686
|
/* DO NOT CHANGE!*/
|
|
731
687
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -848,14 +804,47 @@ textarea.eds-form-control.eds-textarea {
|
|
|
848
804
|
}
|
|
849
805
|
/* DO NOT CHANGE!*/
|
|
850
806
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
851
|
-
.eds-
|
|
852
|
-
|
|
807
|
+
textarea.eds-form-control.eds-textarea {
|
|
808
|
+
min-height: 7.75rem;
|
|
809
|
+
resize: vertical;
|
|
810
|
+
line-height: 1.5rem;
|
|
811
|
+
}
|
|
812
|
+
/* DO NOT CHANGE!*/
|
|
813
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
814
|
+
.eds-textfield__clear-button {
|
|
815
|
+
background: none;
|
|
816
|
+
border: none;
|
|
817
|
+
border-radius: 50%;
|
|
818
|
+
color: inherit;
|
|
819
|
+
cursor: pointer;
|
|
853
820
|
display: flex;
|
|
854
|
-
|
|
855
|
-
|
|
821
|
+
font: inherit;
|
|
822
|
+
font-size: 1rem;
|
|
823
|
+
line-height: 1rem;
|
|
824
|
+
padding: 0.5rem;
|
|
825
|
+
margin-right: -0.75rem;
|
|
856
826
|
}
|
|
857
|
-
.eds-
|
|
858
|
-
|
|
827
|
+
.eds-textfield__clear-button-wrapper {
|
|
828
|
+
display: flex;
|
|
829
|
+
align-items: center;
|
|
830
|
+
}
|
|
831
|
+
.eds-textfield__clear-button:hover {
|
|
832
|
+
background: #f3f3f3;
|
|
833
|
+
}
|
|
834
|
+
.eds-textfield__clear-button:focus {
|
|
835
|
+
outline: none;
|
|
836
|
+
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.eds-textfield__divider {
|
|
840
|
+
content: "";
|
|
841
|
+
display: block;
|
|
842
|
+
background-color: #e9e9e9;
|
|
843
|
+
height: 1.5rem;
|
|
844
|
+
width: 1px;
|
|
845
|
+
}
|
|
846
|
+
.eds-contrast .eds-form-control-wrapper--disabled .eds-textfield__divider {
|
|
847
|
+
background-color: #8285a8;
|
|
859
848
|
}
|
|
860
849
|
/* DO NOT CHANGE!*/
|
|
861
850
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -930,6 +919,17 @@ textarea.eds-form-control.eds-textarea {
|
|
|
930
919
|
}
|
|
931
920
|
/* DO NOT CHANGE!*/
|
|
932
921
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
922
|
+
.eds-segmented-control {
|
|
923
|
+
margin-top: 0.25rem;
|
|
924
|
+
display: flex;
|
|
925
|
+
background: #d1d4e3;
|
|
926
|
+
border-radius: 0.5rem;
|
|
927
|
+
}
|
|
928
|
+
.eds-contrast .eds-segmented-control {
|
|
929
|
+
background: #393d79;
|
|
930
|
+
}
|
|
931
|
+
/* DO NOT CHANGE!*/
|
|
932
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
933
933
|
.eds-input-panel[focus-within] .eds-input-panel__container {
|
|
934
934
|
border-color: #181c56;
|
|
935
935
|
box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/form",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.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.3.
|
|
31
|
-
"@entur/tokens": "^3.
|
|
32
|
-
"@entur/tooltip": "^2.6.
|
|
33
|
-
"@entur/typography": "^1.
|
|
34
|
-
"@entur/utils": "^0.9.
|
|
30
|
+
"@entur/icons": "^6.3.1",
|
|
31
|
+
"@entur/tokens": "^3.10.0",
|
|
32
|
+
"@entur/tooltip": "^2.6.20",
|
|
33
|
+
"@entur/typography": "^1.8.1",
|
|
34
|
+
"@entur/utils": "^0.9.1",
|
|
35
35
|
"classnames": "^2.3.1"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "de2304501aabbda4457d9dbfe30671786b91474e"
|
|
38
38
|
}
|