Skip to content

Commit d20ea65

Browse files
YohnYohn
committed
Closes #30 dicussion as modal sizes have now been added with this commit.
Cleaned up the submenu within the dropdown some more.
1 parent db7b0b2 commit d20ea65

6 files changed

Lines changed: 212 additions & 4 deletions

File tree

‎docs/index.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -948,6 +948,27 @@ <h2>Modal</h2>
948948
Launch Form Modal
949949
</button>
950950
</div>
951+
<hr>
952+
953+
<header>
954+
<h2>Modal Sizes</h2>
955+
<h6>Having different modal sizes does require a class.</h6>
956+
</header>
957+
<p>The main thing will be to add one of the following classes to the <code>&lt;dialog&gt;</code> tag:</p>
958+
<ul>
959+
<li><code>.modal-sm</code></li>
960+
<li><code>.modal-md</code></li>
961+
<li><code>.modal-lg</code></li>
962+
<li><code>.modal-xlg</code></li>
963+
<li><code>.modal-fs</code></li>
964+
</ul>
965+
<div class="grid">
966+
<button type="button" onclick="toggleModal(event)" data-target="small-modal">Small Modal</button>
967+
<button type="button" onclick="toggleModal(event)" data-target="medium-modal">Medium Modal</button>
968+
<button type="button" onclick="toggleModal(event)" data-target="large-modal">Large Modal</button>
969+
<button type="button" onclick="toggleModal(event)" data-target="xlarge-modal">Extra Large Modal</button>
970+
<button type="button" onclick="toggleModal(event)" data-target="fullscreen-modal">Fullscreen Modal</button>
971+
</div>
951972
</article>
952973
<!-- ./ Modal -->
953974
<hr>
@@ -1355,6 +1376,82 @@ <h3>Modal with a Form!</h3>
13551376
</dialog>
13561377
<!-- ./ Modal example -->
13571378

1379+
1380+
<!-- Small Modal -->
1381+
<dialog id="small-modal" class="modal-sm">
1382+
<article>
1383+
<header>
1384+
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="small-modal"></a>
1385+
Small Modal
1386+
</header>
1387+
<p>This is a small modal with max-width of 400px.</p>
1388+
<footer>
1389+
<button onclick="toggleModal(event)" data-target="small-modal" class="secondary">Cancel</button>
1390+
<button onclick="toggleModal(event)">Confirm</button>
1391+
</footer>
1392+
</article>
1393+
</dialog>
1394+
1395+
<!-- Medium Modal -->
1396+
<dialog id="medium-modal" class="modal-md">
1397+
<article>
1398+
<header>
1399+
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="medium-modal"></a>
1400+
Medium Modal
1401+
</header>
1402+
<p>This is a medium modal with max-width of 600px.</p>
1403+
<footer>
1404+
<button onclick="toggleModal(event)" data-target="medium-modal" class="secondary">Cancel</button>
1405+
<button onclick="toggleModal(event)">Confirm</button>
1406+
</footer>
1407+
</article>
1408+
</dialog>
1409+
1410+
<!-- Large Modal -->
1411+
<dialog id="large-modal" class="modal-lg">
1412+
<article>
1413+
<header>
1414+
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="large-modal"></a>
1415+
Large Modal
1416+
</header>
1417+
<p>This is a large modal with max-width of 800px.</p>
1418+
<footer>
1419+
<button onclick="toggleModal(event)" data-target="large-modal" class="secondary">Cancel</button>
1420+
<button onclick="toggleModal(event)">Confirm</button>
1421+
</footer>
1422+
</article>
1423+
</dialog>
1424+
1425+
<!-- Extra Large Modal -->
1426+
<dialog id="xlarge-modal" class="modal-xlg">
1427+
<article>
1428+
<header>
1429+
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="xlarge-modal"></a>
1430+
Extra Large Modal
1431+
</header>
1432+
<p>This is an extra large modal with max-width of 1000px.</p>
1433+
<footer>
1434+
<button onclick="toggleModal(event)" data-target="xlarge-modal" class="secondary">Cancel</button>
1435+
<button onclick="toggleModal(event)">Confirm</button>
1436+
</footer>
1437+
</article>
1438+
</dialog>
1439+
1440+
<!-- Fullscreen Modal -->
1441+
<dialog id="fullscreen-modal" class="modal-fs">
1442+
<article>
1443+
<header>
1444+
<a onclick="toggleModal(event)" href="#close" aria-label="Close" class="close" data-target="fullscreen-modal"></a>
1445+
Fullscreen Modal
1446+
</header>
1447+
<p>This is a fullscreen modal that takes up the entire viewport.</p>
1448+
<footer>
1449+
<button onclick="toggleModal(event)" data-target="fullscreen-modal" class="secondary">Cancel</button>
1450+
<button onclick="toggleModal(event)">Confirm</button>
1451+
</footer>
1452+
</article>
1453+
</dialog>
1454+
13581455
<!-- input switch to change light and dark mode -->
13591456
<script src="js/SwitchColorMode.js"></script>
13601457

