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

Merge pull request #23 from picocss/dev

Browse source 
Minor Release (v1.3.3)
This commit is contained in:
Lucas Larroche 2021-07-25 16:56:24 +07:00 • committed by GitHub
commit a1147fe394
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 117 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -7,7 +7,7 @@
<h3 align="center">Pico.css</h3> <h3 align="center">Pico.css</h3>
<p align="center"> <p align="center">
<strong>Graceful & Minimal CSS design system in pure semantic HTML.</strong><br> <strong>Minimal CSS Framework for semantic HTML</strong><br>
Elegant styles for all natives HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br> Elegant styles for all natives HTML elements without <code>.classes</code> and dark mode automatically enabled.<br><br>
<a href="https://picocss.com/#examples">Examples</a> · <a href="https://picocss.com/#examples">Examples</a> ·
<a href="https://picocss.com/docs/">Documentation</a> <a href="https://picocss.com/docs/">Documentation</a>
@ -19,6 +19,8 @@
[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico) [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico)
[![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md) [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md)
https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4
**Class-light and semantic** **Class-light and semantic**
We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico. We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
@ -107,7 +109,7 @@ Then just write pure HTML, and it should look great:
Minimalist templates to discover Pico in action: Minimalist templates to discover Pico in action:
[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples) [![Examples](https://picocss.com/img/examples.jpg?v1.3.3)](https://picocss.com/#examples)
- **[Preview](https://picocss.com/examples/preview/)** - **[Preview](https://picocss.com/examples/preview/)**
A starter example with all elements and components used in Pico A starter example with all elements and components used in Pico
@ -170,4 +172,14 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md). Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
Openly inspired by: [Bootstrap](https://github.com/twbs/bootstrap), [CSS Bed](https://github.com/ubershmekel/cssbed), [Normalize](https://github.com/necolas/normalize.css/), [Sanitize](https://csstools.github.io/sanitize.css/), [Spectre](https://github.com/picturepan2/spectre), [Wing](https://github.com/kbrsh/wing/). **Relevant third party tools and resources we depend on:**
Website and docs:
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL 2.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
- [Most Visible](https://github.com/andyexeter/most-visible): JavaScript module which returns the most visible element (Licensed [MIT](https://github.com/andyexeter/most-visible/blob/master/LICENSE))
- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
Pico Library:
- [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE))
- [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md))
- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md))

11
css/pico.classless.css
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.3.2 (https://picocss.com) * Pico.css v1.3.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -163,12 +163,12 @@ h5 {
--border-width: 3px; --border-width: 3px;
} }
table thead th, thead th,
table thead td { thead td {
--border-width: 3px; --border-width: 3px;
} }
table :not(thead) td { :not(thead) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -991,10 +991,7 @@ legend {
} }
textarea { textarea {
margin: 0;
overflow: auto; overflow: auto;
resize: vertical;
resize: block;
} }
[type="checkbox"], [type="checkbox"],

4
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

11
css/pico.css
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.3.2 (https://picocss.com) * Pico.css v1.3.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -163,12 +163,12 @@ h5 {
--border-width: 3px; --border-width: 3px;
} }
table thead th, thead th,
table thead td { thead td {
--border-width: 3px; --border-width: 3px;
} }
table :not(thead) td { :not(thead) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -1186,10 +1186,7 @@ legend {
} }
textarea { textarea {
margin: 0;
overflow: auto; overflow: auto;
resize: vertical;
resize: block;
} }
[type="checkbox"], [type="checkbox"],

