@nl-rvo/css-card-experimental 0.1.0 → 0.2.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 +13 -0
- package/dist/index.css +43 -30
- package/dist/index.min.css +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/index.scss +35 -41
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @nl-rvo/card-experimental
|
|
2
2
|
|
|
3
|
+
## 0.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 5f0f46a: Card Component padding default is changes from none to md
|
|
8
|
+
|
|
9
|
+
## 0.2.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 540d0f8: Changed default card padding to 0.
|
|
14
|
+
Introduced new CSS variables for cards to improve customization.
|
|
15
|
+
|
|
3
16
|
## 0.1.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/dist/index.css
CHANGED
|
@@ -3,7 +3,20 @@
|
|
|
3
3
|
* Copyright (c) 2021 Community for NL Design System
|
|
4
4
|
*/
|
|
5
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);
|
|
6
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);
|
|
7
20
|
position: relative;
|
|
8
21
|
}
|
|
9
22
|
.rvo-card.rvo-card--full-colour {
|
|
@@ -13,13 +26,13 @@
|
|
|
13
26
|
padding-inline-start: var(--rvo-space-xl);
|
|
14
27
|
}
|
|
15
28
|
.rvo-card.rvo-card--full-colour--wit {
|
|
16
|
-
background-color: var(--rvo-color-wit);
|
|
29
|
+
--rvo-card-background-color: var(--rvo-color-wit);
|
|
17
30
|
}
|
|
18
31
|
.rvo-card.rvo-card--full-colour--grijs-100 {
|
|
19
|
-
background-color: var(--rvo-color-grijs-100);
|
|
32
|
+
--rvo-card-background-color: var(--rvo-color-grijs-100);
|
|
20
33
|
}
|
|
21
34
|
.rvo-card.rvo-card--full-colour--hemelblauw {
|
|
22
|
-
background-color: var(--rvo-color-hemelblauw);
|
|
35
|
+
--rvo-card-background-color: var(--rvo-color-hemelblauw);
|
|
23
36
|
}
|
|
24
37
|
.rvo-card.rvo-card--inverted-colors {
|
|
25
38
|
--rvo-link-color: var(--rvo-card-inverted-color);
|
|
@@ -31,33 +44,33 @@
|
|
|
31
44
|
.rvo-card.rvo-card--inverted-colors .rvo-card__link-indicator {
|
|
32
45
|
--utrecht-icon-color: var(--rvo-card-inverted-color);
|
|
33
46
|
}
|
|
34
|
-
.rvo-card.rvo-card--padding-sm {
|
|
35
|
-
border-radius: var(--rvo-card-padding-sm-border-radius);
|
|
36
|
-
padding-block-end: var(--rvo-card-padding-sm-padding-block-end);
|
|
37
|
-
padding-block-start: var(--rvo-card-padding-sm-padding-block-start);
|
|
38
|
-
padding-inline-end: var(--rvo-card-padding-sm-padding-inline-end);
|
|
39
|
-
padding-inline-start: var(--rvo-card-padding-sm-padding-inline-start);
|
|
40
|
-
}
|
|
41
|
-
.rvo-card.rvo-card--padding-md {
|
|
42
|
-
border-radius: var(--rvo-card-padding-md-border-radius);
|
|
43
|
-
padding-block-end: var(--rvo-card-padding-md-padding-block-end);
|
|
44
|
-
padding-block-start: var(--rvo-card-padding-md-padding-block-start);
|
|
45
|
-
padding-inline-end: var(--rvo-card-padding-md-padding-inline-end);
|
|
46
|
-
padding-inline-start: var(--rvo-card-padding-md-padding-inline-start);
|
|
47
|
-
}
|
|
48
|
-
.rvo-card.rvo-card--padding-lg {
|
|
49
|
-
border-radius: var(--rvo-card-padding-lg-border-radius);
|
|
50
|
-
padding-block-end: var(--rvo-card-padding-lg-padding-block-end);
|
|
51
|
-
padding-block-start: var(--rvo-card-padding-lg-padding-block-start);
|
|
52
|
-
padding-inline-end: var(--rvo-card-padding-lg-padding-inline-end);
|
|
53
|
-
padding-inline-start: var(--rvo-card-padding-lg-padding-inline-start);
|
|
54
|
-
}
|
|
55
|
-
.rvo-card.rvo-card--padding-xl {
|
|
56
|
-
border-radius: var(--rvo-card-padding-xl-border-radius);
|
|
57
|
-
padding-block-end: var(--rvo-card-padding-xl-padding-block-end);
|
|
58
|
-
padding-block-start: var(--rvo-card-padding-xl-padding-block-start);
|
|
59
|
-
padding-inline-end: var(--rvo-card-padding-xl-padding-inline-end);
|
|
60
|
-
padding-inline-start: var(--rvo-card-padding-xl-padding-inline-start);
|
|
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);
|
|
61
74
|
}
|
|
62
75
|
.rvo-card.rvo-card--outline {
|
|
63
76
|
border: var(--rvo-card-outline-border-width) solid var(--rvo-card-outline-border-color);
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.rvo-card{border-radius:var(--rvo-card-border-radius);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{background-color:var(--rvo-color-wit)}.rvo-card.rvo-card--full-colour--grijs-100{background-color:var(--rvo-color-grijs-100)}.rvo-card.rvo-card--full-colour--hemelblauw{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{border-radius:var(--rvo-card-padding-sm-border-radius)
|
|
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{object-fit:cover;width:100%}.rvo-card.rvo-card--with-image .rvo-card--with-image-md .rvo-card__image{width:100%}.rvo-card.rvo-card--with-background-image{min-height: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);content:"";display:block;height:100%;left:0;opacity:var(--rvo-card-background-image-overlay-opacity);position:absolute;top:0;width:100%}.rvo-card.rvo-card--with-background-image .rvo-card__background-image{left:0;object-fit:cover;position:absolute;top:0;width:100%}.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{content:"";cursor:pointer;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.rvo-card .rvo-card--with-link-indicator{align-items:center;display:flex;flex:1;gap:var(--rvo-space-xs);height:100%;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-height:var(--rvo-size-sm);min-width: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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default ".rvo-card{border-radius:var(--rvo-card-border-radius);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{background-color:var(--rvo-color-wit)}.rvo-card.rvo-card--full-colour--grijs-100{background-color:var(--rvo-color-grijs-100)}.rvo-card.rvo-card--full-colour--hemelblauw{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{border-radius:var(--rvo-card-padding-sm-border-radius)
|
|
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{object-fit:cover;width:100%}.rvo-card.rvo-card--with-image .rvo-card--with-image-md .rvo-card__image{width:100%}.rvo-card.rvo-card--with-background-image{min-height: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);content:\"\";display:block;height:100%;left:0;opacity:var(--rvo-card-background-image-overlay-opacity);position:absolute;top:0;width:100%}.rvo-card.rvo-card--with-background-image .rvo-card__background-image{left:0;object-fit:cover;position:absolute;top:0;width:100%}.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{content:\"\";cursor:pointer;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.rvo-card .rvo-card--with-link-indicator{align-items:center;display:flex;flex:1;gap:var(--rvo-space-xs);height:100%;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-height:var(--rvo-size-sm);min-width: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/package.json
CHANGED
package/src/index.scss
CHANGED
|
@@ -3,7 +3,24 @@
|
|
|
3
3
|
* Copyright (c) 2021 Community for NL Design System
|
|
4
4
|
*/
|
|
5
5
|
.rvo-card {
|
|
6
|
+
$rvo-card-colors: wit, grijs-100, hemelblauw;
|
|
7
|
+
$rvo-card-sizes: sm, md, lg, xl;
|
|
8
|
+
|
|
9
|
+
--rvo-card-padding-block-end: 0;
|
|
10
|
+
--rvo-card-padding-block-start: 0;
|
|
11
|
+
--rvo-card-padding-inline-end: 0;
|
|
12
|
+
--rvo-card-padding-inline-start: 0;
|
|
13
|
+
--rvo-card-border-radius: var(--rvo-card-border-radius, 0);
|
|
14
|
+
--rvo-card-background-color: transparent;
|
|
15
|
+
--rvo-card-color: initial;
|
|
16
|
+
|
|
17
|
+
background-color: var(--rvo-card-background-color);
|
|
6
18
|
border-radius: var(--rvo-card-border-radius);
|
|
19
|
+
color: var(--rvo-card-color);
|
|
20
|
+
padding-block-end: var(--rvo-card-padding-block-end);
|
|
21
|
+
padding-block-start: var(--rvo-card-padding-block-start);
|
|
22
|
+
padding-inline-end: var(--rvo-card-padding-inline-end);
|
|
23
|
+
padding-inline-start: var(--rvo-card-padding-inline-start);
|
|
7
24
|
position: relative;
|
|
8
25
|
|
|
9
26
|
&.rvo-card--full-colour {
|
|
@@ -11,18 +28,13 @@
|
|
|
11
28
|
padding-block-start: var(--rvo-space-xl);
|
|
12
29
|
padding-inline-end: var(--rvo-space-xl);
|
|
13
30
|
padding-inline-start: var(--rvo-space-xl);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&.rvo-card--full-colour--wit {
|
|
17
|
-
background-color: var(--rvo-color-wit);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&.rvo-card--full-colour--grijs-100 {
|
|
21
|
-
background-color: var(--rvo-color-grijs-100);
|
|
22
|
-
}
|
|
23
31
|
|
|
24
|
-
|
|
25
|
-
|
|
32
|
+
// colors
|
|
33
|
+
@each $color in $rvo-card-colors {
|
|
34
|
+
&--#{$color} {
|
|
35
|
+
--rvo-card-background-color: var(--rvo-color-#{$color});
|
|
36
|
+
}
|
|
37
|
+
}
|
|
26
38
|
}
|
|
27
39
|
|
|
28
40
|
&.rvo-card--inverted-colors {
|
|
@@ -38,36 +50,18 @@
|
|
|
38
50
|
}
|
|
39
51
|
}
|
|
40
52
|
|
|
41
|
-
&.rvo-card--padding
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
padding-inline-end: var(--rvo-card-padding-md-padding-inline-end);
|
|
54
|
-
padding-inline-start: var(--rvo-card-padding-md-padding-inline-start);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&.rvo-card--padding-lg {
|
|
58
|
-
border-radius: var(--rvo-card-padding-lg-border-radius);
|
|
59
|
-
padding-block-end: var(--rvo-card-padding-lg-padding-block-end);
|
|
60
|
-
padding-block-start: var(--rvo-card-padding-lg-padding-block-start);
|
|
61
|
-
padding-inline-end: var(--rvo-card-padding-lg-padding-inline-end);
|
|
62
|
-
padding-inline-start: var(--rvo-card-padding-lg-padding-inline-start);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
&.rvo-card--padding-xl {
|
|
66
|
-
border-radius: var(--rvo-card-padding-xl-border-radius);
|
|
67
|
-
padding-block-end: var(--rvo-card-padding-xl-padding-block-end);
|
|
68
|
-
padding-block-start: var(--rvo-card-padding-xl-padding-block-start);
|
|
69
|
-
padding-inline-end: var(--rvo-card-padding-xl-padding-inline-end);
|
|
70
|
-
padding-inline-start: var(--rvo-card-padding-xl-padding-inline-start);
|
|
53
|
+
&.rvo-card--padding {
|
|
54
|
+
// paddings
|
|
55
|
+
@each $size in $rvo-card-sizes {
|
|
56
|
+
&-#{$size},
|
|
57
|
+
&--#{$size} {
|
|
58
|
+
--rvo-card-border-radius: var(--rvo-card-padding-#{$size}-border-radius);
|
|
59
|
+
--rvo-card-padding-block-end: var(--rvo-card-padding-#{$size}-padding-block-end);
|
|
60
|
+
--rvo-card-padding-block-start: var(--rvo-card-padding-#{$size}-padding-block-start);
|
|
61
|
+
--rvo-card-padding-inline-end: var(--rvo-card-padding-#{$size}-padding-inline-end);
|
|
62
|
+
--rvo-card-padding-inline-start: var(--rvo-card-padding-#{$size}-padding-inline-start);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
71
65
|
}
|
|
72
66
|
|
|
73
67
|
&.rvo-card--outline {
|