@nl-rvo/css-link 1.5.1 → 1.6.1
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 +22 -0
- package/design-tokens.json +86 -18
- package/dist/index.css +71 -6
- package/dist/index.min.css +3 -1
- package/dist/index.mjs +1 -1
- package/package.json +3 -2
- package/src/index.scss +83 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# `@nl-rvo/css-link`
|
|
2
2
|
|
|
3
|
+
## 1.6.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 777d441: Updated the display of child text field in Link component
|
|
8
|
+
|
|
9
|
+
## 1.6.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- b4c00c9: Add outline call-to-action variant to Link component
|
|
14
|
+
|
|
15
|
+
- New `call-to-action-outline` variant with white background and violet text/border, for use alongside the existing `call-to-action` variant
|
|
16
|
+
- Tokens follow the `--rvo-link-call-to-action-outline-*` naming pattern
|
|
17
|
+
|
|
18
|
+
- c6093de: ROOS-349: refactor Link component, moved defaultArgs to storybook components
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- 83a85f5: Implement the updated Icon component
|
|
23
|
+
- 084a230: Ensure package is published with provenance
|
|
24
|
+
|
|
3
25
|
## 1.5.1
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/design-tokens.json
CHANGED
|
@@ -1,29 +1,97 @@
|
|
|
1
1
|
{
|
|
2
2
|
"rvo": {
|
|
3
3
|
"link": {
|
|
4
|
-
"color": {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
5
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
6
|
+
"font-weight": { "css": { "syntax": "*", "inherits": true } },
|
|
7
|
+
"text-decoration": { "css": { "syntax": "*", "inherits": true } },
|
|
8
|
+
"text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
|
|
9
|
+
"text-underline-offset": { "css": { "syntax": "<length>", "inherits": true } },
|
|
10
|
+
"icon": {
|
|
11
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
12
|
+
},
|
|
13
|
+
"hover": {
|
|
14
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
15
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
16
|
+
"font-weight": { "css": { "syntax": "*", "inherits": true } },
|
|
17
|
+
"text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
|
|
18
|
+
"icon": {
|
|
19
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
8
20
|
}
|
|
9
21
|
},
|
|
10
|
-
"
|
|
11
|
-
"css": {
|
|
12
|
-
|
|
13
|
-
|
|
22
|
+
"active": {
|
|
23
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
24
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
25
|
+
"font-weight": { "css": { "syntax": "*", "inherits": true } },
|
|
26
|
+
"text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
|
|
27
|
+
"icon": {
|
|
28
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
14
29
|
}
|
|
15
30
|
},
|
|
16
|
-
"
|
|
17
|
-
"background-color": {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
31
|
+
"focus": {
|
|
32
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
33
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
34
|
+
"font-weight": { "css": { "syntax": "*", "inherits": true } },
|
|
35
|
+
"text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
|
|
36
|
+
"icon": {
|
|
37
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"call-to-action": {
|
|
41
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
42
|
+
"border-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
43
|
+
"border-radius": { "css": { "syntax": "*", "inherits": true } },
|
|
44
|
+
"border-style": { "css": { "syntax": "*", "inherits": true } },
|
|
45
|
+
"border-width": { "css": { "syntax": "<length>", "inherits": true } },
|
|
46
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
47
|
+
"font-weight": { "css": { "syntax": "*", "inherits": true } },
|
|
48
|
+
"min-block-size": { "css": { "syntax": "*", "inherits": true } },
|
|
49
|
+
"icon": {
|
|
50
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
51
|
+
},
|
|
52
|
+
"padding-block-end": { "css": { "syntax": "<length>", "inherits": true } },
|
|
53
|
+
"padding-block-start": { "css": { "syntax": "<length>", "inherits": true } },
|
|
54
|
+
"padding-inline-end": { "css": { "syntax": "<length>", "inherits": true } },
|
|
55
|
+
"padding-inline-start": { "css": { "syntax": "<length>", "inherits": true } },
|
|
56
|
+
"text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } },
|
|
57
|
+
"text-underline-offset": { "css": { "syntax": "*", "inherits": true } },
|
|
58
|
+
"hover": {
|
|
59
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
60
|
+
"border-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
61
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
62
|
+
"icon": {
|
|
63
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
64
|
+
},
|
|
65
|
+
"text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } }
|
|
66
|
+
},
|
|
67
|
+
"active": {
|
|
68
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
69
|
+
"border-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
70
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
71
|
+
"text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } }
|
|
72
|
+
},
|
|
73
|
+
"focus": {
|
|
74
|
+
"text-decoration-thickness": { "css": { "syntax": "*", "inherits": true } }
|
|
22
75
|
},
|
|
23
|
-
"
|
|
24
|
-
"css": {
|
|
25
|
-
|
|
26
|
-
|
|
76
|
+
"outline": {
|
|
77
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
78
|
+
"border-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
79
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
80
|
+
"icon": {
|
|
81
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
82
|
+
},
|
|
83
|
+
"hover": {
|
|
84
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
85
|
+
"border-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
86
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
87
|
+
"icon": {
|
|
88
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"active": {
|
|
92
|
+
"background-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
93
|
+
"border-color": { "css": { "syntax": "<color>", "inherits": true } },
|
|
94
|
+
"color": { "css": { "syntax": "<color>", "inherits": true } }
|
|
27
95
|
}
|
|
28
96
|
}
|
|
29
97
|
}
|
package/dist/index.css
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
.rvo-layout-row, .rvo-link--with-icon {
|
|
17
|
+
.rvo-layout-row, .rvo-link__text, .rvo-link--with-icon {
|
|
18
18
|
align-items: center;
|
|
19
19
|
display: flex;
|
|
20
20
|
flex-direction: row;
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
gap: var(--rvo-space-xs);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
.rvo-layout-gap--sm, .rvo-link--with-icon {
|
|
105
|
+
.rvo-layout-gap--sm, .rvo-link__text, .rvo-link--with-icon {
|
|
106
106
|
gap: var(--rvo-space-sm);
|
|
107
107
|
}
|
|
108
108
|
|
|
@@ -239,10 +239,6 @@
|
|
|
239
239
|
text-decoration-thickness: var(--rvo-link-text-decoration-thickness);
|
|
240
240
|
text-underline-offset: var(--rvo-link-text-underline-offset);
|
|
241
241
|
}
|
|
242
|
-
.rvo-link__text {
|
|
243
|
-
display: block;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
242
|
.rvo-link.rvo-link--normal,
|
|
247
243
|
.rvo-link.rvo-link--normal:hover:not(:focus, :focus-visible, .rvo-link--focus),
|
|
248
244
|
.rvo-link.rvo-link--normal.rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus),
|
|
@@ -343,6 +339,75 @@
|
|
|
343
339
|
color: var(--rvo-color-donkerblauw);
|
|
344
340
|
}
|
|
345
341
|
|
|
342
|
+
.rvo-link--call-to-action {
|
|
343
|
+
align-items: center;
|
|
344
|
+
background-color: var(--rvo-link-call-to-action-background-color);
|
|
345
|
+
border-color: var(--rvo-link-call-to-action-border-color);
|
|
346
|
+
border-radius: var(--rvo-link-call-to-action-border-radius);
|
|
347
|
+
border-style: var(--rvo-link-call-to-action-border-style);
|
|
348
|
+
border-width: var(--rvo-link-call-to-action-border-width);
|
|
349
|
+
box-sizing: border-box;
|
|
350
|
+
color: var(--rvo-link-call-to-action-color);
|
|
351
|
+
font-weight: var(--rvo-link-call-to-action-font-weight);
|
|
352
|
+
min-block-size: var(--rvo-link-call-to-action-min-block-size);
|
|
353
|
+
padding-block-end: var(--rvo-link-call-to-action-padding-block-end);
|
|
354
|
+
padding-block-start: var(--rvo-link-call-to-action-padding-block-start);
|
|
355
|
+
padding-inline-end: var(--rvo-link-call-to-action-padding-inline-end);
|
|
356
|
+
padding-inline-start: var(--rvo-link-call-to-action-padding-inline-start);
|
|
357
|
+
text-decoration: underline;
|
|
358
|
+
text-decoration-color: var(--rvo-link-call-to-action-color);
|
|
359
|
+
text-decoration-thickness: var(--rvo-link-call-to-action-text-decoration-thickness);
|
|
360
|
+
text-underline-offset: var(--rvo-link-call-to-action-text-underline-offset);
|
|
361
|
+
}
|
|
362
|
+
.rvo-link--call-to-action .rvo-link__icon {
|
|
363
|
+
background-color: var(--rvo-link-call-to-action-icon-background-color);
|
|
364
|
+
}
|
|
365
|
+
.rvo-link--call-to-action.rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus), .rvo-link--call-to-action.rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus) {
|
|
366
|
+
background-color: var(--rvo-link-call-to-action-hover-background-color);
|
|
367
|
+
border-color: var(--rvo-link-call-to-action-hover-border-color);
|
|
368
|
+
color: var(--rvo-link-call-to-action-hover-color);
|
|
369
|
+
font-weight: var(--rvo-link-call-to-action-font-weight);
|
|
370
|
+
text-decoration-thickness: var(--rvo-link-call-to-action-hover-text-decoration-thickness);
|
|
371
|
+
}
|
|
372
|
+
.rvo-link--call-to-action.rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus) .rvo-link__icon, .rvo-link--call-to-action.rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus) .rvo-link__icon {
|
|
373
|
+
background-color: var(--rvo-link-call-to-action-hover-icon-background-color);
|
|
374
|
+
}
|
|
375
|
+
.rvo-link--call-to-action.rvo-link:focus, .rvo-link--call-to-action.rvo-link:focus-visible, .rvo-link--call-to-action.rvo-link--focus {
|
|
376
|
+
background-color: var(--rvo-link-call-to-action-background-color);
|
|
377
|
+
color: var(--rvo-link-call-to-action-color);
|
|
378
|
+
font-weight: var(--rvo-link-call-to-action-font-weight);
|
|
379
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
380
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
381
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
382
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
383
|
+
text-decoration-thickness: var(--rvo-link-call-to-action-focus-text-decoration-thickness);
|
|
384
|
+
}
|
|
385
|
+
.rvo-link--call-to-action.rvo-link:focus .rvo-link__icon, .rvo-link--call-to-action.rvo-link:focus-visible .rvo-link__icon, .rvo-link--call-to-action.rvo-link--focus .rvo-link__icon {
|
|
386
|
+
background-color: var(--rvo-link-call-to-action-icon-background-color);
|
|
387
|
+
}
|
|
388
|
+
.rvo-link--call-to-action.rvo-link:active, .rvo-link--call-to-action.rvo-link--active {
|
|
389
|
+
background-color: var(--rvo-link-call-to-action-active-background-color);
|
|
390
|
+
border-color: var(--rvo-link-call-to-action-active-border-color);
|
|
391
|
+
color: var(--rvo-link-call-to-action-active-color);
|
|
392
|
+
text-decoration-thickness: var(--rvo-link-call-to-action-active-text-decoration-thickness);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.rvo-link--call-to-action-outline {
|
|
396
|
+
--rvo-link-call-to-action-background-color: var(--rvo-link-call-to-action-outline-background-color);
|
|
397
|
+
--rvo-link-call-to-action-border-color: var(--rvo-link-call-to-action-outline-border-color);
|
|
398
|
+
--rvo-link-call-to-action-color: var(--rvo-link-call-to-action-outline-color);
|
|
399
|
+
--rvo-link-call-to-action-icon-background-color: var(--rvo-link-call-to-action-outline-icon-background-color);
|
|
400
|
+
--rvo-link-call-to-action-hover-background-color: var(--rvo-link-call-to-action-outline-hover-background-color);
|
|
401
|
+
--rvo-link-call-to-action-hover-border-color: var(--rvo-link-call-to-action-outline-hover-border-color);
|
|
402
|
+
--rvo-link-call-to-action-hover-color: var(--rvo-link-call-to-action-outline-hover-color);
|
|
403
|
+
--rvo-link-call-to-action-hover-icon-background-color: var(
|
|
404
|
+
--rvo-link-call-to-action-outline-hover-icon-background-color
|
|
405
|
+
);
|
|
406
|
+
--rvo-link-call-to-action-active-background-color: var(--rvo-link-call-to-action-outline-active-background-color);
|
|
407
|
+
--rvo-link-call-to-action-active-border-color: var(--rvo-link-call-to-action-outline-active-border-color);
|
|
408
|
+
--rvo-link-call-to-action-active-color: var(--rvo-link-call-to-action-outline-active-color);
|
|
409
|
+
}
|
|
410
|
+
|
|
346
411
|
.rvo-link--full-card-link::after {
|
|
347
412
|
block-size: 100%;
|
|
348
413
|
content: "";
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
.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,.rvo-link--with-icon{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-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-layout-gap--sm,.rvo-link--with-icon{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-link{background-color:var(--rvo-link-background-color);color:var(--rvo-link-color);cursor:pointer;display:inline-flex;font-weight:var(--rvo-link-font-weight);text-decoration-line:var(--rvo-link-text-decoration);text-decoration-thickness:var(--rvo-link-text-decoration-thickness);text-underline-offset:var(--rvo-link-text-underline-offset)}.rvo-link__text{display:block}.rvo-link.rvo-link--normal,.rvo-link.rvo-link--normal.rvo-link--active,.rvo-link.rvo-link--normal.rvo-link--focus,.rvo-link.rvo-link--normal.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link.rvo-link--normal:active,.rvo-link.rvo-link--normal:focus,.rvo-link.rvo-link--normal:focus-visible,.rvo-link.rvo-link--normal:hover:not(:focus,:focus-visible,.rvo-link--focus){font-weight:var(--rvo-font-weight-normal)}.rvo-link--no-underline:not(:focus,:hover,.rvo-link--hover,.rvo-link--focus){text-decoration:none}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-hover-background-color);color:var(--rvo-link-hover-color);font-weight:var(--rvo-link-hover-font-weight);text-decoration-thickness:var(--rvo-link-hover-text-decoration-thickness)}.rvo-link--lintblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-lintblauw)}.rvo-link--active,.rvo-link:active{background-color:var(--rvo-link-active-background-color);color:var(--rvo-link-active-color);font-weight:var(--rvo-link-active-font-weight);text-decoration-thickness:var(--rvo-link-active-text-decoration-thickness)}.rvo-link--lintblauw:active{color:var(--rvo-color-lintblauw)}.rvo-link--focus,.rvo-link:focus,.rvo-link:focus-visible{color:var(--rvo-link-focus-color);font-weight:var(--rvo-link-focus-font-weight);outline:none;text-decoration-thickness:var(--rvo-link-focus-text-decoration-thickness)}.rvo-link__icon{background-color:var(--rvo-link-icon-background-color)}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-hover-icon-background-color)}.rvo-link--active .rvo-link__icon,.rvo-link:active .rvo-link__icon{background-color:var(--rvo-link-active-icon-background-color)}.rvo-link--focus .rvo-link__icon,.rvo-link:focus .rvo-link__icon,.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-focus-icon-background-color)}.rvo-link--donkerblauw{color:var(--rvo-color-donkerblauw)}.rvo-link--lintblauw{color:var(--rvo-color-lintblauw)}.rvo-link--zwart{color:var(--rvo-color-zwart)}.rvo-link--zwart .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--zwart.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--wit{color:var(--rvo-color-wit)}.rvo-link--wit .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--wit.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-grijs-100)}.rvo-link--grijs-700{color:var(--rvo-color-grijs-700)}.rvo-link--grijs-700 .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--grijs-700.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--full-card-link:after{block-size:100%;content:"";display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}
|
|
1
|
+
.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,.rvo-link--with-icon,.rvo-link__text{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-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-layout-gap--sm,.rvo-link--with-icon,.rvo-link__text{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-link{background-color:var(--rvo-link-background-color);color:var(--rvo-link-color);cursor:pointer;display:inline-flex;font-weight:var(--rvo-link-font-weight);text-decoration-line:var(--rvo-link-text-decoration);text-decoration-thickness:var(--rvo-link-text-decoration-thickness);text-underline-offset:var(--rvo-link-text-underline-offset)}.rvo-link.rvo-link--normal,.rvo-link.rvo-link--normal.rvo-link--active,.rvo-link.rvo-link--normal.rvo-link--focus,.rvo-link.rvo-link--normal.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link.rvo-link--normal:active,.rvo-link.rvo-link--normal:focus,.rvo-link.rvo-link--normal:focus-visible,.rvo-link.rvo-link--normal:hover:not(:focus,:focus-visible,.rvo-link--focus){font-weight:var(--rvo-font-weight-normal)}.rvo-link--no-underline:not(:focus,:hover,.rvo-link--hover,.rvo-link--focus){text-decoration:none}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-hover-background-color);color:var(--rvo-link-hover-color);font-weight:var(--rvo-link-hover-font-weight);text-decoration-thickness:var(--rvo-link-hover-text-decoration-thickness)}.rvo-link--lintblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-lintblauw)}.rvo-link--active,.rvo-link:active{background-color:var(--rvo-link-active-background-color);color:var(--rvo-link-active-color);font-weight:var(--rvo-link-active-font-weight);text-decoration-thickness:var(--rvo-link-active-text-decoration-thickness)}.rvo-link--lintblauw:active{color:var(--rvo-color-lintblauw)}.rvo-link--focus,.rvo-link:focus,.rvo-link:focus-visible{color:var(--rvo-link-focus-color);font-weight:var(--rvo-link-focus-font-weight);outline:none;text-decoration-thickness:var(--rvo-link-focus-text-decoration-thickness)}.rvo-link__icon{background-color:var(--rvo-link-icon-background-color)}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-hover-icon-background-color)}.rvo-link--active .rvo-link__icon,.rvo-link:active .rvo-link__icon{background-color:var(--rvo-link-active-icon-background-color)}.rvo-link--focus .rvo-link__icon,.rvo-link:focus .rvo-link__icon,.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-focus-icon-background-color)}.rvo-link--donkerblauw{color:var(--rvo-color-donkerblauw)}.rvo-link--lintblauw{color:var(--rvo-color-lintblauw)}.rvo-link--zwart{color:var(--rvo-color-zwart)}.rvo-link--zwart .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--zwart.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--wit{color:var(--rvo-color-wit)}.rvo-link--wit .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--wit.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-grijs-100)}.rvo-link--grijs-700{color:var(--rvo-color-grijs-700)}.rvo-link--grijs-700 .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--grijs-700.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--call-to-action{align-items:center;background-color:var(--rvo-link-call-to-action-background-color);border-color:var(--rvo-link-call-to-action-border-color);border-radius:var(--rvo-link-call-to-action-border-radius);border-style:var(--rvo-link-call-to-action-border-style);border-width:var(--rvo-link-call-to-action-border-width);box-sizing:border-box;color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);min-block-size:var(--rvo-link-call-to-action-min-block-size);padding-block-end:var(--rvo-link-call-to-action-padding-block-end);padding-block-start:var(--rvo-link-call-to-action-padding-block-start);padding-inline-end:var(--rvo-link-call-to-action-padding-inline-end);padding-inline-start:var(--rvo-link-call-to-action-padding-inline-start);text-decoration:underline;text-decoration-color:var(--rvo-link-call-to-action-color);text-decoration-thickness:var(--rvo-link-call-to-action-text-decoration-thickness);text-underline-offset:var(--rvo-link-call-to-action-text-underline-offset)}.rvo-link--call-to-action .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-call-to-action-hover-background-color);border-color:var(--rvo-link-call-to-action-hover-border-color);color:var(--rvo-link-call-to-action-hover-color);font-weight:var(--rvo-link-call-to-action-font-weight);text-decoration-thickness:var(--rvo-link-call-to-action-hover-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-call-to-action-hover-icon-background-color)}.rvo-link--call-to-action.rvo-link--focus,.rvo-link--call-to-action.rvo-link:focus,.rvo-link--call-to-action.rvo-link:focus-visible{background-color:var(--rvo-link-call-to-action-background-color);color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);text-decoration-thickness:var(--rvo-link-call-to-action-focus-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link--focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link--active,.rvo-link--call-to-action.rvo-link:active{background-color:var(--rvo-link-call-to-action-active-background-color);border-color:var(--rvo-link-call-to-action-active-border-color);color:var(--rvo-link-call-to-action-active-color);text-decoration-thickness:var(--rvo-link-call-to-action-active-text-decoration-thickness)}.rvo-link--call-to-action-outline{--rvo-link-call-to-action-background-color:var(--rvo-link-call-to-action-outline-background-color);--rvo-link-call-to-action-border-color:var(--rvo-link-call-to-action-outline-border-color);--rvo-link-call-to-action-color:var(--rvo-link-call-to-action-outline-color);--rvo-link-call-to-action-icon-background-color:var(--rvo-link-call-to-action-outline-icon-background-color);--rvo-link-call-to-action-hover-background-color:var(--rvo-link-call-to-action-outline-hover-background-color);--rvo-link-call-to-action-hover-border-color:var(--rvo-link-call-to-action-outline-hover-border-color);--rvo-link-call-to-action-hover-color:var(--rvo-link-call-to-action-outline-hover-color);--rvo-link-call-to-action-hover-icon-background-color:var(
|
|
2
|
+
--rvo-link-call-to-action-outline-hover-icon-background-color
|
|
3
|
+
);--rvo-link-call-to-action-active-background-color:var(--rvo-link-call-to-action-outline-active-background-color);--rvo-link-call-to-action-active-border-color:var(--rvo-link-call-to-action-outline-active-border-color);--rvo-link-call-to-action-active-color:var(--rvo-link-call-to-action-outline-active-color)}.rvo-link--full-card-link:after{block-size:100%;content:"";display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default ".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,.rvo-link--with-icon{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-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-layout-gap--sm,.rvo-link--with-icon{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-link{background-color:var(--rvo-link-background-color);color:var(--rvo-link-color);cursor:pointer;display:inline-flex;font-weight:var(--rvo-link-font-weight);text-decoration-line:var(--rvo-link-text-decoration);text-decoration-thickness:var(--rvo-link-text-decoration-thickness);text-underline-offset:var(--rvo-link-text-underline-offset)}.rvo-link__text{display:block}.rvo-link.rvo-link--normal,.rvo-link.rvo-link--normal.rvo-link--active,.rvo-link.rvo-link--normal.rvo-link--focus,.rvo-link.rvo-link--normal.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link.rvo-link--normal:active,.rvo-link.rvo-link--normal:focus,.rvo-link.rvo-link--normal:focus-visible,.rvo-link.rvo-link--normal:hover:not(:focus,:focus-visible,.rvo-link--focus){font-weight:var(--rvo-font-weight-normal)}.rvo-link--no-underline:not(:focus,:hover,.rvo-link--hover,.rvo-link--focus){text-decoration:none}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-hover-background-color);color:var(--rvo-link-hover-color);font-weight:var(--rvo-link-hover-font-weight);text-decoration-thickness:var(--rvo-link-hover-text-decoration-thickness)}.rvo-link--lintblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-lintblauw)}.rvo-link--active,.rvo-link:active{background-color:var(--rvo-link-active-background-color);color:var(--rvo-link-active-color);font-weight:var(--rvo-link-active-font-weight);text-decoration-thickness:var(--rvo-link-active-text-decoration-thickness)}.rvo-link--lintblauw:active{color:var(--rvo-color-lintblauw)}.rvo-link--focus,.rvo-link:focus,.rvo-link:focus-visible{color:var(--rvo-link-focus-color);font-weight:var(--rvo-link-focus-font-weight);outline:none;text-decoration-thickness:var(--rvo-link-focus-text-decoration-thickness)}.rvo-link__icon{background-color:var(--rvo-link-icon-background-color)}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-hover-icon-background-color)}.rvo-link--active .rvo-link__icon,.rvo-link:active .rvo-link__icon{background-color:var(--rvo-link-active-icon-background-color)}.rvo-link--focus .rvo-link__icon,.rvo-link:focus .rvo-link__icon,.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-focus-icon-background-color)}.rvo-link--donkerblauw{color:var(--rvo-color-donkerblauw)}.rvo-link--lintblauw{color:var(--rvo-color-lintblauw)}.rvo-link--zwart{color:var(--rvo-color-zwart)}.rvo-link--zwart .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--zwart.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--wit{color:var(--rvo-color-wit)}.rvo-link--wit .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--wit.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-grijs-100)}.rvo-link--grijs-700{color:var(--rvo-color-grijs-700)}.rvo-link--grijs-700 .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--grijs-700.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--full-card-link:after{block-size:100%;content:\"\";display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}";
|
|
1
|
+
export default ".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,.rvo-link--with-icon,.rvo-link__text{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-layout-gap--2xs{gap:var(--rvo-space-2xs)}.rvo-layout-gap--xs{gap:var(--rvo-space-xs)}.rvo-layout-gap--sm,.rvo-link--with-icon,.rvo-link__text{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-link{background-color:var(--rvo-link-background-color);color:var(--rvo-link-color);cursor:pointer;display:inline-flex;font-weight:var(--rvo-link-font-weight);text-decoration-line:var(--rvo-link-text-decoration);text-decoration-thickness:var(--rvo-link-text-decoration-thickness);text-underline-offset:var(--rvo-link-text-underline-offset)}.rvo-link.rvo-link--normal,.rvo-link.rvo-link--normal.rvo-link--active,.rvo-link.rvo-link--normal.rvo-link--focus,.rvo-link.rvo-link--normal.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link.rvo-link--normal:active,.rvo-link.rvo-link--normal:focus,.rvo-link.rvo-link--normal:focus-visible,.rvo-link.rvo-link--normal:hover:not(:focus,:focus-visible,.rvo-link--focus){font-weight:var(--rvo-font-weight-normal)}.rvo-link--no-underline:not(:focus,:hover,.rvo-link--hover,.rvo-link--focus){text-decoration:none}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-hover-background-color);color:var(--rvo-link-hover-color);font-weight:var(--rvo-link-hover-font-weight);text-decoration-thickness:var(--rvo-link-hover-text-decoration-thickness)}.rvo-link--lintblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-lintblauw)}.rvo-link--active,.rvo-link:active{background-color:var(--rvo-link-active-background-color);color:var(--rvo-link-active-color);font-weight:var(--rvo-link-active-font-weight);text-decoration-thickness:var(--rvo-link-active-text-decoration-thickness)}.rvo-link--lintblauw:active{color:var(--rvo-color-lintblauw)}.rvo-link--focus,.rvo-link:focus,.rvo-link:focus-visible{color:var(--rvo-link-focus-color);font-weight:var(--rvo-link-focus-font-weight);outline:none;text-decoration-thickness:var(--rvo-link-focus-text-decoration-thickness)}.rvo-link__icon{background-color:var(--rvo-link-icon-background-color)}.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-hover-icon-background-color)}.rvo-link--active .rvo-link__icon,.rvo-link:active .rvo-link__icon{background-color:var(--rvo-link-active-icon-background-color)}.rvo-link--focus .rvo-link__icon,.rvo-link:focus .rvo-link__icon,.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-focus-icon-background-color)}.rvo-link--donkerblauw{color:var(--rvo-color-donkerblauw)}.rvo-link--lintblauw{color:var(--rvo-color-lintblauw)}.rvo-link--zwart{color:var(--rvo-color-zwart)}.rvo-link--zwart .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--zwart.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--wit{color:var(--rvo-color-wit)}.rvo-link--wit .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--wit.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-grijs-100)}.rvo-link--grijs-700{color:var(--rvo-color-grijs-700)}.rvo-link--grijs-700 .rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus):hover,.rvo-link--grijs-700.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-donkerblauw)}.rvo-link--call-to-action{align-items:center;background-color:var(--rvo-link-call-to-action-background-color);border-color:var(--rvo-link-call-to-action-border-color);border-radius:var(--rvo-link-call-to-action-border-radius);border-style:var(--rvo-link-call-to-action-border-style);border-width:var(--rvo-link-call-to-action-border-width);box-sizing:border-box;color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);min-block-size:var(--rvo-link-call-to-action-min-block-size);padding-block-end:var(--rvo-link-call-to-action-padding-block-end);padding-block-start:var(--rvo-link-call-to-action-padding-block-start);padding-inline-end:var(--rvo-link-call-to-action-padding-inline-end);padding-inline-start:var(--rvo-link-call-to-action-padding-inline-start);text-decoration:underline;text-decoration-color:var(--rvo-link-call-to-action-color);text-decoration-thickness:var(--rvo-link-call-to-action-text-decoration-thickness);text-underline-offset:var(--rvo-link-call-to-action-text-underline-offset)}.rvo-link--call-to-action .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus),.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus){background-color:var(--rvo-link-call-to-action-hover-background-color);border-color:var(--rvo-link-call-to-action-hover-border-color);color:var(--rvo-link-call-to-action-hover-color);font-weight:var(--rvo-link-call-to-action-font-weight);text-decoration-thickness:var(--rvo-link-call-to-action-hover-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link--hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon,.rvo-link--call-to-action.rvo-link:hover:not(:focus,:focus-visible,.rvo-link--focus) .rvo-link__icon{background-color:var(--rvo-link-call-to-action-hover-icon-background-color)}.rvo-link--call-to-action.rvo-link--focus,.rvo-link--call-to-action.rvo-link:focus,.rvo-link--call-to-action.rvo-link:focus-visible{background-color:var(--rvo-link-call-to-action-background-color);color:var(--rvo-link-call-to-action-color);font-weight:var(--rvo-link-call-to-action-font-weight);outline-color:var(--utrecht-focus-outline-color,revert);outline-offset:var(--utrecht-focus-outline-offset,revert);outline-style:var(--utrecht-focus-outline-style,revert);outline-width:var(--utrecht-focus-outline-width,revert);text-decoration-thickness:var(--rvo-link-call-to-action-focus-text-decoration-thickness)}.rvo-link--call-to-action.rvo-link--focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus .rvo-link__icon,.rvo-link--call-to-action.rvo-link:focus-visible .rvo-link__icon{background-color:var(--rvo-link-call-to-action-icon-background-color)}.rvo-link--call-to-action.rvo-link--active,.rvo-link--call-to-action.rvo-link:active{background-color:var(--rvo-link-call-to-action-active-background-color);border-color:var(--rvo-link-call-to-action-active-border-color);color:var(--rvo-link-call-to-action-active-color);text-decoration-thickness:var(--rvo-link-call-to-action-active-text-decoration-thickness)}.rvo-link--call-to-action-outline{--rvo-link-call-to-action-background-color:var(--rvo-link-call-to-action-outline-background-color);--rvo-link-call-to-action-border-color:var(--rvo-link-call-to-action-outline-border-color);--rvo-link-call-to-action-color:var(--rvo-link-call-to-action-outline-color);--rvo-link-call-to-action-icon-background-color:var(--rvo-link-call-to-action-outline-icon-background-color);--rvo-link-call-to-action-hover-background-color:var(--rvo-link-call-to-action-outline-hover-background-color);--rvo-link-call-to-action-hover-border-color:var(--rvo-link-call-to-action-outline-hover-border-color);--rvo-link-call-to-action-hover-color:var(--rvo-link-call-to-action-outline-hover-color);--rvo-link-call-to-action-hover-icon-background-color:var(\n --rvo-link-call-to-action-outline-hover-icon-background-color\n );--rvo-link-call-to-action-active-background-color:var(--rvo-link-call-to-action-outline-active-background-color);--rvo-link-call-to-action-active-border-color:var(--rvo-link-call-to-action-outline-active-border-color);--rvo-link-call-to-action-active-color:var(--rvo-link-call-to-action-outline-active-color)}.rvo-link--full-card-link:after{block-size:100%;content:\"\";display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}";
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.6.1",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"license": "CC0-1.0",
|
|
5
5
|
"name": "@nl-rvo/css-link",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
],
|
|
18
18
|
"main": "dist/index.css",
|
|
19
19
|
"publishConfig": {
|
|
20
|
-
"access": "public"
|
|
20
|
+
"access": "public",
|
|
21
|
+
"provenance": true
|
|
21
22
|
},
|
|
22
23
|
"repository": {
|
|
23
24
|
"type": "git+ssh",
|
package/src/index.scss
CHANGED
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
text-underline-offset: var(--rvo-link-text-underline-offset);
|
|
17
17
|
|
|
18
18
|
&__text {
|
|
19
|
-
|
|
19
|
+
@extend .rvo-layout-row;
|
|
20
|
+
@extend .rvo-layout-gap--sm;
|
|
20
21
|
}
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -132,6 +133,87 @@
|
|
|
132
133
|
}
|
|
133
134
|
}
|
|
134
135
|
|
|
136
|
+
// Call to action
|
|
137
|
+
.rvo-link--call-to-action {
|
|
138
|
+
align-items: center;
|
|
139
|
+
background-color: var(--rvo-link-call-to-action-background-color);
|
|
140
|
+
border-color: var(--rvo-link-call-to-action-border-color);
|
|
141
|
+
border-radius: var(--rvo-link-call-to-action-border-radius);
|
|
142
|
+
border-style: var(--rvo-link-call-to-action-border-style);
|
|
143
|
+
border-width: var(--rvo-link-call-to-action-border-width);
|
|
144
|
+
box-sizing: border-box;
|
|
145
|
+
color: var(--rvo-link-call-to-action-color);
|
|
146
|
+
font-weight: var(--rvo-link-call-to-action-font-weight);
|
|
147
|
+
min-block-size: var(--rvo-link-call-to-action-min-block-size);
|
|
148
|
+
padding-block-end: var(--rvo-link-call-to-action-padding-block-end);
|
|
149
|
+
padding-block-start: var(--rvo-link-call-to-action-padding-block-start);
|
|
150
|
+
padding-inline-end: var(--rvo-link-call-to-action-padding-inline-end);
|
|
151
|
+
padding-inline-start: var(--rvo-link-call-to-action-padding-inline-start);
|
|
152
|
+
text-decoration: underline;
|
|
153
|
+
text-decoration-color: var(--rvo-link-call-to-action-color);
|
|
154
|
+
text-decoration-thickness: var(--rvo-link-call-to-action-text-decoration-thickness);
|
|
155
|
+
text-underline-offset: var(--rvo-link-call-to-action-text-underline-offset);
|
|
156
|
+
|
|
157
|
+
.rvo-link__icon {
|
|
158
|
+
background-color: var(--rvo-link-call-to-action-icon-background-color);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&.rvo-link:hover:not(:focus, :focus-visible, .rvo-link--focus),
|
|
162
|
+
&.rvo-link--hover:not(:focus, :focus-visible, .rvo-link--focus) {
|
|
163
|
+
background-color: var(--rvo-link-call-to-action-hover-background-color);
|
|
164
|
+
border-color: var(--rvo-link-call-to-action-hover-border-color);
|
|
165
|
+
color: var(--rvo-link-call-to-action-hover-color);
|
|
166
|
+
font-weight: var(--rvo-link-call-to-action-font-weight);
|
|
167
|
+
text-decoration-thickness: var(--rvo-link-call-to-action-hover-text-decoration-thickness);
|
|
168
|
+
|
|
169
|
+
.rvo-link__icon {
|
|
170
|
+
background-color: var(--rvo-link-call-to-action-hover-icon-background-color);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&.rvo-link:focus,
|
|
175
|
+
&.rvo-link:focus-visible,
|
|
176
|
+
&.rvo-link--focus {
|
|
177
|
+
background-color: var(--rvo-link-call-to-action-background-color);
|
|
178
|
+
color: var(--rvo-link-call-to-action-color);
|
|
179
|
+
font-weight: var(--rvo-link-call-to-action-font-weight);
|
|
180
|
+
outline-color: var(--utrecht-focus-outline-color, revert);
|
|
181
|
+
outline-offset: var(--utrecht-focus-outline-offset, revert);
|
|
182
|
+
outline-style: var(--utrecht-focus-outline-style, revert);
|
|
183
|
+
outline-width: var(--utrecht-focus-outline-width, revert);
|
|
184
|
+
text-decoration-thickness: var(--rvo-link-call-to-action-focus-text-decoration-thickness);
|
|
185
|
+
|
|
186
|
+
.rvo-link__icon {
|
|
187
|
+
background-color: var(--rvo-link-call-to-action-icon-background-color);
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
&.rvo-link:active,
|
|
192
|
+
&.rvo-link--active {
|
|
193
|
+
background-color: var(--rvo-link-call-to-action-active-background-color);
|
|
194
|
+
border-color: var(--rvo-link-call-to-action-active-border-color);
|
|
195
|
+
color: var(--rvo-link-call-to-action-active-color);
|
|
196
|
+
text-decoration-thickness: var(--rvo-link-call-to-action-active-text-decoration-thickness);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// Call to action, outline
|
|
201
|
+
.rvo-link--call-to-action-outline {
|
|
202
|
+
--rvo-link-call-to-action-background-color: var(--rvo-link-call-to-action-outline-background-color);
|
|
203
|
+
--rvo-link-call-to-action-border-color: var(--rvo-link-call-to-action-outline-border-color);
|
|
204
|
+
--rvo-link-call-to-action-color: var(--rvo-link-call-to-action-outline-color);
|
|
205
|
+
--rvo-link-call-to-action-icon-background-color: var(--rvo-link-call-to-action-outline-icon-background-color);
|
|
206
|
+
--rvo-link-call-to-action-hover-background-color: var(--rvo-link-call-to-action-outline-hover-background-color);
|
|
207
|
+
--rvo-link-call-to-action-hover-border-color: var(--rvo-link-call-to-action-outline-hover-border-color);
|
|
208
|
+
--rvo-link-call-to-action-hover-color: var(--rvo-link-call-to-action-outline-hover-color);
|
|
209
|
+
--rvo-link-call-to-action-hover-icon-background-color: var(
|
|
210
|
+
--rvo-link-call-to-action-outline-hover-icon-background-color
|
|
211
|
+
);
|
|
212
|
+
--rvo-link-call-to-action-active-background-color: var(--rvo-link-call-to-action-outline-active-background-color);
|
|
213
|
+
--rvo-link-call-to-action-active-border-color: var(--rvo-link-call-to-action-outline-active-border-color);
|
|
214
|
+
--rvo-link-call-to-action-active-color: var(--rvo-link-call-to-action-outline-active-color);
|
|
215
|
+
}
|
|
216
|
+
|
|
135
217
|
.rvo-link--full-card-link::after {
|
|
136
218
|
block-size: 100%;
|
|
137
219
|
content: "";
|