11
css/pico.fluid.classless.css
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.3.2 (https://picocss.com) * Pico.css v1.3.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */
/** /**
@ -163,12 +163,12 @@ h5 {
--border-width: 3px; --border-width: 3px;
} }
table thead th, thead th,
table thead td { thead td {
--border-width: 3px; --border-width: 3px;
} }
table :not(thead) td { :not(thead) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -957,10 +957,7 @@ legend {
} }
textarea { textarea {
margin: 0;
overflow: auto; overflow: auto;
resize: vertical;
resize: block;
} }
[type="checkbox"], [type="checkbox"],

4
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
css/pico.min-dist.css Normal file
View file

File diff suppressed because one or more lines are too long

4
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

11
css/pico.slim.css
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.3.2 (https://picocss.com) * Pico.css v1.3.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
* *
* Slim version example * Slim version example
@ -106,12 +106,12 @@ h5 {
--border-width: 3px; --border-width: 3px;
} }
table thead th, thead th,
table thead td { thead td {
--border-width: 3px; --border-width: 3px;
} }
table :not(thead) td { :not(thead) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
@ -1127,10 +1127,7 @@ legend {
} }
textarea { textarea {
margin: 0;
overflow: auto; overflow: auto;
resize: vertical;
resize: block;
} }
[type="checkbox"], [type="checkbox"],

4
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

6
css/themes/default.css
View file

@ -159,12 +159,12 @@ h5 {
--border-width: 3px; --border-width: 3px;
} }
table thead th, thead th,
table thead td { thead td {
--border-width: 3px; --border-width: 3px;
} }
table :not(thead) td { :not(thead) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

78
docs/index.html
View file

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content=""> <meta name="description" content="">
<title>Pico.css • Graceful & Minimal CSS design system</title> <title>Pico.css • Minimal CSS Framework for semantic HTML</title>
<link rel="shortcut icon" href="https://picocss.com/favicon.ico"> <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
<link rel="stylesheet" href="../css/pico.min.css"> <link rel="stylesheet" href="../css/pico.min.css">
<link rel="stylesheet" href="css/pico.docs.min.css"> <link rel="stylesheet" href="css/pico.docs.min.css">
@ -143,7 +143,7 @@
</hgroup> </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> <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"> <article aria-label="Theme switcher">
<button class="contrast theme-switcher">...</button> <button class="contrast theme-switcher">…</button>
</article> </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> <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"> <article data-theme="light" aria-label="Forced light theme example">
@ -155,7 +155,7 @@
</form> </form>
<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt; <pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
... …
&lt;/<b>article</b>&gt;</code></pre> &lt;/<b>article</b>&gt;</code></pre>
</article> </article>
@ -168,7 +168,7 @@
</form> </form>
<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt; <pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
... …
&lt;/<b>article</b>&gt;</code></pre> &lt;/<b>article</b>&gt;</code></pre>
</article> </article>
@ -200,7 +200,7 @@
<pre><code><em>// Simplified example</em> <pre><code><em>// Simplified example</em>
<b>:root</b> { <b>:root</b> {
<i>--primary</i>: <u class="c600">...</u>; <i>--primary</i>: <u class="c600">…</u>;
} }
</code></pre> </code></pre>
@ -213,30 +213,30 @@
/* Can be forced with data-theme="light" */</em> /* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>, <b>[data-theme=<u>"light"</u>]</b>,
<b>:root:not([data-theme=<u>"dark"</u>])</b> { <b>:root:not([data-theme=<u>"dark"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>; <i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c700">...</u>; <i>--primary-hover</i>: <u class="c700">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">...</u>; <i>--primary-focus</i>: <u class="c600-outline-light">…</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>; <i>--primary-inverse</i>: <u class="inverse">…</u>;
} }
<em>/* <span class="name"></span>Dark scheme (Auto) */ <em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em> /* 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> { <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> { <b>:root:not([data-theme=<u>"light"</u>])</b> {
<i>--primary</i>: <u class="c600">...</u>; <i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c500">...</u>; <i>--primary-hover</i>: <u class="c500">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>; <i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>; <i>--primary-inverse</i>: <u class="inverse">…</u>;
} }
} }
<em>/* <span class="name"></span>Dark scheme (Forced) */ <em>/* <span class="name"></span>Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */</em> /* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme=<u>"dark"</u>]</b> { <b>[data-theme=<u>"dark"</u>]</b> {
<i>--primary</i>: <u class="c600">...</u>; <i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c500">...</u>; <i>--primary-hover</i>: <u class="c500">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>; <i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
<i>--primary-inverse</i>: <u class="inverse">...</u>; <i>--primary-inverse</i>: <u class="inverse">…</u>;
} }
<em>/* <span class="name"></span>(Common styles) */</em> <em>/* <span class="name"></span>(Common styles) */</em>
@ -256,9 +256,9 @@
<pre><code><em>/* Custom <span class="name"> </span>version */</em> <pre><code><em>/* Custom <span class="name"> </span>version */</em>
<em>// Override default variables</em> <em>// Override default variables</em>
<i>$primary-500</i>: <u class="c500">...</u>; <i>$primary-500</i>: <u class="c500">…</u>;
<i>$primary-600</i>: <u class="c600">...</u>; <i>$primary-600</i>: <u class="c600">…</u>;
<i>$primary-700</i>: <u class="c700">...</u>; <i>$primary-700</i>: <u class="c700">…</u>;
<em>// Import full Pico source code</em> <em>// Import full Pico source code</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre> <b>@import</b> <u>"path/pico"</u>;</code></pre>
@ -273,7 +273,7 @@
<em>// Import needed components</em> <em>// Import needed components</em>
<b>@import</b> <u>"path/layout/document"</u>; <b>@import</b> <u>"path/layout/document"</u>;
<b>@import</b> <u>"path/layout/sectioning"</u>; <b>@import</b> <u>"path/layout/sectioning"</u>;
<em>...</em> <em>…</em>
</code></pre> </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> <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; <pre><code>&lt;<b>figure</b>&gt;
&lt;<b>table</b>&gt; &lt;<b>table</b>&gt;
... …
&lt;/<b>table</b>&gt; &lt;/<b>table</b>&gt;
&lt;/<b>figure</b>&gt;</code></pre> &lt;/<b>figure</b>&gt;</code></pre>
@ -755,7 +755,7 @@
<article aria-label="Select, radios, checkboxes, switch examples"> <article aria-label="Select, radios, checkboxes, switch examples">
<label for="fruit">Fruit</label> <label for="fruit">Fruit</label>
<select id="fruit" required> <select id="fruit" required>
<option value="" selected>Select a fruit...</option> <option value="" selected>Select a fruit…</option>
<option>Banana</option> <option>Banana</option>
<option>Watermelon</option> <option>Watermelon</option>
<option>Apple</option> <option>Apple</option>
@ -793,8 +793,8 @@
<pre><code><em>&lt;!-- Select --&gt;</em> <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>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>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> <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>&gt;…&lt;/<b>option</b>&gt;
&lt;/<b>select</b>&gt; &lt;/<b>select</b>&gt;
<em>&lt;!-- Radios --&gt;</em> <em>&lt;!-- Radios --&gt;</em>
@ -999,7 +999,7 @@
</figure> </figure>
<pre><code>&lt;<b>table</b> <i>role</i>=<u>"grid"</u>&gt; <pre><code>&lt;<b>table</b> <i>role</i>=<u>"grid"</u>&gt;
<em>...</em> <em>…</em>
&lt;/<b>table</b>&gt;</code></pre> &lt;/<b>table</b>&gt;</code></pre>
</section><!-- ./ Docs: Tables --> </section><!-- ./ Docs: Tables -->
@ -1027,14 +1027,14 @@
<pre><code>&lt;<b>details</b>&gt; <pre><code>&lt;<b>details</b>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 1&lt;/<b>summary</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>&gt;
&lt;<b>details</b> <i>open</i>&gt; &lt;<b>details</b> <i>open</i>&gt;
&lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt; &lt;<b>summary</b>&gt;Collapsible elements 2&lt;/<b>summary</b>&gt;
&lt;<b>ul</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>ul</b>&gt;
&lt;/<b>details</b>&gt;</code></pre> &lt;/<b>details</b>&gt;</code></pre>
@ -1128,13 +1128,13 @@
<pre><code>&lt;<b>nav</b>&gt; <pre><code>&lt;<b>nav</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>ul</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>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>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>ul</b>&gt;
&lt;/<b>nav</b>&gt;</code></pre> &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> <h3><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h3>
</hgroup> </hgroup>
<article aria-label="Loading buttons example"> <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> <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> &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> </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> <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> <p>Or any text element:</p>
<article aria-label="Loading paragraph example"> <article aria-label="Loading paragraph example">
<a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait...</a> <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> <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> </article>
</section><!-- ./ Docs: Loading --> </section><!-- ./ Docs: Loading -->
@ -1249,12 +1249,7 @@
<!-- Footer --> <!-- Footer -->
<footer> <footer>
<hr> <hr>
<p> <p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p>
<small>
Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a>, <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a>, <a href="https://csstools.github.io/sanitize.css/" class="secondary">Sanitize</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a> & <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a><br>
Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
</small>
</p>
</footer><!-- ./ Footer --> </footer><!-- ./ Footer -->
</div><!-- ./ Document --> </div><!-- ./ Document -->
@ -1262,7 +1257,6 @@
</main><!-- ./ Main --> </main><!-- ./ Main -->
<!-- JavaScript --> <!-- JavaScript -->
<script src="https://unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
<script src="js/pico.docs.min.js"></script> <script src="js/pico.docs.min.js"></script>
</body> </body>

3
docs/js/pico.docs.js
View file

@ -6,6 +6,7 @@
*/ */
// Imports // Imports
import * as mostVisible from './src/most-visible.min.js';
import { aside } from './src/aside.js'; import { aside } from './src/aside.js';
import { themeSwitcher } from './src/theme-switcher.js'; import { themeSwitcher } from './src/theme-switcher.js';
import { materialDesignColors } from './src/material-design-colors.js'; import { materialDesignColors } from './src/material-design-colors.js';
@ -32,4 +33,4 @@ colorPicker.init();
grid.init(); grid.init();
// Scrollspy // Scrollspy
scrollspy.init(); scrollspy.init(mostVisible);

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

7
docs/js/src/most-visible.min.js vendored Normal file
View file

@ -0,0 +1,7 @@
/**
* Most Visible v1.5.0
*
* @author Andy Palmer <andy@andypalmer.me>
* @license MIT
*/
!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t(e)}):"object"==typeof module&&module.exports?module.exports=t(e):e.mostVisible=t(e)}("undefined"!=typeof self?self:this,function(e){"use strict";function i(e,t){if(!(this instanceof i))return new i(e,t).getMostVisible();"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=e,this.options=function(e){for(var t=1;t<arguments.length;t++)for(var i in arguments[t])e[i]=arguments[t][i];return e}({},i.defaults,t)}return i.defaults={percentage:!1,offset:0},i.prototype={getMostVisible:function(){var n=this,o=document.documentElement.clientHeight;return Array.prototype.reduce.call(this.elements,function(e,t){var i=n.getVisibleHeight(t,o);return i>e[0]?[i,t]:e},[0,null])[1]},getVisibleHeight:function(e,t){var i=e.getBoundingClientRect(),n=i.top-this.options.offset,o=i.bottom-this.options.offset,s=i.bottom-i.top,r=0<=n&&n<t,f=0<o&&o<t,u=0;if(r&&f)u=s;else if(r)u=t-i.top;else if(f)u=o;else if(t<s&&n<0){var l=Math.abs(n);l<s&&(u=s-l)}return this.options.percentage?u/s*100:u}},i.makeJQueryPlugin=function(e){e&&(e.fn.mostVisible=function(e){var t=new i(this.get(),e);return this.filter(t.getMostVisible())})},i.makeJQueryPlugin(e.jQuery),i});

8
docs/js/src/scrollspy.js
View file

@ -11,6 +11,7 @@
export const scrollspy = { export const scrollspy = {
// Config // Config
mostVisible: null,
minWidth: '992px', minWidth: '992px',
interval: 75, interval: 75,
targets: { targets: {
@ -21,7 +22,10 @@ export const scrollspy = {
// Init // Init
init() { init(mostVisible) {
if (this.mostVisible == null) {
this.mostVisible = mostVisible;
}
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) { if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
this.setActiveNav(); this.setActiveNav();
this.scrollStop(); this.scrollStop();
@ -33,7 +37,7 @@ export const scrollspy = {
setActiveNav() { setActiveNav() {
// Get active section // Get active section
let currentSection = mostVisible(this.targets.sections).getAttribute('id'); let currentSection = this.mostVisible(this.targets.sections).getAttribute('id');
// Remove all active states // Remove all active states
let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active); let links = document.querySelectorAll(this.targets.nav + ' a.' + this.targets.active);

12
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@picocss/pico", "name": "@picocss/pico",
"version": "1.3.2", "version": "1.3.3",
"description": "Graceful & Minimal CSS design system in pure semantic HTML", "description": "Graceful & Minimal CSS design system in pure semantic HTML",
"author": "Lucas Larroche", "author": "Lucas Larroche",
"main": "css/pico.min.css", "main": "css/pico.min.css",
@ -13,13 +13,15 @@
"keywords": [ "keywords": [
"css", "css",
"css-framework", "css-framework",
"dark-theme",
"dark-mode", "dark-mode",
"semantic", "dark-theme",
"minimal",
"lightweight", "lightweight",
"minimal",
"minimalist",
"minimalistic",
"native-html",
"scss-framework", "scss-framework",
"native-html" "semantic"
], ],
"bugs": { "bugs": {
"url": "https://github.com/picocss/pico/issues" "url": "https://github.com/picocss/pico/issues"

9
scss/content/_form.scss
View file

@ -42,14 +42,9 @@ legend {
white-space: normal; // 1 white-space: normal; // 1
} }
// 1. Remove the margin in Firefox and Safari // 1. Remove the default vertical scrollbar in IE
// 2. Remove the default vertical scrollbar in IE
// 3. Change the resize direction in all browsers (opinionated)
textarea { textarea {
margin: 0; // 1 overflow: auto; // 1
overflow: auto; // 2
resize: vertical; // 3
resize: block; // 3
} }
// Remove the padding in IE 10 // Remove the padding in IE 10

2
scss/pico.scss
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.3.2 (https://picocss.com) * Pico.css v1.3.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
*/ */

2
scss/pico.slim.scss
View file

@ -1,5 +1,5 @@
/*! /*!
* Pico.css v1.3.2 (https://picocss.com) * Pico.css v1.3.3 (https://picocss.com)
* Copyright 2019-2021 - Licensed under MIT * Copyright 2019-2021 - Licensed under MIT
* *
* Slim version example * Slim version example

5
scss/themes/default/_styles.scss
View file

@ -187,8 +187,6 @@ h5 {
} }
// Table // Table
table {
thead { thead {
th, th,
td { td {
@ -196,10 +194,9 @@ table {
} }
} }
:not(thead) td { :not(thead) > * > td {
--font-size: 0.875em; --font-size: 0.875em;
} }
}
// Code // Code
pre, pre,