@utrecht/component-library-css 1.0.0-alpha.359 → 1.0.0-alpha.360

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 (2) hide show
  1. package/dist/index.css +17 -12
  2. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -108,7 +108,15 @@
108
108
  * Copyright (c) 2020-2022 Frameless B.V.
109
109
  */
110
110
  /* No good use case for `--ok` yet */
111
- .utrecht-alert-dialog {
111
+ /*
112
+ Apply `.utrecht-alert-dialog` to any element with this class name, with one exception.
113
+
114
+ The HTML `<dialog>` element must have `display: none` until the `open` attribute is set,
115
+ so do not apply these styles to an HTML `<dialog>` element without `open` attribute.
116
+ */
117
+ .utrecht-alert-dialog:not(dialog:not([open])) {
118
+ --utrecht-alert-dialog-margin-block-start: auto;
119
+ --utrecht-alert-dialog-margin-block-end: auto;
112
120
  background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
113
121
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
114
122
  display: grid;
@@ -121,7 +129,11 @@
121
129
  padding-block-start: var(--utrecht-alert-padding-block-start);
122
130
  padding-inline-end: var(--utrecht-alert-padding-inline-end);
123
131
  padding-inline-start: var(--utrecht-alert-padding-inline-start);
124
- border-style: none; /* reset <dialog> element */
132
+ border-color: var(--utrecht-alert-dialog-border-color);
133
+ border-radius: var(--utrecht-alert-dialog-border-radius, 0);
134
+ border-style: solid;
135
+ border-width: var(--utrecht-alert-dialog-border-width, 0); /* reset HTML <dialog> border by default */
136
+ box-shadow: var(--utrecht-alert-dialog-box-shadow);
125
137
  max-block-size: var(--utrecht-alert-dialog-max-block-size);
126
138
  max-inline-size: var(--utrecht-alert-dialog-max-inline-size);
127
139
  min-block-size: var(--utrecht-alert-dialog-min-block-size);
@@ -130,16 +142,9 @@
130
142
 
131
143
  .utrecht-alert-dialog::backdrop {
132
144
  background-color: var(--utrecht-backdrop-background-color);
133
- bottom: 0;
134
145
  color: var(--utrecht-backdrop-color);
135
- display: block;
136
- left: 0;
137
146
  opacity: var(--utrecht-backdrop-opacity);
138
- position: absolute;
139
- right: 0;
140
- top: 0;
141
147
  user-select: none;
142
- z-index: var(--utrecht-backdrop-z-index);
143
148
  }
144
149
 
145
150
  .utrecht-alert-dialog__icon {
@@ -323,15 +328,15 @@
323
328
  */
324
329
  .utrecht-backdrop {
325
330
  background-color: var(--utrecht-backdrop-background-color);
326
- bottom: 0;
327
331
  color: var(--utrecht-backdrop-color);
332
+ opacity: var(--utrecht-backdrop-opacity);
333
+ user-select: none;
334
+ bottom: 0;
328
335
  display: block;
329
336
  left: 0;
330
- opacity: var(--utrecht-backdrop-opacity);
331
337
  position: absolute;
332
338
  right: 0;
333
339
  top: 0;
334
- user-select: none;
335
340
  z-index: var(--utrecht-backdrop-z-index);
336
341
  }
337
342
 
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.359",
2
+ "version": "1.0.0-alpha.360",
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,5 +26,5 @@
26
26
  "clean": "rimraf dist/"
27
27
  },
28
28
  "main": "dist/index.css",
29
- "gitHead": "e2ed9faf6a3b3eb4a924e2d4ef50e698ef972f06"
29
+ "gitHead": "ce2d597411c670f6cf832d82133bee001fe83e72"
30
30
  }