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

Closes #30 dicussion as modal sizes have now been added with this commit.

Browse source 
Cleaned up the submenu within the dropdown some more.
This commit is contained in:
Yohn 2025-01-11 03:56:21 -05:00
parent db7b0b2384
commit d20ea655bf
6 changed files with 212 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

65
scss/components/_modal.scss
View file

@ -135,6 +135,71 @@
touch-action: auto;
}
}
dialog {
// Small modal
&.modal-sm {
> article {
width: 90vw;
max-width: 400px;
}
}
// Medium modal (default)
&.modal-md {
> article {
width: 90vw;
max-width: 600px;
}
}
// Large modal
&.modal-lg {
> article {
width: 90vw;
max-width: 800px;
}
}
// Extra large modal
&.modal-xlg {
> article {
width: 95vw;
max-width: 1000px;
}
}
// Fullscreen modal
&.modal-fs {
padding: 0;
> article {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
//border-radius: 0;
margin: 0;
//padding: var(--spacing);
overflow-y: auto;
> footer {
display: flex;
justify-content: flex-end;
margin-top: auto;
}
}
}
// Handle mobile responsiveness
@media (max-width: 576px) {
&:not(.modal-fs) {
> article {
width: 95vw;
}
}
}
}
}
// Prevent scrolling body when modal is open