@nl-rvo/css-card-experimental 0.3.1 → 0.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 (10) hide show
  1. package/dist/card-experimental.css +1 -0
  2. package/dist/card-experimental.css.map +1 -0
  3. package/package.json +17 -14
  4. package/CHANGELOG.md +0 -44
  5. package/README.md +0 -38
  6. package/dist/index.css +0 -174
  7. package/dist/index.min.css +0 -1
  8. package/dist/index.mjs +0 -1
  9. package/dist/index.mjs.d.ts +0 -2
  10. /package/src/{index.scss → card-experimental.scss} +0 -0
package/dist/card-experimental.css ADDED
@@ -0,0 +1 @@
1
+ .rvo-card{--rvo-card-padding-block-end: 0;--rvo-card-padding-block-start: 0;--rvo-card-padding-inline-end: 0;--rvo-card-padding-inline-start: 0;--rvo-card-border-radius: var(--rvo-card-border-radius, 0);--rvo-card-background-color: transparent;--rvo-card-color: initial;background-color:var(--rvo-card-background-color);border-radius:var(--rvo-card-border-radius);color:var(--rvo-card-color);padding-block-end:var(--rvo-card-padding-block-end);padding-block-start:var(--rvo-card-padding-block-start);padding-inline-end:var(--rvo-card-padding-inline-end);padding-inline-start:var(--rvo-card-padding-inline-start);position:relative}.rvo-card.rvo-card--full-colour{padding-block-end:var(--rvo-space-lg);padding-block-start:var(--rvo-space-xl);padding-inline-end:var(--rvo-space-xl);padding-inline-start:var(--rvo-space-xl)}.rvo-card.rvo-card--full-colour--wit{--rvo-card-background-color: var(--rvo-color-wit)}.rvo-card.rvo-card--full-colour--grijs-100{--rvo-card-background-color: var(--rvo-color-grijs-100)}.rvo-card.rvo-card--full-colour--hemelblauw{--rvo-card-background-color: var(--rvo-color-hemelblauw)}.rvo-card.rvo-card--inverted-colors{--rvo-link-color: var(--rvo-card-inverted-color);--rvo-link-active-color: var(--rvo-card-inverted-color);--rvo-link-focus-color: var(--rvo-card-inverted-color);--rvo-link-hover-color: var(--rvo-card-inverted-color);color:var(--rvo-card-inverted-color)}.rvo-card.rvo-card--inverted-colors .rvo-card__link-indicator{--utrecht-icon-color: var(--rvo-card-inverted-color)}.rvo-card.rvo-card--padding-sm,.rvo-card.rvo-card--padding--sm{--rvo-card-border-radius: var(--rvo-card-padding-sm-border-radius);--rvo-card-padding-block-end: var(--rvo-card-padding-sm-padding-block-end);--rvo-card-padding-block-start: var(--rvo-card-padding-sm-padding-block-start);--rvo-card-padding-inline-end: var(--rvo-card-padding-sm-padding-inline-end);--rvo-card-padding-inline-start: var(--rvo-card-padding-sm-padding-inline-start)}.rvo-card.rvo-card--padding-md,.rvo-card.rvo-card--padding--md{--rvo-card-border-radius: var(--rvo-card-padding-md-border-radius);--rvo-card-padding-block-end: var(--rvo-card-padding-md-padding-block-end);--rvo-card-padding-block-start: var(--rvo-card-padding-md-padding-block-start);--rvo-card-padding-inline-end: var(--rvo-card-padding-md-padding-inline-end);--rvo-card-padding-inline-start: var(--rvo-card-padding-md-padding-inline-start)}.rvo-card.rvo-card--padding-lg,.rvo-card.rvo-card--padding--lg{--rvo-card-border-radius: var(--rvo-card-padding-lg-border-radius);--rvo-card-padding-block-end: var(--rvo-card-padding-lg-padding-block-end);--rvo-card-padding-block-start: var(--rvo-card-padding-lg-padding-block-start);--rvo-card-padding-inline-end: var(--rvo-card-padding-lg-padding-inline-end);--rvo-card-padding-inline-start: var(--rvo-card-padding-lg-padding-inline-start)}.rvo-card.rvo-card--padding-xl,.rvo-card.rvo-card--padding--xl{--rvo-card-border-radius: var(--rvo-card-padding-xl-border-radius);--rvo-card-padding-block-end: var(--rvo-card-padding-xl-padding-block-end);--rvo-card-padding-block-start: var(--rvo-card-padding-xl-padding-block-start);--rvo-card-padding-inline-end: var(--rvo-card-padding-xl-padding-inline-end);--rvo-card-padding-inline-start: var(--rvo-card-padding-xl-padding-inline-start)}.rvo-card.rvo-card--outline{border:var(--rvo-card-outline-border-width) solid var(--rvo-card-outline-border-color)}.rvo-card.rvo-card--outline.rvo-card--active{border-color:var(--rvo-card-outline-hover-border-color)}.rvo-card.rvo-card--with-image{overflow:hidden}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm{align-items:center;display:flex}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image-container{flex:.4;margin-block-end:-24px;margin-inline-end:24px}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image{inline-size:100%;object-fit:cover}.rvo-card.rvo-card--with-image .rvo-card--with-image-md .rvo-card__image{inline-size:100%}.rvo-card.rvo-card--with-background-image{min-block-size:var(--rvo-card-background-image-min-height);overflow:hidden;padding-block-start:var(--rvo-space-xl);position:relative}.rvo-card.rvo-card--with-background-image .rvo-card__content{position:relative}.rvo-card.rvo-card--with-background-image::after{background-color:var(--rvo-card-background-image-overlay-color);block-size:100%;content:"";display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:var(--rvo-card-background-image-overlay-opacity);position:absolute}.rvo-card.rvo-card--with-background-image .rvo-card__background-image{inline-size:100%;inset-block-start:0;inset-inline-start:0;object-fit:cover;position:absolute}.rvo-card .rvo-card__content,.rvo-card .rvo-card--with-link-indicator{z-index:1}.rvo-card.rvo-card__full-card-link{display:block}.rvo-card.rvo-card__full-card-link::after{block-size:100%;content:"";cursor:pointer;display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}.rvo-card .rvo-card--with-link-indicator{align-items:center;block-size:100%;display:flex;flex:1;gap:var(--rvo-space-xs);justify-content:space-between}.rvo-card .rvo-card--with-link-indicator .rvo-card__content{align-self:flex-start}.rvo-card .rvo-card--with-link-indicator .rvo-icon--sm{min-block-size:var(--rvo-size-sm);min-inline-size:var(--rvo-size-sm)}.rvo-card .rvo-card__image-container{line-height:0;margin-block-end:var(--rvo-card-image-margin-block-end);margin-block-start:-24px;margin-inline-end:-24px;margin-inline-start:-24px}.rvo-card .rvo-card__image{object-fit:cover}.rvo-card__full-card-link:hover,.rvo-card__full-card-link:focus{border-color:var(--rvo-card-outline-hover-border-color)}/*# sourceMappingURL=card-experimental.css.map */
package/dist/card-experimental.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/card-experimental.scss"],"names":[],"mappings":"AAIA,UAIE,gCACA,kCACA,iCACA,mCACA,2DACA,yCACA,0BAEA,kDACA,4CACA,4BACA,oDACA,wDACA,sDACA,0DACA,kBAEA,gCACE,sCACA,wCACA,uCACA,yCAIE,qCACE,kDADF,2CACE,wDADF,4CACE,yDAKN,oCACE,iDACA,wDACA,uDACA,uDAEA,qCAEA,8DACE,qDAOA,+DAEE,mEACA,2EACA,+EACA,6EACA,iFANF,+DAEE,mEACA,2EACA,+EACA,6EACA,iFANF,+DAEE,mEACA,2EACA,+EACA,6EACA,iFANF,+DAEE,mEACA,2EACA,+EACA,6EACA,iFAKN,4BACE,uFAEA,6CACE,wDAIJ,+BACE,gBAEA,wDACE,mBACA,aAEA,mFACE,QACA,uBACA,uBAGF,yEACE,iBACA,iBAIJ,yEACE,iBAIJ,0CACE,2DACA,gBACA,wCACA,kBAEA,6DACE,kBAGF,iDACE,gEACA,gBACA,WACA,cACA,iBACA,oBACA,qBACA,yDACA,kBAGF,sEACE,iBACA,oBACA,qBACA,iBACA,kBAIJ,sEAEE,UAGF,mCACE,cAEA,0CACE,gBACA,WACA,eACA,qBACA,iBACA,oBACA,qBACA,kBACA,UAIJ,yCACE,mBACA,gBACA,aACA,OACA,wBACA,8BAEA,4DACE,sBAGF,uDACE,kCACA,mCAIJ,qCACE,cACA,wDACA,yBACA,wBACA,0BAGF,2BACE,iBAIJ,gEAEE","file":"card-experimental.css"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.3.1",
2
+ "version": "0.4.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-card-experimental",
@@ -10,26 +10,29 @@
10
10
  "card",
