@amsterdam/design-system-css 0.1.3 → 0.1.5

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.
Files changed (88) hide show
  1. package/README.md +1 -1
  2. package/dist/accordion/accordion.css +1 -0
  3. package/dist/accordion/accordion.css.map +1 -0
  4. package/dist/blockquote/blockquote.css +1 -0
  5. package/dist/blockquote/blockquote.css.map +1 -0
  6. package/dist/breadcrumb/breadcrumb.css +1 -0
  7. package/dist/breadcrumb/breadcrumb.css.map +1 -0
  8. package/dist/button/button.css +1 -702
  9. package/dist/button/button.css.map +1 -1
  10. package/dist/checkbox/checkbox.css +1 -0
  11. package/dist/checkbox/checkbox.css.map +1 -0
  12. package/dist/footer/footer.css +1 -0
  13. package/dist/footer/footer.css.map +1 -0
  14. package/dist/form-label/form-label.css +1 -26
  15. package/dist/form-label/form-label.css.map +1 -1
  16. package/dist/grid/grid-cell.css +1 -0
  17. package/dist/grid/grid-cell.css.map +1 -0
  18. package/dist/grid/page-grid.css +1 -0
  19. package/dist/grid/page-grid.css.map +1 -0
  20. package/dist/heading/heading.css +1 -64
  21. package/dist/heading/heading.css.map +1 -1
  22. package/dist/icon/icon.css +1 -122
  23. package/dist/icon/icon.css.map +1 -1
  24. package/dist/index.css +1 -0
  25. package/dist/index.css.map +1 -0
  26. package/dist/link/link.css +1 -97
  27. package/dist/link/link.css.map +1 -1
  28. package/dist/ordered-list/ordered-list.css +1 -0
  29. package/dist/ordered-list/ordered-list.css.map +1 -0
  30. package/dist/page-heading/page-heading.css +1 -0
  31. package/dist/page-heading/page-heading.css.map +1 -0
  32. package/dist/page-menu/page-menu.css +1 -0
  33. package/dist/page-menu/page-menu.css.map +1 -0
  34. package/dist/paragraph/paragraph.css +1 -49
  35. package/dist/paragraph/paragraph.css.map +1 -1
  36. package/dist/testula/testula.css +9 -0
  37. package/dist/testula/testula.css.map +1 -0
  38. package/dist/top-task-link/top-task-link.css +1 -0
  39. package/dist/top-task-link/top-task-link.css.map +1 -0
  40. package/dist/unordered-list/unordered-list.css +1 -0
  41. package/dist/unordered-list/unordered-list.css.map +1 -0
  42. package/dist/visually-hidden/visually-hidden.css +1 -0
  43. package/dist/visually-hidden/visually-hidden.css.map +1 -0
  44. package/package.json +7 -6
  45. package/src/accordion/README.md +42 -0
  46. package/src/accordion/accordion.scss +63 -0
  47. package/src/blockquote/README.md +14 -0
  48. package/src/blockquote/blockquote.scss +41 -0
  49. package/src/breadcrumb/README.md +15 -0
  50. package/src/breadcrumb/breadcrumb.scss +68 -0
  51. package/src/button/button.scss +41 -4
  52. package/src/checkbox/README.md +1 -0
  53. package/src/checkbox/checkbox.scss +225 -0
  54. package/src/footer/README.md +11 -0
  55. package/src/footer/footer-css.md +11 -0
  56. package/src/footer/footer.scss +29 -0
  57. package/src/form-label/form-label.scss +3 -2
  58. package/src/grid/README.md +11 -0
  59. package/src/grid/grid-cell.scss +18 -0
  60. package/src/grid/page-grid.scss +19 -0
  61. package/src/heading/heading.scss +19 -15
  62. package/src/icon/README.md +1 -3
  63. package/src/icon/icon.scss +11 -10
  64. package/src/index.scss +19 -0
  65. package/src/link/README.md +41 -0
  66. package/src/link/link.scss +61 -36
  67. package/src/ordered-list/README.md +7 -0
  68. package/src/ordered-list/ordered-list.scss +53 -0
  69. package/src/page-heading/README.md +16 -0
  70. package/src/page-heading/page-heading.scss +31 -0
  71. package/src/page-menu/README.md +15 -0
  72. package/src/page-menu/page-menu.scss +77 -0
  73. package/src/paragraph/paragraph.scss +13 -8
  74. package/src/top-task-link/README.md +13 -0
  75. package/src/top-task-link/top-task-link.scss +55 -0
  76. package/src/unordered-list/README.md +7 -0
  77. package/src/unordered-list/unordered-list.scss +53 -0
  78. package/src/visually-hidden/README.md +5 -0
  79. package/src/visually-hidden/visually-hidden.scss +17 -0
  80. package/dist/details/details.css +0 -62
  81. package/dist/details/details.css.map +0 -1
  82. package/dist/list/list.css +0 -12
  83. package/dist/list/list.css.map +0 -1
  84. package/dist/radio-button/radio-button.css +0 -341
  85. package/dist/radio-button/radio-button.css.map +0 -1
  86. package/dist/textbox/textbox.css +0 -178
  87. package/dist/textbox/textbox.css.map +0 -1
  88. package/src/list/list.scss +0 -16
