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

Merge pull request #10 from picocss/dev

Browse source 
Minor Release (v1.2.1)
This commit is contained in:
Lucas Larroche 2020-10-28 08:48:37 +07:00 • committed by GitHub
commit ddabc3e1ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 236 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

21
README.md
View file

@ -19,6 +19,7 @@
[![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)
- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript.
@ -54,7 +55,7 @@ npm install @picocss/pico
Minimalist templates to discover Pico in action:
[![Examples](https://picocss.com/img/examples.jpg?version=1.2.0)](https://picocss.com/#examples)
[![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples)
- **[Preview](https://picocss.com/examples/preview/)**
A starter example with all elements and components used in Pico
@ -96,15 +97,29 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
- [Typography](https://picocss.com/docs/#typography)
- [Buttons](https://picocss.com/docs/#buttons)
- [Forms](https://picocss.com/docs/#forms)
- [Tables](https://picocss.com/docs/#tables)
**Components**
- [Accordions](https://picocss.com/docs/#accordions)
- [Cards](https://picocss.com/docs/#cards)
- [Navs](https://picocss.com/docs/#navs)
- [Progress](https://picocss.com/docs/#progress)
- [Tooltips](https://picocss.com/docs/#tooltips)
## Variations
| Variation | Minified CSS | Source | Example |
|:-----|:-----|:-----|:-----|
| Default | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) | [pico.scss](https://github.com/picocss/pico/blob/master/scss/pico.scss) | [Preview](https://picocss.com/examples/preview/) |
| Classless<br>(Centered viewports) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css) | [pico.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.classless.scss) | [Classless](https://picocss.com/examples/classless/) |
| Classless<br>(Fluid container) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.fluid.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css) | [pico.fluid.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.fluid.classless.scss) | - |
| Slim | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.slim.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.slim.min.css) | [pico.slim.scss](https://github.com/picocss/pico/blob/master/scss/pico.slim.scss) | - |
| Google Amp | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/google-amp/css/pico.google-amp.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/google-amp/css/pico.google-amp.min.css) | [pico.google-amp.scss](https://github.com/picocss/examples/blob/master/google-amp/scss/pico.google-amp.scss) | [Google Amp](https://picocss.com/examples/google-amp/) |
| Pico + Bootstrap grid system | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/bootstrap-grid/css/pico-bootstrap-grid.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/bootstrap-grid/css/pico-bootstrap-grid.min.css) | [pico-bootstrap-grid.scss](https://github.com/picocss/examples/blob/master/bootstrap-grid/scss/pico-bootstrap-grid.scss) | [Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/) |
## Contributing
- [dev/](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
- Do not edit [/css](https://github.com/picocss/pico/tree/master/css) files directly. Those files are automatically generated. You should edit the source files in [scss/](https://github.com/picocss/pico/tree/master/scss).
## Copyright and license
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).

25
css/pico.classless.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.2.0 (https://picocss.com)
* Pico.css v1.2.1 (https://picocss.com)
* Copyright 2020 - Licensed under MIT
*/
/**
@ -1035,6 +1035,27 @@ textarea[disabled] {
opacity: .66;
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input[aria-invalid="false"],
select[aria-invalid="false"],
textarea[aria-invalid="false"] {
background-image: var(--icon-valid);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
@ -1067,7 +1088,7 @@ form small {
input + small,
select + small,
textarea + small {
margin-top: calc(var(--spacing-typography) * -0.5);
margin-top: calc(var(--spacing-typography) * -0.75);
margin-bottom: var(--spacing-typography);
}

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

File diff suppressed because one or more lines are too long

41
css/pico.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.2.0 (https://picocss.com)
* Pico.css v1.2.1 (https://picocss.com)
* Copyright 2020 - Licensed under MIT
*/
/**
@ -977,7 +977,7 @@ a[role="button"].contrast:focus {
button.outline,
input[type="submit"].outline,
a.outline[role="button"] {
a[role="button"].outline {
border: var(--button-border-width) solid var(--primary-border);
background-color: transparent;
color: var(--primary);
@ -987,9 +987,9 @@ button.outline:hover, button.outline:active, button.outline:focus,
input[type="submit"].outline:hover,
input[type="submit"].outline:active,
input[type="submit"].outline:focus,
a.outline[role="button"]:hover,
a.outline[role="button"]:active,
a.outline[role="button"]:focus {
a[role="button"].outline:hover,
a[role="button"].outline:active,
a[role="button"].outline:focus {
border: var(--button-border-width) solid var(--primary-hover-border);
color: var(--primary-hover);
}
@ -1230,26 +1230,33 @@ textarea[disabled] {
opacity: .66;
}
input.valid, input.invalid,
select.valid,
select.invalid,
textarea.valid,
textarea.invalid {
input .valid,
input .invalid, input[aria-invalid],
select .valid,
select .invalid,
select[aria-invalid],
textarea .valid,
textarea .invalid,
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input.valid,
select.valid,
textarea.valid {
input .valid, input[aria-invalid="false"],
select .valid,
select[aria-invalid="false"],
textarea .valid,
textarea[aria-invalid="false"] {
background-image: var(--icon-valid);
}
input.invalid,
select.invalid,
textarea.invalid {
input .invalid, input[aria-invalid="true"],
select .invalid,
select[aria-invalid="true"],
textarea .invalid,
textarea[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
@ -1285,7 +1292,7 @@ form small {
input + small,
select + small,
textarea + small {
margin-top: calc(var(--spacing-typography) * -0.5);
margin-top: calc(var(--spacing-typography) * -0.75);
margin-bottom: var(--spacing-typography);
}

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

@ -1,5 +1,5 @@
/*!
* Pico.css v1.2.0 (https://picocss.com)
* Pico.css v1.2.1 (https://picocss.com)
* Copyright 2020 - Licensed under MIT
*/
/**
@ -1031,6 +1031,27 @@ textarea[disabled] {
opacity: .66;
}
input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input[aria-invalid="false"],
select[aria-invalid="false"],
textarea[aria-invalid="false"] {
background-image: var(--icon-valid);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
@ -1063,7 +1084,7 @@ form small {
input + small,
select + small,
textarea + small {
margin-top: calc(var(--spacing-typography) * -0.5);
margin-top: calc(var(--spacing-typography) * -0.75);
margin-bottom: var(--spacing-typography);
}

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.css vendored
View file

File diff suppressed because one or more lines are too long

34
css/pico.slim.css
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.2.0 (https://picocss.com)
* Pico.css v1.2.1 (https://picocss.com)
* Copyright 2020 - Licensed under MIT
*
* Slim version example
@ -1038,6 +1038,36 @@ textarea[disabled] {
opacity: .66;
}
input .valid,
input .invalid, input[aria-invalid],
select .valid,
select .invalid,
select[aria-invalid],
textarea .valid,
textarea .invalid,
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input .valid, input[aria-invalid="false"],
select .valid,
select[aria-invalid="false"],
textarea .valid,
textarea[aria-invalid="false"] {
background-image: var(--icon-valid);
}
input .invalid, input[aria-invalid="true"],
select .invalid,
select[aria-invalid="true"],
textarea .invalid,
textarea[aria-invalid="true"] {
background-image: var(--icon-invalid);
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
@ -1070,7 +1100,7 @@ form small {
input + small,
select + small,
textarea + small {
margin-top: calc(var(--spacing-typography) * -0.5);
margin-top: calc(var(--spacing-typography) * -0.75);
margin-bottom: var(--spacing-typography);
}

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

File diff suppressed because one or more lines are too long

10
docs/css/pico.docs.css
View file

@ -124,6 +124,10 @@ form.grid > button {
margin-bottom: 0;
}
svg {
height: 1rem;
}
/**
* Docs: Aside
*/
@ -402,7 +406,7 @@ body > nav a {
border-radius: 0;
}
body > nav a svg {
body > nav svg {
vertical-align: text-bottom;
}
@ -415,6 +419,10 @@ body > nav ul:first-of-type li:first-of-type a {
color: var(--background);
}
body > nav ul:first-of-type li:first-of-type a svg {
height: 3.5rem;
}
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: var(--spacing-gutter);

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

File diff suppressed because one or more lines are too long

73
docs/index.html
View file

@ -18,7 +18,7 @@
<ul>
<li>
<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">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px">
<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>
</a>
@ -30,7 +30,7 @@
<li><a href="#docs" class="secondary">Docs</a></li>
<li>
<a href="https://github.com/picocss/pico" class="contrast" 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">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px">
<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>
</a>
@ -140,7 +140,7 @@
<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">
<article data-theme="light" aria-label="Forced light theme example">
<h4>Light theme</h4>
<form class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
@ -153,7 +153,7 @@
&lt;/<b>article</b>&gt;</code></pre>
</article>
<article data-theme="dark">
<article data-theme="dark" aria-label="Forced dark theme example">
<h4>Dark theme</h4>
<form class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
@ -176,7 +176,7 @@
</hgroup>
<p>Example: <strong>pick a color!</strong></p>
<article data-theme="generated">
<article data-theme="generated" aria-label="Generated theme example">
<h4><span class="name">Custom theme</span></h4>
<form>
<div class="grid">
@ -289,7 +289,7 @@
<h2>Containers</h2>
<h3>
<code>.container</code> enable a centered viewport.<br>
<code>.container-fluid</code> enable a <code>100%</code> layout.
<code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
</h3>
</hgroup>
@ -360,7 +360,7 @@
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
<details>
<summary>
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
@ -589,7 +589,7 @@
</article>
<p>Blockquote:</p>
<article aria-label="Links examples">
<article aria-label="Blockquote example">
<blockquote>
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
<footer>
@ -613,8 +613,8 @@
<h2>Buttons</h2>
<h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3>
</hgroup>
<article aria-label="Grid example">
<button aria-label="Example button">Button</button>
<article aria-label="Button example">
<button aria-label="Button">Button</button>
<input type="submit">
<pre><code>&lt;<b>button</b>&gt;Button&lt;/<b>button</b>&gt;
@ -710,14 +710,14 @@
<p>Disabled and validation states:</p>
<article aria-label="Validation states examples">
<form class="grid">
<input type="text" placeholder="Valid" aria-label="Valid" class="valid">
<input type="text" placeholder="Invalid" aria-label="Invalid" class="invalid">
<input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
<input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true">
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
<input type="text" value="Readonly" aria-label="Readonly" readonly>
</form>
<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>class</i>=<u>"valid"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>class</i>=<u>"invalid"</u>&gt;
<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>&gt;</code></pre>
@ -799,16 +799,18 @@
&lt;/<b>fieldset</b>&gt;</code></pre>
</article>
<p>You can change a checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code></p>
<article>
<label for="indeterminate">
<input type="checkbox" id="indeterminate" name="indeterminate" indeterminate="true">
<p>You can change a checkbox to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
<article aria-label="Indeterminate checkbox example">
<label for="indeterminate-checkbox">
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
Select all
</label>
<script>
// Set indeterminate checkbox
document.getElementById('indeterminate').indeterminate = true;
</script>
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
<pre><code>&lt;<b>script</b>&gt;
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>
</article>
<p>Others input types:</p>
@ -841,7 +843,7 @@
<em>&lt;!-- Date --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"date"</u>&gt;Date
&lt;<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u></u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u>&gt;
&lt;/<b>label</b>&gt;
<em>&lt;!-- Time --&gt;</em>
@ -908,7 +910,7 @@
&lt;<b>thead</b>&gt;
&lt;<b>tr</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;#&lt;/<b>th</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading<&lt;/<b>th</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
&lt;<b>th</b> <i>scope</i>=<u>"col"</u>&gt;Heading&lt;/<b>th</b>&gt;
&lt;/<b>tr</b>&gt;
@ -1069,7 +1071,7 @@
<ul>
<li>
<a href="#" onclick="event.preventDefault()" 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">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" 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">
</line><line x1="3" y1="18" x2="21" y2="18">
@ -1084,7 +1086,7 @@
<ul>
<li>
<a href="#" onclick="event.preventDefault()" 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">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" 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>
</a>
@ -1136,14 +1138,25 @@
<h2>Progress</h2>
<h3>Progress bar element in pure HTML, without JavaScript.</h3>
</hgroup>
<article aria-label="Tooltips examples">
<article aria-label="Progress bar example">
<progress value="25" max="100"></progress>
<progress indeterminate="true"></progress>
<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u></i>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;
&lt;<b>progress</b> <i>indeterminate</i>=<u>"true"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
</article>
<p>You can change a progress bar to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
<article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
<pre><code>&lt;<b>script</b>&gt;
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
&lt;/<b>script</b>&gt;</code></pre>
</article>
</section><!-- ./ Docs: Progress -->
<!-- Docs: Tooltips -->

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

File diff suppressed because one or more lines are too long

4
docs/js/src/grid.js
View file

@ -61,7 +61,7 @@
function addButtons() {
var buttons = document.createElement('P');
buttons.innerHTML = '<button class="secondary add">'
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+ '<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="12" y1="5" x2="12" y2="19">'
+ '</line><line x1="5" y1="12" x2="19" y2="12">'
+ '</line>'
@ -70,7 +70,7 @@
+ '</button>'
+ '<button class="secondary remove">'
+ '<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+ '<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">'
+ '<line x1="5" y1="12" x2="19" y2="12"></line>'
+ '</svg>'
+ ' Remove column'

13
docs/scss/components/_nav.scss
View file

@ -15,12 +15,13 @@ body > nav {
a {
border-radius: 0;
svg {
vertical-align: text-bottom;
}
}
svg {
vertical-align: text-bottom;
}
// Band & Title
ul:first-of-type li {
// Brand
@ -32,6 +33,10 @@ body > nav {
padding: 0;
background: var(--h1);
color: var(--background);
svg {
height: 3.5rem;
}
}
}

6
docs/scss/layout/_document.scss
View file

@ -2,6 +2,6 @@
* Docs: Document
*/
html {
scroll-behavior:smooth;
}
html {
scroll-behavior:smooth;
}

7
docs/scss/layout/_main.scss
View file

@ -88,3 +88,10 @@ form.grid {
margin-bottom: 0;
}
}
// Embedded SVG
// ––––––––––––––––––––
svg {
height: 1rem;
}

4
package.json
View file

@ -1,9 +1,9 @@
{
"name": "@picocss/pico",
"version": "1.2.0",
"version": "1.2.1",
"description": "Graceful & Minimal CSS design system in pure semantic HTML",
"author": "Lucas Larroche",
"main": "./css/pico.min.css",
"main": "css/pico.min.css",
"homepage": "https://picocss.com",
"license": "MIT",
"repository": {

2
scss/content/_button-styles.scss
View file

@ -56,7 +56,7 @@
// Button .outline
button.outline,
input[type="submit"].outline,
a.outline[role="button"] {
a[role="button"].outline {
border: var(--button-border-width) solid var(--primary-border);
background-color: transparent;
color: var(--primary);

37
scss/content/_form.scss
View file

@ -220,23 +220,42 @@ textarea {
opacity: .66;
}
// Validation states
@if $enable-input-states and $enable-classes {
// Validation states
&.valid,
&.invalid {
// Validation states: with aria-invalid only
@if $enable-classes {
.valid,
.invalid,
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&.valid {
.valid,
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
&.invalid {
.invalid,
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
}
}
// Validation states: with aria-invalid and classes (.valid & .invalid)
@else {
&[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
&[aria-invalid="false"] {
background-image: var(--icon-valid);
}
&[aria-invalid="true"]{
background-image: var(--icon-invalid);
}
}
@ -285,7 +304,7 @@ input,
select,
textarea {
+ small {
margin-top: calc(var(--spacing-typography) * -0.5);
margin-top: calc(var(--spacing-typography) * -0.75);
margin-bottom: var(--spacing-typography);
}
}

2
scss/pico.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.2.0 (https://picocss.com)
* Pico.css v1.2.1 (https://picocss.com)
* Copyright 2020 - Licensed under MIT
*/

2
scss/pico.slim.scss
View file

@ -1,5 +1,5 @@
/*!
* Pico.css v1.2.0 (https://picocss.com)
* Pico.css v1.2.1 (https://picocss.com)
* Copyright 2020 - Licensed under MIT
*
* Slim version example