mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(modal): Add backdrop-filter

Browse source
This commit is contained in:
Lucas Larroche 2022-06-05 10:37:48 +07:00
parent a9ab53feb6
commit ecba574e49
23 changed files with 74 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

17
scss/components/_modal.scss
View file

@ -22,6 +22,7 @@ dialog {
min-height: 100%;
padding: var(--spacing);
border: 0;
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color);
color: var(--color);
@ -134,11 +135,11 @@ dialog {
dialog {
animation-duration: ($animation-duration * 4);
animation-name: fadeIn;
animation-name: modalOverlay;
> article {
animation-delay: $animation-duration;
animation-name: slideInDown;
animation-name: modal;
}
}
}
@ -151,23 +152,17 @@ dialog {
}
}
@keyframes fadeIn {
@keyframes modalOverlay {
from {
backdrop-filter: none;
background-color: transparent;
}
to {
background-color: var(--modal-overlay-background-color);
}
}
@keyframes slideInDown {
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
}