@nl-rvo/css-card-experimental 0.3.0 → 0.3.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.css +17 -17
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/package.json +1 -1
  6. package/src/index.scss +17 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @nl-rvo/card-experimental
2
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
+
3
9
  ## 0.3.0
4
10
 
5
11
  ### Minor Changes
package/dist/index.css CHANGED
@@ -91,14 +91,14 @@
91
91
  margin-inline-end: 24px;
92
92
  }
93
93
  .rvo-card.rvo-card--with-image .rvo-card--with-image-sm .rvo-card__image {
94
+ inline-size: 100%;
94
95
  object-fit: cover;
95
- width: 100%;
96
96
  }
97
97
  .rvo-card.rvo-card--with-image .rvo-card--with-image-md .rvo-card__image {
98
- width: 100%;
98
+ inline-size: 100%;
99
99
  }
100
100
  .rvo-card.rvo-card--with-background-image {
101
- min-height: var(--rvo-card-background-image-min-height);
101
+ min-block-size: var(--rvo-card-background-image-min-height);
102
102
  overflow: hidden;
103
103
  padding-block-start: var(--rvo-space-xl);
104
104
  position: relative;
@@ -108,21 +108,21 @@
108
108
  }
109
109
  .rvo-card.rvo-card--with-background-image::after {
110
110
  background-color: var(--rvo-card-background-image-overlay-color);
111
+ block-size: 100%;
111
112
  content: "";
112
113
  display: block;
113
- height: 100%;
114
- left: 0;
114
+ inline-size: 100%;
115
+ inset-block-start: 0;
116
+ inset-inline-start: 0;
115
117
  opacity: var(--rvo-card-background-image-overlay-opacity);
116
118
  position: absolute;
117
- top: 0;
118
- width: 100%;
119
119
  }
120
120
  .rvo-card.rvo-card--with-background-image .rvo-card__background-image {
121
- left: 0;
121
+ inline-size: 100%;
122
+ inset-block-start: 0;
123
+ inset-inline-start: 0;
122
124
  object-fit: cover;
123
125
  position: absolute;
124
- top: 0;
125
- width: 100%;
126
126
  }
127
127
  .rvo-card .rvo-card__content,
128
128
  .rvo-card .rvo-card--with-link-indicator {
@@ -132,30 +132,30 @@
132
132
  display: block;
133
133
  }
134
134
  .rvo-card.rvo-card__full-card-link::after {
135
+ block-size: 100%;
135
136
  content: "";
136
137
  cursor: pointer;
137
138
  display: inline-block;
138
- height: 100%;
139
- left: 0;
139
+ inline-size: 100%;
140
+ inset-block-start: 0;
141
+ inset-inline-start: 0;
140
142
  position: absolute;
141
- top: 0;
142
- width: 100%;
143
143
  z-index: 1;
144
144
  }
145
145
  .rvo-card .rvo-card--with-link-indicator {
146
146
  align-items: center;
147
+ block-size: 100%;
147
148
  display: flex;
148
149
  flex: 1;
149
150
  gap: var(--rvo-space-xs);
150
- height: 100%;
151
151
  justify-content: space-between;
152
152
  }
153
153
  .rvo-card .rvo-card--with-link-indicator .rvo-card__content {
154
154
  align-self: flex-start;
155
155
  }
156
156
  .rvo-card .rvo-card--with-link-indicator .rvo-icon--sm {
157
- min-height: var(--rvo-size-sm);
158
- min-width: var(--rvo-size-sm);
157
+ min-block-size: var(--rvo-size-sm);
158
+ min-inline-size: var(--rvo-size-sm);
159
159
  }
160
160
  .rvo-card .rvo-card__image-container {
161
161
  line-height: 0;
package/dist/index.min.css CHANGED
@@ -1 +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: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)}
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 CHANGED
@@ -1 +1 @@
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)}";
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/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.3.0",
2
+ "version": "0.3.1",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-card-experimental",
package/src/index.scss CHANGED
@@ -86,18 +86,18 @@
86
86
  }
87
87
 
88
88
  .rvo-card__image {
89
+ inline-size: 100%;
89
90
  object-fit: cover;
90
- width: 100%;
91
91
  }
92
92
  }
93
93
 
94
94
  .rvo-card--with-image-md .rvo-card__image {
95
- width: 100%;
95
+ inline-size: 100%;
96
96
  }
97
97
  }
98
98
 
99
99
  &.rvo-card--with-background-image {
100
- min-height: var(--rvo-card-background-image-min-height);
100
+ min-block-size: var(--rvo-card-background-image-min-height);
101
101
  overflow: hidden;
102
102
  padding-block-start: var(--rvo-space-xl);
103
103
  position: relative;
@@ -108,22 +108,22 @@
108
108
 
109
109
  &::after {
110
110
  background-color: var(--rvo-card-background-image-overlay-color);
111
+ block-size: 100%;
111
112
  content: "";
112
113
  display: block;
113
- height: 100%;
114
- left: 0;
114
+ inline-size: 100%;
115
+ inset-block-start: 0;
116
+ inset-inline-start: 0;
115
117
  opacity: var(--rvo-card-background-image-overlay-opacity);
116
118
  position: absolute;
117
- top: 0;
118
- width: 100%;
119
119
  }
120
120
 
121
121
  .rvo-card__background-image {
122
- left: 0;
122
+ inline-size: 100%;
123
+ inset-block-start: 0;
124
+ inset-inline-start: 0;
123
125
  object-fit: cover;
124
126
  position: absolute;
125
- top: 0;
126
- width: 100%;
127
127
  }
128
128
  }
129
129
 
@@ -136,24 +136,24 @@
136
136
  display: block;
137
137
 
138
138
  &::after {
139
+ block-size: 100%;
139
140
  content: "";
140
141
  cursor: pointer;
141
142
  display: inline-block;
142
- height: 100%;
143
- left: 0;
143
+ inline-size: 100%;
144
+ inset-block-start: 0;
145
+ inset-inline-start: 0;
144
146
  position: absolute;
145
- top: 0;
146
- width: 100%;
147
147
  z-index: 1;
148
148
  }
149
149
  }
150
150
 
151
151
  .rvo-card--with-link-indicator {
152
152
  align-items: center;
153
+ block-size: 100%;
153
154
  display: flex;
154
155
  flex: 1;
155
156
  gap: var(--rvo-space-xs);
156
- height: 100%;
157
157
  justify-content: space-between;
158
158
 
159
159
  .rvo-card__content {
@@ -161,8 +161,8 @@
161
161
  }
162
162
 
163
163
  .rvo-icon--sm {
164
- min-height: var(--rvo-size-sm);
165
- min-width: var(--rvo-size-sm);
164
+ min-block-size: var(--rvo-size-sm);
165
+ min-inline-size: var(--rvo-size-sm);
166
166
  }
167
167
  }
168
168