@nl-rvo/css-link 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +1 -0
  3. package/dist/index.css +72 -51
  4. package/dist/index.min.css +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/package.json +1 -1
  7. package/src/index.scss +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # `@nl-rvo/css-link`
2
2
 
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - dae7f09: design token and css name changes from logoblauw to lintblauw
8
+
3
9
  ## 1.3.0
4
10
 
5
11
  ### Minor Changes
package/README.md CHANGED
@@ -13,6 +13,7 @@ Een link bestaat uit:
13
13
 
14
14
  ## Richtlijnen
15
15
 
16
+ - Een link gebruik je om te verwijzen naar een andere pagina. Om een actie uit laten te voeren gebruik je het Button component.
16
17
  - Voorzie links naar websites of applicaties die niet van RVO zijn altijd van externe link icoon. Bijvoorbeeld: een link van de RVO website naar de Kamer van Koophandel krijgt een externe link icoon. Een link van de RVO website naar mijn.rvo.nl krijgt geen externe link icoon.
17
18
  - Standaard heeft een link een underline. Deze is voornamelijk handig in lopende tekst waar er duidelijk onderscheid gemaakt moet worden tussen dik gedrukte tekst en een link.
18
19
  - Links in menu items of met een icoon hoeven geen underline te hebben omdat er vanuit de context herleid kan worden dat het om een link gaat.
package/dist/index.css CHANGED
@@ -2,13 +2,14 @@
2
2
  * @license CC0-1.0
3
3
  * Copyright (c) 2021 Community for NL Design System
4
4
  */
5
-
6
5
  .rvo-layout-column {
6
+ align-items: stretch;
7
7
  display: flex;
8
8
  flex-direction: column;
9
9
  }
10
10
 
11
11
  .rvo-layout-column-inline {
12
+ align-items: stretch;
12
13
  display: inline-flex;
13
14
  flex-direction: column;
14
15
  }
@@ -20,6 +21,7 @@
20
21
  }
21
22
 
22
23
  .rvo-layout-row-inline {
24
+ align-items: stretch;
23
25
  display: inline-flex;
24
26
  flex-direction: row;
25
27
  }
@@ -52,18 +54,6 @@
52
54
  align-content: space-between;
53
55
  }
54
56
 
55
- .rvo-layout-justify-items-start {
56
- justify-items: flex-start;
57
- }
58
-
59
- .rvo-layout-justify-items-center {
60
- justify-items: center;
61
- }
62
-
63
- .rvo-layout-justify-items-end {
64
- justify-items: flex-end;
65
- }
66
-
67
57
  .rvo-layout-justify-content-start {
68
58
  justify-content: flex-start;
69
59
  }
@@ -80,6 +70,18 @@
80
70
  justify-content: space-between;
81
71
  }
82
72
 
73
+ .rvo-layout-justify-items-start {
74
+ justify-items: flex-start;
75
+ }
76
+
77
+ .rvo-layout-justify-items-center {
78
+ justify-items: center;
79
+ }
80
+
81
+ .rvo-layout-justify-items-end {
82
+ justify-items: flex-end;
83
+ }
84
+
83
85
  .rvo-layout--wrap {
84
86
  flex-wrap: wrap;
85
87
  }
@@ -128,86 +130,105 @@
128
130
  gap: var(--rvo-space-4xl);
129
131
  }
130
132
 