@@ -1,341 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
4
- */
5
- /**
6
- * @license EUPL-1.2
7
- * Copyright (c) 2021 Robbert Broersma
8
- */
9
- /**
10
- * @license EUPL-1.2
11
- * Copyright (c) 2021 Gemeente Utrecht
12
- * Copyright (c) 2021 Robbert Broersma
13
- */
14
- /* stylelint-disable-next-line block-no-empty */
15
- /* stylelint-disable-next-line block-no-empty */
16
- .utrecht-radio-button {
17
- /*
18
- * For the `radial-gradient()` use a 5% gradient size to improve anti-aliasing.
19
- * With a 0% gradient, the circle will have jagged edges.
20
- */
21
- -webkit-appearance: none;
22
- -moz-appearance: none;
23
- appearance: none;
24
- margin-block-end: 0;
25
- margin-block-start: 0;
26
- margin-inline-end: 0;
27
- margin-inline-start: 0;
28
- --_utrecht-radio-button-background-color: var(
29
- --_utrecht-radio-button-interactive-background-color,
30
- var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
31
- );
32
- --_utrecht-radio-button-border-color: var(
33
- --_utrecht-radio-button-interactive-border-color,
34
- var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
35
- );
36
- --_utrecht-radio-button-border-width: var(
37
- --_utrecht-radio-button-interactive-border-width,
38
- var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
39
- );
40
- --_utrecht-radio-button-color: var(
41
- --_utrecht-radio-button-interactive-color,
42
- var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
43
- );
44
- --_utrecht-radio-button-icon-size: 0;
45
- background-color: var(--_utrecht-radio-button-background-color);
46
- background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%));
47
- background-position: center;
48
- background-repeat: no-repeat;
49
- background-size: contain;
50
- block-size: var(--utrecht-radio-button-size, 1em);
51
- border-color: var(--_utrecht-radio-button-border-color);
52
- border-radius: 50%;
53
- border-style: solid;
54
- border-width: var(--_utrecht-radio-button-border-width);
55
- cursor: var(--utrecht-action-activate-cursor);
56
- inline-size: var(--utrecht-radio-button-size, 1em);
57
- margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
58
- -webkit-print-color-adjust: exact;
59
- print-color-adjust: exact;
60
- -webkit-user-select: none;
61
- user-select: none;
62
- vertical-align: top;
63
- }
64
-
65
- .utrecht-radio-button--checked {
66
- --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
67
- --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
68
- --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
69
- --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
70
- --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
71
- --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
72
- --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
73
- --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
74
- --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
75
- --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
76
- --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
77
- --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
78
- --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
79
- --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
80
- --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
81
- --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
82
- --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
83
- }
84
-
85
- .utrecht-radio-button--hover {
86
- --_utrecht-radio-button-interactive-background-color: var(
87
- --_utrecht-radio-button-state-hover-background-color,
88
- var(--utrecht-radio-button-hover-background-color)
89
- );
90
- --_utrecht-radio-button-interactive-border-color: var(
91
- --_utrecht-radio-button-state-hover-border-color,
92
- var(--utrecht-radio-button-hover-border-color)
93
- );
94
- --_utrecht-radio-button-interactive-border-width: var(
95
- --_utrecht-radio-button-state-hover-border-width,
96
- var(--utrecht-radio-button-hover-border-width)
97
- );
98
- --_utrecht-radio-button-interactive-color: var(
99
- --_utrecht-radio-button-state-hover-color,
100
- var(--utrecht-radio-button-hover-color)
101
- );
102
- }
103
-
104
- .utrecht-radio-button--focus {
105
- --_utrecht-radio-button-interactive-background-color: var(
106
- --utrecht-radio-button-focus-background-color,
107
- var(--utrecht-radio-button-focus-background-color)
108
- );
109
- --_utrecht-radio-button-interactive-border-color: var(
110
- --utrecht-radio-button-focus-border-color,
111
- var(--utrecht-radio-button-focus-border-color)
112
- );
113
- --_utrecht-radio-button-interactive-border-width: var(
114
- --utrecht-radio-button-focus-border-width,
115
- var(--utrecht-radio-button-focus-border-width)
116
- );
117
- --_utrecht-radio-button-interactive-color: var(
118
- --utrecht-radio-button-focus-color,
119
- var(--utrecht-radio-button-focus-color)
120
- );
121
- }
122
-
123
- .utrecht-radio-button--focus-visible {
124
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
125
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
126
- * can combine it with the focus ring box shadow.
127
- */
128
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
129
- var(--utrecht-focus-inverse-outline-color, transparent);
130
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
131
- outline-color: var(--utrecht-focus-outline-color, revert);
132
- outline-offset: var(--utrecht-focus-outline-offset, revert);
133
- outline-style: var(--utrecht-focus-outline-style, revert);
134
- outline-width: var(--utrecht-focus-outline-width, revert);
135
- }
136
-
137
- .utrecht-radio-button--active {
138
- --_utrecht-radio-button-interactive-background-color: var(
139
- --_utrecht-radio-button-state-active-background-color,
140
- var(--utrecht-radio-button-active-background-color)
141
- );
142
- --_utrecht-radio-button-interactive-border-color: var(
143
- --_utrecht-radio-button-state-active-border-color,
144
- var(--utrecht-radio-button-active-border-color)
145
- );
146
- --_utrecht-radio-button-interactive-border-width: var(
147
- --_utrecht-radio-button-state-active-border-width,
148
- var(--utrecht-radio-button-active-border-width)
149
- );
150
- --_utrecht-radio-button-interactive-color: var(
151
- --_utrecht-radio-button-state-active-color,
152
- var(--utrecht-radio-button-active-color)
153
- );
154
- }
155
-
156
- .utrecht-radio-button--disabled {
157
- /*
158
- * The disabled radio button should have:
159
- * - should have no active effect
160
- * - should have no focus effect
161
- * - should have no hover effect
162
- * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
163
- */
164
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
165
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
166
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
167
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
168
- /* no focus effect */
169
- --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
170
- --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
171
- --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
172
- --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
173
- /* no active effect */
174
- --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
175
- --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
176
- --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
177
- --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
178
- /* no hover effect */
179
- --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
180
- --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
181
- --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
182
- --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
183
- cursor: var(--utrecht-action-disabled-cursor);
184
- }
185
-
186
- .utrecht-radio-button--invalid {
187
- border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
188
- border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
189
- color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
190
- }
191
-
192
- .utrecht-radio-button--html-input {
193
- /* override the `:focus` selector above */
194
- /* stylelint-disable-next-line no-descending-specificity */
195
- }
196
- .utrecht-radio-button--html-input:checked {
197
- --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
198
- --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
199
- --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
200
- --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
201
- --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
202
- --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
203
- --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
204
- --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
205
- --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
206
- --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
207
- --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
208
- --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
209
- --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
210
- --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
211
- --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
212
- --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
213
- --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
214
- }
215
- .utrecht-radio-button--html-input:disabled {
216
- /*
217
- * The disabled radio button should have:
218
- * - should have no active effect
219
- * - should have no focus effect
220
- * - should have no hover effect
221
- * - should have a working focus-visible effect, in case someone sets `<input type="radio" disabled tabindex="0">`
222
- */
223
- --_utrecht-radio-button-background-color: var(--utrecht-radio-button-disabled-background-color);
224
- --_utrecht-radio-button-border-color: var(--utrecht-radio-button-disabled-border-color);
225
- --_utrecht-radio-button-border-width: var(--utrecht-radio-button-disabled-border-width);
226
- --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color);
227
- /* no focus effect */
228
- --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
229
- --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
230
- --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
231
- --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
232
- /* no active effect */
233
- --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
234
- --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
235
- --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
236
- --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
237
- /* no hover effect */
238
- --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
239
- --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
240
- --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
241
- --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
242
- cursor: var(--utrecht-action-disabled-cursor);
243
- }
244
- .utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
245
- border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
246
- border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
247
- color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
248
- }
249
- .utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
250
- --_utrecht-radio-button-interactive-background-color: var(
251
- --utrecht-radio-button-focus-background-color,
252
- var(--utrecht-radio-button-focus-background-color)
253
- );
254
- --_utrecht-radio-button-interactive-border-color: var(
255
- --utrecht-radio-button-focus-border-color,
256
- var(--utrecht-radio-button-focus-border-color)
257
- );
258
- --_utrecht-radio-button-interactive-border-width: var(
259
- --utrecht-radio-button-focus-border-width,
260
- var(--utrecht-radio-button-focus-border-width)
261
- );
262
- --_utrecht-radio-button-interactive-color: var(
263
- --utrecht-radio-button-focus-color,
264
- var(--utrecht-radio-button-focus-color)
265
- );
266
- }
267
- .utrecht-radio-button--html-input:focus-visible {
268
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
269
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
270
- * can combine it with the focus ring box shadow.
271
- */
272
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
273
- var(--utrecht-focus-inverse-outline-color, transparent);
274
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
275
- outline-color: var(--utrecht-focus-outline-color, revert);
276
- outline-offset: var(--utrecht-focus-outline-offset, revert);
277
- outline-style: var(--utrecht-focus-outline-style, revert);
278
- outline-width: var(--utrecht-focus-outline-width, revert);
279
- }
280
- .utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
281
- --_utrecht-radio-button-interactive-background-color: var(
282
- --_utrecht-radio-button-state-hover-background-color,
283
- var(--utrecht-radio-button-hover-background-color)
284
- );
285
- --_utrecht-radio-button-interactive-border-color: var(
286
- --_utrecht-radio-button-state-hover-border-color,
287
- var(--utrecht-radio-button-hover-border-color)
288
- );
289
- --_utrecht-radio-button-interactive-border-width: var(
290
- --_utrecht-radio-button-state-hover-border-width,
291
- var(--utrecht-radio-button-hover-border-width)
292
- );
293
- --_utrecht-radio-button-interactive-color: var(
294
- --_utrecht-radio-button-state-hover-color,
295
- var(--utrecht-radio-button-hover-color)
296
- );
297
- }
298
- .utrecht-radio-button--html-input:active:not([aria-disabled=true], :disabled) {
299
- --_utrecht-radio-button-interactive-background-color: var(
300
- --_utrecht-radio-button-state-active-background-color,
301
- var(--utrecht-radio-button-active-background-color)
302
- );
303
- --_utrecht-radio-button-interactive-border-color: var(
304
- --_utrecht-radio-button-state-active-border-color,
305
- var(--utrecht-radio-button-active-border-color)
306
- );
307
- --_utrecht-radio-button-interactive-border-width: var(
308
- --_utrecht-radio-button-state-active-border-width,
309
- var(--utrecht-radio-button-active-border-width)
310
- );
311
- --_utrecht-radio-button-interactive-color: var(
312
- --_utrecht-radio-button-state-active-color,
313
- var(--utrecht-radio-button-active-color)
314
- );
315
- }
316
-
317
- .amsterdam-radio-button {
318
- --_amsterdam-radio-button-background-color: var(--amsterdam-radio-button-background-color, currentColor);
319
- }
320
-
321
- .amsterdam-radio-button:checked {
322
- background-image: radial-gradient(circle, var(--_amsterdam-radio-button-background-color, transparent) 50%, currentColor 60%);
323
- }
324
-
325
- .amsterdam-radio-button:hover {
326
- box-shadow: var(--amsterdam-radio-button-hover-box-shadow);
327
- }
328
-
329
- .amsterdam-radio-button:checked:hover {
330
- background-color: var(--amsterdam-radio-button-hover-background-color);
331
- border-color: var(--amsterdam-radio-button-hover-border-color);
332
- box-shadow: none;
333
- }
334
-
335
- .amsterdam-radio-button:disabled:checked {
336
- --_amsterdam-radio-button-background-color: var(--amsterdam-radio-button-disabled-background-color);
337
- background-color: var(--amsterdam-radio-button-disabled-background-color);
338
- border-color: var(--amsterdam-radio-button-disabled-border-color);
339
- }
340
-
341
- /*# sourceMappingURL=radio-button.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../node_modules/@utrecht/components/radio-button/css/index.scss","../../node_modules/@utrecht/components/radio-button/css/_mixin.scss","../../node_modules/@utrecht/components/common/focus/_mixin.scss","../../src/radio-button/radio-button.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AA6BA;ADwHA;AD9IA;ACWE;AAAA;AAAA;AAAA;EAVA;EACA;EACA;EACA;EACA;EACA;EACA;EAUA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;EAEA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADpDF;ECwDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADpEF;EC2IE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADnJF;EC4JE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADpKF;AEdE;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;AFOF;ECwGE;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;ADhHF;ACwDE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EAEA;;;ADlFF;EC0FE;EACA;EACA;;;ADxFF;ACiLE;AACA;;AAvBA;EA/HA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmHA;AA/GA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EAEA;;AAqFA;EA7EA;EACA;EACA;;AAqFA;EArCA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;AA+BA;ACjNA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;AD0MA;EApEA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;AA4DA;EA/FA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;;;AE5IF;EACE;;;AAGF;EACE;;;AAOF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EAEA;EACA","file":"radio-button.css"}
@@ -1,178 +0,0 @@
1
- /**
2
- * @license EUPL-1.2
3
- * Copyright (c) 2021 Robbert Broersma
4
- */
5
- /**
6
- * @license EUPL-1.2
7
- * Copyright (c) 2021 Gemeente Utrecht
8
- * Copyright (c) 2021 Robbert Broersma
9
- */
10
- /* stylelint-disable-next-line block-no-empty */
11
- /**
12
- * @license EUPL-1.2
13
- * Copyright (c) 2021 Robbert Broersma
14
- */
15
- /**
16
- * @license EUPL-1.2
17
- * Copyright (c) 2021 Gemeente Utrecht
18
- * Copyright (c) 2021 Robbert Broersma
19
- */
20
- /* stylelint-disable-next-line block-no-empty */
21
- .utrecht-textbox {
22
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
23
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
24
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
25
- border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
26
- border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
27
- border-style: solid;
28
- box-sizing: border-box;
29
- color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
30
- font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
31
- font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
32
- font-weight: initial; /* harden */
33
- height: initial; /* harden */
34
- line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
35
- max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
36
- padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
37
- padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
38
- padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
39
- padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
40
- width: 100%;
41
- }
42
-
43
- .utrecht-textbox--invalid {
44
- --_utrecht-textbox-border-width: var(
45
- --utrecht-textbox-invalid-border-width,
46
- var(
47
- --utrecht-form-control-invalid-border-width,
48
- var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
49
- )
50
- );
51
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
52
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
53
- border-width: var(--_utrecht-textbox-border-width);
54
- border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
55
- color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
56
- }
57
-
58
- .utrecht-textbox--disabled {
59
- background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
60
- border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
61
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
62
- cursor: var(--utrecht-action-disabled-cursor);
63
- }
64
-
65
- .utrecht-textbox--focus {
66
- background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
67
- border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
68
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
69
- }
70
-
71
- .utrecht-textbox--focus-visible {
72
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
73
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
74
- * can combine it with the focus ring box shadow.
75
- */
76
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
77
- var(--utrecht-focus-inverse-outline-color, transparent);
78
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
79
- outline-color: var(--utrecht-focus-outline-color, revert);
80
- outline-offset: var(--utrecht-focus-outline-offset, revert);
81
- outline-style: var(--utrecht-focus-outline-style, revert);
82
- outline-width: var(--utrecht-focus-outline-width, revert);
83
- }
84
-
85
- .utrecht-textbox--read-only {
86
- background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
87
- border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
88
- color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
89
- }
90
-
91
- .utrecht-textbox__placeholder {
92
- color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
93
- font-style: var(--utrecht-form-control-placeholder-font-style);
94
- opacity: 100%;
95
- }
96
-
97
- .utrecht-textbox--numeric {
98
- -moz-appearance: textfield; /* avoid spinner input in Firefox */
99
- font-variant-numeric: lining-nums tabular-nums;
100
- }
101
-
102
- .utrecht-textbox--password {
103
- font-variant-ligatures: none;
104
- font-variant-numeric: slashed-zero;
105
- }
106
-
107
- .utrecht-textbox--url {
108
- font-variant-ligatures: none;
109
- }
110
-
111
- .utrecht-textbox--html-input:disabled {
112
- background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
113
- border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
114
- color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
115
- cursor: var(--utrecht-action-disabled-cursor);
116
- }
117
- .utrecht-textbox--html-input:focus {
118
- background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
119
- border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
120
- color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
121
- /* - The browser default focus ring should apply when these CSS custom properties are not set.
122
- * - Make the `box-shadow` value available, so components that have their own `box-shadow`
123
- * can combine it with the focus ring box shadow.
124
- */
125
- --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
126
- var(--utrecht-focus-inverse-outline-color, transparent);
127
- box-shadow: var(--_utrecht-focus-ring-box-shadow);
128
- outline-color: var(--utrecht-focus-outline-color, revert);
129
- outline-offset: var(--utrecht-focus-outline-offset, revert);
130
- outline-style: var(--utrecht-focus-outline-style, revert);
131
- outline-width: var(--utrecht-focus-outline-width, revert);
132
- }
133
- .utrecht-textbox--html-input:focus:not(:focus-visible) {
134
- /* undo focus ring */
135
- box-shadow: none;
136
- outline-style: revert;
137
- }
138
- .utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] {
139
- --_utrecht-textbox-border-width: var(
140
- --utrecht-textbox-invalid-border-width,
141
- var(
142
- --utrecht-form-control-invalid-border-width,
143
- var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
144
- )
145
- );
146
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
147
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
148
- border-width: var(--_utrecht-textbox-border-width);
149
- border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
150
- color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
151
- }
152
- .utrecht-textbox--html-input:read-only {
153
- background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
154
- border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
155
- color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
156
- }
157
- .utrecht-textbox--html-input::placeholder {
158
- color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
159
- font-style: var(--utrecht-form-control-placeholder-font-style);
160
- opacity: 100%;
161
- }
162
- .utrecht-textbox--html-input[type=password i] {
163
- font-variant-ligatures: none;
164
- font-variant-numeric: slashed-zero;
165
- }
166
- .utrecht-textbox--html-input[type=url i], .utrecht-textbox--html-input[type=email i], .utrecht-textbox--html-input[inputMode=email i], .utrecht-textbox--html-input[inputMode=url i] {
167
- font-variant-ligatures: none;
168
- }
169
- .utrecht-textbox--html-input[pattern="\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] {
170
- -moz-appearance: textfield; /* avoid spinner input in Firefox */
171
- font-variant-numeric: lining-nums tabular-nums;
172
- }
173
-
174
- .amsterdam-textbox:hover {
175
- box-shadow: var(--amsterdam-textbox-hover-box-shadow);
176
- }
177
-
178
- /*# sourceMappingURL=textbox.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../node_modules/@utrecht/components/textbox/css/index.scss","../../node_modules/@utrecht/components/common/focus/_mixin.scss","../../node_modules/@utrecht/components/textbox/css/_mixin.scss","../../src/textbox/textbox.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AA6BA;AC7BA;AAAA;AAAA;AAAA;ADAA;AAAA;AAAA;AAAA;AAAA;AA6BA;ADrBA;EEAE;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EAIA;;;AFvBF;EE2BE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQA;EAOA;EAOA;EACA;EAUA;;;AFxDF;EE+DE;EAOA;EAOA;EAIA;;;AF7EF;EEmFE;EAOA;EAOA;;;AF5FF;AChBE;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADSF;EEmGE;EAOA;EAOA;;;AF7GF;EEoHE;EAIA;EACA;;;AFrHF;EEyHE;EACA;;;AFtHF;EE0HE;EACA;;;AFvHF;EE2HE;;;AAIA;EA7FA;EAOA;EAOA;EAIA;;AAmFE;EA7EF;EAOA;EAOA;AD5GA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;ACqKE;ADjKF;EACA;EACA;;AC4KA;EA/JA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQA;EAOA;EAOA;EACA;EAUA;;AAmIA;EA3EA;EAOA;EAOA;;AAiEA;EA1DA;EAIA;EACA;;AFtGA;EE+GA;EACA;;AF7GA;EEiHA;;AF3GA;EEiGA;EACA;;;AC5JA;EACE","file":"textbox.css"}
@@ -1,16 +0,0 @@
1
- /**
2
- * @license EUPL-1.2+
3
- * Copyright (c) 2023 Gemeente Amsterdam
4
- */
5
-
6
- @mixin reset {
7
- box-sizing: border-box;
8
- }
9
-
10
- .amsterdam-list {
11
- list-style: none;
12
- margin-block: 0;
13
- padding-inline: 0;
14
-
15
- @include reset;
16
- }