11
11
  "experimental"
12
12
  ],
13
- "files": [
14
- "src/index.scss",
15
- "dist/",
16
- "design-tokens.json",
17
- "*.md"
18
- ],
19
- "main": "dist/index.css",
20
- "publishConfig": {
21
- "access": "public"
22
- },
23
13
  "repository": {
24
14
  "type": "git+ssh",
25
15
  "url": "git@github.com:nl-design-system/rvo.git",
26
- "directory": "components/card"
16
+ "directory": "components/card-experimental/style"
17
+ },
18
+ "files": [
19
+ "src/",
20
+ "dist/"
21
+ ],
22
+ "exports": {
23
+ ".": "./dist/card-experimental.css",
24
+ "./dist/*": "./dist/*"
25
+ },
26
+ "publishConfig": {
27
+ "access": "public",
28
+ "provenance": true
27
29
  },
28
30
  "devDependencies": {
29
31
  "@nl-rvo/build-utils-css": "0.1.0"
30
32
  },
31
33
  "scripts": {
32
- "build": "build-css-package",
33
- "clean": "rimraf dist"
34
+ "build": "sass --pkg-importer=node --style=compressed ./src/:./dist/",
35
+ "watch": "sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
36
+ "clean": "rimraf ./dist/"
34
37
  }
