mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 09:56:14 -04:00
Documentation
This commit is contained in:
Lucas
parent
0b93083ca1
commit
34e330a537
18 changed files with 2920 additions and 0 deletions
481
docs/css/pico.docs.css
Normal file
481
docs/css/pico.docs.css
Normal file
|
|
@ -0,0 +1,481 @@
|
||||||
|
/*!
|
||||||
|
* Pico: Customs styles for Docs
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* Light theme (Default) [Additions for docs]
|
||||||
|
* Can be forced with data-theme="light"
|
||||||
|
*/
|
||||||
|
[data-theme="light"],
|
||||||
|
:root:not([data-theme="dark"]) {
|
||||||
|
--nav-background: rgba(255, 255, 255, 0.7);
|
||||||
|
--nav-border: rgba(115, 132, 140, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dark theme (Auto) [Additions for docs]
|
||||||
|
* Automatically enabled if user has Dark mode enabled
|
||||||
|
*/
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="light"]) {
|
||||||
|
--nav-background: rgba(16, 25, 30, 0.8);
|
||||||
|
--nav-border: rgba(115, 132, 140, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dark theme (Forced) [Additions for docs]
|
||||||
|
* Enabled if forced with data-theme="dark"
|
||||||
|
*/
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--nav-background: rgba(16, 25, 30, 0.8);
|
||||||
|
--nav-border: rgba(115, 132, 140, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Docs: Global layout
|
||||||
|
*/
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > main {
|
||||||
|
padding-top: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
body > main {
|
||||||
|
padding-top: 4.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
body > main {
|
||||||
|
padding-top: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
body > main {
|
||||||
|
grid-column-gap: 4rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 200px auto;
|
||||||
|
padding-top: 5.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
body > main {
|
||||||
|
padding-top: 5.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body > main > * {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[name]:not([href])::before {
|
||||||
|
display: block;
|
||||||
|
height: 4.5rem;
|
||||||
|
margin-top: -4.5rem;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
a[name]:not([href])::before {
|
||||||
|
height: 4.75rem;
|
||||||
|
margin-top: -4.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
a[name]:not([href])::before {
|
||||||
|
height: 5rem;
|
||||||
|
margin-top: -5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
a[name]:not([href])::before {
|
||||||
|
height: 5.25rem;
|
||||||
|
margin-top: -5.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
a[name]:not([href])::before {
|
||||||
|
height: 5.5rem;
|
||||||
|
margin-top: -5.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main > aside nav {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > aside nav h1 {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
main > aside nav {
|
||||||
|
position: fixed;
|
||||||
|
width: 200px;
|
||||||
|
max-height: calc(100vh - 5.5rem);
|
||||||
|
margin-bottom: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
main > aside nav h1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main > aside li, main > aside summary {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > aside a:focus,
|
||||||
|
main > aside a.secondary:focus {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
main > aside details {
|
||||||
|
padding-bottom: .25rem;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > aside details summary {
|
||||||
|
font-weight: 300;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > aside details summary::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[role=document] section > h1,
|
||||||
|
[role=document] section > h2,
|
||||||
|
[role=document] section > h3 {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#customization figure {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
margin-bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
#customization figure {
|
||||||
|
grid-template-columns: repeat(18, 1fr);
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
border-top-right-radius: 0.25rem;
|
||||||
|
border-top-left-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#customization figure ~ article {
|
||||||
|
margin-top: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#customization figure button {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 100%;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#customization figure button:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#customization figure button.picked {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: .66rem auto;
|
||||||
|
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
#customization h4 {
|
||||||
|
transition: color 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#customization pre[data-theme="generated"] {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#grids button {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grids button svg {
|
||||||
|
stroke: var(--secondary);
|
||||||
|
margin-right: .5rem;
|
||||||
|
border: 3px solid currentColor;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grids .grid > * {
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
background: var(--code-background);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Docs: Code
|
||||||
|
*/
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
pre {
|
||||||
|
padding: 2rem 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
pre {
|
||||||
|
padding: 2rem 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
pre {
|
||||||
|
padding: 2rem 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
pre {
|
||||||
|
padding: 2rem 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="invalid"],
|
||||||
|
[data-theme="valid"] {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="invalid"]:before,
|
||||||
|
[data-theme="valid"]:before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -1rem;
|
||||||
|
padding: .375rem .75rem;
|
||||||
|
border-radius: 0;
|
||||||
|
color: var(--primary-inverse);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
[data-theme="invalid"]:before,
|
||||||
|
[data-theme="valid"]:before {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
[data-theme="invalid"]:before,
|
||||||
|
[data-theme="valid"]:before {
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="invalid"] pre,
|
||||||
|
[data-theme="valid"] pre {
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="invalid"]:before {
|
||||||
|
background: var(--invalid);
|
||||||
|
content: 'Bulky';
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="invalid"] pre {
|
||||||
|
border-color: var(--invalid);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="valid"]:before {
|
||||||
|
background: var(--valid);
|
||||||
|
content: 'Great';
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="valid"] pre {
|
||||||
|
border-color: var(--valid);
|
||||||
|
}
|
||||||
|
|
||||||
|
section[title="love"] [data-theme="invalid"]:before {
|
||||||
|
content: 'Not so great';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Docs: Navs
|
||||||
|
*/
|
||||||
|
body > nav {
|
||||||
|
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||||
|
z-index: 99;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
backdrop-filter: saturate(180%) blur(20px);
|
||||||
|
background-color: var(--nav-background);
|
||||||
|
box-shadow: 0px 1px 0 var(--nav-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav li a {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul:first-of-type li:first-of-type a {
|
||||||
|
width: 3.5rem;
|
||||||
|
height: 3.5rem;
|
||||||
|
margin-left: -1rem;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--h1);
|
||||||
|
color: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
|
display: none;
|
||||||
|
margin-left: 1rem;
|
||||||
|
color: var(--muted-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Docs: Code inside <article>
|
||||||
|
*/
|
||||||
|
article pre {
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
article pre {
|
||||||
|
padding: 2rem 2.5rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
article pre {
|
||||||
|
padding: 2rem 3rem;
|
||||||
|
margin: -3rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
article pre {
|
||||||
|
padding: 2rem 3.5rem;
|
||||||
|
margin: -3.5rem;
|
||||||
|
margin-top: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
article pre {
|
||||||
|
padding: 2rem 4rem;
|
||||||
|
margin: -4rem;
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Docs: Theme switcher
|
||||||
|
*/
|
||||||
|
button.switcher {
|
||||||
|
position: fixed;
|
||||||
|
right: 0.5rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
width: auto;
|
||||||
|
max-width: 3rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: .75rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: right;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.switcher::after {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
border: 2px solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||||
|
vertical-align: bottom;
|
||||||
|
content: '';
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.switcher i {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: .875rem;
|
||||||
|
font-style: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.switcher:hover, button.switcher:focus {
|
||||||
|
max-width: 100%;
|
||||||
|
transition: max-width 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.switcher:hover::after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.switcher:hover i {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 0.5rem 0 0.25rem;
|
||||||
|
transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.switcher:focus {
|
||||||
|
box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
button.switcher {
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
docs/css/pico.docs.min.css
vendored
Normal file
3
docs/css/pico.docs.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
951
docs/index.html
Normal file
951
docs/index.html
Normal file
|
|
@ -0,0 +1,951 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<title>Pico.css • Graceful & Minimal CSS design system</title>
|
||||||
|
<link rel="stylesheet" href="../css/pico.min.css">
|
||||||
|
<link rel="stylesheet" href="css/pico.docs.min.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Nav -->
|
||||||
|
<nav class="container-fluid">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
|
||||||
|
<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>
|
||||||
|
</li>
|
||||||
|
<li>Documentation</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://picocss.com/#examples" class="secondary">Examples</a></li>
|
||||||
|
<li><a href="#start" class="secondary">Start</a></li>
|
||||||
|
<li><a href="#docs" class="secondary">Docs</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="secondary">
|
||||||
|
<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>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav><!-- ./ Nav -->
|
||||||
|
|
||||||
|
<!-- Main -->
|
||||||
|
<main class="container">
|
||||||
|
|
||||||
|
<!-- Aside -->
|
||||||
|
<aside id="docs">
|
||||||
|
<a name="docs"></a>
|
||||||
|
<nav>
|
||||||
|
<h1>Documentation</h1>
|
||||||
|
<details open>
|
||||||
|
<summary>Getting started</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#start" class="secondary">Usage</a></li>
|
||||||
|
<li><a href="#themes" class="secondary">Themes</a></li>
|
||||||
|
<li><a href="#customization" class="secondary">Customization</a></li>
|
||||||
|
<li><a href="#classless" class="secondary">Class-less version</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary>Layout</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#containers" class="secondary">Containers</a></li>
|
||||||
|
<li><a href="#grids" class="secondary">Grids</a></li>
|
||||||
|
<li><a href="#scroller" class="secondary">Horizontal scroller</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary>Elements</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#typography" class="secondary">Typography</a></li>
|
||||||
|
<li><a href="#buttons" class="secondary">Buttons</a></li>
|
||||||
|
<li><a href="#forms" class="secondary">Forms</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary>Components</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#accordions" class="secondary">Accordions</a></li>
|
||||||
|
<li><a href="#cards" class="secondary">Cards</a></li>
|
||||||
|
<li><a href="#navs" class="secondary">Navs</a></li>
|
||||||
|
<li><a href="#tooltips" class="secondary">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Extend</summary>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#love" class="secondary">
|
||||||
|
We
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="0.8rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
||||||
|
</svg>
|
||||||
|
.classes
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</nav>
|
||||||
|
</aside><!-- ./ Aside -->
|
||||||
|
|
||||||
|
<!-- Document -->
|
||||||
|
<div role="document">
|
||||||
|
|
||||||
|
<!-- Docs: Start -->
|
||||||
|
<section id="start">
|
||||||
|
<a name="start"></a>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Usage</h2>
|
||||||
|
<p>Work without package manager or dependencies 🙂!</p>
|
||||||
|
</hgroup>
|
||||||
|
<p>1. Download Pico CSS:</p>
|
||||||
|
<p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p>
|
||||||
|
<p>2. Link the CSS <small>(~5KB minified and gzipped)</small>:</p>
|
||||||
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||||
|
<p><strong>Customization:</strong></p>
|
||||||
|
<p>You can compile your own version of Pico: SCSS sources are included.</p>
|
||||||
|
<p>A <a href="#classless">class-less version</a> is also included in the library.</p>
|
||||||
|
<p></p>
|
||||||
|
</section><!-- ./ Docs: Start -->
|
||||||
|
|
||||||
|
<!-- Docs: Themes -->
|
||||||
|
<section id="themes">
|
||||||
|
<a name="themes"></a>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Customize</h2>
|
||||||
|
<p>Pico is shipped with 2 consistents themes: Light & Dark.<p>
|
||||||
|
</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>
|
||||||
|
<article data-theme="light">
|
||||||
|
<h4>Light theme</h4>
|
||||||
|
<section class="grid">
|
||||||
|
<div>
|
||||||
|
<input type="text" name="login" placeholder="Login" aria-label="Login" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button type="submit">Login</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<pre><code><<b>article</b> <i>data-theme</i>=<u>"light"</u>>
|
||||||
|
...
|
||||||
|
</<b>article</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<article data-theme="dark">
|
||||||
|
<h4>Dark theme</h4>
|
||||||
|
<section class="grid">
|
||||||
|
<div>
|
||||||
|
<input type="text" name="login" placeholder="Login" aria-label="Login" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button type="submit">Login</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
||||||
|
...
|
||||||
|
</<b>article</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section><!-- ./ Themes -->
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</hgroup>
|
||||||
|
<h5>Pick a color!</h5>
|
||||||
|
<article data-theme="generated">
|
||||||
|
<h4><span class="name">Custom theme</span></h4>
|
||||||
|
<section class="grid">
|
||||||
|
<div>
|
||||||
|
<input type="text" name="login" placeholder="Login" aria-label="Login" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button type="submit">Login</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<fieldset>
|
||||||
|
<label for="remember">
|
||||||
|
<input type="checkbox" role="switch" id="remember" name="remember" checked>
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<p>SCSS:</p>
|
||||||
|
|
||||||
|
<pre data-theme="generated"><code>// <span class="name">Custom colors</span>
|
||||||
|
<i>$primary-500</i>: <u class="c500">...</u>;
|
||||||
|
<i>$primary-600</i>: <u class="c600">...</u>;
|
||||||
|
<i>$primary-700</i>: <u class="c700">...</u>;
|
||||||
|
|
||||||
|
// Pico library
|
||||||
|
<b>@import</b> <u>"path/pico"</u>;</code></pre>
|
||||||
|
|
||||||
|
<p>CSS:</p>
|
||||||
|
|
||||||
|
<pre data-theme="generated"><code>/* <span class="name"></span>Light theme (Default) */
|
||||||
|
/* Can be forced with data-theme="light" */
|
||||||
|
<b>[data-theme=<u>"light"</u>]</b>,
|
||||||
|
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
|
||||||
|
<i>--primary</i>: <u class="c600">...</u>;
|
||||||
|
<i>--primary-hover</i>: <u class="c700">...</u>;
|
||||||
|
<i>--primary-focus</i>: <u class="c600-outline-light">...</u>;
|
||||||
|
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* <span class="name"></span>Dark theme (Auto) */
|
||||||
|
/* Automatically enabled if user has Dark mode enabled */
|
||||||
|
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
|
||||||
|
<b>:root:not([data-theme="light"])</b> {
|
||||||
|
<i>--primary</i>: <u class="c600">...</u>;
|
||||||
|
<i>--primary-hover</i>: <u class="c500">...</u>;
|
||||||
|
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
|
||||||
|
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* <span class="name"></span>Dark theme (Forced) */
|
||||||
|
/* Enabled if forced with data-theme="dark" */
|
||||||
|
<b>[data-theme="<u>dark</u>"]</b> {
|
||||||
|
<i>--primary</i>: <u class="c600">...</u>;
|
||||||
|
<i>--primary-hover</i>: <u class="c500">...</u>;
|
||||||
|
<i>--primary-focus</i>: <u class="c600-outline-dark">...</u>;
|
||||||
|
<i>--primary-inverse</i>: <u class="inverse">...</u>;
|
||||||
|
}</code></pre>
|
||||||
|
|
||||||
|
</section><!-- ./ Docs: Customization -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Docs: Classless -->
|
||||||
|
<section id="classless">
|
||||||
|
<a name="classless"></a>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Class-less version</h2>
|
||||||
|
<p>For wild HTML purists! 😈</p>
|
||||||
|
</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>
|
||||||
|
<p>In this version, <code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
|
||||||
|
<p><strong>Usage:</strong></p>
|
||||||
|
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
|
||||||
|
|
||||||
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>></code></pre>
|
||||||
|
|
||||||
|
<p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
|
||||||
|
|
||||||
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>></code></pre>
|
||||||
|
|
||||||
|
</section><!-- ./ Docs: Classless -->
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</hgroup>
|
||||||
|
|
||||||
|
<pre><code><<b>body</b>>
|
||||||
|
<<b>main</b> <i>class</i>=<u>"container"</u>></<b>main</b>>
|
||||||
|
</<b>body</b>></code></pre>
|
||||||
|
|
||||||
|
<p>Pico use the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/4.3/layout/grid/#grid-options">Bootstrap</a>.</p>
|
||||||
|
<figure>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Device</th>
|
||||||
|
<th>Extra small</th>
|
||||||
|
<th>Small</th>
|
||||||
|
<th>Medium</th>
|
||||||
|
<th>Large</th>
|
||||||
|
<th>Extra large</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Breakpoint</th>
|
||||||
|
<td><576px</td>
|
||||||
|
<td>≥576px</td>
|
||||||
|
<td>≥768px</td>
|
||||||
|
<td>≥992px</td>
|
||||||
|
<td>≥1200px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Viewport</th>
|
||||||
|
<td>None (auto)</td>
|
||||||
|
<td>540px</td>
|
||||||
|
<td>720px</td>
|
||||||
|
<td>960px</td>
|
||||||
|
<td>1140px</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code>.</p>
|
||||||
|
<p><code><<b>section</b>></code> as direct child of <code><<b>main</b>></code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
||||||
|
</section><!-- ./ Docs: Container -->
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</hgroup>
|
||||||
|
<article>
|
||||||
|
<section class="grid">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
<div>3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<pre><code><<b>section</b> <i>class</i>=<u>"grid"</u>>
|
||||||
|
<<b>div</b>>1</<b>div</b>>
|
||||||
|
<<b>div</b>>2</<b>div</b>>
|
||||||
|
<<b>div</b>>3</<b>div</b>>
|
||||||
|
<<b>div</b>>4</<b>div</b>>
|
||||||
|
</<b>section</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p>Columns intentionally collapses for small and medium devices (below <code><u>992px</u></code>).</p>
|
||||||
|
</section><!-- ./ Docs: Grid -->
|
||||||
|
|
||||||
|
<!-- 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 horizontally scrollable.</p>
|
||||||
|
</hgroup>
|
||||||
|
</figure>
|
||||||
|
<p>Useful to have responsives <code><<b>table</b>></code>.</p>
|
||||||
|
<figure>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<pre><code><<b>figure</b>>
|
||||||
|
<<b>table</b>>
|
||||||
|
...
|
||||||
|
</<b>table</b>>
|
||||||
|
</<b>figure</b>></code></pre>
|
||||||
|
|
||||||
|
</section><!-- ./ Docs: Horizontal scroller -->
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</hgroup>
|
||||||
|
<figure>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Device</th>
|
||||||
|
<th>Extra small</th>
|
||||||
|
<th>Small</th>
|
||||||
|
<th>Medium</th>
|
||||||
|
<th>Large</th>
|
||||||
|
<th>Extra large</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Root size <code>rem</code></th>
|
||||||
|
<td>16px</td>
|
||||||
|
<td>17px</td>
|
||||||
|
<td>18px</td>
|
||||||
|
<td>19px</td>
|
||||||
|
<td>20px</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<p>Headings:</p>
|
||||||
|
<article>
|
||||||
|
<hgroup>
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<p><small><code>32px</code> on extra small devices, <code>40px</code> extra large devices</small></p>
|
||||||
|
</hgroup>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<p><small><code>28px</code> on extra small devices, <code>35px</code> extra large devices</small></p>
|
||||||
|
</hgroup>
|
||||||
|
<hgroup>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<p><small><code>24px</code> on extra small devices, <code>30px</code> extra large devices</small></p>
|
||||||
|
</hgroup>
|
||||||
|
<hgroup>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<p><small><code>20px</code> on extra small devices, <code>25px</code> extra large devices</small></p>
|
||||||
|
</hgroup>
|
||||||
|
<hgroup>
|
||||||
|
<h5>Heading 5</h5>
|
||||||
|
<p><small><code>18px</code> on extra small devices, <code>22.5px</code> extra large devices</small></p>
|
||||||
|
</hgroup>
|
||||||
|
<hgroup>
|
||||||
|
<h6>Heading 6</h6>
|
||||||
|
<p><small><code>16px</code> on extra small devices, <code>20px</code> extra large devices</small></p>
|
||||||
|
</hgroup>
|
||||||
|
<hgroup>
|
||||||
|
<p>Paragraph</p>
|
||||||
|
<p><small><code>16px</code> on extra small devices, <code>20px</code> extra large devices</small></p>
|
||||||
|
</hgroup>
|
||||||
|
|
||||||
|
<pre><code><<b>h1</b>>Heading 1</<b>h1</b></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>>
|
||||||
|
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||||
|
<<b>h6</b>>Heading 6</<b>h6</b>>
|
||||||
|
<<b>p</b>>Paragraph</<b>p</b>></code></pre>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
<article>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<p>Subtitle for heading 2</p>
|
||||||
|
</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>hgroup</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p>Inline text elements:</p>
|
||||||
|
<article>
|
||||||
|
<div class="grid">
|
||||||
|
<div>
|
||||||
|
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
|
||||||
|
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
|
||||||
|
<p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
|
||||||
|
<p><del>Deleted</del> <code>del</code></p>
|
||||||
|
<p><ins>Inserted</ins> <code>ins</code></p>
|
||||||
|
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><mark>Highlighted</mark> <code>mark</code></p>
|
||||||
|
<p><s>Strikethrough</s> <code>s</code></p>
|
||||||
|
<p><small>Small </small> <code>small</code></p>
|
||||||
|
<p>Text <sub>Sub</sub> <code>sub</code></p>
|
||||||
|
<p>Text <sup>Sup</sup> <code>sup</code></p>
|
||||||
|
<p><u>Underline</u> <code>u</code></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section><!-- ./ Docs: Typography -->
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</hgroup>
|
||||||
|
<article>
|
||||||
|
<button>Button</button>
|
||||||
|
<input type="submit">
|
||||||
|
|
||||||
|
<pre><code><<b>button</b>>Button</<b>button</b>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"submit"</u>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><<b>a</b> <i>role</i>=<u>"button"></u></code> if you need an inline element.</p>
|
||||||
|
<article>
|
||||||
|
<a href="#" role="button">Link</a>
|
||||||
|
<a href="#" role="button">Link</a>
|
||||||
|
|
||||||
|
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<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>
|
||||||
|
<input type="submit" class="secondary">
|
||||||
|
<input type="reset">
|
||||||
|
|
||||||
|
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Link</<b>a</b>>
|
||||||
|
<<b>button</b>>Button</<b>button</b> <i>class</i>=<u>"secondary"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"submit"</u> <i>class</i>=<u>"secondary"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"reset"</u>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p>Also includes the classic <code>.outline</code> style.</p>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>>
|
||||||
|
<<b>button</b> <i>class</i>=<u>"outline"</u>>Button</<b>button</b>>
|
||||||
|
<<b>button</b> <i>class</i>=<u>"outline secondary"</u>>Button</<b>button</b>></code></pre>
|
||||||
|
</article>
|
||||||
|
</section><!-- ./ Docs: Button -->
|
||||||
|
|
||||||
|
<!-- Docs: Form -->
|
||||||
|
<section id="forms">
|
||||||
|
<a name="forms"></a>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Forms</h2>
|
||||||
|
<p>All form elements in pure html, without <code>.classes</code> and responsives, allowing forms to scale gracefully across devices and viewport sizes.</p>
|
||||||
|
</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>
|
||||||
|
<article>
|
||||||
|
<form>
|
||||||
|
<section class="grid">
|
||||||
|
<div>
|
||||||
|
<label for="firstname">
|
||||||
|
First name
|
||||||
|
<input type="text" id="firstname" name="firstname" placeholder="First name" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="lastname">
|
||||||
|
Last name
|
||||||
|
<input type="text" id="lastname" name="lastname" placeholder="Last name" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<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>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<pre><code>
|
||||||
|
<<b>form</b>>
|
||||||
|
|
||||||
|
<!-- Grid -->
|
||||||
|
<<b>section</b> <i>class</i>=<u>"grid"</u>>
|
||||||
|
|
||||||
|
<<b>div</b>>
|
||||||
|
<!-- Markup example 1: input is inside label -->
|
||||||
|
<<b>label</b> <i>for</i>=<u>"firstname"</u>>
|
||||||
|
First name
|
||||||
|
<<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>>
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>div</b>>
|
||||||
|
|
||||||
|
<<b>div</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"lastname"</u>>
|
||||||
|
Last name
|
||||||
|
<<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>>
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>div</b>>
|
||||||
|
|
||||||
|
</<b>section</b>>
|
||||||
|
|
||||||
|
<!-- Markup example 2: input is after label -->
|
||||||
|
<<b>label</b> <i>for</i>=<u>"email"</u>>Email address</<b>label</b>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>>
|
||||||
|
<<b>small</b>>We'll never share your email with anyone else.</<b>small</b>>
|
||||||
|
|
||||||
|
<!-- Button -->
|
||||||
|
<<b>button</b> <i>type</i>=<u>"submit"</u>>Submit</<b>button</b>>
|
||||||
|
|
||||||
|
</<b>form</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p>Disabled and validation states:</p>
|
||||||
|
<article>
|
||||||
|
<form>
|
||||||
|
<section class="grid">
|
||||||
|
<div>
|
||||||
|
<input type="text" placeholder="Valid" aria-label="Valid" valid>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>valid</i>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>invalid</i>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p><code><<b>fieldset</b>></code> are unstyled and act as a container for radios and checkboxes providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
|
||||||
|
<p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
|
||||||
|
<article>
|
||||||
|
<label for="country">Country</label>
|
||||||
|
<select id="country">
|
||||||
|
<option selected>Choose...</option>
|
||||||
|
<option>...</option>
|
||||||
|
</select>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Gender</legend>
|
||||||
|
<label for="male">
|
||||||
|
<input type="radio" id="male" name="gender" value="male" checked>
|
||||||
|
Male
|
||||||
|
</label>
|
||||||
|
<label for="female">
|
||||||
|
<input type="radio" id="female" name="gender" value="female">
|
||||||
|
Female
|
||||||
|
</label>
|
||||||
|
<label for="other">
|
||||||
|
<input type="radio" id="other" name="gender" value="other">
|
||||||
|
Other
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<label for="terms">
|
||||||
|
<input type="checkbox" id="terms" name="terms">
|
||||||
|
I agree to the Terms and Conditions
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<label for="switch">
|
||||||
|
<input type="checkbox" id="switch" name="switch" role="switch">
|
||||||
|
Publish on my profile
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<pre><code><!-- Select -->
|
||||||
|
<<b>label</b> <i>for</i>=<u>"country"</u>>Country</<b>label</b>>
|
||||||
|
<<b>select</b> <i>id</i>=<u>"country</u>">
|
||||||
|
<<b>option</b> <i>selected</i>>Choose...</<b>option</b>>
|
||||||
|
<<b>option</b>>...</<b>option</b>>
|
||||||
|
</<b>select</b>>
|
||||||
|
|
||||||
|
<!-- Radios -->
|
||||||
|
<<b>fieldset</b>>
|
||||||
|
<<b>legend</b>>Gender</<b>legend</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"male"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"male"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"male"</u> <i>checked</i>>
|
||||||
|
Male
|
||||||
|
</<b>label</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"female"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"female"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"female"</u>>
|
||||||
|
Female
|
||||||
|
</<b>label</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"other"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"other"</u> <i>name</i>=<u>"gender"</u> <i>value</i>=<u>"other"</u>>
|
||||||
|
Other
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>fieldset</b>>
|
||||||
|
|
||||||
|
<!-- Checkbox -->
|
||||||
|
<<b>fieldset</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"terms"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>>
|
||||||
|
I agree to the Terms and Conditions
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>fieldset</b>>
|
||||||
|
|
||||||
|
<!-- Switch -->
|
||||||
|
<<b>fieldset</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"switch"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>>
|
||||||
|
Publish on my profile
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>fieldset</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section><!-- ./ Docs: Form -->
|
||||||
|
|
||||||
|
<!-- Docs: Accordions -->
|
||||||
|
<section id="accordions">
|
||||||
|
<a name="accordions"></a>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Accordions</h2>
|
||||||
|
<p>Toggle sections of content in pure HTML, without Javascript.</p>
|
||||||
|
</hgroup>
|
||||||
|
<article>
|
||||||
|
<details>
|
||||||
|
<summary>Collapsible elements 1</summary>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Collapsible elements 2</summary>
|
||||||
|
<ul>
|
||||||
|
<li>Vestibulum id elit quis massa interdum sodales.</li>
|
||||||
|
<li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
|
||||||
|
<li>Quisque sed eros non eros ornare elementum.</li>
|
||||||
|
<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<pre><code><<b>details</b>>
|
||||||
|
<<b>summary</b>>Collapsible elements 1</<b>summary</b>>
|
||||||
|
<<b>p</b>>...</<b>p</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
|
||||||
|
<<b>details</b>>
|
||||||
|
<<b>summary</b>>Collapsible elements 2</<b>summary</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>>...</<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</section><!-- ./ Docs: Accordions -->
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</hgroup>
|
||||||
|
<article>
|
||||||
|
I'm a card!
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<pre><code><<b>article</b>>
|
||||||
|
I'm a card!
|
||||||
|
</<b>article</b>></code></pre>
|
||||||
|
|
||||||
|
</section><!-- ./ Docs: Card -->
|
||||||
|
|
||||||
|
<!-- Docs: Navs -->
|
||||||
|
<section id="navs">
|
||||||
|
<a name="navs"></a>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Navs</h2>
|
||||||
|
<p>The essential navbar in pure semantic HTML.</p>
|
||||||
|
</hgroup>
|
||||||
|
<article>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Brand</strong></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<pre><code><<b>nav</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>nav</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p><code><<b>ul</b>></code> are automatically distributed horizontally.</p>
|
||||||
|
<p><code><<b>li</b>></code> are unstyled and inlined.</p>
|
||||||
|
<article>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="secondary">
|
||||||
|
<svg 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">
|
||||||
|
<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">
|
||||||
|
</line>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Brand</strong></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="secondary">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" 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>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<pre><code><<b>nav</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>...</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>...</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>nav</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
<p>Inside <code><<b>aside</b>></code>, navs are stacked vertically.</p>
|
||||||
|
<article>
|
||||||
|
<aside>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
<li><a href="#">Link</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<pre><code><<b>aside</b>>
|
||||||
|
<<b>nav</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>nav</b>>
|
||||||
|
</<b>aside</b>></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section><!-- ./ Docs: Nav -->
|
||||||
|
|
||||||
|
<!-- Docs: Tooltips -->
|
||||||
|
<section id="tooltips">
|
||||||
|
<a name="tooltips"></a>
|
||||||
|
<hgroup>
|
||||||
|
<h2>Tooltips</h2>
|
||||||
|
<p>Enable tooltips everywhere in pure HTML, without Javascript.</p>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>>
|
||||||
|
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></p></code></pre>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section><!-- ./ Docs: Nav -->
|
||||||
|
|
||||||
|
<!-- Love -->
|
||||||
|
<section id="love">
|
||||||
|
<a name="love"></a>
|
||||||
|
<hgroup>
|
||||||
|
<h2>
|
||||||
|
We
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="1.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
||||||
|
</svg>
|
||||||
|
<code>.classes</code>
|
||||||
|
</h2>
|
||||||
|
</hgroup>
|
||||||
|
|
||||||
|
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code>.</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>
|
||||||
|
<section data-theme="valid">
|
||||||
|
|
||||||
|
<pre><code><<b>button</b> <i>class</i>=<u>"warning"</u>>Action</<b>button</b>><br></code></pre>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<p>Just try to keep your HTML clean and semantic to keep the <em>Pico spirit</em>.</p>
|
||||||
|
<section data-theme="invalid">
|
||||||
|
|
||||||
|
<pre><code><<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>>Action</<b>button</b>><br></code></pre>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</section><!-- ./ Love -->
|
||||||
|
|
||||||
|
<!-- 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="http://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p>
|
||||||
|
</footer><!-- ./ Footer -->
|
||||||
|
|
||||||
|
</div> <!-- ./ Document -->
|
||||||
|
|
||||||
|
</main><!-- ./ Main -->
|
||||||
|
|
||||||
|
<!-- Javascript -->
|
||||||
|
<script src="js/pico.docs.min.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
4
docs/js/pico.docs.js
Normal file
4
docs/js/pico.docs.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
//@prepros-append src/theme-switcher.js
|
||||||
|
//@prepros-append src/internal-scroll.js
|
||||||
|
//@prepros-append src/grid.js
|
||||||
|
//@prepros-append src/color-picker.js
|
||||||
1
docs/js/pico.docs.min.js
vendored
Normal file
1
docs/js/pico.docs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
265
docs/js/src/color-picker.js
Normal file
265
docs/js/src/color-picker.js
Normal file
|
|
@ -0,0 +1,265 @@
|
||||||
|
/*!
|
||||||
|
* Color Picker
|
||||||
|
*
|
||||||
|
* Pico.css - https://picocss.com
|
||||||
|
* Copyright 2019 - Licensed under MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Config
|
||||||
|
*/
|
||||||
|
|
||||||
|
var colors = {
|
||||||
|
list: 'json/material-colors.json',
|
||||||
|
target: '#customization h5', // Buttons inserted after target
|
||||||
|
selectorButton: '#customization button[data-color]', // Button selector in Dom
|
||||||
|
selectorTheme: '#customization', // Theme selector in Dom
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Init
|
||||||
|
*/
|
||||||
|
|
||||||
|
colorPicker();
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Color Picker
|
||||||
|
*/
|
||||||
|
|
||||||
|
function colorPicker() {
|
||||||
|
|
||||||
|
// Load colors
|
||||||
|
loadJson(colors.list, function(data) {
|
||||||
|
generateButtons(data);
|
||||||
|
pickColor('pink', data['pink']);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load Json
|
||||||
|
*
|
||||||
|
* @param {url} json
|
||||||
|
* @param {function} callback
|
||||||
|
* @return {object}
|
||||||
|
*/
|
||||||
|
|
||||||
|
function loadJson(json, callback) {
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.open('GET', json, true);
|
||||||
|
|
||||||
|
request.onload = function() {
|
||||||
|
if (request.status >= 200 && request.status < 400) {
|
||||||
|
var data = JSON.parse(request.responseText);
|
||||||
|
callback(data);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'error';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
request.onerror = function() {
|
||||||
|
return 'error';
|
||||||
|
};
|
||||||
|
request.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate Buttons
|
||||||
|
*
|
||||||
|
* @param {object} data
|
||||||
|
*/
|
||||||
|
|
||||||
|
function generateButtons(data) {
|
||||||
|
|
||||||
|
// Vars
|
||||||
|
var colorButtons = '';
|
||||||
|
var colorStyles = '';
|
||||||
|
|
||||||
|
// Colors
|
||||||
|
for (var color in data) {
|
||||||
|
if (data.hasOwnProperty(color)) {
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
colorButtons += '<button data-color="'+ color +'"></button>';
|
||||||
|
|
||||||
|
// CSS Styles
|
||||||
|
colorStyles += 'button[data-color="'+ color +'"] {'
|
||||||
|
+ 'background-color: '+ data[color]['600'] +'; '
|
||||||
|
+ '}'
|
||||||
|
|
||||||
|
+ '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
|
||||||
|
+ '[data-theme="light"] button[data-color="'+ color +'"]:active, '
|
||||||
|
+ '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
|
||||||
|
+ 'background-color: '+ data[color]['700'] +'; '
|
||||||
|
+ '}'
|
||||||
|
|
||||||
|
+ '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
|
||||||
|
+ '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
|
||||||
|
+ '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
|
||||||
|
+ 'background-color: '+ data[color]['500'] +'; '
|
||||||
|
+ '}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Insert buttons
|
||||||
|
var buttons = document.createElement('FIGURE');
|
||||||
|
buttons.innerHTML = colorButtons;
|
||||||
|
document.querySelector(colors.target).after(buttons);
|
||||||
|
|
||||||
|
// Buttons listeners
|
||||||
|
var buttonsAll = document.querySelectorAll(colors.selectorButton);
|
||||||
|
for (var i = 0; i < buttonsAll.length; i++) {
|
||||||
|
buttonsAll[i].addEventListener('click', function(event) {
|
||||||
|
buttonColor = event.target.getAttribute('data-color');
|
||||||
|
pickColor(buttonColor, data[buttonColor]);
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Insert CSS Styles
|
||||||
|
var styles = document.createElement('STYLE');
|
||||||
|
styles.setAttribute('title', 'color-picker');
|
||||||
|
styles.innerHTML = colorStyles;
|
||||||
|
document.querySelector('head link').after(styles);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pick Color
|
||||||
|
*
|
||||||
|
* @param {string} name
|
||||||
|
* @param {object} data
|
||||||
|
*/
|
||||||
|
|
||||||
|
function pickColor(name, data) {
|
||||||
|
|
||||||
|
// Generate theme
|
||||||
|
generateTheme(name, data);
|
||||||
|
|
||||||
|
// Clear picked state
|
||||||
|
var buttonsAll = document.querySelectorAll(colors.selectorButton);
|
||||||
|
for (var i = 0; i < buttonsAll.length; i++) {
|
||||||
|
buttonsAll[i].removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set Picked state
|
||||||
|
var buttonPicked = document.querySelector(colors.selectorButton + '[data-color="' + name + '"]');
|
||||||
|
buttonPicked.setAttribute('class', 'picked');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate theme
|
||||||
|
*
|
||||||
|
* @param {string} name
|
||||||
|
* @param {object} data
|
||||||
|
*/
|
||||||
|
|
||||||
|
function generateTheme(name, data) {
|
||||||
|
|
||||||
|
// Code and Color name
|
||||||
|
// TODO: Create a function
|
||||||
|
var cName = document.querySelectorAll(colors.selectorTheme + ' .name');
|
||||||
|
for (var i = 0; i < cName.length; ++i) {
|
||||||
|
cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' ';
|
||||||
|
}
|
||||||
|
var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500');
|
||||||
|
for (var i = 0; i < c500.length; ++i) {
|
||||||
|
c500[i].innerHTML = data[500];
|
||||||
|
}
|
||||||
|
var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600');
|
||||||
|
for (var i = 0; i < c600.length; ++i) {
|
||||||
|
c600[i].innerHTML = data[600];
|
||||||
|
}
|
||||||
|
var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700');
|
||||||
|
for (var i = 0; i < c700.length; ++i) {
|
||||||
|
c700[i].innerHTML = data[700];
|
||||||
|
}
|
||||||
|
var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light');
|
||||||
|
for (var i = 0; i < c600OutlineLight.length; ++i) {
|
||||||
|
c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125);
|
||||||
|
}
|
||||||
|
var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark');
|
||||||
|
for (var i = 0; i < c600OutlineDark.length; ++i) {
|
||||||
|
c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25);
|
||||||
|
}
|
||||||
|
var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse');
|
||||||
|
for (var i = 0; i < inverse.length; ++i) {
|
||||||
|
inverse[i].innerHTML = data['inverse'];
|
||||||
|
}
|
||||||
|
|
||||||
|
// CSS Style
|
||||||
|
var generatedStyles = '[data-theme="generated"] {'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
|
+ '--h4:' + data[700] + ';'
|
||||||
|
+ '--primary-hover:' + data[700] + ';'
|
||||||
|
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
|
||||||
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
+ '}'
|
||||||
|
|
||||||
|
+ '@media only screen and (prefers-color-scheme: dark) {'
|
||||||
|
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
|
+ '--h4:' + data[300] + ';'
|
||||||
|
+ '--primary-hover:' + data[500] + ';'
|
||||||
|
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||||
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
+ '}'
|
||||||
|
+ '}'
|
||||||
|
|
||||||
|
+ '[data-theme="dark"] [data-theme="generated"] {'
|
||||||
|
+ '--primary:' + data[600] + ';'
|
||||||
|
+ '--h4:' + data[300] + ';'
|
||||||
|
+ '--primary-hover:' + data[500] + ';'
|
||||||
|
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
|
||||||
|
+ '--primary-inverse:' + data['inverse'] + ';'
|
||||||
|
+ '}';
|
||||||
|
|
||||||
|
// Insert CSS Styles
|
||||||
|
var selectorGenerated = document.querySelector('style:not([title="color-picker"])');
|
||||||
|
if(typeof(selectorGenerated) != 'undefined' && selectorGenerated != null) {
|
||||||
|
selectorGenerated.innerHTML = generatedStyles;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var styles = document.createElement('STYLE');
|
||||||
|
styles.innerHTML = generatedStyles;
|
||||||
|
document.querySelector('head link').after(styles);
|
||||||
|
}
|
||||||
|
document.querySelector(colors.selectorTheme + ' .grid').setAttribute('data-theme', name);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hexadecimal to Rgba
|
||||||
|
*
|
||||||
|
* @param {string} hex
|
||||||
|
* @param {number} alpha
|
||||||
|
* @return {rgba}
|
||||||
|
*/
|
||||||
|
|
||||||
|
function hexToRgbA(hex, alpha){
|
||||||
|
var c;
|
||||||
|
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
|
||||||
|
c= hex.substring(1).split('');
|
||||||
|
if(c.length== 3) {
|
||||||
|
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
|
||||||
|
}
|
||||||
|
c= '0x' + c.join('');
|
||||||
|
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + alpha + ')';
|
||||||
|
}
|
||||||
|
throw new Error('Bad Hex');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
})();
|
||||||
131
docs/js/src/grid.js
Normal file
131
docs/js/src/grid.js
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
/*!
|
||||||
|
* Grid Interaction
|
||||||
|
*
|
||||||
|
* Pico.css - https://picocss.com
|
||||||
|
* Copyright 2019 - Licensed under MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Config
|
||||||
|
*/
|
||||||
|
|
||||||
|
var grid = {
|
||||||
|
columnsCurrent: 4,
|
||||||
|
columnsMin: 1,
|
||||||
|
columnsMax: 12,
|
||||||
|
targetButtons: '#grids article', // Buttons inserted before target
|
||||||
|
targetGrid: '#grids .grid', // Grid target
|
||||||
|
targetCode: '#grids pre code', // Code target
|
||||||
|
selectorAdd: '#grids button.add', // Add button selector in Dom
|
||||||
|
selectorRemove: '#grids button.remove', // Remove Button selector in Dom
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Init
|
||||||
|
*/
|
||||||
|
|
||||||
|
initGridInteraction();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Init grid interaction
|
||||||
|
*/
|
||||||
|
|
||||||
|
function initGridInteraction() {
|
||||||
|
|
||||||
|
// Add buttons
|
||||||
|
addButtons();
|
||||||
|
|
||||||
|
// Add button listener
|
||||||
|
document.querySelector(grid.selectorAdd).addEventListener('click', function() {
|
||||||
|
addColumn();
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
// Remove button listener
|
||||||
|
document.querySelector(grid.selectorRemove).addEventListener('click', function() {
|
||||||
|
removeColumn();
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add buttons
|
||||||
|
*/
|
||||||
|
|
||||||
|
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="2" 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>'
|
||||||
|
+ '</svg>'
|
||||||
|
+ ' Add column'
|
||||||
|
+ '</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="2" stroke-linecap="round" stroke-linejoin="round">'
|
||||||
|
+ '<line x1="5" y1="12" x2="19" y2="12"></line>'
|
||||||
|
+ '</svg>'
|
||||||
|
+ ' Remove column'
|
||||||
|
+ '</button>';
|
||||||
|
document.querySelector(grid.targetButtons).before(buttons);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add column
|
||||||
|
*/
|
||||||
|
|
||||||
|
function addColumn() {
|
||||||
|
if (grid.columnsCurrent < grid.columnsMax) {
|
||||||
|
grid.columnsCurrent++;
|
||||||
|
generateGrid(grid.columnsCurrent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove column
|
||||||
|
*/
|
||||||
|
|
||||||
|
function removeColumn() {
|
||||||
|
if (grid.columnsCurrent > grid.columnsMin) {
|
||||||
|
grid.columnsCurrent--;
|
||||||
|
generateGrid(grid.columnsCurrent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate grid
|
||||||
|
*
|
||||||
|
* @param {number} cols
|
||||||
|
*/
|
||||||
|
|
||||||
|
function generateGrid(cols) {
|
||||||
|
|
||||||
|
var colsHTML = '';
|
||||||
|
var colsCode = '';
|
||||||
|
var colsCodePref = '<<b>section</b> <i>class</i>=<u>"grid"</u>>\n';
|
||||||
|
var colsCodeSuff = '</<b>section</b>>';
|
||||||
|
|
||||||
|
for (var i=0; i<cols; i++) {
|
||||||
|
colsHTML += '<div>' + (i+1) + '</div>';
|
||||||
|
colsCode += ' <<b>div</b>>' + (i+1) + '</<b>div</b>>\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector(grid.targetGrid).innerHTML = colsHTML;
|
||||||
|
document.querySelector(grid.targetCode).innerHTML = colsCodePref+colsCode+colsCodeSuff;
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
95
docs/js/src/internal-scroll.js
Normal file
95
docs/js/src/internal-scroll.js
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
/*!
|
||||||
|
* 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("#");
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
119
docs/js/src/theme-switcher.js
Normal file
119
docs/js/src/theme-switcher.js
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
/*!
|
||||||
|
* Theme Switcher
|
||||||
|
*
|
||||||
|
* Pico.css - https://picocss.com
|
||||||
|
* Copyright 2019 - Licensed under MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Config
|
||||||
|
*/
|
||||||
|
|
||||||
|
var switcher = {
|
||||||
|
button: {
|
||||||
|
element: 'BUTTON',
|
||||||
|
class: 'secondary switcher',
|
||||||
|
on: '<i>Turn on dark mode</i>',
|
||||||
|
off: '<i>Turn off dark mode</i>'
|
||||||
|
},
|
||||||
|
target: 'main', // Button inserted after target
|
||||||
|
selector: 'button.switcher', // Button selector in Dom
|
||||||
|
currentTheme: systemColorScheme()
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Init
|
||||||
|
*/
|
||||||
|
|
||||||
|
themeSwitcher();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get System Color Scheme
|
||||||
|
*
|
||||||
|
* @return {string}
|
||||||
|
*/
|
||||||
|
|
||||||
|
function systemColorScheme() {
|
||||||
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||||
|
return 'dark';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 'light';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Display Theme Switcher
|
||||||
|
*/
|
||||||
|
|
||||||
|
function themeSwitcher() {
|
||||||
|
|
||||||
|
// Insert Switcher
|
||||||
|
var button = document.createElement(switcher.button.element);
|
||||||
|
button.className = switcher.button.class;
|
||||||
|
document.querySelector(switcher.target).after(button);
|
||||||
|
|
||||||
|
// Set Current Theme
|
||||||
|
setTheme(switcher.currentTheme);
|
||||||
|
|
||||||
|
// Click Listener on Switcher
|
||||||
|
document.querySelector(switcher.selector).addEventListener('click', function() {
|
||||||
|
|
||||||
|
// Switch Theme
|
||||||
|
if (switcher.currentTheme == 'light') {
|
||||||
|
setTheme('dark');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
setTheme('light');
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set Theme
|
||||||
|
*
|
||||||
|
* @param {string} set
|
||||||
|
*/
|
||||||
|
|
||||||
|
function setTheme(set) {
|
||||||
|
|
||||||
|
// Text toggle
|
||||||
|
if (set == 'light') {
|
||||||
|
var label = switcher.button.on;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var label = switcher.button.off;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply theme
|
||||||
|
document.querySelector('html').setAttribute('data-theme', set);
|
||||||
|
document.querySelector(switcher.selector).innerHTML = label;
|
||||||
|
document.querySelector(switcher.selector).setAttribute('aria-label', stripTags(label));
|
||||||
|
switcher.currentTheme = set;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Strip tags
|
||||||
|
*
|
||||||
|
* @param {string} html
|
||||||
|
* @return {string}
|
||||||
|
*/
|
||||||
|
|
||||||
|
function stripTags(html) {
|
||||||
|
return html.replace(/<[^>]*>?/gm, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
300
docs/json/material-colors.json
Normal file
300
docs/json/material-colors.json
Normal file
|
|
@ -0,0 +1,300 @@
|
||||||
|
{
|
||||||
|
"red": {
|
||||||
|
"50": "#ffebee",
|
||||||
|
"100": "#ffcdd2",
|
||||||
|
"200": "#ef9a9a",
|
||||||
|
"300": "#e57373",
|
||||||
|
"400": "#ef5350",
|
||||||
|
"500": "#f44336",
|
||||||
|
"600": "#e53935",
|
||||||
|
"700": "#d32f2f",
|
||||||
|
"800": "#c62828",
|
||||||
|
"900": "#b71c1c",
|
||||||
|
"a100": "#ff8a80",
|
||||||
|
"a200": "#ff5252",
|
||||||
|
"a400": "#ff1744",
|
||||||
|
"a700": "#d50000",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"pink": {
|
||||||
|
"50": "#fce4ec",
|
||||||
|
"100": "#f8bbd0",
|
||||||
|
"200": "#f48fb1",
|
||||||
|
"300": "#f06292",
|
||||||
|
"400": "#ec407a",
|
||||||
|
"500": "#e91e63",
|
||||||
|
"600": "#d81b60",
|
||||||
|
"700": "#c2185b",
|
||||||
|
"800": "#ad1457",
|
||||||
|
"900": "#880e4f",
|
||||||
|
"a100": "#ff80ab",
|
||||||
|
"a200": "#ff4081",
|
||||||
|
"a400": "#f50057",
|
||||||
|
"a700": "#c51162",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"purple": {
|
||||||
|
"50": "#f3e5f5",
|
||||||
|
"100": "#e1bee7",
|
||||||
|
"200": "#ce93d8",
|
||||||
|
"300": "#ba68c8",
|
||||||
|
"400": "#ab47bc",
|
||||||
|
"500": "#9c27b0",
|
||||||
|
"600": "#8e24aa",
|
||||||
|
"700": "#7b1fa2",
|
||||||
|
"800": "#6a1b9a",
|
||||||
|
"900": "#4a148c",
|
||||||
|
"a100": "#ea80fc",
|
||||||
|
"a200": "#e040fb",
|
||||||
|
"a400": "#d500f9",
|
||||||
|
"a700": "#aa00ff",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"deep-purple": {
|
||||||
|
"50": "#ede7f6",
|
||||||
|
"100": "#d1c4e9",
|
||||||
|
"200": "#b39ddb",
|
||||||
|
"300": "#9575cd",
|
||||||
|
"400": "#7e57c2",
|
||||||
|
"500": "#673ab7",
|
||||||
|
"600": "#5e35b1",
|
||||||
|
"700": "#512da8",
|
||||||
|
"800": "#4527a0",
|
||||||
|
"900": "#311b92",
|
||||||
|
"a100": "#b388ff",
|
||||||
|
"a200": "#7c4dff",
|
||||||
|
"a400": "#651fff",
|
||||||
|
"a700": "#6200ea",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"indigo": {
|
||||||
|
"50": "#e8eaf6",
|
||||||
|
"100": "#c5cae9",
|
||||||
|
"200": "#9fa8da",
|
||||||
|
"300": "#7986cb",
|
||||||
|
"400": "#5c6bc0",
|
||||||
|
"500": "#3f51b5",
|
||||||
|
"600": "#3949ab",
|
||||||
|
"700": "#303f9f",
|
||||||
|
"800": "#283593",
|
||||||
|
"900": "#1a237e",
|
||||||
|
"a100": "#8c9eff",
|
||||||
|
"a200": "#536dfe",
|
||||||
|
"a400": "#3d5afe",
|
||||||
|
"a700": "#304ffe",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"blue": {
|
||||||
|
"50": "#e3f2fd",
|
||||||
|
"100": "#bbdefb",
|
||||||
|
"200": "#90caf9",
|
||||||
|
"300": "#64b5f6",
|
||||||
|
"400": "#42a5f5",
|
||||||
|
"500": "#2196f3",
|
||||||
|
"600": "#1e88e5",
|
||||||
|
"700": "#1976d2",
|
||||||
|
"800": "#1565c0",
|
||||||
|
"900": "#0d47a1",
|
||||||
|
"a100": "#82b1ff",
|
||||||
|
"a200": "#448aff",
|
||||||
|
"a400": "#2979ff",
|
||||||
|
"a700": "#2962ff",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"light-blue": {
|
||||||
|
"50": "#e1f5fe",
|
||||||
|
"100": "#b3e5fc",
|
||||||
|
"200": "#81d4fa",
|
||||||
|
"300": "#4fc3f7",
|
||||||
|
"400": "#29b6f6",
|
||||||
|
"500": "#03a9f4",
|
||||||
|
"600": "#039be5",
|
||||||
|
"700": "#0288d1",
|
||||||
|
"800": "#0277bd",
|
||||||
|
"900": "#01579b",
|
||||||
|
"a100": "#80d8ff",
|
||||||
|
"a200": "#40c4ff",
|
||||||
|
"a400": "#00b0ff",
|
||||||
|
"a700": "#0091ea",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"cyan": {
|
||||||
|
"50": "#e0f7fa",
|
||||||
|
"100": "#b2ebf2",
|
||||||
|
"200": "#80deea",
|
||||||
|
"300": "#4dd0e1",
|
||||||
|
"400": "#26c6da",
|
||||||
|
"500": "#00bcd4",
|
||||||
|
"600": "#00acc1",
|
||||||
|
"700": "#0097a7",
|
||||||
|
"800": "#00838f",
|
||||||
|
"900": "#006064",
|
||||||
|
"a100": "#84ffff",
|
||||||
|
"a200": "#18ffff",
|
||||||
|
"a400": "#00e5ff",
|
||||||
|
"a700": "#00b8d4",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"teal": {
|
||||||
|
"50": "#e0f2f1",
|
||||||
|
"100": "#b2dfdb",
|
||||||
|
"200": "#80cbc4",
|
||||||
|
"300": "#4db6ac",
|
||||||
|
"400": "#26a69a",
|
||||||
|
"500": "#009688",
|
||||||
|
"600": "#00897b",
|
||||||
|
"700": "#00796b",
|
||||||
|
"800": "#00695c",
|
||||||
|
"900": "#004d40",
|
||||||
|
"a100": "#a7ffeb",
|
||||||
|
"a200": "#64ffda",
|
||||||
|
"a400": "#1de9b6",
|
||||||
|
"a700": "#00bfa5",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"green": {
|
||||||
|
"50": "#e8f5e9",
|
||||||
|
"100": "#c8e6c9",
|
||||||
|
"200": "#a5d6a7",
|
||||||
|
"300": "#81c784",
|
||||||
|
"400": "#66bb6a",
|
||||||
|
"500": "#4caf50",
|
||||||
|
"600": "#43a047",
|
||||||
|
"700": "#388e3c",
|
||||||
|
"800": "#2e7d32",
|
||||||
|
"900": "#1b5e20",
|
||||||
|
"a100": "#b9f6ca",
|
||||||
|
"a200": "#69f0ae",
|
||||||
|
"a400": "#00e676",
|
||||||
|
"a700": "#00c853",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"light-green": {
|
||||||
|
"50": "#f1f8e9",
|
||||||
|
"100": "#dcedc8",
|
||||||
|
"200": "#c5e1a5",
|
||||||
|
"300": "#aed581",
|
||||||
|
"400": "#9ccc65",
|
||||||
|
"500": "#8bc34a",
|
||||||
|
"600": "#7cb342",
|
||||||
|
"700": "#689f38",
|
||||||
|
"800": "#558b2f",
|
||||||
|
"900": "#33691e",
|
||||||
|
"a100": "#ccff90",
|
||||||
|
"a200": "#b2ff59",
|
||||||
|
"a400": "#76ff03",
|
||||||
|
"a700": "#64dd17",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"lime": {
|
||||||
|
"50": "#f9fbe7",
|
||||||
|
"100": "#f0f4c3",
|
||||||
|
"200": "#e6ee9c",
|
||||||
|
"300": "#dce775",
|
||||||
|
"400": "#d4e157",
|
||||||
|
"500": "#cddc39",
|
||||||
|
"600": "#c0ca33",
|
||||||
|
"700": "#afb42b",
|
||||||
|
"800": "#9e9d24",
|
||||||
|
"900": "#827717",
|
||||||
|
"a100": "#f4ff81",
|
||||||
|
"a200": "#eeff41",
|
||||||
|
"a400": "#c6ff00",
|
||||||
|
"a700": "#aeea00",
|
||||||
|
"inverse": "#2c4049"
|
||||||
|
},
|
||||||
|
"yellow": {
|
||||||
|
"50": "#fffde7",
|
||||||
|
"100": "#fff9c4",
|
||||||
|
"200": "#fff59d",
|
||||||
|
"300": "#fff176",
|
||||||
|
"400": "#ffee58",
|
||||||
|
"500": "#ffeb3b",
|
||||||
|
"600": "#fdd835",
|
||||||
|
"700": "#fbc02d",
|
||||||
|
"800": "#f9a825",
|
||||||
|
"900": "#f57f17",
|
||||||
|
"a100": "#ffff8d",
|
||||||
|
"a200": "#ffff00",
|
||||||
|
"a400": "#ffea00",
|
||||||
|
"a700": "#ffd600",
|
||||||
|
"inverse": "#2c4049"
|
||||||
|
},
|
||||||
|
"amber": {
|
||||||
|
"50": "#fff8e1",
|
||||||
|
"100": "#ffecb3",
|
||||||
|
"200": "#ffe082",
|
||||||
|
"300": "#ffd54f",
|
||||||
|
"400": "#ffca28",
|
||||||
|
"500": "#ffc107",
|
||||||
|
"600": "#ffb300",
|
||||||
|
"700": "#ffa000",
|
||||||
|
"800": "#ff8f00",
|
||||||
|
"900": "#ff6f00",
|
||||||
|
"a100": "#ffe57f",
|
||||||
|
"a200": "#ffd740",
|
||||||
|
"a400": "#ffc400",
|
||||||
|
"a700": "#ffab00",
|
||||||
|
"inverse": "#2c4049"
|
||||||
|
},
|
||||||
|
"orange": {
|
||||||
|
"50": "#fff3e0",
|
||||||
|
"100": "#ffe0b2",
|
||||||
|
"200": "#ffcc80",
|
||||||
|
"300": "#ffb74d",
|
||||||
|
"400": "#ffa726",
|
||||||
|
"500": "#ff9800",
|
||||||
|
"600": "#fb8c00",
|
||||||
|
"700": "#f57c00",
|
||||||
|
"800": "#ef6c00",
|
||||||
|
"900": "#e65100",
|
||||||
|
"a100": "#ffd180",
|
||||||
|
"a200": "#ffab40",
|
||||||
|
"a400": "#ff9100",
|
||||||
|
"a700": "#ff6d00",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"deep-orange": {
|
||||||
|
"50": "#fbe9e7",
|
||||||
|
"100": "#ffccbc",
|
||||||
|
"200": "#ffab91",
|
||||||
|
"300": "#ff8a65",
|
||||||
|
"400": "#ff7043",
|
||||||
|
"500": "#ff5722",
|
||||||
|
"600": "#f4511e",
|
||||||
|
"700": "#e64a19",
|
||||||
|
"800": "#d84315",
|
||||||
|
"900": "#bf360c",
|
||||||
|
"a100": "#ff9e80",
|
||||||
|
"a200": "#ff6e40",
|
||||||
|
"a400": "#ff3d00",
|
||||||
|
"a700": "#dd2c00",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"grey": {
|
||||||
|
"50": "#fafafa",
|
||||||
|
"100": "#f5f5f5",
|
||||||
|
"200": "#eeeeee",
|
||||||
|
"300": "#e0e0e0",
|
||||||
|
"400": "#bdbdbd",
|
||||||
|
"500": "#9e9e9e",
|
||||||
|
"600": "#757575",
|
||||||
|
"700": "#616161",
|
||||||
|
"800": "#424242",
|
||||||
|
"900": "#212121",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
},
|
||||||
|
"blue-grey": {
|
||||||
|
"50": "#eceff1",
|
||||||
|
"100": "#cfd8dc",
|
||||||
|
"200": "#b0bec5",
|
||||||
|
"300": "#90a4ae",
|
||||||
|
"400": "#78909c",
|
||||||
|
"500": "#607d8b",
|
||||||
|
"600": "#546e7a",
|
||||||
|
"700": "#455a64",
|
||||||
|
"800": "#37474f",
|
||||||
|
"900": "#263238",
|
||||||
|
"inverse": "#FFF"
|
||||||
|
}
|
||||||
|
}
|
||||||
51
docs/scss/components/_card-code.scss
Normal file
51
docs/scss/components/_card-code.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
/**
|
||||||
|
* Docs: Code inside <article>
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Custom spacings
|
||||||
|
article pre {
|
||||||
|
margin-top: $spacing-block;
|
||||||
|
margin-bottom: -$spacing-gutter*2;
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "sm") and
|
||||||
|
map-get($spacing-factor, "sm") {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") and
|
||||||
|
map-get($spacing-factor, "md") and
|
||||||
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
|
||||||
|
margin: -$spacing-block*map-get($spacing-factor, "md");
|
||||||
|
margin-top: $spacing-block*map-get($spacing-factor, "md");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "lg") and
|
||||||
|
map-get($spacing-factor, "lg") and
|
||||||
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
|
||||||
|
margin: -$spacing-block*map-get($spacing-factor, "lg");
|
||||||
|
margin-top: $spacing-block*map-get($spacing-factor, "lg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "xl") and
|
||||||
|
map-get($spacing-factor, "xl") and
|
||||||
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
|
||||||
|
margin: -$spacing-block*map-get($spacing-factor, "xl");
|
||||||
|
margin-top: $spacing-block*map-get($spacing-factor, "xl");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
docs/scss/components/_nav.scss
Normal file
45
docs/scss/components/_nav.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
/**
|
||||||
|
* Docs: Navs
|
||||||
|
*/
|
||||||
|
|
||||||
|
body > nav {
|
||||||
|
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||||
|
z-index: 99;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
backdrop-filter: saturate(180%) blur(20px);
|
||||||
|
background-color: var(--nav-background);
|
||||||
|
box-shadow: 0px 1px 0 var(--nav-border);
|
||||||
|
|
||||||
|
li a {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul:first-of-type li {
|
||||||
|
|
||||||
|
// Brand
|
||||||
|
&:first-of-type {
|
||||||
|
a {
|
||||||
|
width: 3.5rem;
|
||||||
|
height: 3.5rem;
|
||||||
|
margin-left: -$spacing-gutter;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--h1);
|
||||||
|
color: var(--background);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Title
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
display: none;
|
||||||
|
margin-left: $spacing-gutter;
|
||||||
|
color: var(--muted-text);
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
70
docs/scss/components/_theme-switcher.scss
Normal file
70
docs/scss/components/_theme-switcher.scss
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
/**
|
||||||
|
* Docs: Theme switcher
|
||||||
|
*/
|
||||||
|
|
||||||
|
button.switcher {
|
||||||
|
position: fixed;
|
||||||
|
right: $spacing-gutter/2;
|
||||||
|
bottom: $spacing-gutter;
|
||||||
|
width: auto;
|
||||||
|
max-width: 1rem + $spacing-gutter*2;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: .75rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
line-height: 1;
|
||||||
|
text-align: right;
|
||||||
|
box-shadow: var(--card-shadow);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
border: 2px solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||||
|
vertical-align: bottom;
|
||||||
|
content: '';
|
||||||
|
transition: transform $transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: .875rem;
|
||||||
|
font-style: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
max-width: 100%;
|
||||||
|
transition: max-width $transition,
|
||||||
|
background-color $transition,
|
||||||
|
color $transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4);
|
||||||
|
transition: max-width $transition,
|
||||||
|
padding $transition;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: var(--card-shadow),
|
||||||
|
0 0 0 0.2rem var(--secondary-focus);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
right: $spacing-gutter;
|
||||||
|
}
|
||||||
|
}
|
||||||
107
docs/scss/content/_code.scss
Normal file
107
docs/scss/content/_code.scss
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
/**
|
||||||
|
* Docs: Code
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Custom spacings for <pre> (vertically aligned with <article> content)
|
||||||
|
pre {
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "sm") and
|
||||||
|
map-get($spacing-factor, "sm") and
|
||||||
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") and
|
||||||
|
map-get($spacing-factor, "md") and
|
||||||
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "lg") and
|
||||||
|
map-get($spacing-factor, "lg") and
|
||||||
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "xl") and
|
||||||
|
map-get($spacing-factor, "xl") and
|
||||||
|
$enable-responsive-spacings {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Badge for Valid & Invalid code
|
||||||
|
[data-theme="invalid"],
|
||||||
|
[data-theme="valid"] {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
|
||||||
|
// Label
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -$spacing-gutter;
|
||||||
|
padding: .375rem .75rem;
|
||||||
|
border-radius: 0;
|
||||||
|
color: var(--primary-inverse);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
top: $spacing-gutter;
|
||||||
|
right: $spacing-gutter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Spacing for Valid & Invalid badge
|
||||||
|
pre {
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Color for Valid & Invalid code
|
||||||
|
[data-theme="invalid"] {
|
||||||
|
&:before {
|
||||||
|
background: var(--invalid);
|
||||||
|
content: 'Bulky';
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border-color: var(--invalid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="valid"] {
|
||||||
|
&:before {
|
||||||
|
background: var(--valid);
|
||||||
|
content: 'Great';
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border-color: var(--valid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section[title="love"] [data-theme="invalid"] {
|
||||||
|
&:before {
|
||||||
|
content: 'Not so great';
|
||||||
|
}
|
||||||
|
}
|
||||||
242
docs/scss/layout/_layout.scss
Normal file
242
docs/scss/layout/_layout.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
||||||
|
/**
|
||||||
|
* Docs: Global layout
|
||||||
|
*/
|
||||||
|
|
||||||
|
$navHeight: 3.5rem;
|
||||||
|
|
||||||
|
|
||||||
|
// Docs: Commons
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
section > hgroup {
|
||||||
|
margin-bottom: $spacing-typography*2;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: var(--muted-text);
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a[role=button] {
|
||||||
|
margin-right: $spacing-gutter/4;
|
||||||
|
margin-bottom: $spacing-typography;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Main (Grid)
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
body > main {
|
||||||
|
padding-top:map-get($spacing-factor, "xs") + $navHeight;
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
padding-top: map-get($spacing-factor, "sm") + $navHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
padding-top: map-get($spacing-factor, "md") + $navHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
grid-column-gap: $spacing-gutter*4;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 200px auto;
|
||||||
|
padding-top: map-get($spacing-factor, "lg") + $navHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
padding-top: map-get($spacing-factor, "xl") + $navHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
min-width: 0; // HACK for childs in overflow
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Anchors hacks for internal links
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
a[name]:not([href])::before {
|
||||||
|
display: block;
|
||||||
|
height: map-get($spacing-factor, "xs") + $navHeight;
|
||||||
|
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
height: map-get($spacing-factor, "sm") + $navHeight;
|
||||||
|
margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
height: map-get($spacing-factor, "md") + $navHeight;
|
||||||
|
margin-top: -(map-get($spacing-factor, "md") + $navHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
height: map-get($spacing-factor, "lg") + $navHeight;
|
||||||
|
margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "xl")) {
|
||||||
|
height: map-get($spacing-factor, "xl") + $navHeight;
|
||||||
|
margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Aside
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
main > aside {
|
||||||
|
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: $spacing-block;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: $spacing-typography;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
position: fixed;
|
||||||
|
width: 200px;
|
||||||
|
max-height: calc(100vh - 5.5rem);
|
||||||
|
margin-bottom: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li, summary {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
a,
|
||||||
|
a.secondary {
|
||||||
|
&:focus {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--primary-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
padding-bottom: .25rem;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
details summary {
|
||||||
|
font-weight: 300;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[role=document] {
|
||||||
|
section > h1,
|
||||||
|
section > h2,
|
||||||
|
section > h3 {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Docs: Customization
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
#customization {
|
||||||
|
|
||||||
|
figure {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
margin-bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
grid-template-columns: repeat(18, 1fr);
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
border-top-right-radius: $round;
|
||||||
|
border-top-left-radius: $round;
|
||||||
|
}
|
||||||
|
|
||||||
|
~ article {
|
||||||
|
margin-top: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0;
|
||||||
|
padding-top: 100%;
|
||||||
|
border:none;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.picked {
|
||||||
|
// Source: https://feathericons.com/
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: .66rem auto;
|
||||||
|
box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
&[data-color="lime"],
|
||||||
|
&[data-color="yellow"],
|
||||||
|
&[data-color="amber"] {
|
||||||
|
&.picked {
|
||||||
|
// Source: https://feathericons.com/
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
transition: color $transition;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[data-theme="generated"] {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Docs: Grids
|
||||||
|
// ––––––––––––––––––––
|
||||||
|
|
||||||
|
#grids {
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
margin-right: .5rem;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
stroke: var(--secondary);
|
||||||
|
margin-right: .5rem;
|
||||||
|
border: 3px solid currentColor;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid > * {
|
||||||
|
padding: ($spacing-gutter/2) 0;
|
||||||
|
background: var(--code-background);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
22
docs/scss/pico.docs.scss
Normal file
22
docs/scss/pico.docs.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
/*!
|
||||||
|
* Pico: Customs styles for Docs
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Config
|
||||||
|
@import "../../scss/colors";
|
||||||
|
@import "../../scss/variables";
|
||||||
|
|
||||||
|
// Theming
|
||||||
|
@import "themes/light";
|
||||||
|
@import "themes/dark";
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
@import "layout/layout";
|
||||||
|
|
||||||
|
// Content
|
||||||
|
@import "content/code";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@import "components/nav";
|
||||||
|
@import "components/card-code";
|
||||||
|
@import "components/theme-switcher";
|
||||||
23
docs/scss/themes/_dark.scss
Normal file
23
docs/scss/themes/_dark.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
/**
|
||||||
|
* Dark theme (Auto) [Additions for docs]
|
||||||
|
* Automatically enabled if user has Dark mode enabled
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme="light"]) {
|
||||||
|
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
|
||||||
|
--nav-border: #{rgba($grey-500, .2)};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dark theme (Forced) [Additions for docs]
|
||||||
|
* Enabled if forced with data-theme="dark"
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--nav-background: #{rgba(darken($grey-900, 6%), .8)};
|
||||||
|
--nav-border: #{rgba($grey-500, .2)};
|
||||||
|
}
|
||||||
10
docs/scss/themes/_light.scss
Normal file
10
docs/scss/themes/_light.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
/**
|
||||||
|
* Light theme (Default) [Additions for docs]
|
||||||
|
* Can be forced with data-theme="light"
|
||||||
|
*/
|
||||||
|
|
||||||
|
[data-theme="light"],
|
||||||
|
:root:not([data-theme="dark"]) {
|
||||||
|
--nav-background: #{rgba($white, .7)};
|
||||||
|
--nav-border: #{rgba($grey-500, .2)};
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue