mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 08:45:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improvements

Browse source 
- Small adjustments for table striping
- Consitent shadows for Dark mode
- Bigger Checkboxes, Radios and Switches
- Disable transitions for Checkboxes, Radios and Details
- Simplier .grids in docs
- Replace .js for internal scroll with CSS
- Better aside adjustment in .js
- Many small improvements in docs
This commit is contained in:
Lucas 2019-12-08 10:35:18 +07:00
parent 772425bf2f
commit c8ddb87647
26 changed files with 209 additions and 288 deletions
Download patch file Download diff file Expand all files Collapse all files

15
css/pico.classless.css
View file

@ -48,7 +48,7 @@
--code-color-4: #998866; --code-color-4: #998866;
--code-color-5: #96a4ae; --code-color-5: #96a4ae;
--table-border: rgba(237, 240, 243, 0.75); --table-border: rgba(237, 240, 243, 0.75);
--table-stripping: rgba(27, 40, 50, 0.02); --table-stripping: rgba(115, 130, 140, 0.04);
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
@ -85,7 +85,7 @@
--muted-border: #23333e; --muted-border: #23333e;
--card-background: #17232b; --card-background: #17232b;
--card-sections: #141d24; --card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
--code-background: #141d24; --code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25); --code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c; --code-color-1: #73828c;
@ -94,7 +94,7 @@
--code-color-4: #8c8473; --code-color-4: #8c8473;
--code-color-5: #4d606d; --code-color-5: #4d606d;
--table-border: #10181e; --table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02); --table-stripping: rgba(115, 130, 140, 0.02);
} }
} }
@ -131,7 +131,7 @@
--muted-border: #23333e; --muted-border: #23333e;
--card-background: #17232b; --card-background: #17232b;
--card-sections: #141d24; --card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
--code-background: #141d24; --code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25); --code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c; --code-color-1: #73828c;
@ -140,7 +140,7 @@
--code-color-4: #8c8473; --code-color-4: #8c8473;
--code-color-5: #4d606d; --code-color-5: #4d606d;
--table-border: #10181e; --table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02); --table-stripping: rgba(115, 130, 140, 0.02);
} }
/** /**
@ -726,14 +726,16 @@ label > textarea {
*/ */
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
font-size: 1.125rem;
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
transition: none;
} }
[type="checkbox"]::-ms-check, [type="checkbox"]::-ms-check,
@ -1083,7 +1085,6 @@ details summary::after {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
content: ''; content: '';
transition: transform 0.2s ease-in-out;
} }
details summary:focus { details summary:focus {

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

File diff suppressed because one or more lines are too long

15
css/pico.css
View file

@ -48,7 +48,7 @@
--code-color-4: #998866; --code-color-4: #998866;
--code-color-5: #96a4ae; --code-color-5: #96a4ae;
--table-border: rgba(237, 240, 243, 0.75); --table-border: rgba(237, 240, 243, 0.75);
--table-stripping: rgba(27, 40, 50, 0.02); --table-stripping: rgba(115, 130, 140, 0.04);
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
@ -85,7 +85,7 @@
--muted-border: #23333e; --muted-border: #23333e;
--card-background: #17232b; --card-background: #17232b;
--card-sections: #141d24; --card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
--code-background: #141d24; --code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25); --code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c; --code-color-1: #73828c;
@ -94,7 +94,7 @@
--code-color-4: #8c8473; --code-color-4: #8c8473;
--code-color-5: #4d606d; --code-color-5: #4d606d;
--table-border: #10181e; --table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02); --table-stripping: rgba(115, 130, 140, 0.02);
} }
} }
@ -131,7 +131,7 @@
--muted-border: #23333e; --muted-border: #23333e;
--card-background: #17232b; --card-background: #17232b;
--card-sections: #141d24; --card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
--code-background: #141d24; --code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25); --code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c; --code-color-1: #73828c;
@ -140,7 +140,7 @@
--code-color-4: #8c8473; --code-color-4: #8c8473;
--code-color-5: #4d606d; --code-color-5: #4d606d;
--table-border: #10181e; --table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02); --table-stripping: rgba(115, 130, 140, 0.02);
} }
/** /**
@ -807,14 +807,16 @@ label > textarea {
*/ */
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
font-size: 1.125rem;
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
transition: none;
} }
[type="checkbox"]::-ms-check, [type="checkbox"]::-ms-check,
@ -1302,7 +1304,6 @@ details summary::after {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
content: ''; content: '';
transition: transform 0.2s ease-in-out;
} }
details summary:focus { details summary:focus {

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

@ -48,7 +48,7 @@
--code-color-4: #998866; --code-color-4: #998866;
--code-color-5: #96a4ae; --code-color-5: #96a4ae;
--table-border: rgba(237, 240, 243, 0.75); --table-border: rgba(237, 240, 243, 0.75);
--table-stripping: rgba(27, 40, 50, 0.02); --table-stripping: rgba(115, 130, 140, 0.04);
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
@ -85,7 +85,7 @@
--muted-border: #23333e; --muted-border: #23333e;
--card-background: #17232b; --card-background: #17232b;
--card-sections: #141d24; --card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
--code-background: #141d24; --code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25); --code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c; --code-color-1: #73828c;
@ -94,7 +94,7 @@
--code-color-4: #8c8473; --code-color-4: #8c8473;
--code-color-5: #4d606d; --code-color-5: #4d606d;
--table-border: #10181e; --table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02); --table-stripping: rgba(115, 130, 140, 0.02);
} }
} }
@ -131,7 +131,7 @@
--muted-border: #23333e; --muted-border: #23333e;
--card-background: #17232b; --card-background: #17232b;
--card-sections: #141d24; --card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
--code-background: #141d24; --code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25); --code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c; --code-color-1: #73828c;
@ -140,7 +140,7 @@
--code-color-4: #8c8473; --code-color-4: #8c8473;
--code-color-5: #4d606d; --code-color-5: #4d606d;
--table-border: #10181e; --table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02); --table-stripping: rgba(115, 130, 140, 0.02);
} }
/** /**
@ -722,14 +722,16 @@ label > textarea {
*/ */
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
font-size: 1.125rem;
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
transition: none;
} }
[type="checkbox"]::-ms-check, [type="checkbox"]::-ms-check,
@ -1079,7 +1081,6 @@ details summary::after {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
content: ''; content: '';
transition: transform 0.2s ease-in-out;
} }
details summary:focus { details summary:focus {

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

14
css/pico.slim.css
View file

@ -51,7 +51,7 @@
--code-color-4: #998866; --code-color-4: #998866;
--code-color-5: #96a4ae; --code-color-5: #96a4ae;
--table-border: rgba(237, 240, 243, 0.75); --table-border: rgba(237, 240, 243, 0.75);
--table-stripping: rgba(27, 40, 50, 0.02); --table-stripping: rgba(115, 130, 140, 0.04);
} }
@media only screen and (prefers-color-scheme: dark) { @media only screen and (prefers-color-scheme: dark) {
@ -88,7 +88,7 @@
--muted-border: #23333e; --muted-border: #23333e;
--card-background: #17232b; --card-background: #17232b;
--card-sections: #141d24; --card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
--code-background: #141d24; --code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25); --code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c; --code-color-1: #73828c;
@ -97,7 +97,7 @@
--code-color-4: #8c8473; --code-color-4: #8c8473;
--code-color-5: #4d606d; --code-color-5: #4d606d;
--table-border: #10181e; --table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02); --table-stripping: rgba(115, 130, 140, 0.02);
} }
} }
@ -134,7 +134,7 @@
--muted-border: #23333e; --muted-border: #23333e;
--card-background: #17232b; --card-background: #17232b;
--card-sections: #141d24; --card-sections: #141d24;
--card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
--code-background: #141d24; --code-background: #141d24;
--code-inlined: rgba(65, 84, 98, 0.25); --code-inlined: rgba(65, 84, 98, 0.25);
--code-color-1: #73828c; --code-color-1: #73828c;
@ -143,7 +143,7 @@
--code-color-4: #8c8473; --code-color-4: #8c8473;
--code-color-5: #4d606d; --code-color-5: #4d606d;
--table-border: #10181e; --table-border: #10181e;
--table-stripping: rgba(237, 240, 243, 0.02); --table-stripping: rgba(115, 130, 140, 0.02);
} }
/** /**
@ -719,14 +719,16 @@ label > textarea {
*/ */
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
font-size: 1.125rem;
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: 0.125rem; margin-bottom: 0.125rem;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
transition: none;
} }
[type="checkbox"]::-ms-check, [type="checkbox"]::-ms-check,

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