131
- .rvo-layout-margin-horizontal--3xs {
132
- margin-inline: var(--rvo-space-3xs);
133
- }
134
-
135
- .rvo-layout-margin-horizontal--2xs {
136
- margin-inline: var(--rvo-space-2xs);
137
- }
138
-
139
- .rvo-layout-margin-horizontal--xs {
140
- margin-inline: var(--rvo-space-xs);
141
- }
142
-
143
- .rvo-layout-margin-horizontal--sm {
144
- margin-inline: var(--rvo-space-sm);
145
- }
146
-
147
- .rvo-layout-margin-horizontal--md {
148
- margin-inline: var(--rvo-space-md);
149
- }
150
-
151
- .rvo-layout-margin-horizontal--lg {
152
- margin-inline: var(--rvo-space-lg);
153
- }
154
-
155
- .rvo-layout-margin-horizontal--xl {
156
- margin-inline: var(--rvo-space-xl);
133
+ .rvo-layout-gap--5xl {
134
+ gap: var(--rvo-space-5xl);
157
135
  }
158
136
 
159
- .rvo-layout-margin-horizontal--2xl {
160
- margin-inline: var(--rvo-space-2xl);
137
+ .rvo-layout-margin-horizontal--0 {
138
+ margin-inline: 0;
161
139
  }
162
140
 
163
- .rvo-layout-margin-horizontal--3xl {
164
- margin-inline: var(--rvo-space-3xl);
141
+ .rvo-layout-margin-vertical--0 {
142
+ margin-block: 0;
165
143
  }
166
144
 
167
- .rvo-layout-margin-horizontal--4xl {
168
- margin-inline: var(--rvo-space-4xl);
145
+ .rvo-layout-margin-horizontal--3xs {
146
+ margin-inline: var(--rvo-space-3xs);
169
147
  }
170
148
 
171
149
  .rvo-layout-margin-vertical--3xs {
172
150
  margin-block: var(--rvo-space-3xs);
173
151
  }
174
152
 
153
+ .rvo-layout-margin-horizontal--2xs {
154
+ margin-inline: var(--rvo-space-2xs);
155
+ }
156
+
175
157
  .rvo-layout-margin-vertical--2xs {
176
158
  margin-block: var(--rvo-space-2xs);
177
159
  }
178
160
 
161
+ .rvo-layout-margin-horizontal--xs {
162
+ margin-inline: var(--rvo-space-xs);
163
+ }
164
+
179
165
  .rvo-layout-margin-vertical--xs {
180
166
  margin-block: var(--rvo-space-xs);
181
167
  }
182
168
 
169
+ .rvo-layout-margin-horizontal--sm {
170
+ margin-inline: var(--rvo-space-sm);
171
+ }
172
+
183
173
  .rvo-layout-margin-vertical--sm {
184
174
  margin-block: var(--rvo-space-sm);
185
175
  }
186
176
 
177
+ .rvo-layout-margin-horizontal--md {
178
+ margin-inline: var(--rvo-space-md);
179
+ }
180
+
187
181
  .rvo-layout-margin-vertical--md {
188
182
  margin-block: var(--rvo-space-md);
189
183
  }
190
184
 
185
+ .rvo-layout-margin-horizontal--lg {
186
+ margin-inline: var(--rvo-space-lg);
187
+ }
188
+
191
189
  .rvo-layout-margin-vertical--lg {
192
190
  margin-block: var(--rvo-space-lg);
193
191
  }
194
192
 
193
+ .rvo-layout-margin-horizontal--xl {
194
+ margin-inline: var(--rvo-space-xl);
195
+ }
196
+
195
197
  .rvo-layout-margin-vertical--xl {
196
198
  margin-block: var(--rvo-space-xl);
197
199
  }
198
200
 
201
+ .rvo-layout-margin-horizontal--2xl {
202
+ margin-inline: var(--rvo-space-2xl);
203
+ }
204
+
199
205
  .rvo-layout-margin-vertical--2xl {
200
206
  margin-block: var(--rvo-space-2xl);
201
207
  }
202
208
 
209
+ .rvo-layout-margin-horizontal--3xl {
210
+ margin-inline: var(--rvo-space-3xl);
211
+ }
212
+
203
213
  .rvo-layout-margin-vertical--3xl {
204
214
  margin-block: var(--rvo-space-3xl);
205
215
  }
206
216
 
217
+ .rvo-layout-margin-horizontal--4xl {
218
+ margin-inline: var(--rvo-space-4xl);
219
+ }
220
+
207
221
  .rvo-layout-margin-vertical--4xl {
208
222
  margin-block: var(--rvo-space-4xl);
209
223
  }
210
224
 
225
+ .rvo-layout-margin-horizontal--5xl {
226
+ margin-inline: var(--rvo-space-5xl);
227
+ }
228
+
229
+ .rvo-layout-margin-vertical--5xl {
230
+ margin-block: var(--rvo-space-5xl);
231
+ }
211
232
  .rvo-link {
212
233
  background-color: var(--rvo-link-background-color);
213
234
  color: var(--rvo-link-color);
@@ -242,8 +263,8 @@
242
263
  text-decoration-thickness: var(--rvo-link-hover-text-decoration-thickness);
243
264
  }
244
265
 
245
- .rvo-link--logoblauw:hover:not(:focus, :focus-visible, .rvo-link--focus) {
246
- color: var(--rvo-color-logoblauw);
266
+ .rvo-link--lintblauw:hover:not(:focus, :focus-visible, .rvo-link--focus) {
267
+ color: var(--rvo-color-lintblauw);
247
268
  }
248
269
 
249
270
  .rvo-link:active,
@@ -254,8 +275,8 @@
254
275
  text-decoration-thickness: var(--rvo-link-active-text-decoration-thickness);
255
276
  }
256
277
 
257
- .rvo-link--logoblauw:active {
258
- color: var(--rvo-color-logoblauw);
278
+ .rvo-link--lintblauw:active {
279
+ color: var(--rvo-color-lintblauw);
259
280
  }
260
281
 
261
282
  .rvo-link:focus,
@@ -291,8 +312,8 @@
291
312
  color: var(--rvo-color-donkerblauw);
292
313
  }
293
314
 
294
- .rvo-link--logoblauw {
295
- color: var(--rvo-color-logoblauw);
315
+ .rvo-link--lintblauw {
316
+ color: var(--rvo-color-lintblauw);
296
317
  }
297
318
 
298
319
  .rvo-link--zwart {
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .rvo-layout-column{display:flex;flex-direction:column}.rvo-layout-column-inline{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{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-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-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--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-margin-horizontal--3xs{margin-inline:var(--rvo-space-3xs)}.rvo-layout-margin-horizontal--2xs{margin-inline:var(--rvo-space-2xs)}.rvo-layout-margin-horizontal--xs{margin-inline:var(--rvo-space-xs)}.rvo-layout-margin-horizontal--sm{margin-inline:var(--rvo-space-sm)}.rvo-layout-margin-horizontal--md{margin-inline:var(--rvo-space-md)}.rvo-layout-margin-horizontal--lg{margin-inline:var(--rvo-space-lg)}.rvo-layout-margin-horizontal--xl{margin-inline:var(--rvo-space-xl)}.rvo-layout-margin-horizontal--2xl{margin-inline:var(--rvo-space-2xl)}.rvo-layout-margin-horizontal--3xl{margin-inline:var(--rvo-space-3xl)}.rvo-layout-margin-horizontal--4xl{margin-inline:var(--rvo-space-4xl)}.rvo-layout-margin-vertical--3xs{margin-block:var(--rvo-space-3xs)}.rvo-layout-margin-vertical--2xs{margin-block:var(--rvo-space-2xs)}.rvo-layout-margin-vertical--xs{margin-block:var(--rvo-space-xs)}.rvo-layout-margin-vertical--sm{margin-block:var(--rvo-space-sm)}.rvo-layout-margin-vertical--md{margin-block:var(--rvo-space-md)}.rvo-layout-margin-vertical--lg{margin-block:var(--rvo-space-lg)}.rvo-layout-margin-vertical--xl{margin-block:var(--rvo-space-xl)}.rvo-layout-margin-vertical--2xl{margin-block:var(--rvo-space-2xl)}.rvo-layout-margin-vertical--3xl{margin-block:var(--rvo-space-3xl)}.rvo-layout-margin-vertical--4xl{margin-block:var(--rvo-space-4xl)}.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--logoblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-logoblauw)}.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--logoblauw:active{color:var(--rvo-color-logoblauw)}.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--logoblauw{color:var(--rvo-color-logoblauw)}.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{content:"";display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%;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{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.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{content:"";display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".rvo-layout-column{display:flex;flex-direction:column}.rvo-layout-column-inline{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{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-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-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--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-margin-horizontal--3xs{margin-inline:var(--rvo-space-3xs)}.rvo-layout-margin-horizontal--2xs{margin-inline:var(--rvo-space-2xs)}.rvo-layout-margin-horizontal--xs{margin-inline:var(--rvo-space-xs)}.rvo-layout-margin-horizontal--sm{margin-inline:var(--rvo-space-sm)}.rvo-layout-margin-horizontal--md{margin-inline:var(--rvo-space-md)}.rvo-layout-margin-horizontal--lg{margin-inline:var(--rvo-space-lg)}.rvo-layout-margin-horizontal--xl{margin-inline:var(--rvo-space-xl)}.rvo-layout-margin-horizontal--2xl{margin-inline:var(--rvo-space-2xl)}.rvo-layout-margin-horizontal--3xl{margin-inline:var(--rvo-space-3xl)}.rvo-layout-margin-horizontal--4xl{margin-inline:var(--rvo-space-4xl)}.rvo-layout-margin-vertical--3xs{margin-block:var(--rvo-space-3xs)}.rvo-layout-margin-vertical--2xs{margin-block:var(--rvo-space-2xs)}.rvo-layout-margin-vertical--xs{margin-block:var(--rvo-space-xs)}.rvo-layout-margin-vertical--sm{margin-block:var(--rvo-space-sm)}.rvo-layout-margin-vertical--md{margin-block:var(--rvo-space-md)}.rvo-layout-margin-vertical--lg{margin-block:var(--rvo-space-lg)}.rvo-layout-margin-vertical--xl{margin-block:var(--rvo-space-xl)}.rvo-layout-margin-vertical--2xl{margin-block:var(--rvo-space-2xl)}.rvo-layout-margin-vertical--3xl{margin-block:var(--rvo-space-3xl)}.rvo-layout-margin-vertical--4xl{margin-block:var(--rvo-space-4xl)}.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--logoblauw:hover:not(:focus,:focus-visible,.rvo-link--focus){color:var(--rvo-color-logoblauw)}.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--logoblauw:active{color:var(--rvo-color-logoblauw)}.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--logoblauw{color:var(--rvo-color-logoblauw)}.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{content:\"\";display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%;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{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.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{content:\"\";display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.3.0",
2
+ "version": "1.4.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-link",
package/src/index.scss CHANGED
@@ -45,8 +45,8 @@
45
45
  text-decoration-thickness: var(--rvo-link-hover-text-decoration-thickness);
46
46
  }
47
47
 
48
- .rvo-link--logoblauw:hover:not(:focus, :focus-visible, .rvo-link--focus) {
49
- color: var(--rvo-color-logoblauw);
48
+ .rvo-link--lintblauw:hover:not(:focus, :focus-visible, .rvo-link--focus) {
49
+ color: var(--rvo-color-lintblauw);
50
50
  }
51
51
 
52
52
  // Active
@@ -58,8 +58,8 @@
58
58
  text-decoration-thickness: var(--rvo-link-active-text-decoration-thickness);
59
59
  }
60
60
 
61
- .rvo-link--logoblauw:active {
62
- color: var(--rvo-color-logoblauw);
61
+ .rvo-link--lintblauw:active {
62
+ color: var(--rvo-color-lintblauw);
63
63
  }
64
64
 
65
65
  // Focus
@@ -97,8 +97,8 @@
97
97
  color: var(--rvo-color-donkerblauw);
98
98
  }
99
99
 
100
- .rvo-link--logoblauw {
101
- color: var(--rvo-color-logoblauw);
100
+ .rvo-link--lintblauw {
101
+ color: var(--rvo-color-lintblauw);
102
102
  }
103
103
 
104
104
  .rvo-link--zwart {