@utrecht/component-library-css 4.2.0 → 5.0.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 (3) hide show
  1. package/dist/index.css +16 -12
  2. package/dist/prince-xml.css +16 -12
  3. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -169,10 +169,9 @@
169
169
  border-radius: var(--utrecht-alert-border-radius, 0);
170
170
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
171
171
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
172
- display: grid;
173
- gap: var(--utrecht-alert-icon-gap);
174
- grid-template-areas: "icon message";
175
- grid-template-columns: 0fr 100fr;
172
+ column-gap: var(--utrecht-alert-column-gap);
173
+ display: flex;
174
+ flex-direction: row;
176
175
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
177
176
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
178
177
  padding-block-end: var(--utrecht-alert-padding-block-end);
@@ -215,11 +214,12 @@
215
214
 
216
215
  .utrecht-alert-dialog__icon {
217
216
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
218
- grid-area: icon;
217
+ --utrecht-icon-size: var(--utrecht-alert-icon-size);
218
+ --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
219
219
  }
220
220
 
221
221
  .utrecht-alert-dialog__message {
222
- grid-area: message;
222
+ row-gap: var(--utrecht-alert-message-row-gap);
223
223
  }
224
224
 
225
225
  .utrecht-alert-dialog--error {
@@ -252,10 +252,9 @@
252
252
  border-style: solid;
253
253
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
254
254
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
255
- display: grid;
256
- gap: var(--utrecht-alert-icon-gap);
257
- grid-template-areas: "icon message";
258
- grid-template-columns: 0fr 100fr;
255
+ column-gap: var(--utrecht-alert-column-gap);
256
+ display: flex;
257
+ flex-direction: row;
259
258
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
260
259
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
261
260
  padding-block-end: var(--utrecht-alert-padding-block-end);
@@ -266,11 +265,16 @@
266
265
 
267
266
  .utrecht-alert__icon {
268
267
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
269
- grid-area: icon;
268
+ --utrecht-icon-size: var(--utrecht-alert-icon-size);
269
+ --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
270
+ }
271
+
272
+ .utrecht-alert__content {
273
+ row-gap: var(--utrecht-alert-content-row-gap);
270
274
  }
271
275
 
272
276
  .utrecht-alert__message {
273
- grid-area: message;
277
+ row-gap: var(--utrecht-alert-message-row-gap);
274
278
  }
275
279
 
276
280
  .utrecht-alert--info {
package/dist/prince-xml.css CHANGED
@@ -168,10 +168,9 @@
168
168
  border-radius: var(--utrecht-alert-border-radius, 0);
169
169
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
170
170
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
171
- display: grid;
172
- gap: var(--utrecht-alert-icon-gap);
173
- grid-template-areas: "icon message";
174
- grid-template-columns: 0fr 100fr;
171
+ column-gap: var(--utrecht-alert-column-gap);
172
+ display: flex;
173
+ flex-direction: row;
175
174
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
176
175
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
177
176
  padding-bottom: var(--utrecht-alert-padding-block-end);
@@ -214,11 +213,12 @@
214
213
 
215
214
  .utrecht-alert-dialog__icon {
216
215
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
217
- grid-area: icon;
216
+ --utrecht-icon-size: var(--utrecht-alert-icon-size);
217
+ --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
218
218
  }
219
219
 
220
220
  .utrecht-alert-dialog__message {
221
- grid-area: message;
221
+ row-gap: var(--utrecht-alert-message-row-gap);
222
222
  }
223
223
 
224
224
  .utrecht-alert-dialog--error {
@@ -251,10 +251,9 @@
251
251
  border-style: solid;
252
252
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
253
253
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
254
- display: grid;
255
- gap: var(--utrecht-alert-icon-gap);
256
- grid-template-areas: "icon message";
257
- grid-template-columns: 0fr 100fr;
254
+ column-gap: var(--utrecht-alert-column-gap);
255
+ display: flex;
256
+ flex-direction: row;
258
257
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
259
258
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
260
259
  padding-bottom: var(--utrecht-alert-padding-block-end);
@@ -265,11 +264,16 @@
265
264
 
266
265
  .utrecht-alert__icon {
267
266
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
268
- grid-area: icon;
267
+ --utrecht-icon-size: var(--utrecht-alert-icon-size);
268
+ --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
269
+ }
270
+
271
+ .utrecht-alert__content {
272
+ row-gap: var(--utrecht-alert-content-row-gap);
269
273
  }
270
274
 
271
275
  .utrecht-alert__message {
272
- grid-area: message;
276
+ row-gap: var(--utrecht-alert-message-row-gap);
273
277
  }
274
278
 
275
279
  .utrecht-alert--info {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "4.2.0",
2
+ "version": "5.0.0",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -26,7 +26,7 @@
26
26
  "rimraf": "5.0.7",
27
27
  "rollup": "4.18.0",
28
28
  "rollup-plugin-postcss": "4.0.2",
29
- "@utrecht/components": "6.2.0",
29
+ "@utrecht/components": "7.0.0",
30
30
  "@utrecht/html-content-css": "1.1.0"
31
31
  },
32
32
  "main": "dist/index.css",