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

Modal: Delete blur background and handle scrollbar

Browse source
This commit is contained in:
Lucas Larroche 2021-11-14 11:09:58 +07:00
parent 3d2bc1f911
commit d9a6ac1a65
24 changed files with 221 additions and 390 deletions
Download patch file Download diff file Expand all files Collapse all files

42
css/pico.css
View file

@ -2034,6 +2034,10 @@ article > footer {
/**
* Modal (<dialog>)
*/
:root {
--scrollbar-width: 0px;
}
dialog {
display: flex;
z-index: 999;
@ -2105,66 +2109,47 @@ dialog:not([open]), dialog[open=false] {
}
.modal-is-open {
padding-right: var(--scrollbar-width, 0px);
overflow: hidden;
pointer-events: none;
}
.modal-is-open body > *:not(dialog) {
filter: blur(0.1875rem);
}
.modal-is-open dialog {
pointer-events: auto;
}
.modal-is-opening body > *:not(dialog),
.modal-is-opening dialog,
.modal-is-opening dialog > article,
.modal-is-closing body > *:not(dialog),
.modal-is-closing dialog,
.modal-is-closing dialog > article {
-webkit-animation-duration: 0.2s;
animation-duration: 0.2s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.modal-is-opening body > *:not(dialog),
.modal-is-closing body > *:not(dialog) {
-webkit-animation-name: blurIn;
animation-name: blurIn;
}
.modal-is-opening dialog,
.modal-is-closing dialog {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.modal-is-opening dialog > article,
.modal-is-closing dialog > article {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
.modal-is-closing body > *:not(dialog),
.modal-is-closing dialog,
.modal-is-closing dialog > article {
-webkit-animation-delay: 0s;
animation-delay: 0s;
animation-direction: reverse;
}
@-webkit-keyframes blurIn {
from {
filter: blur(0);
}
to {
filter: blur(0.1875rem);
}
}
@keyframes blurIn {
from {
filter: blur(0);
}
to {
filter: blur(0.1875rem);
}
}
@-webkit-keyframes fadeIn {
from {
background-color: transparent;
@ -2173,6 +2158,7 @@ dialog:not([open]), dialog[open=false] {
background-color: var(--modal-overlay-background-color);
}
}
@keyframes fadeIn {
from {
background-color: transparent;