‎docs/js/Modal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Copyright 2019-2025 - Licensed under MIT
66
* Modified by Yohn https://github.com/Yohn/PicoCSS
77
*/
8-
document.addEventListener("DOMContentLoaded", () => {
8+
//document.addEventListener("DOMContentLoaded", () => {
99
// Config
1010
const isOpenClass = "modal-is-open";
1111
const openingClass = "modal-is-opening";
@@ -82,4 +82,4 @@ document.addEventListener("DOMContentLoaded", () => {
8282
const isScrollbarVisible = () => {
8383
return document.body.scrollHeight > screen.height;
8484
};
85-
})
85+
//})

‎docs/pico.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3058,6 +3058,7 @@ details.dropdown > summary:not([role]) {
30583058
background-color: var(--pico-form-element-background-color);
30593059
color: var(--pico-form-element-placeholder-color);
30603060
line-height: inherit;
3061+
text-align: inherit;
30613062
cursor: pointer;
30623063
-webkit-user-select: none;
30633064
-moz-user-select: none;
@@ -3091,6 +3092,7 @@ details.dropdown > summary + ul {
30913092
left: 0;
30923093
flex-direction: column;
30933094
width: 100%;
3095+
min-width: 200px;
30943096
min-width: -moz-fit-content;
30953097
min-width: fit-content;
30963098
margin: 0;
@@ -3122,6 +3124,7 @@ details.dropdown > summary + ul li:last-of-type {
31223124
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
31233125
}
31243126
details.dropdown > summary + ul li details {
3127+
width: 100%;
31253128
margin-bottom: 0;
31263129
}
31273130
details.dropdown > summary + ul li details > summary {
@@ -3643,6 +3646,47 @@ dialog:not([open]) article, dialog[open=false] article {
36433646
touch-action: auto;
36443647
}
36453648

3649+
dialog.modal-sm > article {
3650+
width: 90vw;
3651+
max-width: 400px;
3652+
}
3653+
dialog.modal-md > article {
3654+
width: 90vw;
3655+
max-width: 600px;
3656+
}
3657+
dialog.modal-lg > article {
3658+
width: 90vw;
3659+
max-width: 800px;
3660+
}
3661+
dialog.modal-xlg > article {
3662+
width: 95vw;
3663+
max-width: 1000px;
3664+
}
3665+
dialog.modal-fs {
3666+
padding: 0;
3667+
}
3668+
dialog.modal-fs > article {
3669+
display: flex;
3670+
flex-direction: column;
3671+
justify-content: space-between;
3672+
width: 100vw;
3673+
max-width: 100vw;
3674+
height: 100vh;
3675+
max-height: 100vh;
3676+
margin: 0;
3677+
overflow-y: auto;
3678+
}
3679+
dialog.modal-fs > article > footer {
3680+
display: flex;
3681+
justify-content: flex-end;
3682+
margin-top: auto;
3683+
}
3684+
@media (max-width: 576px) {
3685+
dialog:not(.modal-fs) > article {
3686+
width: 95vw;
3687+
}
3688+
}
3689+
36463690
body:has(dialog[open]) {
36473691
overflow: hidden;
36483692
}

‎docs/pico.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scss/components/_dropdown.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
background-color: var(#{$css-var-prefix}form-element-background-color);
7070
color: var(#{$css-var-prefix}form-element-placeholder-color);
7171
line-height: inherit;
72+
text-align: inherit;
7273
cursor: pointer;
7374
user-select: none;
7475

@@ -134,6 +135,7 @@
134135
left: 0;
135136
flex-direction: column;
136137
width: 100%;
138+
min-width: 200px;
137139
min-width: fit-content;
138140
margin: 0;
139141
margin-top: var(#{$css-var-prefix}outline-width);
@@ -175,8 +177,8 @@
175177
}
176178

177179
details {
180+
width: 100%;
178181
margin-bottom: 0;
179-
180182
> summary {
181183
line-height: var(#{$css-var-prefix}line-height);
182184
}

‎scss/components/_modal.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,71 @@
135135
touch-action: auto;
136136
}
137137
}
138+
dialog {
139+
// Small modal
140+
&.modal-sm {
141+
> article {
142+
width: 90vw;
143+
max-width: 400px;
144+
}
145+
}
146+
147+
// Medium modal (default)
148+
&.modal-md {
149+
> article {
150+
width: 90vw;
151+
max-width: 600px;
152+
}
153+
}
154+
155+
// Large modal
156+
&.modal-lg {
157+
> article {
158+
width: 90vw;
159+
max-width: 800px;
160+
}
161+
}
162+
163+
// Extra large modal
164+
&.modal-xlg {
165+
> article {
166+
width: 95vw;
167+
max-width: 1000px;
168+
}
169+
}
170+
171+
// Fullscreen modal
172+
&.modal-fs {
173+
padding: 0;
174+
> article {
175+
display: flex;
176+
flex-direction: column;
177+
justify-content: space-between;
178+
width: 100vw;
179+
max-width: 100vw;
180+
height: 100vh;
181+
max-height: 100vh;
182+
//border-radius: 0;
183+
margin: 0;
184+
//padding: var(--spacing);
185+
overflow-y: auto;
186+
> footer {
187+
display: flex;
188+
justify-content: flex-end;
189+
margin-top: auto;
190+
}
191+
}
192+
}
193+
194+
// Handle mobile responsiveness
195+
@media (max-width: 576px) {
196+
&:not(.modal-fs) {
197+
> article {
198+
width: 95vw;
199+
}
200+
}
201+
}
202+
}
138203
}
139204

140205
// Prevent scrolling body when modal is open

0 commit comments

Comments
 (0)