File diff suppressed because one or more lines are too long

17
docs/css/pico.docs.css
View file

@ -22,6 +22,13 @@
--nav-border: rgba(115, 130, 140, 0.2); --nav-border: rgba(115, 130, 140, 0.2);
} }
/**
* Docs: Document
*/
html {
scroll-behavior: smooth;
}
/** /**
* Docs: Main (Grid) * Docs: Main (Grid)
*/ */
@ -106,6 +113,11 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: ''; content: '';
} }
form.grid > input:not([type=checkbox]):not([type=radio]),
form.grid > button {
margin-bottom: 0;
}
/** /**
* Docs: Aside * Docs: Aside
*/ */
@ -181,6 +193,11 @@ main > aside details[open] summary {
/** /**
* Docs: Documentation * Docs: Documentation
*/ */
#start a[role="button"] svg {
padding-left: .66rem;
vertical-align: baseline;
}
#themes button i { #themes button i {
font-style: normal; font-style: normal;
} }

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

File diff suppressed because one or more lines are too long

BIN
docs/img/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

251
docs/index.html
View file

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<meta name="description" content=""> <meta name="description" content="">
<title>Pico.css • Graceful & Minimal CSS design system</title> <title>Pico.css • Graceful & Minimal CSS design system</title>
<link rel="shortcut icon" href="img/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">
</head> </head>
@ -25,7 +26,7 @@
<li>Documentation</li> <li>Documentation</li>
</ul> </ul>
<ul> <ul>
<!--<li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>--> <li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>
<li><a href="#docs" class="secondary">Docs</a></li> <li><a href="#docs" class="secondary">Docs</a></li>
<li> <li>
<a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository"> <a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
@ -99,10 +100,16 @@
<h3>Work without package manager or dependencies 🙂!</h3> <h3>Work without package manager or dependencies 🙂!</h3>
</hgroup> </hgroup>
<p>1. Download Pico:</p> <p>1. Download Pico:</p>
<p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p> <p>
<a href="https://github.com/picocss/pico/archive/master.zip" role="button">
Download pico.css
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="0.66rem">
<path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
</svg>
</a></p>
<p> <p>
2. Link the CSS:<br> 2. Link the CSS:<br>
<small>(~5KB minified and gzipped)</small> <small>(5.6 KB minified and gzipped)</small>
</p> </p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<p>Starter template:</p> <p>Starter template:</p>
@ -137,17 +144,11 @@
<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"> <article data-theme="light">
<h4>Light theme</h4> <h4>Light theme</h4>
<section class="grid"> <form class="grid">
<div> <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="login" required>
<input type="text" name="login" placeholder="Login" aria-label="Login" required> <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="password" required>
</div> <button type="submit" aria-label="Example button">Login</button>
<div> </form>
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
</div>
<div>
<button type="submit" aria-label="Example button">Login</button>
</div>
</section>
<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;
... ...
@ -156,17 +157,11 @@
</article> </article>
<article data-theme="dark"> <article data-theme="dark">
<h4>Dark theme</h4> <h4>Dark theme</h4>
<section class="grid"> <form class="grid">
<div> <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="login" required>
<input type="text" name="login" placeholder="Login" aria-label="Login" required> <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="password" required>
</div> <button type="submit" aria-label="Example button">Login</button>
<div> </form>
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
</div>
<div>
<button type="submit" aria-label="Example button">Login</button>
</div>
</section>
<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;
... ...
@ -184,23 +179,19 @@
<h5>Pick a color!</h5> <h5>Pick a color!</h5>
<article data-theme="generated"> <article data-theme="generated">
<h4><span class="name">Custom theme</span></h4> <h4><span class="name">Custom theme</span></h4>
<section class="grid"> <form>
<div> <section class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" required> <input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="login" required>
</div> <input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="password" required>
<div>
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
</div>
<div>
<button type="submit" aria-label="Example button">Login</button> <button type="submit" aria-label="Example button">Login</button>
</div> </section>
</section> <fieldset>
<fieldset> <label for="remember">
<label for="remember"> <input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
<input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true"> Remember me
Remember me </label>
</label> </fieldset>
</fieldset> </form>
</article> </article>
<p>SCSS:</p> <p>SCSS:</p>
@ -262,13 +253,9 @@
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p> <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p><strong>Usage:</strong></p> <p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p> <p>Use the default <code>.classless</code> version if you need centered viewports:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
<p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p> <p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
</section><!-- ./ Docs: Classless --> </section><!-- ./ Docs: Classless -->
<!-- Docs: Container --> <!-- Docs: Container -->
@ -301,25 +288,25 @@
<tbody> <tbody>
<tr> <tr>
<th>Breakpoint</th> <th>Breakpoint</th>
<td>&lt;576px</td> <td>&lt;576<small>px</small></td>
<td>≥576px</td> <td>≥576<small>px</small></td>
<td>≥768px</td> <td>≥768<small>px</small></td>
<td>≥992px</td> <td>≥992<small>px</small></td>
<td>≥1200px</td> <td>≥1200<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>Viewport</th> <th>Viewport</th>
<td>None&nbsp;(auto)</td> <td>None&nbsp;<small>(auto)</small></td>
<td>540px</td> <td>540<small>px</small></td>
<td>720px</td> <td>720<small>px</small></td>
<td>960px</td> <td>960<small>px</small></td>
<td>1140px</td> <td>1140<small>px</small></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure> </figure>
<p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code>.</p> <p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code>.</p>
<p><code>&lt;<b>section</b>&gt;</code> as direct child of <code>&lt;<b>main</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p> <p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
</section><!-- ./ Docs: Container --> </section><!-- ./ Docs: Container -->
<!-- Docs: Grid --> <!-- Docs: Grid -->
@ -448,59 +435,59 @@
<tbody> <tbody>
<tr> <tr>
<th>Base&nbsp;font</th> <th>Base&nbsp;font</th>
<td>16px</td> <td>16<small>px</small></td>
<td>17px</td> <td>17<small>px</small></td>
<td>18px</td> <td>18<small>px</small></td>
<td>19px</td> <td>19<small>px</small></td>
<td>20px</td> <td>20<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h1</th> <th>h1</th>
<td>32px</td> <td>32<small>px</small></td>
<td>34px</td> <td>34<small>px</small></td>
<td>36px</td> <td>36<small>px</small></td>
<td>38px</td> <td>38<small>px</small></td>
<td>40px</td> <td>40<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h2</th> <th>h2</th>
<td>28px</td> <td>28<small>px</small></td>
<td>29.75px</td> <td>29<small>px</small></td>
<td>31.5px</td> <td>31.5<small>px</small></td>
<td>33.25px</td> <td>33.25<small>px</small></td>
<td>35px</td> <td>35<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h3</th> <th>h3</th>
<td>24px</td> <td>24<small>px</small></td>
<td>25.5px</td> <td>25.5<small>px</small></td>
<td>27px</td> <td>27<small>px</small></td>
<td>28.5px</td> <td>28.5<small>px</small></td>
<td>30px</td> <td>30<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h4</th> <th>h4</th>
<td>20px</td> <td>20<small>px</small></td>
<td>21.25px</td> <td>21.25<small>px</small></td>
<td>22.5px</td> <td>22.5<small>px</small></td>
<td>23.75px</td> <td>23.75<small>px</small></td>
<td>35px</td> <td>25<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h5</th> <th>h5</th>
<td>18px</td> <td>18<small>px</small></td>
<td>19.125px</td> <td>19.125<small>px</small></td>
<td>20.25px</td> <td>20.25<small>px</small></td>
<td>21.375px</td> <td>21.375<small>px</small></td>
<td>22.5px</td> <td>22.5<small>px</small></td>
</tr> </tr>
<tr> <tr>
<th>h6</th> <th>h6</th>
<td>16px</td> <td>16<small>px</small></td>
<td>17px</td> <td>17<small>px</small></td>
<td>18px</td> <td>18<small>px</small></td>
<td>19px</td> <td>19<small>px</small></td>
<td>20px</td> <td>20<small>px</small></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -627,18 +614,14 @@
<article> <article>
<form> <form>
<section class="grid"> <section class="grid">
<div> <label for="firstname">
<label for="firstname"> First name
First name <input type="text" id="firstname" name="firstname" placeholder="First name" required>
<input type="text" id="firstname" name="firstname" placeholder="First name" required> </label>
</label> <label for="lastname">
</div> Last name
<div> <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
<label for="lastname"> </label>
Last name
<input type="text" id="lastname" name="lastname" placeholder="Last name" required>
</label>
</div>
</section> </section>
<label for="email">Email address</label> <label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="Email address" required> <input type="email" id="email" name="email" placeholder="Email address" required>
@ -652,20 +635,16 @@
<em>&lt;!-- Grid --&gt;</em> <em>&lt;!-- Grid --&gt;</em>
&lt;<b>section</b> <i>class</i>=<u>"grid"</u>&gt; &lt;<b>section</b> <i>class</i>=<u>"grid"</u>&gt;
&lt;<b>div</b>&gt; <em>&lt;!-- Markup example 1: input is inside label --&gt;</em>
<em>&lt;!-- Markup example 1: input is inside label --&gt;</em> &lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt;
&lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt; First name
First name &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>&gt; &lt;/<b>label</b>&gt;
&lt;/<b>label</b>&gt;
&lt;/<b>div</b>&gt;
&lt;<b>div</b>&gt; &lt;<b>label</b> <i>for</i>=<u>"lastname"</u>&gt;
&lt;<b>label</b> <i>for</i>=<u>"lastname"</u>&gt; Last name
Last name &lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>&gt;
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>&gt; &lt;/<b>label</b>&gt;
&lt;/<b>label</b>&gt;
&lt;/<b>div</b>&gt;
&lt;/<b>section</b>&gt; &lt;/<b>section</b>&gt;
@ -682,21 +661,11 @@
</article> </article>
<p>Disabled and validation states:</p> <p>Disabled and validation states:</p>
<article> <article>
<form> <form class="grid">
<section class="grid"> <input type="text" placeholder="Valid" aria-label="Valid" valid>
<div> <input type="text" placeholder="Invalid" aria-label="Invalid" invalid>
<input type="text" placeholder="Valid" aria-label="Valid" valid> <input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
</div> <input type="text" value="Readonly" aria-label="Readonly" readonly>
<div>
<input type="text" placeholder="Invalid" aria-label="Invalid" invalid>
</div>
<div>
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
</div>
<div>
<input type="text" value="Readonly" aria-label="Readonly" readonly>
</div>
</section>
</form> </form>
<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>valid</i>&gt; <pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>valid</i>&gt;
@ -968,21 +937,23 @@
<p>But off course, <code>.classes</code> are not a bad practice at all.</p> <p>But off course, <code>.classes</code> are not a bad practice at all.</p>
<p>Feel free to use <em>modifiers</em>.</p> <p>Feel free to use <em>modifiers</em>.</p>
<section data-theme="valid"> <section data-theme="valid">
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
</section> </section>
<p>Just try to keep your HTML clean and semantic to keep the Pico spirit.</p> <p>Just try to keep your HTML clean and semantic to keep the Pico spirit.</p>
<section data-theme="invalid"> <section data-theme="invalid">
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
</section> </section>
</section><!-- ./ Love --> </section><!-- ./ Love -->
<!-- Footer --> <!-- Footer -->
<footer> <footer>
<p><small>Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p> <hr>
<p>
<small>
Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</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 -->

