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

docs: Edit disclaimer about modal utility classes

Browse source
This commit is contained in:
Lucas Larroche 2022-03-13 15:18:56 +07:00
parent 5776890352
commit 58edd9f24b
2 changed files with 3 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/modal.html
View file

@ -75,7 +75,7 @@
<em>…</em> <em>…</em>
&lt;/<b>article</b>&gt; &lt;/<b>article</b>&gt;
&lt;/<b>dialog</b>&gt; &lt;/<b>dialog</b>&gt;
</code></pre><h2>Utilities</h2><p>Modals come with 3 utility classes. These classes are not available on the <a href="https://picocss.com/docs/classless.html">class-less version</a>.</p><p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p><pre><code><em>&lt;!doctype html&gt;</em> </code></pre><h2>Utilities</h2><p>Modals come with 3 utility classes.</p><p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p><p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p><pre><code><em>&lt;!doctype html&gt;</em>
&lt;<b>html</b> <i>class</i>=<u>"modal-is-open"</u>&gt; &lt;<b>html</b> <i>class</i>=<u>"modal-is-open"</u>&gt;
<em>…</em> <em>…</em>
&lt;/<b>html</b>&gt;</code></pre><p><code>.modal-is-opening</code> brings an opening animation.</p><pre><code><em>&lt;!doctype html&gt;</em> &lt;/<b>html</b>&gt;</code></pre><p><code>.modal-is-opening</code> brings an opening animation.</p><pre><code><em>&lt;!doctype html&gt;</em>

8
docs/src/modal.html
View file

@ -70,7 +70,6 @@
</article> </article>
</dialog> </dialog>
<pre><code>&lt;<b>dialog</b> <i>open</i>&gt; <pre><code>&lt;<b>dialog</b> <i>open</i>&gt;
&lt;<b>article</b>&gt; &lt;<b>article</b>&gt;
&lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt; &lt;<b>h3</b>&gt;Confirm your action!&lt;/<b>h3</b>&gt;
@ -139,9 +138,7 @@
</article> </article>
<p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p> <p>Pico does not include JavaScript code. You will need to implement your JS to interact with modals.</p>
<p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p> <p>As a starting point, you can look at the JavaScript used in this documentation: <a href="https://github.com/picocss/pico/blob/master/docs/js/modal.js">js/modal.js</a>.</p>
<p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code>&lt;<b>dialog</b></u>&gt;</code> container.</p> <p>To make a modal appear, add the <code><i>open</i></code> attribute to the <code>&lt;<b>dialog</b></u>&gt;</code> container.</p>
<pre><code><em>&lt;!-- Open modal--&gt;</em> <pre><code><em>&lt;!-- Open modal--&gt;</em>
@ -160,9 +157,8 @@
</code></pre> </code></pre>
<h2>Utilities</h2> <h2>Utilities</h2>
<p>Modals come with 3 utility classes.</p>
<p>Modals come with 3 utility classes. These classes are not available on the <a href="https://picocss.com/docs/classless.html">class-less version</a>.</p> <p>ℹ️&nbsp;These classes are not available in the <a href="classless.html">class-less version</a>.</p>
<p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p> <p><code>.modal-is-open</code> prevents any scrolling and interactions below the modal.</p>
<pre><code><em>&lt;!doctype html&gt;</em> <pre><code><em>&lt;!doctype html&gt;</em>