@nl-rvo/css-form-field 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/index.css +66 -45
- package/dist/index.min.css +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# `@nl-rvo/css-form-field`
|
|
2
2
|
|
|
3
|
+
## 1.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 5442d67: Removed third party component imports and updated CSS to be inline with the original designs
|
|
8
|
+
|
|
9
|
+
## 1.4.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- cde2fed: Update Label component with new parameters and updated required text
|
|
14
|
+
|
|
3
15
|
## 1.3.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
package/dist/index.css
CHANGED
|
@@ -130,13 +130,14 @@
|
|
|
130
130
|
.utrecht-form-field-description--warning {
|
|
131
131
|
color: var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color));
|
|
132
132
|
}
|
|
133
|
-
|
|
134
133
|
.rvo-layout-column, .rvo-form-field, .rvo-form-field__label {
|
|
134
|
+
align-items: stretch;
|
|
135
135
|
display: flex;
|
|
136
136
|
flex-direction: column;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
.rvo-layout-column-inline {
|
|
140
|
+
align-items: stretch;
|
|
140
141
|
display: inline-flex;
|
|
141
142
|
flex-direction: column;
|
|
142
143
|
}
|
|
@@ -148,6 +149,7 @@
|
|
|
148
149
|
}
|
|
149
150
|
|
|
150
151
|
.rvo-layout-row-inline {
|
|
152
|
+
align-items: stretch;
|
|
151
153
|
display: inline-flex;
|
|
152
154
|
flex-direction: row;
|
|
153
155
|
}
|
|
@@ -180,18 +182,6 @@
|
|
|
180
182
|
align-content: space-between;
|
|
181
183
|
}
|
|
182
184
|
|
|
183
|
-
.rvo-layout-justify-items-start {
|
|
184
|
-
justify-items: flex-start;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.rvo-layout-justify-items-center {
|
|
188
|
-
justify-items: center;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.rvo-layout-justify-items-end {
|
|
192
|
-
justify-items: flex-end;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
185
|
.rvo-layout-justify-content-start {
|
|
196
186
|
justify-content: flex-start;
|
|
197
187
|
}
|
|
@@ -208,6 +198,18 @@
|
|
|
208
198
|
justify-content: space-between;
|
|
209
199
|
}
|
|
210
200
|
|
|
201
|
+
.rvo-layout-justify-items-start {
|
|
202
|
+
justify-items: flex-start;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.rvo-layout-justify-items-center {
|
|
206
|
+
justify-items: center;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.rvo-layout-justify-items-end {
|
|
210
|
+
justify-items: flex-end;
|
|
211
|
+
}
|
|
212
|
+
|
|
211
213
|
.rvo-layout--wrap {
|
|
212
214
|
flex-wrap: wrap;
|
|
213
215
|
}
|
|
@@ -256,86 +258,105 @@
|
|
|
256
258
|
gap: var(--rvo-space-4xl);
|
|
257
259
|
}
|
|
258
260
|
|
|
259
|
-
.rvo-layout-
|
|
260
|
-
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.rvo-layout-margin-horizontal--2xs {
|
|
264
|
-
margin-inline: var(--rvo-space-2xs);
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
.rvo-layout-margin-horizontal--xs {
|
|
268
|
-
margin-inline: var(--rvo-space-xs);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.rvo-layout-margin-horizontal--sm {
|
|
272
|
-
margin-inline: var(--rvo-space-sm);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
.rvo-layout-margin-horizontal--md {
|
|
276
|
-
margin-inline: var(--rvo-space-md);
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
.rvo-layout-margin-horizontal--lg {
|
|
280
|
-
margin-inline: var(--rvo-space-lg);
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.rvo-layout-margin-horizontal--xl {
|
|
284
|
-
margin-inline: var(--rvo-space-xl);
|
|
261
|
+
.rvo-layout-gap--5xl {
|
|
262
|
+
gap: var(--rvo-space-5xl);
|
|
285
263
|
}
|
|
286
264
|
|
|
287
|
-
.rvo-layout-margin-horizontal--
|
|
288
|
-
margin-inline:
|
|
265
|
+
.rvo-layout-margin-horizontal--0 {
|
|
266
|
+
margin-inline: 0;
|
|
289
267
|
}
|
|
290
268
|
|
|
291
|
-
.rvo-layout-margin-
|
|
292
|
-
margin-
|
|
269
|
+
.rvo-layout-margin-vertical--0 {
|
|
270
|
+
margin-block: 0;
|
|
293
271
|
}
|
|
294
272
|
|
|
295
|
-
.rvo-layout-margin-horizontal--
|
|
296
|
-
margin-inline: var(--rvo-space-
|
|
273
|
+
.rvo-layout-margin-horizontal--3xs {
|
|
274
|
+
margin-inline: var(--rvo-space-3xs);
|
|
297
275
|
}
|
|
298
276
|
|
|
299
277
|
.rvo-layout-margin-vertical--3xs {
|
|
300
278
|
margin-block: var(--rvo-space-3xs);
|
|
301
279
|
}
|
|
302
280
|
|
|
281
|
+
.rvo-layout-margin-horizontal--2xs {
|
|
282
|
+
margin-inline: var(--rvo-space-2xs);
|
|
283
|
+
}
|
|
284
|
+
|
|
303
285
|
.rvo-layout-margin-vertical--2xs {
|
|
304
286
|
margin-block: var(--rvo-space-2xs);
|
|
305
287
|
}
|
|
306
288
|
|
|
289
|
+
.rvo-layout-margin-horizontal--xs {
|
|
290
|
+
margin-inline: var(--rvo-space-xs);
|
|
291
|
+
}
|
|
292
|
+
|
|
307
293
|
.rvo-layout-margin-vertical--xs {
|
|
308
294
|
margin-block: var(--rvo-space-xs);
|
|
309
295
|
}
|
|
310
296
|
|
|
297
|
+
.rvo-layout-margin-horizontal--sm {
|
|
298
|
+
margin-inline: var(--rvo-space-sm);
|
|
299
|
+
}
|
|
300
|
+
|
|
311
301
|
.rvo-layout-margin-vertical--sm {
|
|
312
302
|
margin-block: var(--rvo-space-sm);
|
|
313
303
|
}
|
|
314
304
|
|
|
305
|
+
.rvo-layout-margin-horizontal--md {
|
|
306
|
+
margin-inline: var(--rvo-space-md);
|
|
307
|
+
}
|
|
308
|
+
|
|
315
309
|
.rvo-layout-margin-vertical--md {
|
|
316
310
|
margin-block: var(--rvo-space-md);
|
|
317
311
|
}
|
|
318
312
|
|
|
313
|
+
.rvo-layout-margin-horizontal--lg {
|
|
314
|
+
margin-inline: var(--rvo-space-lg);
|
|
315
|
+
}
|
|
316
|
+
|
|
319
317
|
.rvo-layout-margin-vertical--lg {
|
|
320
318
|
margin-block: var(--rvo-space-lg);
|
|
321
319
|
}
|
|
322
320
|
|
|
321
|
+
.rvo-layout-margin-horizontal--xl {
|
|
322
|
+
margin-inline: var(--rvo-space-xl);
|
|
323
|
+
}
|
|
324
|
+
|
|
323
325
|
.rvo-layout-margin-vertical--xl {
|
|
324
326
|
margin-block: var(--rvo-space-xl);
|
|
325
327
|
}
|
|
326
328
|
|
|
329
|
+
.rvo-layout-margin-horizontal--2xl {
|
|
330
|
+
margin-inline: var(--rvo-space-2xl);
|
|
331
|
+
}
|
|
332
|
+
|
|
327
333
|
.rvo-layout-margin-vertical--2xl {
|
|
328
334
|
margin-block: var(--rvo-space-2xl);
|
|
329
335
|
}
|
|
330
336
|
|
|
337
|
+
.rvo-layout-margin-horizontal--3xl {
|
|
338
|
+
margin-inline: var(--rvo-space-3xl);
|
|
339
|
+
}
|
|
340
|
+
|
|
331
341
|
.rvo-layout-margin-vertical--3xl {
|
|
332
342
|
margin-block: var(--rvo-space-3xl);
|
|
333
343
|
}
|
|
334
344
|
|
|
345
|
+
.rvo-layout-margin-horizontal--4xl {
|
|
346
|
+
margin-inline: var(--rvo-space-4xl);
|
|
347
|
+
}
|
|
348
|
+
|
|
335
349
|
.rvo-layout-margin-vertical--4xl {
|
|
336
350
|
margin-block: var(--rvo-space-4xl);
|
|
337
351
|
}
|
|
338
352
|
|
|
353
|
+
.rvo-layout-margin-horizontal--5xl {
|
|
354
|
+
margin-inline: var(--rvo-space-5xl);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.rvo-layout-margin-vertical--5xl {
|
|
358
|
+
margin-block: var(--rvo-space-5xl);
|
|
359
|
+
}
|
|
339
360
|
.rvo-form-field {
|
|
340
361
|
clear: both;
|
|
341
362
|
}
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family,inherit);font-size:var(--utrecht-form-field-description-font-size,inherit);font-style:var(--utrecht-form-field-description-font-style);line-height:var(--utrecht-form-field-description-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description--
|
|
1
|
+
.utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:"input label" "input description" "input error-message";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family,inherit);font-size:var(--utrecht-form-field-description-font-size,inherit);font-style:var(--utrecht-form-field-description-font-style);line-height:var(--utrecht-form-field-description-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color,var(--utrecht-feedback-invalid-color,var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color,var(--utrecht-feedback-valid-color,var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color,var(--utrecht-feedback-warning-color))}.rvo-form-field,.rvo-form-field__label,.rvo-layout-column{align-items:stretch;display:flex;flex-direction:column}.rvo-layout-column-inline{align-items:stretch;display:inline-flex;flex-direction:column}.rvo-layout-row{align-items:center;display:flex;flex-direction:row}.rvo-layout-row-inline{align-items:stretch;display:inline-flex;flex-direction:row}.rvo-layout-align-items-start{align-items:flex-start}.rvo-layout-align-items-center{align-items:center}.rvo-layout-align-items-end{align-items:flex-end}.rvo-layout-align-content-start{align-content:flex-start}.rvo-layout-align-content-center{align-content:center}.rvo-layout-align-content-end{align-content:flex-end}.rvo-layout-align-content-space-between{align-content:space-between}.rvo-layout-justify-content-start{justify-content:flex-start}.rvo-layout-justify-content-center{justify-content:center}.rvo-layout-justify-content-end{justify-content:flex-end}.rvo-layout-justify-content-space-between{justify-content:space-between}.rvo-layout-justify-items-start{justify-items:flex-start}.rvo-layout-justify-items-center{justify-items:center}.rvo-layout-justify-items-end{justify-items:flex-end}.rvo-layout--wrap{flex-wrap:wrap}.rvo-layout-gap--0{gap:0}.rvo-layout-gap--3xs{gap:var(--rvo-space-3xs)}.rvo-form-field__label,.rvo-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-form-field,.rvo-layout-gap--sm{gap:var(--rvo-space-sm)}.rvo-layout-gap--md{gap:var(--rvo-space-md)}.rvo-layout-gap--lg{gap:var(--rvo-space-lg)}.rvo-layout-gap--xl{gap:var(--rvo-space-xl)}.rvo-layout-gap--2xl{gap:var(--rvo-space-2xl)}.rvo-layout-gap--3xl{gap:var(--rvo-space-3xl)}.rvo-layout-gap--4xl{gap:var(--rvo-space-4xl)}.rvo-layout-gap--5xl{gap:var(--rvo-space-5xl)}.rvo-layout-margin-horizontal--0{margin-inline:0}.rvo-layout-margin-vertical--0{margin-block:0}.rvo-layout-margin-horizontal--3xs{margin-inline:var(--rvo-space-3xs)}.rvo-layout-margin-vertical--3xs{margin-block:var(--rvo-space-3xs)}.rvo-layout-margin-horizontal--2xs{margin-inline:var(--rvo-space-2xs)}.rvo-layout-margin-vertical--2xs{margin-block:var(--rvo-space-2xs)}.rvo-layout-margin-horizontal--xs{margin-inline:var(--rvo-space-xs)}.rvo-layout-margin-vertical--xs{margin-block:var(--rvo-space-xs)}.rvo-layout-margin-horizontal--sm{margin-inline:var(--rvo-space-sm)}.rvo-layout-margin-vertical--sm{margin-block:var(--rvo-space-sm)}.rvo-layout-margin-horizontal--md{margin-inline:var(--rvo-space-md)}.rvo-layout-margin-vertical--md{margin-block:var(--rvo-space-md)}.rvo-layout-margin-horizontal--lg{margin-inline:var(--rvo-space-lg)}.rvo-layout-margin-vertical--lg{margin-block:var(--rvo-space-lg)}.rvo-layout-margin-horizontal--xl{margin-inline:var(--rvo-space-xl)}.rvo-layout-margin-vertical--xl{margin-block:var(--rvo-space-xl)}.rvo-layout-margin-horizontal--2xl{margin-inline:var(--rvo-space-2xl)}.rvo-layout-margin-vertical--2xl{margin-block:var(--rvo-space-2xl)}.rvo-layout-margin-horizontal--3xl{margin-inline:var(--rvo-space-3xl)}.rvo-layout-margin-vertical--3xl{margin-block:var(--rvo-space-3xl)}.rvo-layout-margin-horizontal--4xl{margin-inline:var(--rvo-space-4xl)}.rvo-layout-margin-vertical--4xl{margin-block:var(--rvo-space-4xl)}.rvo-layout-margin-horizontal--5xl{margin-inline:var(--rvo-space-5xl)}.rvo-layout-margin-vertical--5xl{margin-block:var(--rvo-space-5xl)}.rvo-form-field{clear:both}.rvo-form-field__label-text{font-weight:var(--utrecht-form-label-font-weight)}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family,inherit);font-size:var(--utrecht-form-field-description-font-size,inherit);font-style:var(--utrecht-form-field-description-font-style);line-height:var(--utrecht-form-field-description-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description--
|
|
1
|
+
export default ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family,inherit);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-margin-block-start, 0));page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width,0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-checkbox-size) 100fr}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px))*-1)}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end,12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end,12px);grid-template-areas:\"input label\" \"input description\" \"input error-message\";grid-template-columns:var(--utrecht-radio-button-size) 100fr}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc((var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))*-1)}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end,12px)}.utrecht-form-field__input{grid-area:input;margin-block-end:0;margin-block-start:0;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:error-message;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-field__error-message{grid-area:error-message;order:3}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family,inherit);font-size:var(--utrecht-form-field-description-font-size,inherit);font-style:var(--utrecht-form-field-description-font-style);line-height:var(--utrecht-form-field-description-line-height);margin-block-end:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0)*var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color,var(--utrecht-feedback-invalid-color,var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color,var(--utrecht-feedback-valid-color,var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color,var(--utrecht-feedback-warning-color))}.rvo-form-field,.rvo-form-field__label,.rvo-layout-column{align-items:stretch;display:flex;flex-direction:column}.rvo-layout-column-inline{align-items:stretch;display:inline-flex;flex-direction:column}.rvo-layout-row{align-items:center;display:flex;flex-direction:row}.rvo-layout-row-inline{align-items:stretch;display:inline-flex;flex-direction:row}.rvo-layout-align-items-start{align-items:flex-start}.rvo-layout-align-items-center{align-items:center}.rvo-layout-align-items-end{align-items:flex-end}.rvo-layout-align-content-start{align-content:flex-start}.rvo-layout-align-content-center{align-content:center}.rvo-layout-align-content-end{align-content:flex-end}.rvo-layout-align-content-space-between{align-content:space-between}.rvo-layout-justify-content-start{justify-content:flex-start}.rvo-layout-justify-content-center{justify-content:center}.rvo-layout-justify-content-end{justify-content:flex-end}.rvo-layout-justify-content-space-between{justify-content:space-between}.rvo-layout-justify-items-start{justify-items:flex-start}.rvo-layout-justify-items-center{justify-items:center}.rvo-layout-justify-items-end{justify-items:flex-end}.rvo-layout--wrap{flex-wrap:wrap}.rvo-layout-gap--0{gap:0}.rvo-layout-gap--3xs{gap:var(--rvo-space-3xs)}.rvo-form-field__label,.rvo-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-form-field,.rvo-layout-gap--sm{gap:var(--rvo-space-sm)}.rvo-layout-gap--md{gap:var(--rvo-space-md)}.rvo-layout-gap--lg{gap:var(--rvo-space-lg)}.rvo-layout-gap--xl{gap:var(--rvo-space-xl)}.rvo-layout-gap--2xl{gap:var(--rvo-space-2xl)}.rvo-layout-gap--3xl{gap:var(--rvo-space-3xl)}.rvo-layout-gap--4xl{gap:var(--rvo-space-4xl)}.rvo-layout-gap--5xl{gap:var(--rvo-space-5xl)}.rvo-layout-margin-horizontal--0{margin-inline:0}.rvo-layout-margin-vertical--0{margin-block:0}.rvo-layout-margin-horizontal--3xs{margin-inline:var(--rvo-space-3xs)}.rvo-layout-margin-vertical--3xs{margin-block:var(--rvo-space-3xs)}.rvo-layout-margin-horizontal--2xs{margin-inline:var(--rvo-space-2xs)}.rvo-layout-margin-vertical--2xs{margin-block:var(--rvo-space-2xs)}.rvo-layout-margin-horizontal--xs{margin-inline:var(--rvo-space-xs)}.rvo-layout-margin-vertical--xs{margin-block:var(--rvo-space-xs)}.rvo-layout-margin-horizontal--sm{margin-inline:var(--rvo-space-sm)}.rvo-layout-margin-vertical--sm{margin-block:var(--rvo-space-sm)}.rvo-layout-margin-horizontal--md{margin-inline:var(--rvo-space-md)}.rvo-layout-margin-vertical--md{margin-block:var(--rvo-space-md)}.rvo-layout-margin-horizontal--lg{margin-inline:var(--rvo-space-lg)}.rvo-layout-margin-vertical--lg{margin-block:var(--rvo-space-lg)}.rvo-layout-margin-horizontal--xl{margin-inline:var(--rvo-space-xl)}.rvo-layout-margin-vertical--xl{margin-block:var(--rvo-space-xl)}.rvo-layout-margin-horizontal--2xl{margin-inline:var(--rvo-space-2xl)}.rvo-layout-margin-vertical--2xl{margin-block:var(--rvo-space-2xl)}.rvo-layout-margin-horizontal--3xl{margin-inline:var(--rvo-space-3xl)}.rvo-layout-margin-vertical--3xl{margin-block:var(--rvo-space-3xl)}.rvo-layout-margin-horizontal--4xl{margin-inline:var(--rvo-space-4xl)}.rvo-layout-margin-vertical--4xl{margin-block:var(--rvo-space-4xl)}.rvo-layout-margin-horizontal--5xl{margin-inline:var(--rvo-space-5xl)}.rvo-layout-margin-vertical--5xl{margin-block:var(--rvo-space-5xl)}.rvo-form-field{clear:both}.rvo-form-field__label-text{font-weight:var(--utrecht-form-label-font-weight)}";
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.5.0",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"license": "CC0-1.0",
|
|
5
5
|
"name": "@nl-rvo/css-form-field",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"directory": "components/form-field"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@nl-rvo/build-utils-css": "0.0
|
|
28
|
+
"@nl-rvo/build-utils-css": "0.1.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@utrecht/form-field-css": "1.5.0",
|