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

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>