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

feature: modal improvements

Browse source 
- overflow on modal instead of article
- animations
- prevent body overflow when open modal
This commit is contained in:
Atmos4 2024-03-29 09:32:53 +01:00
parent 6dc6489e69
commit e18d040caa
238 changed files with 1912 additions and 833 deletions
Download patch file Download diff file Expand all files Collapse all files

21
css/pico.conditional.slate.css
View file

@ -2314,7 +2314,7 @@ main {
}
.pico dialog {
display: flex;
display: grid;
z-index: 999;
position: fixed;
top: 0;
@ -2327,18 +2327,19 @@ main {
min-width: 100%;
height: inherit;
min-height: 100%;
padding: 0;
padding: var(--pico-spacing);
border: 0;
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
background-color: var(--pico-modal-overlay-background-color);
color: var(--pico-color);
opacity: 1;
transition: all var(--pico-transition) allow-discrete;
}
.pico dialog article {
width: 100%;
max-height: calc(100vh - var(--pico-spacing) * 2);
margin: var(--pico-spacing);
overflow: auto;
transform: scale(1);
transition: transform var(--pico-transition);
}
@media (min-width: 576px) {
.pico dialog article {
@ -2390,7 +2391,11 @@ main {
opacity: 1;
}
.pico dialog:not([open]), .pico dialog[open=false] {
display: none;
visibility: hidden;
opacity: 0;
}
.pico dialog:not([open]) article, .pico dialog[open=false] article {
transform: scale(0.7);
}
.modal-is-open {
@ -2404,6 +2409,10 @@ main {
touch-action: auto;
}
body:has(dialog[open]) {
overflow: hidden;
}
:where(.modal-is-opening, .modal-is-closing) dialog,
:where(.modal-is-opening, .modal-is-closing) dialog > article {
animation-duration: 0.2s;