@utrecht/component-library-css 1.0.0-alpha.368 → 1.0.0-alpha.369
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/dist/index.css +56 -2
- package/package.json +2 -2
package/dist/index.css
CHANGED
|
@@ -141,11 +141,34 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
.utrecht-alert-dialog::backdrop {
|
|
144
|
+
--_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
|
|
145
|
+
--_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
|
|
146
|
+
animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
|
|
147
|
+
animation-name: utrecht-backdrop-fade-in;
|
|
148
|
+
animation-timing-function: ease-in-out;
|
|
144
149
|
background-color: var(--utrecht-backdrop-background-color);
|
|
145
150
|
color: var(--utrecht-backdrop-color);
|
|
146
|
-
opacity: var(--
|
|
151
|
+
opacity: var(--_utrecht-backdrop-opacity);
|
|
147
152
|
user-select: none;
|
|
148
153
|
}
|
|
154
|
+
@keyframes utrecht-backdrop-fade-in {
|
|
155
|
+
from {
|
|
156
|
+
opacity: 0%;
|
|
157
|
+
}
|
|
158
|
+
to {
|
|
159
|
+
opacity: var(--_utrecht-backdrop-opacity);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
@media (prefers-reduced-motion: reduce) {
|
|
163
|
+
.utrecht-alert-dialog::backdrop {
|
|
164
|
+
--_utrecht-backdrop-fade-in-animation-duration: 0;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
168
|
+
.utrecht-alert-dialog::backdrop {
|
|
169
|
+
--_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
149
172
|
|
|
150
173
|
.utrecht-alert-dialog__icon {
|
|
151
174
|
--utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
|
|
@@ -346,9 +369,14 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
346
369
|
* Copyright (c) 2020-2022 Frameless B.V.
|
|
347
370
|
*/
|
|
348
371
|
.utrecht-backdrop {
|
|
372
|
+
--_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity);
|
|
373
|
+
--_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0);
|
|
374
|
+
animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0));
|
|
375
|
+
animation-name: utrecht-backdrop-fade-in;
|
|
376
|
+
animation-timing-function: ease-in-out;
|
|
349
377
|
background-color: var(--utrecht-backdrop-background-color);
|
|
350
378
|
color: var(--utrecht-backdrop-color);
|
|
351
|
-
opacity: var(--
|
|
379
|
+
opacity: var(--_utrecht-backdrop-opacity);
|
|
352
380
|
user-select: none;
|
|
353
381
|
bottom: 0;
|
|
354
382
|
display: block;
|
|
@@ -358,6 +386,32 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
|
|
|
358
386
|
top: 0;
|
|
359
387
|
z-index: var(--utrecht-backdrop-z-index);
|
|
360
388
|
}
|
|
389
|
+
@keyframes utrecht-backdrop-fade-in {
|
|
390
|
+
from {
|
|
391
|
+
opacity: 0%;
|
|
392
|
+
}
|
|
393
|
+
to {
|
|
394
|
+
opacity: var(--_utrecht-backdrop-opacity);
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
@media (prefers-reduced-motion: reduce) {
|
|
398
|
+
.utrecht-backdrop {
|
|
399
|
+
--_utrecht-backdrop-fade-in-animation-duration: 0;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
403
|
+
.utrecht-backdrop {
|
|
404
|
+
--_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.utrecht-backdrop--reduced-motion {
|
|
409
|
+
--_utrecht-backdrop-fade-in-animation-duration: 0;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.utrecht-backdrop--reduced-transparency {
|
|
413
|
+
--_utrecht-backdrop-opacity: var(--utrecht-backdrop-reduced-transparency-opacity, 100%);
|
|
414
|
+
}
|
|
361
415
|
|
|
362
416
|
.utrecht-backdrop--viewport {
|
|
363
417
|
position: fixed;
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.0-alpha.
|
|
2
|
+
"version": "1.0.0-alpha.369",
|
|
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": "
|
|
29
|
+
"gitHead": "cea1bed96c0d31412c870ede6034ae680afa2960"
|
|
30
30
|
}
|