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

97
docs/index.html
View file

@ -948,6 +948,27 @@
Launch Form Modal
</button>
</div>
<hr>
<header>
<h2>Modal Sizes</h2>
<h6>Having different modal sizes does require a class.</h6>
</header>
<p>The main thing will be to add one of the following classes to the <code>&lt;dialog&gt;</code> tag:</p>
<ul>
<li><code>.modal-sm</code></li>
<li><code>.modal-md</code></li>
<li><code>.modal-lg</code></li>
<li><code>.modal-xlg</code></li>
<li><code>.modal-fs</code></li>
</ul>
<div class="grid">
<button type="button" onclick="toggleModal(event)" data-target="small-modal">Small Modal</button>
<button type="button" onclick="toggleModal(event)" data-target="medium-modal">Medium Modal</button>
<button type="button" onclick="toggleModal(event)" data-target="large-modal">Large Modal</button>
<button type="button" onclick="toggleModal(event)" data-target="xlarge-modal">Extra Large Modal</button>
<button type="button" onclick="toggleModal(event)" data-target="fullscreen-modal">Fullscreen Modal</button>
</div>
</article>
<!-- ./ Modal -->
<hr>
@ -1355,6 +1376,82 @@
</dialog>
<!-- ./ Modal example -->
<!-- Small Modal -->
<dialog id="small-modal" class="modal-sm">
<article>
<header>
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="small-modal"></a>
Small Modal
</header>
<p>This is a small modal with max-width of 400px.</p>
<footer>
<button onclick="toggleModal(event)" data-target="small-modal" class="secondary">Cancel</button>
<button onclick="toggleModal(event)">Confirm</button>
</footer>
</article>
</dialog>
<!-- Medium Modal -->
<dialog id="medium-modal" class="modal-md">
<article>
<header>
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="medium-modal"></a>
Medium Modal
</header>
<p>This is a medium modal with max-width of 600px.</p>
<footer>
<button onclick="toggleModal(event)" data-target="medium-modal" class="secondary">Cancel</button>
<button onclick="toggleModal(event)">Confirm</button>
</footer>
</article>
</dialog>
<!-- Large Modal -->
<dialog id="large-modal" class="modal-lg">
<article>
<header>
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="large-modal"></a>
Large Modal
</header>
<p>This is a large modal with max-width of 800px.</p>
<footer>
<button onclick="toggleModal(event)" data-target="large-modal" class="secondary">Cancel</button>
<button onclick="toggleModal(event)">Confirm</button>
</footer>
</article>
</dialog>
<!-- Extra Large Modal -->
<dialog id="xlarge-modal" class="modal-xlg">
<article>
<header>
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="xlarge-modal"></a>
Extra Large Modal
</header>
<p>This is an extra large modal with max-width of 1000px.</p>
<footer>
<button onclick="toggleModal(event)" data-target="xlarge-modal" class="secondary">Cancel</button>
<button onclick="toggleModal(event)">Confirm</button>
</footer>
</article>
</dialog>
<!-- Fullscreen Modal -->
<dialog id="fullscreen-modal" class="modal-fs">
<article>
<header>
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="fullscreen-modal"></a>
Fullscreen Modal
</header>
<p>This is a fullscreen modal that takes up the entire viewport.</p>
<footer>
<button onclick="toggleModal(event)" data-target="fullscreen-modal" class="secondary">Cancel</button>
<button onclick="toggleModal(event)">Confirm</button>
</footer>
</article>
</dialog>
<!-- input switch to change light and dark mode -->
<script src="js/SwitchColorMode.js"></script>

4
docs/js/Modal.js
View file

@ -5,7 +5,7 @@
* Copyright 2019-2025 - Licensed under MIT
* Modified by Yohn https://github.com/Yohn/PicoCSS
*/
document.addEventListener("DOMContentLoaded", () => {
//document.addEventListener("DOMContentLoaded", () => {
// Config
const isOpenClass = "modal-is-open";
const openingClass = "modal-is-opening";
@ -82,4 +82,4 @@ document.addEventListener("DOMContentLoaded", () => {
const isScrollbarVisible = () => {
return document.body.scrollHeight > screen.height;
};
})
//})

44
docs/pico.css
View file

@ -3058,6 +3058,7 @@ details.dropdown > summary:not([role]) {
background-color: var(--pico-form-element-background-color);
color: var(--pico-form-element-placeholder-color);
line-height: inherit;
text-align: inherit;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
@ -3091,6 +3092,7 @@ details.dropdown > summary + ul {
left: 0;
flex-direction: column;
width: 100%;
min-width: 200px;
min-width: -moz-fit-content;
min-width: fit-content;
margin: 0;
@ -3122,6 +3124,7 @@ details.dropdown > summary + ul li:last-of-type {
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
}
details.dropdown > summary + ul li details {
width: 100%;
margin-bottom: 0;
}
details.dropdown > summary + ul li details > summary {
@ -3643,6 +3646,47 @@ dialog:not([open]) article, dialog[open=false] article {
touch-action: auto;
}
dialog.modal-sm > article {
width: 90vw;
max-width: 400px;
}
dialog.modal-md > article {
width: 90vw;
max-width: 600px;
}
dialog.modal-lg > article {
width: 90vw;
max-width: 800px;
}
dialog.modal-xlg > article {
width: 95vw;
max-width: 1000px;
}
dialog.modal-fs {
padding: 0;
}
dialog.modal-fs > article {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
margin: 0;
overflow-y: auto;
}
dialog.modal-fs > article > footer {
display: flex;
justify-content: flex-end;
margin-top: auto;
}
@media (max-width: 576px) {
dialog:not(.modal-fs) > article {
width: 95vw;
}
}
body:has(dialog[open]) {
overflow: hidden;
}

2
docs/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

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