sharpetronics/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-02-23 00:01:58 -05:00
Code Issues Projects Releases Wiki Activity

Horizontal Ellipsis

Browse Source
This commit is contained in:
Lucas Larroche 2021-07-24 11:56:46 +07:00
parent 03e2885771
commit 8cb28b3707
1 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
docs/index.html
View File

@ -143,7 +143,7 @@
</hgroup>
<p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
<article aria-label="Theme switcher">
<button class="contrast theme-switcher">...</button>
<button class="contrast theme-switcher">…</button>
</article>
<p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code></p>
<article data-theme="light" aria-label="Forced light theme example">
@ -155,7 +155,7 @@
</form>
<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
...
…
&lt;/<b>article</b>&gt;</code></pre>
</article>
@ -168,7 +168,7 @@
</form>
<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
...
…
&lt;/<b>article</b>&gt;</code></pre>
</article>
@ -200,7 +200,7 @@
<pre><code><em>// Simplified example</em>
<b>:root</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary</i>: <u class="c600">…</u>;
}
</code></pre>
@ -213,30 +213,30 @@
/* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>,
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c700">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
<i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c700">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">…</u>;
<i>--primary-inverse</i>: <u class="inverse">…</u>;
}
<em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme=<u>"light"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
<i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c500">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
<i>--primary-inverse</i>: <u class="inverse">…</u>;
}
}
<em>/* <span class="name"></span>Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme=<u>"dark"</u>]</b> {
<i>--primary</i>: <u class="c600">...</u>;
<i>--primary-hover</i>: <u class="c500">...</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>;
<i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c500">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
<i>--primary-inverse</i>: <u class="inverse">…</u>;
}
<em>/* <span class="name"></span>(Common styles) */</em>
@ -256,9 +256,9 @@
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
<em>// Override default variables</em>
<i>$primary-500</i>: <u class="c500">...</u>;
<i>$primary-600</i>: <u class="c600">...</u>;
<i>$primary-700</i>: <u class="c700">...</u>;
<i>$primary-500</i>: <u class="c500">…</u>;
<i>$primary-600</i>: <u class="c600">…</u>;
<i>$primary-700</i>: <u class="c700">…</u>;
<em>// Import full Pico source code</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre>
@ -273,7 +273,7 @@
<em>// Import needed components</em>
<b>@import</b> <u>"path/layout/document"</u>;
<b>@import</b> <u>"path/layout/sectioning"</u>;
<em>...</em>
<em>…</em>
</code></pre>
<p>This allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
@ -462,7 +462,7 @@
<pre><code>&lt;<b>figure</b>&gt;
&lt;<b>table</b>&gt;
...
…
&lt;/<b>table</b>&gt;
&lt;/<b>figure</b>&gt;</code></pre>
@ -755,7 +755,7 @@
<article aria-label="Select, radios, checkboxes, switch examples">
<label for="fruit">Fruit</label>
<select id="fruit" required>
<option value="" selected>Select a fruit...</option>
<option value="" selected>Select a fruit…</option>
<option>Banana</option>
<option>Watermelon</option>
<option>Apple</option>
@ -793,8 +793,8 @@
<pre><code><em>&lt;!-- Select --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"fruit"</u>&gt;Fruit&lt;/<b>label</b>&gt;
&lt;<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit...&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;...&lt;/<b>option</b>&gt;
&lt;<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>&gt;Select a fruit…&lt;/<b>option</b>&gt;
&lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt;
<em>&lt;!-- Radios --&gt;</em>
@ -999,7 +999,7 @@
</figure>
<pre><code>&lt;<b>table</b> <i>role</i>=<u>"grid"</u>&gt;
<em>...</em>
<em>…</em>
&lt;/<b>table</b>&gt;</code></pre>
</section><!-- ./ Docs: Tables -->
@ -1027,14 +1027,14 @@
<pre><code>&lt;<b>details</b>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</b>&gt;
&lt;<b>p</b>&gt;...&lt;/<b>p</b>&gt;
&lt;<b>p</b>&gt;…&lt;/<b>p</b>&gt;
&lt;/<b>details</b>&gt;
&lt;<b>details</b> <i>open</i>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;...&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;...&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;…&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>details</b>&gt;</code></pre>
@ -1128,13 +1128,13 @@
<pre><code>&lt;<b>nav</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;...&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;…&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;<b>ul</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;...&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;…&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
&lt;/<b>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre>
@ -1195,10 +1195,10 @@
<h3><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h3>
</hgroup>
<article aria-label="Loading buttons example">
<button aria-busy="true">Please wait...</button>
<button aria-busy="true">Please wait…</button>
<button aria-busy="true" class="secondary"></button>
<pre><code>&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u>&gt;Please wait...&lt;/<b>button</b>&gt;
<pre><code>&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u>&gt;Please wait…&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>&gt;&lt;/<b>button</b>&gt;</code></pre>
</article>
@ -1207,8 +1207,8 @@
<pre><code>&lt;<b>article</b> <i>aria-busy</i>=<u>"true"</u>&gt;&lt;/<b>article</b>&gt;</code></pre>
<p>Or any text element:</p>
<article aria-label="Loading paragraph example">
<a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait...</a>
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>&gt;Generating link, please wait...&lt;/<b>a</b>&gt;</code></pre>
<a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>&gt;Generating link, please wait…&lt;/<b>a</b>&gt;</code></pre>
</article>
</section><!-- ./ Docs: Loading -->