1
docs/js/pico.docs.js
View file

@ -1,5 +1,4 @@
// @prepros-append src/aside.js // @prepros-append src/aside.js
// @prepros-append src/theme-switcher.js // @prepros-append src/theme-switcher.js
// @prepros-append src/internal-scroll.js
// @prepros-append src/grid.js // @prepros-append src/grid.js
// @prepros-append src/color-picker.js // @prepros-append src/color-picker.js

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

File diff suppressed because one or more lines are too long

11
docs/js/src/aside.js
View file

@ -8,11 +8,12 @@
(function() { (function() {
// Close details if aside > nav have a scrollbar // Close details if aside > nav have a scrollbar
var navWidth = document.querySelector('aside nav').clientWidth; var nav = document.querySelector("aside nav");
if (navWidth < 200) { var navDetails = document.querySelectorAll("aside details");
var asideDetails = document.querySelectorAll("aside details");
for (var i = 1; i < asideDetails.length; i++) { if (nav.clientHeight < nav.scrollHeight) {
asideDetails[i].removeAttribute("open"); for (var i = 1; i < navDetails.length; i++) {
navDetails[i].removeAttribute("open");
} }
} }

1
docs/js/src/color-picker.js
View file

@ -12,7 +12,6 @@
*/ */
var colors = { var colors = {
list: 'json/material-colors.json',
target: '#customization h5', // Buttons inserted after target target: '#customization h5', // Buttons inserted after target
selectorButton: '#customization button[data-color]', // Button selector in Dom selectorButton: '#customization button[data-color]', // Button selector in Dom
selectorTheme: '#customization', // Theme selector in Dom selectorTheme: '#customization', // Theme selector in Dom

97
docs/js/src/internal-scroll.js
View file

@ -1,97 +0,0 @@
/*!
* Internal Scroll
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
*/
(function() {
/**
* Init
*/
smoothInternalClicks(
document.querySelectorAll('a:not([href^="https://picocss.com"])')
);
/**
* Smooth internal clicks
*
* @param {querySelector} links
*/
function smoothInternalClicks(links) {
for (var i=0; i<links.length; i++) {
if (links[i].href.indexOf('#') != -1) {
links[i].addEventListener('click', function(event) {
internalClick(event.target);
}, false);
}
}
}
/**
* Internal Click
*
* @param {element} link
*/
function internalClick(link) {
event.preventDefault();
var anchor = link.href.split("#");
if (anchor[1] != '') {
anchor = setAnchor(anchor[1]);
anchor = document.getElementById(anchor);
scrollToAnchor(anchor);
}
}
/**
* Set anchor
* Change anchor if needed
* @param {string} anchor
*/
function setAnchor(anchor) {
mobile = window.matchMedia("(max-width: 991.99px)");
if (!mobile.matches) {
if (anchor == "docs") {
anchor = "start";
}
}
return anchor;
}
/**
* Scroll to anchor
*
* @param {element} anchor
*/
function scrollToAnchor(anchor) {
var top = distanceToTop(anchor);
window.scrollBy({ top: top, left: 0, behavior: 'smooth' });
}
/**
* Get distance to top
*
* @param {element} target
*/
function distanceToTop(target) {
return Math.floor(target.getBoundingClientRect().top);
}
})();

7
docs/scss/layout/_document.scss Normal file
View file

@ -0,0 +1,7 @@
/**
* Docs: Document
*/
html{
scroll-behavior:smooth;
}

10
docs/scss/layout/_documentation.scss
View file

@ -5,6 +5,16 @@
// Docs: Themes // Docs: Themes
// –––––––––––––––––––– // ––––––––––––––––––––
#start {
a[role="button"] svg {
padding-left: .66rem;
vertical-align: baseline;
}
}
// Docs: Themes
// ––––––––––––––––––––
#themes { #themes {
button i { button i {
font-style: normal; font-style: normal;

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

@ -79,3 +79,13 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
background-size: .66rem auto; background-size: .66rem auto;
content: ''; content: '';
} }
// Form grid
// ––––––––––––––––––––
form.grid {
> input:not([type=checkbox]):not([type=radio]),
> button {
margin-bottom: 0;
}
}

1
docs/scss/pico.docs.scss
View file

@ -9,6 +9,7 @@
@import "themes/docs"; @import "themes/docs";
// Layout // Layout
@import "layout/document";
@import "layout/main"; @import "layout/main";
@import "layout/aside"; @import "layout/aside";
@import "layout/documentation"; @import "layout/documentation";

2
scss/_variables.scss
View file

@ -26,7 +26,7 @@ $enable-classes: true !default;
// Enable validation states for <input> // Enable validation states for <input>
$enable-input-states: true !default; $enable-input-states: true !default;
// Enable transitions for <a>, <button>, <input>, <details> // Enable transitions for <a>, <button>, <input>
$enable-transitions: true !default; $enable-transitions: true !default;

4
scss/components/_accordion.scss
View file

@ -39,10 +39,6 @@ details {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1rem auto; background-size: 1rem auto;
content: ''; content: '';
@if $enable-transitions {
transition: transform $transition;
}
} }
&:focus { &:focus {

4
scss/content/_form-checkbox-radio.scss
View file

@ -5,14 +5,16 @@
// Checkboxes & Radios // Checkboxes & Radios
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
font-size: 1.125rem;
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
margin-right: .375rem; margin-right: .375rem;
margin-bottom: $spacing-label-input; margin-bottom: $spacing-label-input;
border-width: 2px;
font-size: 1.125rem;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
transition: none; // Prevent frozen state on mobile devices
&::-ms-check { &::-ms-check {
display: none; // unstyle IE checkboxes display: none; // unstyle IE checkboxes

8
scss/themes/default/_dark.scss
View file

@ -50,7 +50,7 @@
// Card // Card
--card-background: #{darken($grey-900, 2%)}; --card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)}; --card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)}; --card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// Code // Code
--code-background: #{darken($grey-900, 4%)}; --code-background: #{darken($grey-900, 4%)};
@ -63,7 +63,7 @@
// Table // Table
--table-border: #{darken($grey-900, 6%)}; --table-border: #{darken($grey-900, 6%)};
--table-stripping: #{rgba($grey-50,.02)}; --table-stripping: #{rgba($grey-500,.02)};
} }
} }
@ -120,7 +120,7 @@
// Card // Card
--card-background: #{darken($grey-900, 2%)}; --card-background: #{darken($grey-900, 2%)};
--card-sections: #{darken($grey-900, 4%)}; --card-sections: #{darken($grey-900, 4%)};
--card-shadow: 0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)}; --card-shadow: 0 0.125rem 1rem #{rgba($black, 0.08)}, 0 0.125rem 2rem #{rgba($black, 0.04)}, 0 0 0 0.0625rem #{rgba($black, 0.1)};
// Code // Code
--code-background: #{darken($grey-900, 4%)}; --code-background: #{darken($grey-900, 4%)};
@ -133,5 +133,5 @@
// Table // Table
--table-border: #{darken($grey-900, 6%)}; --table-border: #{darken($grey-900, 6%)};
--table-stripping: #{rgba($grey-50,.02)}; --table-stripping: #{rgba($grey-500,.02)};
} }

2
scss/themes/default/_light.scss
View file

@ -63,5 +63,5 @@
// Table // Table
--table-border: #{rgba($grey-50, .75)}; --table-border: #{rgba($grey-50, .75)};
--table-stripping: #{rgba($grey-900,.02)}; --table-stripping: #{rgba($grey-500,.04)};
} }