mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 03:06: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

4
scss/components/_dropdown.scss
View file

@ -69,6 +69,7 @@
background-color: var(#{$css-var-prefix}form-element-background-color);
color: var(#{$css-var-prefix}form-element-placeholder-color);
line-height: inherit;
text-align: inherit;
cursor: pointer;
user-select: none;
@ -134,6 +135,7 @@
left: 0;
flex-direction: column;
width: 100%;
min-width: 200px;
min-width: fit-content;
margin: 0;
margin-top: var(#{$css-var-prefix}outline-width);
@ -175,8 +177,8 @@
}
details {
width: 100%;
margin-bottom: 0;
> summary {
line-height: var(#{$css-var-prefix}line-height);
}

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