35
38
  }
package/CHANGELOG.md DELETED
@@ -1,44 +0,0 @@
1
- # @nl-rvo/card-experimental
2
-
3
- ## 0.3.1
4
-
5
- ### Patch Changes
6
-
7
- - 93fdefc: Use CSS Logical properties, to support both `dir=ltr` and `dir=rtl`.
8
-
9
- ## 0.3.0
10
-
11
- ### Minor Changes
12
-
13
- - fa36e07: Project structure updates
14
-
15
- - Moved all Storybook stories to the /stories directory.
16
- - Moved all documentation files to the /docs directory.
17
- - Removed React components from library-component-react and moved them into this package.
18
- - Update all .stories imports to the right react package "component-library-react"
19
- - Fix all Redundant / PascalCase lint warnings for .stories files.
20
-
21
- ## 0.2.2
22
-
23
- ### Patch Changes
24
-
25
- - 11eb258: Update imports to support storybook v10
26
-
27
- ## 0.2.1
28
-
29
- ### Patch Changes
30
-
31
- - 5f0f46a: Card Component padding default is changes from none to md
32
-
33
- ## 0.2.0
34
-
35
- ### Minor Changes
36
-
37
- - 540d0f8: Changed default card padding to 0.
38
- Introduced new CSS variables for cards to improve customization.
39
-
40
- ## 0.1.0
41
-
42
- ### Minor Changes
43
-
44
- - a0061d6: Allow for client side navigation via LinkComponent prop on Link and Card and added CardExperimental compound component
package/README.md DELETED
@@ -1,38 +0,0 @@
1
- <!-- @license CC0-1.0 -->
2
-
3
- Een card groepeert informatie die gerelateerd is aan elkaar. Over het algemeen is het mogelijk om via de card door te klikken naar meer informatie over het onderwerp.
4
-
5
- # Wanneer gebruik je een card?
6
-
7
- Je gebruikt een card wanneer je meerdere blokken met informatie moet tonen die gegroepeerd moeten worden. Denk bijvoorbeeld aan een overzicht van nieuwsberichten waarbij elk bericht een blok van gegroepeerde informatie is in een card.
8
-
9
- Gebruik geen cards wanneer een lijst volstaat. Cards zijn slechter te scannen en gebruikers kunnen minder goed informatie vergelijken dan wanneer het in een lijst staat.
10
-
11
- # Anatomie van het component
12
-
13
- Het component bestaat minimaal uit:
14
-
15
- - Een titel
16
- - Een samenvatting
17
-
18
- Mogelijke andere elementen binnen de card zijn:
19
-
20
- - Een afbeelding
21
- - Een button
22
- - Aanduiding van het type
23
- - Aanduiding van de datum
24
-
25
- # Richtlijnen
26
-
27
- - Een card bevat tussen 3 en 6 verschillende elementen
28
- - Binnen een card staat het belangrijkste element bovenaan
29
- - Als er als eerste een afbeelding getoond wordt moet het een duidelijke relatie hebben met de achterliggende content
30
-
31
- # Rijkshuisstijl
32
-
33
- Vanuit de Rijkshuisstijl zijn er geen richtlijnen wat betreft het card component.
34
-
35
- # Bronnen
36
-
37
- - [Cards: UI-Component Definition](https://web.archive.org/web/20220309101808/https://www.nngroup.com/articles/cards-component/)
38
- - [How to design better cards - Kai Wong](https://uxdesign.cc/how-to-design-better-cards-2a5fa087b6c9)
package/dist/index.css DELETED
@@ -1,174 +0,0 @@
1
- /**
2
- * @license CC0-1.0
3
- * Copyright (c) 2021 Community for NL Design System
4
- */
5
- .rvo-card {
6
- --rvo-card-padding-block-end: 0;
7
- --rvo-card-padding-block-start: 0;
8
- --rvo-card-padding-inline-end: 0;
9
- --rvo-card-padding-inline-start: 0;
10
- --rvo-card-border-radius: var(--rvo-card-border-radius, 0);
11
- --rvo-card-background-color: transparent;
12
- --rvo-card-color: initial;
13
- background-color: var(--rvo-card-background-color);
14
- border-radius: var(--rvo-card-border-radius);
15
- color: var(--rvo-card-color);
16
- padding-block-end: var(--rvo-card-padding-block-end);
17
- padding-block-start: var(--rvo-card-padding-block-start);
18
- padding-inline-end: var(--rvo-card-padding-inline-end);
19
- padding-inline-start: var(--rvo-card-padding-inline-start);
20
- position: relative;
21
- }
22
- .rvo-card.rvo-card--full-colour {
23
- padding-block-end: var(--rvo-space-lg);
24
- padding-block-start: var(--rvo-space-xl);
25
- padding-inline-end: var(--rvo-space-xl);
26
- padding-inline-start: var(--rvo-space-xl);
27
- }
28
- .rvo-card.rvo-card--full-colour--wit {
29
- --rvo-card-background-color: var(--rvo-color-wit);
30
- }
31
- .rvo-card.rvo-card--full-colour--grijs-100 {
32
- --rvo-card-background-color: var(--rvo-color-grijs-100);
33
- }
34
- .rvo-card.rvo-card--full-colour--hemelblauw {
35
- --rvo-card-background-color: var(--rvo-color-hemelblauw);
36
- }
37
- .rvo-card.rvo-card--inverted-colors {
38
- --rvo-link-color: var(--rvo-card-inverted-color);
39
- --rvo-link-active-color: var(--rvo-card-inverted-color);
40
- --rvo-link-focus-color: var(--rvo-card-inverted-color);
41
- --rvo-link-hover-color: var(--rvo-card-inverted-color);
42
- color: var(--rvo-card-inverted-color);
43
- }
44
- .rvo-card.rvo-card--inverted-colors .rvo-card__link-indicator {
45
- --utrecht-icon-color: var(--rvo-card-inverted-color);
46
- }
47
- .rvo-card.rvo-card--padding-sm, .rvo-card.rvo-card--padding--sm {
48
- --rvo-card-border-radius: var(--rvo-card-padding-sm-border-radius);
49
- --rvo-card-padding-block-end: var(--rvo-card-padding-sm-padding-block-end);
50
- --rvo-card-padding-block-start: var(--rvo-card-padding-sm-padding-block-start);
51
- --rvo-card-padding-inline-end: var(--rvo-card-padding-sm-padding-inline-end);
52
- --rvo-card-padding-inline-start: var(--rvo-card-padding-sm-padding-inline-start);
53
- }
54
- .rvo-card.rvo-card--padding-md, .rvo-card.rvo-card--padding--md {
55
- --rvo-card-border-radius: var(--rvo-card-padding-md-border-radius);
56
- --rvo-card-padding-block-end: var(--rvo-card-padding-md-padding-block-end);
57
- --rvo-card-padding-block-start: var(--rvo-card-padding-md-padding-block-start);
58
- --rvo-card-padding-inline-end: var(--rvo-card-padding-md-padding-inline-end);
59
- --rvo-card-padding-inline-start: var(--rvo-card-padding-md-padding-inline-start);
60
- }
61
- .rvo-card.rvo-card--padding-lg, .rvo-card.rvo-card--padding--lg {
62
- --rvo-card-border-radius: var(--rvo-card-padding-lg-border-radius);
63
- --rvo-card-padding-block-end: var(--rvo-card-padding-lg-padding-block-end);
64
- --rvo-card-padding-block-start: var(--rvo-card-padding-lg-padding-block-start);
65
- --rvo-card-padding-inline-end: var(--rvo-card-padding-lg-padding-inline-end);
66
- --rvo-card-padding-inline-start: var(--rvo-card-padding-lg-padding-inline-start);
67
- }
68
- .rvo-card.rvo-card--padding-xl, .rvo-card.rvo-card--padding--xl {
69
- --rvo-card-border-radius: var(--rvo-card-padding-xl-border-radius);
70
- --rvo-card-padding-block-end: var(--rvo-card-padding-xl-padding-block-end);
71
- --rvo-card-padding-block-start: var(--rvo-card-padding-xl-padding-block-start);
72
- --rvo-card-padding-inline-end: var(--rvo-card-padding-xl-padding-inline-end);
73
- --rvo-card-padding-inline-start: var(--rvo-card-padding-xl-padding-inline-start);
74
- }
75
- .rvo-card.rvo-card--outline {
76
- border: var(--rvo-card-outline-border-width) solid var(--rvo-card-outline-border-color);
77
- }
78
- .rvo-card.rvo-card--outline.rvo-card--active {
79
- border-color: var(--rvo-card-outline-hover-border-color);
80
- }
81
- .rvo-card.rvo-card--with-image {
82
- overflow: hidden;
83
- }
84
- .rvo-card.rvo-card--with-image .rvo-card--with-image-sm {
85
- align-items: center;
86
- display: flex;
87
- }
88
- .rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image-container {
89
- flex: 0.4;
90
- margin-block-end: -24px;
91
- margin-inline-end: 24px;
92
- }
93
- .rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image {
94
- inline-size: 100%;
95
- object-fit: cover;
96
- }
97
- .rvo-card.rvo-card--with-image .rvo-card--with-image-md .rvo-card__image {
98
- inline-size: 100%;
99
- }
100
- .rvo-card.rvo-card--with-background-image {
101
- min-block-size: var(--rvo-card-background-image-min-height);
102
- overflow: hidden;
103
- padding-block-start: var(--rvo-space-xl);
104
- position: relative;
105
- }
106
- .rvo-card.rvo-card--with-background-image .rvo-card__content {
107
- position: relative;
108
- }
109
- .rvo-card.rvo-card--with-background-image::after {
110
- background-color: var(--rvo-card-background-image-overlay-color);
111
- block-size: 100%;
112
- content: "";
113
- display: block;
114
- inline-size: 100%;
115
- inset-block-start: 0;
116
- inset-inline-start: 0;
117
- opacity: var(--rvo-card-background-image-overlay-opacity);
118
- position: absolute;
119
- }
120
- .rvo-card.rvo-card--with-background-image .rvo-card__background-image {
121
- inline-size: 100%;
122
- inset-block-start: 0;
123
- inset-inline-start: 0;
124
- object-fit: cover;
125
- position: absolute;
126
- }
127
- .rvo-card .rvo-card__content,
128
- .rvo-card .rvo-card--with-link-indicator {
129
- z-index: 1;
130
- }
131
- .rvo-card.rvo-card__full-card-link {
132
- display: block;
133
- }
134
- .rvo-card.rvo-card__full-card-link::after {
135
- block-size: 100%;
136
- content: "";
137
- cursor: pointer;
138
- display: inline-block;
139
- inline-size: 100%;
140
- inset-block-start: 0;
141
- inset-inline-start: 0;
142
- position: absolute;
143
- z-index: 1;
144
- }
145
- .rvo-card .rvo-card--with-link-indicator {
146
- align-items: center;
147
- block-size: 100%;
148
- display: flex;
149
- flex: 1;
150
- gap: var(--rvo-space-xs);
151
- justify-content: space-between;
152
- }
153
- .rvo-card .rvo-card--with-link-indicator .rvo-card__content {
154
- align-self: flex-start;
155
- }
156
- .rvo-card .rvo-card--with-link-indicator .rvo-icon--sm {
157
- min-block-size: var(--rvo-size-sm);
158
- min-inline-size: var(--rvo-size-sm);
159
- }
160
- .rvo-card .rvo-card__image-container {
161
- line-height: 0;
162
- margin-block-end: var(--rvo-card-image-margin-block-end);
163
- margin-block-start: -24px;
164
- margin-inline-end: -24px;
165
- margin-inline-start: -24px;
166
- }
167
- .rvo-card .rvo-card__image {
168
- object-fit: cover;
169
- }
170
-
171
- .rvo-card__full-card-link:hover,
172
- .rvo-card__full-card-link:focus {
173
- border-color: var(--rvo-card-outline-hover-border-color);
174
- }
package/dist/index.min.css DELETED
@@ -1 +0,0 @@
1
- .rvo-card{--rvo-card-padding-block-end:0;--rvo-card-padding-block-start:0;--rvo-card-padding-inline-end:0;--rvo-card-padding-inline-start:0;--rvo-card-border-radius:var(--rvo-card-border-radius,0);--rvo-card-background-color:transparent;--rvo-card-color:initial;background-color:var(--rvo-card-background-color);border-radius:var(--rvo-card-border-radius);color:var(--rvo-card-color);padding-block-end:var(--rvo-card-padding-block-end);padding-block-start:var(--rvo-card-padding-block-start);padding-inline-end:var(--rvo-card-padding-inline-end);padding-inline-start:var(--rvo-card-padding-inline-start);position:relative}.rvo-card.rvo-card--full-colour{padding-block-end:var(--rvo-space-lg);padding-block-start:var(--rvo-space-xl);padding-inline-end:var(--rvo-space-xl);padding-inline-start:var(--rvo-space-xl)}.rvo-card.rvo-card--full-colour--wit{--rvo-card-background-color:var(--rvo-color-wit)}.rvo-card.rvo-card--full-colour--grijs-100{--rvo-card-background-color:var(--rvo-color-grijs-100)}.rvo-card.rvo-card--full-colour--hemelblauw{--rvo-card-background-color:var(--rvo-color-hemelblauw)}.rvo-card.rvo-card--inverted-colors{--rvo-link-color:var(--rvo-card-inverted-color);--rvo-link-active-color:var(--rvo-card-inverted-color);--rvo-link-focus-color:var(--rvo-card-inverted-color);--rvo-link-hover-color:var(--rvo-card-inverted-color);color:var(--rvo-card-inverted-color)}.rvo-card.rvo-card--inverted-colors .rvo-card__link-indicator{--utrecht-icon-color:var(--rvo-card-inverted-color)}.rvo-card.rvo-card--padding--sm,.rvo-card.rvo-card--padding-sm{--rvo-card-border-radius:var(--rvo-card-padding-sm-border-radius);--rvo-card-padding-block-end:var(--rvo-card-padding-sm-padding-block-end);--rvo-card-padding-block-start:var(--rvo-card-padding-sm-padding-block-start);--rvo-card-padding-inline-end:var(--rvo-card-padding-sm-padding-inline-end);--rvo-card-padding-inline-start:var(--rvo-card-padding-sm-padding-inline-start)}.rvo-card.rvo-card--padding--md,.rvo-card.rvo-card--padding-md{--rvo-card-border-radius:var(--rvo-card-padding-md-border-radius);--rvo-card-padding-block-end:var(--rvo-card-padding-md-padding-block-end);--rvo-card-padding-block-start:var(--rvo-card-padding-md-padding-block-start);--rvo-card-padding-inline-end:var(--rvo-card-padding-md-padding-inline-end);--rvo-card-padding-inline-start:var(--rvo-card-padding-md-padding-inline-start)}.rvo-card.rvo-card--padding--lg,.rvo-card.rvo-card--padding-lg{--rvo-card-border-radius:var(--rvo-card-padding-lg-border-radius);--rvo-card-padding-block-end:var(--rvo-card-padding-lg-padding-block-end);--rvo-card-padding-block-start:var(--rvo-card-padding-lg-padding-block-start);--rvo-card-padding-inline-end:var(--rvo-card-padding-lg-padding-inline-end);--rvo-card-padding-inline-start:var(--rvo-card-padding-lg-padding-inline-start)}.rvo-card.rvo-card--padding--xl,.rvo-card.rvo-card--padding-xl{--rvo-card-border-radius:var(--rvo-card-padding-xl-border-radius);--rvo-card-padding-block-end:var(--rvo-card-padding-xl-padding-block-end);--rvo-card-padding-block-start:var(--rvo-card-padding-xl-padding-block-start);--rvo-card-padding-inline-end:var(--rvo-card-padding-xl-padding-inline-end);--rvo-card-padding-inline-start:var(--rvo-card-padding-xl-padding-inline-start)}.rvo-card.rvo-card--outline{border:var(--rvo-card-outline-border-width) solid var(--rvo-card-outline-border-color)}.rvo-card.rvo-card--outline.rvo-card--active{border-color:var(--rvo-card-outline-hover-border-color)}.rvo-card.rvo-card--with-image{overflow:hidden}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm{align-items:center;display:flex}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image-container{flex:0.4;margin-block-end:-24px;margin-inline-end:24px}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image{inline-size:100%;object-fit:cover}.rvo-card.rvo-card--with-image .rvo-card--with-image-md .rvo-card__image{inline-size:100%}.rvo-card.rvo-card--with-background-image{min-block-size:var(--rvo-card-background-image-min-height);overflow:hidden;padding-block-start:var(--rvo-space-xl);position:relative}.rvo-card.rvo-card--with-background-image .rvo-card__content{position:relative}.rvo-card.rvo-card--with-background-image:after{background-color:var(--rvo-card-background-image-overlay-color);block-size:100%;content:"";display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:var(--rvo-card-background-image-overlay-opacity);position:absolute}.rvo-card.rvo-card--with-background-image .rvo-card__background-image{inline-size:100%;inset-block-start:0;inset-inline-start:0;object-fit:cover;position:absolute}.rvo-card .rvo-card--with-link-indicator,.rvo-card .rvo-card__content{z-index:1}.rvo-card.rvo-card__full-card-link{display:block}.rvo-card.rvo-card__full-card-link:after{block-size:100%;content:"";cursor:pointer;display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}.rvo-card .rvo-card--with-link-indicator{align-items:center;block-size:100%;display:flex;flex:1;gap:var(--rvo-space-xs);justify-content:space-between}.rvo-card .rvo-card--with-link-indicator .rvo-card__content{align-self:flex-start}.rvo-card .rvo-card--with-link-indicator .rvo-icon--sm{min-block-size:var(--rvo-size-sm);min-inline-size:var(--rvo-size-sm)}.rvo-card .rvo-card__image-container{line-height:0;margin-block-end:var(--rvo-card-image-margin-block-end);margin-block-start:-24px;margin-inline-end:-24px;margin-inline-start:-24px}.rvo-card .rvo-card__image{object-fit:cover}.rvo-card__full-card-link:focus,.rvo-card__full-card-link:hover{border-color:var(--rvo-card-outline-hover-border-color)}
package/dist/index.mjs DELETED
@@ -1 +0,0 @@
1
- export default ".rvo-card{--rvo-card-padding-block-end:0;--rvo-card-padding-block-start:0;--rvo-card-padding-inline-end:0;--rvo-card-padding-inline-start:0;--rvo-card-border-radius:var(--rvo-card-border-radius,0);--rvo-card-background-color:transparent;--rvo-card-color:initial;background-color:var(--rvo-card-background-color);border-radius:var(--rvo-card-border-radius);color:var(--rvo-card-color);padding-block-end:var(--rvo-card-padding-block-end);padding-block-start:var(--rvo-card-padding-block-start);padding-inline-end:var(--rvo-card-padding-inline-end);padding-inline-start:var(--rvo-card-padding-inline-start);position:relative}.rvo-card.rvo-card--full-colour{padding-block-end:var(--rvo-space-lg);padding-block-start:var(--rvo-space-xl);padding-inline-end:var(--rvo-space-xl);padding-inline-start:var(--rvo-space-xl)}.rvo-card.rvo-card--full-colour--wit{--rvo-card-background-color:var(--rvo-color-wit)}.rvo-card.rvo-card--full-colour--grijs-100{--rvo-card-background-color:var(--rvo-color-grijs-100)}.rvo-card.rvo-card--full-colour--hemelblauw{--rvo-card-background-color:var(--rvo-color-hemelblauw)}.rvo-card.rvo-card--inverted-colors{--rvo-link-color:var(--rvo-card-inverted-color);--rvo-link-active-color:var(--rvo-card-inverted-color);--rvo-link-focus-color:var(--rvo-card-inverted-color);--rvo-link-hover-color:var(--rvo-card-inverted-color);color:var(--rvo-card-inverted-color)}.rvo-card.rvo-card--inverted-colors .rvo-card__link-indicator{--utrecht-icon-color:var(--rvo-card-inverted-color)}.rvo-card.rvo-card--padding--sm,.rvo-card.rvo-card--padding-sm{--rvo-card-border-radius:var(--rvo-card-padding-sm-border-radius);--rvo-card-padding-block-end:var(--rvo-card-padding-sm-padding-block-end);--rvo-card-padding-block-start:var(--rvo-card-padding-sm-padding-block-start);--rvo-card-padding-inline-end:var(--rvo-card-padding-sm-padding-inline-end);--rvo-card-padding-inline-start:var(--rvo-card-padding-sm-padding-inline-start)}.rvo-card.rvo-card--padding--md,.rvo-card.rvo-card--padding-md{--rvo-card-border-radius:var(--rvo-card-padding-md-border-radius);--rvo-card-padding-block-end:var(--rvo-card-padding-md-padding-block-end);--rvo-card-padding-block-start:var(--rvo-card-padding-md-padding-block-start);--rvo-card-padding-inline-end:var(--rvo-card-padding-md-padding-inline-end);--rvo-card-padding-inline-start:var(--rvo-card-padding-md-padding-inline-start)}.rvo-card.rvo-card--padding--lg,.rvo-card.rvo-card--padding-lg{--rvo-card-border-radius:var(--rvo-card-padding-lg-border-radius);--rvo-card-padding-block-end:var(--rvo-card-padding-lg-padding-block-end);--rvo-card-padding-block-start:var(--rvo-card-padding-lg-padding-block-start);--rvo-card-padding-inline-end:var(--rvo-card-padding-lg-padding-inline-end);--rvo-card-padding-inline-start:var(--rvo-card-padding-lg-padding-inline-start)}.rvo-card.rvo-card--padding--xl,.rvo-card.rvo-card--padding-xl{--rvo-card-border-radius:var(--rvo-card-padding-xl-border-radius);--rvo-card-padding-block-end:var(--rvo-card-padding-xl-padding-block-end);--rvo-card-padding-block-start:var(--rvo-card-padding-xl-padding-block-start);--rvo-card-padding-inline-end:var(--rvo-card-padding-xl-padding-inline-end);--rvo-card-padding-inline-start:var(--rvo-card-padding-xl-padding-inline-start)}.rvo-card.rvo-card--outline{border:var(--rvo-card-outline-border-width) solid var(--rvo-card-outline-border-color)}.rvo-card.rvo-card--outline.rvo-card--active{border-color:var(--rvo-card-outline-hover-border-color)}.rvo-card.rvo-card--with-image{overflow:hidden}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm{align-items:center;display:flex}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image-container{flex:0.4;margin-block-end:-24px;margin-inline-end:24px}.rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image{inline-size:100%;object-fit:cover}.rvo-card.rvo-card--with-image .rvo-card--with-image-md .rvo-card__image{inline-size:100%}.rvo-card.rvo-card--with-background-image{min-block-size:var(--rvo-card-background-image-min-height);overflow:hidden;padding-block-start:var(--rvo-space-xl);position:relative}.rvo-card.rvo-card--with-background-image .rvo-card__content{position:relative}.rvo-card.rvo-card--with-background-image:after{background-color:var(--rvo-card-background-image-overlay-color);block-size:100%;content:\"\";display:block;inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:var(--rvo-card-background-image-overlay-opacity);position:absolute}.rvo-card.rvo-card--with-background-image .rvo-card__background-image{inline-size:100%;inset-block-start:0;inset-inline-start:0;object-fit:cover;position:absolute}.rvo-card .rvo-card--with-link-indicator,.rvo-card .rvo-card__content{z-index:1}.rvo-card.rvo-card__full-card-link{display:block}.rvo-card.rvo-card__full-card-link:after{block-size:100%;content:\"\";cursor:pointer;display:inline-block;inline-size:100%;inset-block-start:0;inset-inline-start:0;position:absolute;z-index:1}.rvo-card .rvo-card--with-link-indicator{align-items:center;block-size:100%;display:flex;flex:1;gap:var(--rvo-space-xs);justify-content:space-between}.rvo-card .rvo-card--with-link-indicator .rvo-card__content{align-self:flex-start}.rvo-card .rvo-card--with-link-indicator .rvo-icon--sm{min-block-size:var(--rvo-size-sm);min-inline-size:var(--rvo-size-sm)}.rvo-card .rvo-card__image-container{line-height:0;margin-block-end:var(--rvo-card-image-margin-block-end);margin-block-start:-24px;margin-inline-end:-24px;margin-inline-start:-24px}.rvo-card .rvo-card__image{object-fit:cover}.rvo-card__full-card-link:focus,.rvo-card__full-card-link:hover{border-color:var(--rvo-card-outline-hover-border-color)}";
package/dist/index.mjs.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const css: string;
2
- export default css;
/package/src/{index.scss → card-experimental.scss} RENAMED
File without changes