mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 01:46:14 -04:00
Better accessibility
This commit is contained in:
Lucas
parent
2dff66136c
commit
066c0a04fd
16 changed files with 146 additions and 183 deletions
|
|
@ -255,11 +255,6 @@ section > hgroup {
|
|||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
section > hgroup p {
|
||||
color: var(--muted-text);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
a[role=button] {
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
|
|
|||
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
207
docs/index.html
207
docs/index.html
|
|
@ -16,7 +16,7 @@
|
|||
<nav class="container-fluid">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://picocss.com">
|
||||
<a href="https://picocss.com" aria-label="Back home">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="3.5rem">
|
||||
<path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
|
||||
</svg>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<li><a href="#" class="secondary">Examples</a></li>
|
||||
<li><a href="#docs" class="secondary">Docs</a></li>
|
||||
<li>
|
||||
<a href="https://github.com/picocss/pico" class="secondary">
|
||||
<a href="https://github.com/picocss/pico" class="secondary" aria-label="Pico GitHub repository">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1rem">
|
||||
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
|
|
@ -42,7 +42,6 @@
|
|||
|
||||
<!-- Aside -->
|
||||
<aside id="docs">
|
||||
<a name="docs"></a>
|
||||
<nav>
|
||||
<h1>Documentation</h1>
|
||||
<details open>
|
||||
|
|
@ -101,10 +100,9 @@
|
|||
|
||||
<!-- Docs: Start -->
|
||||
<section id="start">
|
||||
<a name="start"></a>
|
||||
<hgroup>
|
||||
<h2>Usage</h2>
|
||||
<p>Work without package manager or dependencies 🙂!</p>
|
||||
<h3>Work without package manager or dependencies 🙂!</h3>
|
||||
</hgroup>
|
||||
<p>1. Download Pico:</p>
|
||||
<p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p>
|
||||
|
|
@ -130,10 +128,9 @@
|
|||
|
||||
<!-- Docs: Themes -->
|
||||
<section id="themes">
|
||||
<a name="themes"></a>
|
||||
<hgroup>
|
||||
<h2>Themes</h2>
|
||||
<p>Pico is shipped with 2 consistents themes: Light & Dark.<p>
|
||||
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
|
||||
</hgroup>
|
||||
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code>.</p>
|
||||
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code>.</p>
|
||||
|
|
@ -147,7 +144,7 @@
|
|||
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Login</button>
|
||||
<button type="submit" aria-label="Example button">Login</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -166,7 +163,7 @@
|
|||
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Login</button>
|
||||
<button type="submit" aria-label="Example button">Login</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -179,10 +176,9 @@
|
|||
|
||||
<!-- Docs: Customization-->
|
||||
<section id="customization">
|
||||
<a name="customization"></a>
|
||||
<hgroup>
|
||||
<h2>Customization</h2>
|
||||
<p>You can customize themes with SCSS or you can simply edit the CSS variables.</p>
|
||||
<h3>You can customize themes with SCSS or you can simply edit the CSS variables.</h3>
|
||||
</hgroup>
|
||||
<h5>Pick a color!</h5>
|
||||
<article data-theme="generated">
|
||||
|
|
@ -195,12 +191,12 @@
|
|||
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Login</button>
|
||||
<button type="submit" aria-label="Example button">Login</button>
|
||||
</div>
|
||||
</section>
|
||||
<fieldset>
|
||||
<label for="remember">
|
||||
<input type="checkbox" role="switch" id="remember" name="remember" checked>
|
||||
<input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
|
||||
Remember me
|
||||
</label>
|
||||
</fieldset>
|
||||
|
|
@ -256,10 +252,9 @@
|
|||
|
||||
<!-- Docs: Classless -->
|
||||
<section id="classless">
|
||||
<a name="classless"></a>
|
||||
<hgroup>
|
||||
<h2>Class-less version</h2>
|
||||
<p>For wild HTML purists! 😈</p>
|
||||
<h3>For wild HTML purists! 😈</h3>
|
||||
</hgroup>
|
||||
<p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p>
|
||||
<p>Obviously this version do not include <code>.container</code>, <code>.container-fluid</code>, <code>.grid</code>, <code>.secondary</code> and <code>.outline</code>.</p>
|
||||
|
|
@ -277,11 +272,12 @@
|
|||
|
||||
<!-- Docs: Container -->
|
||||
<section id="containers">
|
||||
<a name="containers"></a>
|
||||
<hgroup>
|
||||
<h2>Containers</h2>
|
||||
<p><code>.container</code> enable a centered viewport.</p>
|
||||
<p><code>.container-fluid</code> enable a <code>100%</code> layout.</p>
|
||||
<h3>
|
||||
<code>.container</code> enable a centered viewport.<br>
|
||||
<code>.container-fluid</code> enable a <code>100%</code> layout.
|
||||
</h3>
|
||||
</hgroup>
|
||||
|
||||
<pre><code><<b>body</b>>
|
||||
|
|
@ -327,10 +323,9 @@
|
|||
|
||||
<!-- Docs: Grid -->
|
||||
<section id="grids">
|
||||
<a name="grids"></a>
|
||||
<hgroup>
|
||||
<h2>Grids</h2>
|
||||
<p><code>.grid</code> enable a minimal grid system with auto-layout columns.</p>
|
||||
<h3><code>.grid</code> enable a minimal grid system with auto-layout columns.</h3>
|
||||
</hgroup>
|
||||
<article>
|
||||
<section class="grid">
|
||||
|
|
@ -353,12 +348,10 @@
|
|||
|
||||
<!-- Docs: Horizontal scroller -->
|
||||
<section id="scroller">
|
||||
<a name="scroller"></a>
|
||||
<hgroup>
|
||||
<h2>Horizontal scroller</h2>
|
||||
<p><code><<b>figure</b>></code> act as a container to make any content scrollable horizontally.</p>
|
||||
<h3><code><<b>figure</b>></code> act as a container to make any content scrollable horizontally.</h3>
|
||||
</hgroup>
|
||||
</figure>
|
||||
<p>Useful to have responsives <code><<b>table</b>></code>.</p>
|
||||
<figure>
|
||||
<table>
|
||||
|
|
@ -419,10 +412,9 @@
|
|||
|
||||
<!-- Docs: Typography -->
|
||||
<section id="typography">
|
||||
<a name="typography"></a>
|
||||
<hgroup>
|
||||
<h2>Typography</h2>
|
||||
<p>All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.</p>
|
||||
<h3>All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.</h3>
|
||||
</hgroup>
|
||||
<figure>
|
||||
<table>
|
||||
|
|
@ -438,7 +430,55 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Base size</th>
|
||||
<th>Base font</th>
|
||||
<td>16px</td>
|
||||
<td>17px</td>
|
||||
<td>18px</td>
|
||||
<td>19px</td>
|
||||
<td>20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h1</th>
|
||||
<td>32px</td>
|
||||
<td>34px</td>
|
||||
<td>36px</td>
|
||||
<td>38px</td>
|
||||
<td>40px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h2</th>
|
||||
<td>28px</td>
|
||||
<td>29.75px</td>
|
||||
<td>31.5px</td>
|
||||
<td>33.25px</td>
|
||||
<td>35px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h3</th>
|
||||
<td>24px</td>
|
||||
<td>25.5px</td>
|
||||
<td>27px</td>
|
||||
<td>28.5px</td>
|
||||
<td>30px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h4</th>
|
||||
<td>20px</td>
|
||||
<td>21.25px</td>
|
||||
<td>22.5px</td>
|
||||
<td>23.75px</td>
|
||||
<td>35px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h5</th>
|
||||
<td>18px</td>
|
||||
<td>19.125px</td>
|
||||
<td>20.25px</td>
|
||||
<td>21.375px</td>
|
||||
<td>22.5px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>h6</th>
|
||||
<td>16px</td>
|
||||
<td>17px</td>
|
||||
<td>18px</td>
|
||||
|
|
@ -450,71 +490,15 @@
|
|||
</figure>
|
||||
<p>Headings:</p>
|
||||
<article>
|
||||
<hgroup>
|
||||
<h1>Heading 1</h1>
|
||||
<p>
|
||||
<small>
|
||||
<code>32px</code> on extra small devices<br>
|
||||
<code>40px</code> on extra large devices
|
||||
</small>
|
||||
</p>
|
||||
</hgroup>
|
||||
<hgroup>
|
||||
<h2>Heading 2</h2>
|
||||
<p>
|
||||
<small>
|
||||
<code>28px</code> on extra small devices<br>
|
||||
<code>35px</code> on extra large devices
|
||||
</small>
|
||||
</p>
|
||||
</hgroup>
|
||||
<hgroup>
|
||||
<h3>Heading 3</h3>
|
||||
<p>
|
||||
<small>
|
||||
<code>24px</code> on extra small devices<br>
|
||||
<code>30px</code> on extra large devices
|
||||
</small>
|
||||
</p>
|
||||
</hgroup>
|
||||
<hgroup>
|
||||
<h4>Heading 4</h4>
|
||||
<p>
|
||||
<small>
|
||||
<code>20px</code> on extra small devices<br>
|
||||
<code>25px</code> on extra large devices
|
||||
</small>
|
||||
</p>
|
||||
</hgroup>
|
||||
<hgroup>
|
||||
<h5>Heading 5</h5>
|
||||
<p>
|
||||
<small>
|
||||
<code>18px</code> on extra small devices<br>
|
||||
<code>22.5px</code> on extra large devices
|
||||
</small>
|
||||
</p>
|
||||
</hgroup>
|
||||
<hgroup>
|
||||
<h6>Heading 6</h6>
|
||||
<p>
|
||||
<small>
|
||||
<code>16px</code> on extra small devices<br>
|
||||
<code>20px</code> on extra large devices
|
||||
</small>
|
||||
</p>
|
||||
</hgroup>
|
||||
<hgroup>
|
||||
<p>Paragraph</p>
|
||||
<p>
|
||||
<small>
|
||||
<code>16px</code> on extra small devices<br>
|
||||
<code>20px</code> on extra large devices
|
||||
</small>
|
||||
</p>
|
||||
</hgroup>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p>Paragraph</p>
|
||||
|
||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b></b>>
|
||||
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>h3</b>>Heading 3</<b>h3</b>>
|
||||
<<b>h4</b>>Heading 4</<b>h4</b>>
|
||||
|
|
@ -524,16 +508,16 @@
|
|||
|
||||
</article>
|
||||
<p>Inside a <code><<b>header</b>></code> all headings are 50% bigger.</p>
|
||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed.</p>
|
||||
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is styled.</p>
|
||||
<article>
|
||||
<hgroup>
|
||||
<h2>Heading 2</h2>
|
||||
<p>Subtitle for heading 2</p>
|
||||
<h3>Subtitle for heading 2</h3>
|
||||
</hgroup>
|
||||
|
||||
<pre><code><<b>hgroup</b>>
|
||||
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||
<<b>p</b>>Subtitle for heading 2</<b>p</b>>
|
||||
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||
<<b>hgroup</b>></code></pre>
|
||||
|
||||
</article>
|
||||
|
|
@ -562,13 +546,12 @@
|
|||
|
||||
<!-- Docs: Button -->
|
||||
<section id="buttons">
|
||||
<a name="buttons"></a>
|
||||
<hgroup>
|
||||
<h2>Buttons</h2>
|
||||
<p>The essential button in pure HTML, without <code>.classes</code> for the default style.</p>
|
||||
<h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3>
|
||||
</hgroup>
|
||||
<article>
|
||||
<button>Button</button>
|
||||
<button aria-label="Example button">Button</button>
|
||||
<input type="submit">
|
||||
|
||||
<pre><code><<b>button</b>>Button</<b>button</b>>
|
||||
|
|
@ -587,7 +570,7 @@
|
|||
<p>Buttons come with a <code>.secondary</code> neutral style.</p>
|
||||
<article>
|
||||
<a href="#" role="button" class="secondary">Link</a>
|
||||
<button class="secondary">Button</button>
|
||||
<button class="secondary" aria-label="Example button">Button</button>
|
||||
<input type="submit" class="secondary">
|
||||
<input type="reset">
|
||||
|
||||
|
|
@ -601,8 +584,8 @@
|
|||
<article>
|
||||
<a href="#" role="button" class="outline">Link</a>
|
||||
<a href="#" role="button" class="outline secondary">Link</a>
|
||||
<button class="outline">Button</button>
|
||||
<button class="outline secondary">Button</button>
|
||||
<button class="outline" aria-label="Example button">Button</button>
|
||||
<button class="outline secondary" aria-label="Example button">Button</button>
|
||||
|
||||
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>>Link</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline secondary"</u>>Link</<b>a</b>>
|
||||
|
|
@ -613,10 +596,9 @@
|
|||
|
||||
<!-- Docs: Form -->
|
||||
<section id="forms">
|
||||
<a name="forms"></a>
|
||||
<hgroup>
|
||||
<h2>Forms</h2>
|
||||
<p>All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.</p>
|
||||
<h3>All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.</h3>
|
||||
</hgroup>
|
||||
<p>Input are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
|
||||
<p>All natives form elements are fully customized and themables with CSS variables.</p>
|
||||
|
|
@ -639,7 +621,7 @@
|
|||
<label for="email">Email address</label>
|
||||
<input type="email" id="email" name="email" placeholder="Email address" required>
|
||||
<small>We'll never share your email with anyone else.</small>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit" aria-label="Example button">Submit</button>
|
||||
</form>
|
||||
|
||||
<pre><code>
|
||||
|
|
@ -732,7 +714,7 @@
|
|||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="switch">
|
||||
<input type="checkbox" id="switch" name="switch" role="switch">
|
||||
<input type="checkbox" id="switch" name="switch" role="switch" aria-checked="false">
|
||||
Publish on my profile
|
||||
</label>
|
||||
</fieldset>
|
||||
|
|
@ -782,10 +764,9 @@
|
|||
|
||||
<!-- Docs: Accordions -->
|
||||
<section id="accordions">
|
||||
<a name="accordions"></a>
|
||||
<hgroup>
|
||||
<h2>Accordions</h2>
|
||||
<p>Toggle sections of content in pure HTML, without JavaScript.</p>
|
||||
<h3>Toggle sections of content in pure HTML, without JavaScript.</h3>
|
||||
</hgroup>
|
||||
<article>
|
||||
<details>
|
||||
|
|
@ -820,10 +801,9 @@
|
|||
|
||||
<!-- Docs: Cards -->
|
||||
<section id="cards">
|
||||
<a name="cards"></a>
|
||||
<hgroup>
|
||||
<h2>Cards</h2>
|
||||
<p>A flexible container with graceful spacings across devices and viewport sizes.</p>
|
||||
<h3>A flexible container with graceful spacings across devices and viewport sizes.</h3>
|
||||
</hgroup>
|
||||
<article>
|
||||
I'm a card!
|
||||
|
|
@ -837,10 +817,9 @@
|
|||
|
||||
<!-- Docs: Navs -->
|
||||
<section id="navs">
|
||||
<a name="navs"></a>
|
||||
<hgroup>
|
||||
<h2>Navs</h2>
|
||||
<p>The essential navbar component in pure semantic HTML.</p>
|
||||
<h3>The essential navbar component in pure semantic HTML.</h3>
|
||||
</hgroup>
|
||||
<article>
|
||||
<nav>
|
||||
|
|
@ -872,7 +851,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="secondary">
|
||||
<a href="#" class="secondary" aria-label="Menu">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="12" x2="21" y2="12">
|
||||
</line><line x1="3" y1="6" x2="21" y2="6">
|
||||
|
|
@ -887,7 +866,7 @@
|
|||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="secondary">
|
||||
<a href="#" class="secondary" aria-label="Twitter">
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
|
||||
</svg>
|
||||
|
|
@ -936,15 +915,14 @@
|
|||
|
||||
<!-- Docs: Tooltips -->
|
||||
<section id="tooltips">
|
||||
<a name="tooltips"></a>
|
||||
<hgroup>
|
||||
<h2>Tooltips</h2>
|
||||
<p>Enable tooltips everywhere in pure HTML, without JavaScript.</p>
|
||||
<h3>Enable tooltips everywhere in pure HTML, without JavaScript.</h3>
|
||||
</hgroup>
|
||||
<article>
|
||||
<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
|
||||
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
|
||||
<p><button data-tooltip="Tooltip">Tooltip on a button</button></p>
|
||||
<p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
|
||||
|
||||
<pre><code><<b>p</b>>Tooltip on a <<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>>link</<b>a</b>></<b>p</b>>
|
||||
<<b>p</b>>Tooltip on <<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>inline element</<b>em</b>></<b>p</b>>
|
||||
|
|
@ -955,7 +933,6 @@
|
|||
|
||||
<!-- Love -->
|
||||
<section id="love">
|
||||
<a name="love"></a>
|
||||
<hgroup>
|
||||
<h2>
|
||||
We
|
||||
|
|
|
|||
2
docs/js/pico.docs.min.js
vendored
2
docs/js/pico.docs.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -361,7 +361,7 @@
|
|||
if (data.hasOwnProperty(color)) {
|
||||
|
||||
// Buttons
|
||||
colorButtons += '<button data-color="'+ color +'"></button>';
|
||||
colorButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>';
|
||||
|
||||
// CSS Styles
|
||||
colors.styles += 'button[data-color="'+ color +'"] {'
|
||||
|
|
|
|||
|
|
@ -4,11 +4,6 @@
|
|||
|
||||
section > hgroup {
|
||||
margin-bottom: $spacing-typography*2;
|
||||
|
||||
p {
|
||||
color: var(--muted-text);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
a[role=button] {
|
||||
margin-right: $spacing-gutter/4;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue