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

Improvements

Browse source 
- Add .contrast variant
- Separate _button-styles.scss
- Edit .secondary, mark, figcaption, hgroup, tooltips
- Docs: Add More about grids, External links icon, Second theme switcher
This commit is contained in:
Lucas 2019-11-30 12:43:20 +07:00
parent 066c0a04fd
commit 73237bdcd4
26 changed files with 516 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

0
README.md Normal file
View file

36
css/pico.classless.css
View file

@ -16,19 +16,16 @@
--h4: #596e78; --h4: #596e78;
--h5: #73848c; --h5: #73848c;
--h6: #8a9ba3; --h6: #8a9ba3;
--mark: rgba(255, 223, 128, 0.5);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #086a9b; --primary-hover: #086a9b;
--primary-focus: rgba(16, 134, 193, 0.125); --primary-focus: rgba(16, 134, 193, 0.125);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #374b56;
--secondary-hover: #23353e;
--secondary-focus: rgba(55, 75, 86, 0.125);
--secondary-inverse: #FFF;
--input-background: #FFF; --input-background: #FFF;
--input-border: #c8d2d8; --input-border: #c8d2d8;
--valid: #288a6a; --valid: #288a6a;
--invalid: #b94646; --invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #2c4049;
--muted-text: #7e8f98; --muted-text: #7e8f98;
--muted-background: #edf1f3; --muted-background: #edf1f3;
--muted-border: #edf1f3; --muted-border: #edf1f3;
@ -57,19 +54,16 @@
--h4: #a2b1b9; --h4: #a2b1b9;
--h5: #8a9ba3; --h5: #8a9ba3;
--h6: #73848c; --h6: #73848c;
--mark: rgba(255, 223, 128, 0.25);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #1aa2e6; --primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25); --primary-focus: rgba(16, 134, 193, 0.25);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #bbc7ce;
--secondary-hover: #edf1f3;
--secondary-focus: rgba(187, 199, 206, 0.25);
--secondary-inverse: #1b2a32;
--input-background: #10191e; --input-background: #10191e;
--input-border: #374b56; --input-border: #374b56;
--valid: #1f7a5c; --valid: #1f7a5c;
--invalid: #943838; --invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c; --muted-text: #73848c;
--muted-background: #10191e; --muted-background: #10191e;
--muted-border: #23353e; --muted-border: #23353e;
@ -98,19 +92,16 @@
--h4: #a2b1b9; --h4: #a2b1b9;
--h5: #8a9ba3; --h5: #8a9ba3;
--h6: #73848c; --h6: #73848c;
--mark: rgba(255, 223, 128, 0.25);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #1aa2e6; --primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25); --primary-focus: rgba(16, 134, 193, 0.25);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #bbc7ce;
--secondary-hover: #edf1f3;
--secondary-focus: rgba(187, 199, 206, 0.25);
--secondary-inverse: #1b2a32;
--input-background: #10191e; --input-background: #10191e;
--input-border: #374b56; --input-border: #374b56;
--valid: #1f7a5c; --valid: #1f7a5c;
--invalid: #943838; --invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c; --muted-text: #73848c;
--muted-background: #10191e; --muted-background: #10191e;
--muted-border: #23353e; --muted-border: #23353e;
@ -275,7 +266,7 @@ figure {
figure figcaption { figure figcaption {
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%; font-size: 87.5%;
padding: 0 1rem; padding: 0.5rem 1rem;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -284,7 +275,7 @@ figure figcaption {
margin-left: 0; margin-left: 0;
} }
figure figcaption { figure figcaption {
padding: 0; padding: 0.5rem 0;
} }
} }
@ -440,7 +431,7 @@ hgroup h6 {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup *:last-child { hgroup > *:last-child {
color: var(--muted-text); color: var(--muted-text);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: normal; font-weight: normal;
@ -495,7 +486,7 @@ ul li {
mark { mark {
padding: .125rem .25rem; padding: .125rem .25rem;
background: var(--mark); background: var(--mark);
color: var(--text); color: var(--mark-text);
vertical-align: middle; vertical-align: middle;
} }
@ -1260,8 +1251,8 @@ aside li a {
overflow: hidden; overflow: hidden;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
border-radius: 0.25rem; border-radius: 0.25rem;
background: var(--secondary); background: var(--contrast);
color: var(--secondary-inverse); color: var(--contrast-inverse);
font-size: .85rem; font-size: .85rem;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -1271,7 +1262,6 @@ aside li a {
content: attr(data-tooltip); content: attr(data-tooltip);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.2s ease-in-out;
} }
[data-tooltip]::after { [data-tooltip]::after {
@ -1282,7 +1272,7 @@ aside li a {
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
color: var(--secondary); color: var(--contrast);
content: ''; content: '';
} }

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

File diff suppressed because one or more lines are too long

153
css/pico.css
View file

@ -16,19 +16,25 @@
--h4: #596e78; --h4: #596e78;
--h5: #73848c; --h5: #73848c;
--h6: #8a9ba3; --h6: #8a9ba3;
--mark: rgba(255, 223, 128, 0.5);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #086a9b; --primary-hover: #086a9b;
--primary-focus: rgba(16, 134, 193, 0.125); --primary-focus: rgba(16, 134, 193, 0.125);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #374b56; --secondary: #73848c;
--secondary-hover: #23353e; --secondary-hover: #415762;
--secondary-focus: rgba(55, 75, 86, 0.125); --secondary-focus: rgba(115, 132, 140, 0.125);
--secondary-inverse: #FFF; --secondary-inverse: #FFF;
--contrast: #2c4049;
--contrast-hover: #0d1519;
--contrast-focus: rgba(115, 132, 140, 0.125);
--contrast-border: rgba(255, 223, 128, 0.5);
--contrast-inverse: #FFF;
--input-background: #FFF; --input-background: #FFF;
--input-border: #c8d2d8; --input-border: #c8d2d8;
--valid: #288a6a; --valid: #288a6a;
--invalid: #b94646; --invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #2c4049;
--muted-text: #7e8f98; --muted-text: #7e8f98;
--muted-background: #edf1f3; --muted-background: #edf1f3;
--muted-border: #edf1f3; --muted-border: #edf1f3;
@ -57,19 +63,25 @@
--h4: #a2b1b9; --h4: #a2b1b9;
--h5: #8a9ba3; --h5: #8a9ba3;
--h6: #73848c; --h6: #73848c;
--mark: rgba(255, 223, 128, 0.25);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #1aa2e6; --primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25); --primary-focus: rgba(16, 134, 193, 0.25);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #bbc7ce; --secondary: #596e78;
--secondary-hover: #edf1f3; --secondary-hover: #73848c;
--secondary-focus: rgba(187, 199, 206, 0.25); --secondary-focus: rgba(89, 110, 120, 0.25);
--secondary-inverse: #1b2a32; --secondary-inverse: #FFF;
--contrast: #d5dde2;
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 110, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-inverse: #10191e;
--input-background: #10191e; --input-background: #10191e;
--input-border: #374b56; --input-border: #374b56;
--valid: #1f7a5c; --valid: #1f7a5c;
--invalid: #943838; --invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c; --muted-text: #73848c;
--muted-background: #10191e; --muted-background: #10191e;
--muted-border: #23353e; --muted-border: #23353e;
@ -98,19 +110,25 @@
--h4: #a2b1b9; --h4: #a2b1b9;
--h5: #8a9ba3; --h5: #8a9ba3;
--h6: #73848c; --h6: #73848c;
--mark: rgba(255, 223, 128, 0.25);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #1aa2e6; --primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25); --primary-focus: rgba(16, 134, 193, 0.25);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #bbc7ce; --secondary: #596e78;
--secondary-hover: #edf1f3; --secondary-hover: #73848c;
--secondary-focus: rgba(187, 199, 206, 0.25); --secondary-focus: rgba(89, 110, 120, 0.25);
--secondary-inverse: #1b2a32; --secondary-inverse: #FFF;
--contrast: #d5dde2;
--contrast-hover: #FFF;
--contrast-focus: rgba(89, 110, 120, 0.25);
--contrast-border: rgba(255, 223, 128, 0.33);
--contrast-inverse: #10191e;
--input-background: #10191e; --input-background: #10191e;
--input-border: #374b56; --input-border: #374b56;
--valid: #1f7a5c; --valid: #1f7a5c;
--invalid: #943838; --invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c; --muted-text: #73848c;
--muted-background: #10191e; --muted-background: #10191e;
--muted-border: #23353e; --muted-border: #23353e;
@ -336,7 +354,7 @@ figure {
figure figcaption { figure figcaption {
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%; font-size: 87.5%;
padding: 0 1rem; padding: 0.5rem 1rem;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -345,7 +363,7 @@ figure figcaption {
margin-left: 0; margin-left: 0;
} }
figure figcaption { figure figcaption {
padding: 0; padding: 0.5rem 0;
} }
} }
@ -430,6 +448,19 @@ a.secondary:focus {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
a.contrast:not([role="button"]) {
box-shadow: inset 0 -0.33rem 0 var(--contrast-border);
color: var(--contrast);
}
a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
color: var(--contrast-hover);
}
a.contrast:not([role="button"]):focus {
background-color: var(--contrast-focus);
}
h1, h1,
h2, h2,
h3, h3,
@ -513,7 +544,7 @@ hgroup h6 {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup *:last-child { hgroup > *:last-child {
color: var(--muted-text); color: var(--muted-text);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: normal; font-weight: normal;
@ -568,7 +599,7 @@ ul li {
mark { mark {
padding: .125rem .25rem; padding: .125rem .25rem;
background: var(--mark); background: var(--mark);
color: var(--text); color: var(--mark-text);
vertical-align: middle; vertical-align: middle;
} }
@ -973,6 +1004,17 @@ input[type="reset"] {
cursor: pointer; cursor: pointer;
} }
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
pointer-events: none;
}
/**
* Button Styles
*/
button.secondary, button.secondary,
input.secondary[type="submit"], input.secondary[type="submit"],
input[type="reset"], input[type="reset"],
@ -1003,6 +1045,36 @@ a.secondary[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus); box-shadow: 0 0 0 0.2rem var(--secondary-focus);
} }
button.contrast,
input.contrast[type="submit"],
input.contrast[type="reset"],
a.contrast[role="button"] {
border: 1px solid var(--contrast);
background-color: var(--contrast);
color: var(--contrast-inverse);
}
button.contrast:hover, button.contrast:active, button.contrast:focus,
input.contrast[type="submit"]:hover,
input.contrast[type="submit"]:active,
input.contrast[type="submit"]:focus,
input.contrast[type="reset"]:hover,
input.contrast[type="reset"]:active,
input.contrast[type="reset"]:focus,
a.contrast[role="button"]:hover,
a.contrast[role="button"]:active,
a.contrast[role="button"]:focus {
border: 1px solid var(--contrast-hover);
background-color: var(--contrast-hover);
}
button.contrast:focus,
input.contrast[type="submit"]:focus,
input.contrast[type="reset"]:focus,
a.contrast[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
button.outline, button.outline,
input.outline[type="submit"], input.outline[type="submit"],
a.outline[role="button"] { a.outline[role="button"] {
@ -1052,12 +1124,34 @@ a.outline.secondary[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus); box-shadow: 0 0 0 0.2rem var(--secondary-focus);
} }
button[disabled], button.outline.contrast,
input[type="submit"][disabled], input.outline.contrast[type="submit"],
input[type="reset"][disabled], input.outline.contrast[type="reset"],
a[role="button"][disabled] { a.outline.contrast[role="button"] {
opacity: .5; border: 1px solid var(--contrast);
pointer-events: none; background-color: transparent;
color: var(--contrast);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
input.outline.contrast[type="submit"]:hover,
input.outline.contrast[type="submit"]:active,
input.outline.contrast[type="submit"]:focus,
input.outline.contrast[type="reset"]:hover,
input.outline.contrast[type="reset"]:active,
input.outline.contrast[type="reset"]:focus,
a.outline.contrast[role="button"]:hover,
a.outline.contrast[role="button"]:active,
a.outline.contrast[role="button"]:focus {
border: 1px solid var(--contrast-hover);
color: var(--contrast-hover);
}
button.outline.contrast:focus,
input.outline.contrast[type="submit"]:focus,
input.outline.contrast[type="reset"]:focus,
a.outline.contrast[role="button"]:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
} }
/** /**
@ -1374,6 +1468,10 @@ nav a:hover, nav a:active, nav a:focus {
text-decoration: none; text-decoration: none;
} }
nav a.contrast:not([role="button"]) {
box-shadow: none;
}
aside nav, aside nav,
aside ul, aside ul,
aside li { aside li {
@ -1412,8 +1510,8 @@ aside li a {
overflow: hidden; overflow: hidden;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
border-radius: 0.25rem; border-radius: 0.25rem;
background: var(--secondary); background: var(--contrast);
color: var(--secondary-inverse); color: var(--contrast-inverse);
font-size: .85rem; font-size: .85rem;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -1423,7 +1521,6 @@ aside li a {
content: attr(data-tooltip); content: attr(data-tooltip);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.2s ease-in-out;
} }
[data-tooltip]::after { [data-tooltip]::after {
@ -1434,7 +1531,7 @@ aside li a {
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
color: var(--secondary); color: var(--contrast);
content: ''; content: '';
} }

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

@ -16,19 +16,16 @@
--h4: #596e78; --h4: #596e78;
--h5: #73848c; --h5: #73848c;
--h6: #8a9ba3; --h6: #8a9ba3;
--mark: rgba(255, 223, 128, 0.5);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #086a9b; --primary-hover: #086a9b;
--primary-focus: rgba(16, 134, 193, 0.125); --primary-focus: rgba(16, 134, 193, 0.125);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #374b56;
--secondary-hover: #23353e;
--secondary-focus: rgba(55, 75, 86, 0.125);
--secondary-inverse: #FFF;
--input-background: #FFF; --input-background: #FFF;
--input-border: #c8d2d8; --input-border: #c8d2d8;
--valid: #288a6a; --valid: #288a6a;
--invalid: #b94646; --invalid: #b94646;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #2c4049;
--muted-text: #7e8f98; --muted-text: #7e8f98;
--muted-background: #edf1f3; --muted-background: #edf1f3;
--muted-border: #edf1f3; --muted-border: #edf1f3;
@ -57,19 +54,16 @@
--h4: #a2b1b9; --h4: #a2b1b9;
--h5: #8a9ba3; --h5: #8a9ba3;
--h6: #73848c; --h6: #73848c;
--mark: rgba(255, 223, 128, 0.25);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #1aa2e6; --primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25); --primary-focus: rgba(16, 134, 193, 0.25);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #bbc7ce;
--secondary-hover: #edf1f3;
--secondary-focus: rgba(187, 199, 206, 0.25);
--secondary-inverse: #1b2a32;
--input-background: #10191e; --input-background: #10191e;
--input-border: #374b56; --input-border: #374b56;
--valid: #1f7a5c; --valid: #1f7a5c;
--invalid: #943838; --invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c; --muted-text: #73848c;
--muted-background: #10191e; --muted-background: #10191e;
--muted-border: #23353e; --muted-border: #23353e;
@ -98,19 +92,16 @@
--h4: #a2b1b9; --h4: #a2b1b9;
--h5: #8a9ba3; --h5: #8a9ba3;
--h6: #73848c; --h6: #73848c;
--mark: rgba(255, 223, 128, 0.25);
--primary: #1086c1; --primary: #1086c1;
--primary-hover: #1aa2e6; --primary-hover: #1aa2e6;
--primary-focus: rgba(16, 134, 193, 0.25); --primary-focus: rgba(16, 134, 193, 0.25);
--primary-inverse: #FFF; --primary-inverse: #FFF;
--secondary: #bbc7ce;
--secondary-hover: #edf1f3;
--secondary-focus: rgba(187, 199, 206, 0.25);
--secondary-inverse: #1b2a32;
--input-background: #10191e; --input-background: #10191e;
--input-border: #374b56; --input-border: #374b56;
--valid: #1f7a5c; --valid: #1f7a5c;
--invalid: #943838; --invalid: #943838;
--mark: rgba(255, 223, 128, 0.5);
--mark-text: #FFF;
--muted-text: #73848c; --muted-text: #73848c;
--muted-background: #10191e; --muted-background: #10191e;
--muted-border: #23353e; --muted-border: #23353e;
@ -271,7 +262,7 @@ figure {
figure figcaption { figure figcaption {
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%; font-size: 87.5%;
padding: 0 1rem; padding: 0.5rem 1rem;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
@ -280,7 +271,7 @@ figure figcaption {
margin-left: 0; margin-left: 0;
} }
figure figcaption { figure figcaption {
padding: 0; padding: 0.5rem 0;
} }
} }
@ -436,7 +427,7 @@ hgroup h6 {
margin-bottom: 0; margin-bottom: 0;
} }
hgroup *:last-child { hgroup > *:last-child {
color: var(--muted-text); color: var(--muted-text);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: normal; font-weight: normal;
@ -491,7 +482,7 @@ ul li {
mark { mark {
padding: .125rem .25rem; padding: .125rem .25rem;
background: var(--mark); background: var(--mark);
color: var(--text); color: var(--mark-text);
vertical-align: middle; vertical-align: middle;
} }
@ -1256,8 +1247,8 @@ aside li a {
overflow: hidden; overflow: hidden;
transform: translate(-50%, -0.25rem); transform: translate(-50%, -0.25rem);
border-radius: 0.25rem; border-radius: 0.25rem;
background: var(--secondary); background: var(--contrast);
color: var(--secondary-inverse); color: var(--contrast-inverse);
font-size: .85rem; font-size: .85rem;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -1267,7 +1258,6 @@ aside li a {
content: attr(data-tooltip); content: attr(data-tooltip);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.2s ease-in-out;
} }
[data-tooltip]::after { [data-tooltip]::after {
@ -1278,7 +1268,7 @@ aside li a {
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
color: var(--secondary); color: var(--contrast);
content: ''; content: '';
} }

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

50
docs/css/pico.docs.css
View file

@ -69,7 +69,7 @@ body > main > * {
min-width: 0; min-width: 0;
} }
a[name]:not([href])::before { div[role="document"] > section::before {
display: block; display: block;
height: 4.5rem; height: 4.5rem;
margin-top: -4.5rem; margin-top: -4.5rem;
@ -77,33 +77,44 @@ a[name]:not([href])::before {
} }
@media (min-width: 576px) { @media (min-width: 576px) {
a[name]:not([href])::before { div[role="document"] > section::before {
height: 4.75rem; height: 4.75rem;
margin-top: -4.75rem; margin-top: -4.75rem;
} }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
a[name]:not([href])::before { div[role="document"] > section::before {
height: 5rem; height: 5rem;
margin-top: -5rem; margin-top: -5rem;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
a[name]:not([href])::before { div[role="document"] > section::before {
height: 5.25rem; height: 5.25rem;
margin-top: -5.25rem; margin-top: -5.25rem;
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
a[name]:not([href])::before { div[role="document"] > section::before {
height: 5.5rem; height: 5.5rem;
margin-top: -5.5rem; margin-top: -5.5rem;
} }
} }
div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block;
width: 1rem;
height: 1rem;
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='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
}
/** /**
* Docs: Aside * Docs: Aside
*/ */
@ -158,12 +169,17 @@ main > aside details {
main > aside details summary { main > aside details summary {
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
color: var(--h3);
} }
main > aside details summary::after { main > aside details summary::after {
display: none; display: none;
} }
main > aside details[open] summary {
color: var(--h3);
}
[role=document] section > h1, [role=document] section > h1,
[role=document] section > h2, [role=document] section > h2,
[role=document] section > h3 { [role=document] section > h3 {
@ -173,6 +189,10 @@ main > aside details summary::after {
/** /**
* Docs: Documentation * Docs: Documentation
*/ */
#themes button i {
font-style: normal;
}
#customization figure { #customization figure {
display: grid; display: grid;
grid-template-columns: repeat(9, 1fr); grid-template-columns: repeat(9, 1fr);
@ -229,9 +249,17 @@ main > aside details summary::after {
} }
#grids button { #grids button {
display: inline-block; display: block;
width: auto; width: 100%;
margin-right: .5rem; margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
#grids button {
display: inline-block;
width: auto;
margin-right: .5rem;
}
} }
#grids button svg { #grids button svg {
@ -248,6 +276,10 @@ main > aside details summary::after {
text-align: center; text-align: center;
} }
#grids details {
margin-top: 3rem;
}
/** /**
* Docs: Typography * Docs: Typography
*/ */
@ -386,7 +418,7 @@ body > nav ul:first-of-type li:first-of-type a {
body > nav ul:first-of-type li:nth-of-type(2) { body > nav ul:first-of-type li:nth-of-type(2) {
display: none; display: none;
margin-left: 1rem; margin-left: 1rem;
color: var(--muted-text); color: var(--h1);
} }
@media (min-width: 992px) { @media (min-width: 992px) {

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

File diff suppressed because one or more lines are too long

77
docs/index.html
View file

@ -28,7 +28,7 @@
<li><a href="#" class="secondary">Examples</a></li> <li><a href="#" class="secondary">Examples</a></li>
<li><a href="#docs" class="secondary">Docs</a></li> <li><a href="#docs" class="secondary">Docs</a></li>
<li> <li>
<a href="https://github.com/picocss/pico" class="secondary" aria-label="Pico GitHub repository"> <a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="1rem"> <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="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> <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> </svg>
@ -106,7 +106,10 @@
</hgroup> </hgroup>
<p>1. Download Pico:</p> <p>1. Download Pico:</p>
<p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p> <p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p>
<p>2. Link the CSS <small>(~5KB minified and gzipped)</small>:</p> <p>
2. Link the CSS:<br>
<small>(~5KB minified and gzipped)</small>
</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<p>Starter template:</p> <p>Starter template:</p>
@ -124,6 +127,7 @@
&lt;/<b>main</b>&gt; &lt;/<b>main</b>&gt;
&lt;/<b>body</b>&gt; &lt;/<b>body</b>&gt;
&lt;/<b>html</b>&gt;</code></pre> &lt;/<b>html</b>&gt;</code></pre>
</section><!-- ./ Docs: Start --> </section><!-- ./ Docs: Start -->
<!-- Docs: Themes --> <!-- Docs: Themes -->
@ -133,6 +137,9 @@
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3> <h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
</hgroup> </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>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>
<article>
<button class="contrast theme-switcher">...</button>
</article>
<p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code>.</p> <p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code>.</p>
<article data-theme="light"> <article data-theme="light">
<h4>Light theme</h4> <h4>Light theme</h4>
@ -254,10 +261,10 @@
<section id="classless"> <section id="classless">
<hgroup> <hgroup>
<h2>Class-less version</h2> <h2>Class-less version</h2>
<h3>For wild HTML purists! 😈</h3> <h3>For wild HTML purists!</h3>
</hgroup> </hgroup>
<p>Pico provide a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">Example</a>).</p> <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>Obviously this version do not include <code>.container</code>, <code>.container-fluid</code>, <code>.grid</code>, <code>.secondary</code>, <code>.contrast</code> and <code>.outline</code>.</p>
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p> <p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p><strong>Usage:</strong></p> <p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p> <p>Use the default <code>.classless</code> version if you need centered viewports:</p>
@ -344,6 +351,22 @@
</article> </article>
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p> <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
<details>
<summary>
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
&nbsp;More about grids
</summary>
<p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
<p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be +140% of the whole Pico library size. Not really in the <em>Pico spirit</em>.</p>
<p>If you need a quick way to prototyping or build a complex layouts, you can look about <strong>Flexbox grid layouts</strong>. For example: <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="https://grid.layoutit.com/">Flexbox Grid</a>.</p>
<p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="https://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
<p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
</details>
</section><!-- ./ Docs: Grid --> </section><!-- ./ Docs: Grid -->
<!-- Docs: Horizontal scroller --> <!-- Docs: Horizontal scroller -->
@ -542,6 +565,17 @@
</div> </div>
</div> </div>
</article> </article>
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
<article>
<a href="#">Primary</a><br>
<a href="#"class="secondary">Secondary</a><br>
<a href="#"class="contrast">Contrast</a><br>
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
</article>
</section><!-- ./ Docs: Typography --> </section><!-- ./ Docs: Typography -->
<!-- Docs: Button --> <!-- Docs: Button -->
@ -567,30 +601,25 @@
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre> &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>&gt;Link&lt;/<b>a</b>&gt;</code></pre>
</article> </article>
<p>Buttons come with a <code>.secondary</code> neutral style.</p> <p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
<article> <article>
<a href="#" role="button" class="secondary">Link</a> <a href="#" role="button" class="secondary">Secondary</a>
<button class="secondary" aria-label="Example button">Button</button> <a href="#" role="button" class="contrast">Contrast</a>
<input type="submit" class="secondary">
<input type="reset">
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Link&lt;/<b>a</b>&gt; <pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>button</b>&gt;Button&lt;/<b>button</b> <i>class</i>=<u>"secondary"</u>&gt; &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
&lt;<b>input</b> <i>type</i>=<u>"submit"</u> <i>class</i>=<u>"secondary"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"reset"</u>&gt;</code></pre>
</article> </article>
<p>Also includes the classic <code>.outline</code> style.</p> <p>And a classic <code>.outline</code> variant.</p>
<article> <article>
<a href="#" role="button" class="outline">Link</a> <a href="#" role="button" class="outline">Primary</a>
<a href="#" role="button" class="outline secondary">Link</a> <a href="#" role="button" class="secondary outline">Secondary</a>
<button class="outline" aria-label="Example button">Button</button> <a href="#" role="button" class="contrast outline">Contrast</a>
<button class="outline secondary" aria-label="Example button">Button</button>
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>&gt;Primary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>&gt;Secondary&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>&gt;Contrast&lt;/<b>a</b>&gt;</code></pre>
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>&gt;Link&lt;/<b>a</b>&gt;
&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline secondary"</u>&gt;Link&lt;/<b>a</b>&gt;
&lt;<b>button</b> <i>class</i>=<u>"outline"</u>&gt;Button&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>class</i>=<u>"outline secondary"</u>&gt;Button&lt;/<b>button</b>&gt;</code></pre>
</article> </article>
</section><!-- ./ Docs: Button --> </section><!-- ./ Docs: Button -->
@ -773,7 +802,7 @@
<summary>Collapsible elements 1</summary> <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> <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>
<details> <details open>
<summary>Collapsible elements 2</summary> <summary>Collapsible elements 2</summary>
<ul> <ul>
<li>Vestibulum id elit quis massa interdum sodales.</li> <li>Vestibulum id elit quis massa interdum sodales.</li>
@ -961,7 +990,7 @@
<!-- Footer --> <!-- Footer -->
<footer> <footer>
<p><small>Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="http://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p> <p><small>Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p>
</footer><!-- ./ Footer --> </footer><!-- ./ Footer -->
</div><!-- ./ Document --> </div><!-- ./ Document -->

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

File diff suppressed because one or more lines are too long

26
docs/js/src/theme-switcher.js
View file

@ -14,12 +14,12 @@
var switcher = { var switcher = {
button: { button: {
element: 'BUTTON', element: 'BUTTON',
class: 'secondary switcher', class: 'contrast switcher theme-switcher',
on: '<i>Turn on dark mode</i>', on: '<i>Turn on dark mode</i>',
off: '<i>Turn off dark mode</i>' off: '<i>Turn off dark mode</i>'
}, },
target: 'body', // Button append in target target: 'body', // Button append in target
selector: 'button.switcher', // Button selector in Dom selector: 'button.theme-switcher', // Button selector in Dom
currentTheme: systemColorScheme() currentTheme: systemColorScheme()
}; };
@ -65,17 +65,21 @@
setTheme(switcher.currentTheme); setTheme(switcher.currentTheme);
// Click Listener on Switcher // Click Listener on Switcher
document.querySelector(switcher.selector).addEventListener('click', function() { var switchers = document.querySelectorAll(switcher.selector);
console.log(switchers);
for (var i = 0; i < switchers.length; i++) {
switchers[i].addEventListener('click', function(event) {
// Switch Theme // Switch Theme
if (switcher.currentTheme == 'light') { if (switcher.currentTheme == 'light') {
setTheme('dark'); setTheme('dark');
} }
else { else {
setTheme('light'); setTheme('light');
} }
}, false);
}, false);
}
} }

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

@ -35,7 +35,7 @@ body > nav {
&:nth-of-type(2) { &:nth-of-type(2) {
display: none; display: none;
margin-left: $spacing-gutter; margin-left: $spacing-gutter;
color: var(--muted-text); color: var(--h1);
@media (min-width: map-get($breakpoints, "lg")) { @media (min-width: map-get($breakpoints, "lg")) {
display: inline; display: inline;

17
docs/scss/layout/_aside.scss
View file

@ -51,14 +51,19 @@ main > aside {
details { details {
padding-bottom: .25rem; padding-bottom: .25rem;
border-bottom: none; border-bottom: none;
}
details summary { summary {
font-weight: 300; font-weight: 300;
text-transform: uppercase; text-transform: uppercase;
color: var(--h3);
&::after { &::after {
display: none; display: none;
}
}
&[open] summary {
color: var(--h3);
} }
} }
} }

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

@ -2,6 +2,15 @@
* Docs: Documentation * Docs: Documentation
*/ */
// Docs: Themes
// ––––––––––––––––––––
#themes {
button i {
font-style: normal;
}
}
// Docs: Customization // Docs: Customization
// –––––––––––––––––––– // ––––––––––––––––––––
@ -73,9 +82,15 @@
#grids { #grids {
button { button {
display: inline-block; display: block;
width: auto; width: 100%;
margin-right: .5rem; margin-bottom: $spacing-typography/2;
@media (min-width: map-get($breakpoints, "sm")) {
display: inline-block;
width: auto;
margin-right: .5rem;
}
svg { svg {
stroke: var(--secondary); stroke: var(--secondary);
@ -91,4 +106,8 @@
background: var(--code-background); background: var(--code-background);
text-align: center; text-align: center;
} }
details {
margin-top: $spacing-typography*2;
}
} }

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

@ -35,7 +35,7 @@ body > main {
// Anchors hacks for internal links // Anchors hacks for internal links
// –––––––––––––––––––– // ––––––––––––––––––––
a[name]:not([href])::before { div[role="document"] > section::before {
display: block; display: block;
height: map-get($spacing-factor, "xs") + $navHeight; height: map-get($spacing-factor, "xs") + $navHeight;
margin-top: -(map-get($spacing-factor, "xs")+ $navHeight); margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
@ -62,3 +62,20 @@ a[name]:not([href])::before {
margin-top: -(map-get($spacing-factor, "xl") + $navHeight); margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
} }
} }
// External links
// ––––––––––––––––––––
div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block;
width: 1rem;
height: 1rem;
// Source: https://feathericons.com/
$caret-icon-color: "808080"; // Without '#' !important
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='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
}

2
scss/_variables.scss
View file

@ -4,7 +4,7 @@
// Enable <header>, <main>, <footer> inside <body> as a container // Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: false !default; $enable-semantic-container: false !default;
// Enable ".container" as a container // Enable .container and .container-fluid
$enable-class-container: true !default; $enable-class-container: true !default;
// Enable a centered viewport // Enable a centered viewport

6
scss/components/_nav.scss
View file

@ -48,6 +48,12 @@ nav {
&:focus { &:focus {
text-decoration: none; text-decoration: none;
} }
@if $enable-classes {
&.contrast:not([role="button"]) {
box-shadow: none;
}
}
} }
} }

8
scss/components/_tooltip.scss
View file

@ -22,8 +22,8 @@
overflow: hidden; overflow: hidden;
transform: translate(-50%, -.25rem); transform: translate(-50%, -.25rem);
border-radius: $round; border-radius: $round;
background: var(--secondary); background: var(--contrast);
color: var(--secondary-inverse); color: var(--contrast-inverse);
font-size: .85rem; font-size: .85rem;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
@ -33,9 +33,9 @@
content: attr(data-tooltip); content: attr(data-tooltip);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity $transition;
} }
// Caret
&::after { &::after {
padding: 0; padding: 0;
transform: translate(-50%, 0rem); transform: translate(-50%, 0rem);
@ -44,7 +44,7 @@
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
color: var(--secondary); color: var(--contrast);
content: ''; content: '';
} }

111
scss/content/_button-styles.scss Normal file
View file

@ -0,0 +1,111 @@
@if $enable-classes {
/**
* Button Styles
*/
// Button .secondary
button.secondary,
input.secondary[type="submit"],
input[type="reset"],
a.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
background-color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
// Button .contrast
button.contrast,
input.contrast[type="submit"],
input.contrast[type="reset"],
a.contrast[role="button"] {
border: 1px solid var(--contrast);
background-color: var(--contrast);
color: var(--contrast-inverse);
&:hover,
&:active,
&:focus {
border: 1px solid var(--contrast-hover);
background-color: var(--contrast-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
}
// Button .outline
button.outline,
input.outline[type="submit"],
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
color: var(--primary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover);
color: var(--primary-hover);
}
}
// Button .outline.secondary
button.outline.secondary,
input.outline.secondary[type="submit"],
input.outline[type="reset"],
a.outline.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: transparent;
color: var(--secondary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
// Button .outline.contrast
button.outline.contrast,
input.outline.contrast[type="submit"],
input.outline.contrast[type="reset"],
a.outline.contrast[role="button"] {
border: 1px solid var(--contrast);
background-color: transparent;
color: var(--contrast);
&:hover,
&:active,
&:focus {
border: 1px solid var(--contrast-hover);
color: var(--contrast-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--contrast-focus);
}
}
}

65
scss/content/_button.scss
View file

@ -94,71 +94,6 @@ input[type="reset"] {
cursor: pointer; cursor: pointer;
} }
// Button .secondary
@if $enable-classes {
button.secondary,
input.secondary[type="submit"],
input[type="reset"],
a.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: var(--secondary);
color: var(--secondary-inverse);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
background-color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
}
// Button .outline
@if $enable-classes {
button.outline,
input.outline[type="submit"],
a.outline[role="button"] {
border: 1px solid var(--primary);
background-color: transparent;
color: var(--primary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--primary-hover);
color: var(--primary-hover);
}
}
}
// Button .outline.secondary
@if $enable-classes {
button.outline.secondary,
input.outline.secondary[type="submit"],
input.outline[type="reset"],
a.outline.secondary[role="button"] {
border: 1px solid var(--secondary);
background-color: transparent;
color: var(--secondary);
&:hover,
&:active,
&:focus {
border: 1px solid var(--secondary-hover);
color: var(--secondary-hover);
}
&:focus {
box-shadow: 0 0 0 0.2rem var(--secondary-focus);
}
}
}
// Button [disabled] // Button [disabled]
button, button,
input[type="submit"], input[type="submit"],

22
scss/content/_typography.scss
View file

@ -103,6 +103,24 @@ a {
} }
} }
// Link .contrast
@if $enable-classes {
a.contrast:not([role="button"]) {
box-shadow: inset 0 -.33rem 0 var(--contrast-border);
color: var(--contrast);
&:hover,
&:active,
&:focus {
color: var(--contrast-hover);
}
&:focus {
background-color: var(--contrast-focus);
}
}
}
// Headings // Headings
// Because vertical margins can collapse, we avoid `margin-top` // Because vertical margins can collapse, we avoid `margin-top`
h1, h1,
@ -191,7 +209,7 @@ hgroup {
h6{ h6{
margin-bottom: 0; margin-bottom: 0;
} }
*:last-child { > *:last-child {
color: var(--muted-text); color: var(--muted-text);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: normal; font-weight: normal;
@ -248,7 +266,7 @@ ul li {
mark { mark {
padding: .125rem .25rem; padding: .125rem .25rem;
background: var(--mark); background: var(--mark);
color: var(--text); color: var(--mark-text);
vertical-align: middle; vertical-align: middle;
} }

4
scss/layout/_scroller.scss
View file

@ -13,7 +13,7 @@ figure {
figcaption { figcaption {
color: var(--muted-text); color: var(--muted-text);
font-size: 87.5%; font-size: 87.5%;
padding: 0 $spacing-gutter ; padding: ($spacing-gutter/2) $spacing-gutter;
} }
@if map-get($breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@ -22,7 +22,7 @@ figure {
margin-left: 0; margin-left: 0;
figcaption { figcaption {
padding: 0; padding: ($spacing-gutter/2) 0;
} }
} }
} }

1
scss/pico.scss
View file

@ -23,6 +23,7 @@
@import "content/typography"; // a, headings, p, ul, blockquote ... @import "content/typography"; // a, headings, p, ul, blockquote ...
@import "content/form"; // label, input, select, ... @import "content/form"; // label, input, select, ...
@import "content/button"; // button, a[role=button], ... @import "content/button"; // button, a[role=button], ...
@import "content/button-styles"; // .secondary, .contrast, .outline
@import "content/table"; // table, tr, td, ... @import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ... @import "content/code"; // pre, code, ...
@import "content/miscs"; // hr, progress, template, [hidden] @import "content/miscs"; // hr, progress, template, [hidden]

50
scss/themes/_dark.scss
View file

@ -17,19 +17,28 @@
--h4: #{$grey-300}; --h4: #{$grey-300};
--h5: #{$grey-400}; --h5: #{$grey-400};
--h6: #{$grey-500}; --h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action // Primary Call-to-Action and links
--primary: #{$primary-600}; --primary: #{$primary-600};
--primary-hover: #{$primary-500}; --primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)}; --primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white}; --primary-inverse: #{$white};
// Secondary Call-to-Action @if $enable-classes {
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50}; // Secondary Call-to-Action and links
--secondary-focus: #{rgba($grey-200, .25)}; --secondary: #{$grey-600};
--secondary-inverse: #{$grey-900}; --secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-100};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-border: #{rgba($amber-200, .33)}; // For links
--contrast-inverse: #{darken($grey-900, 6%)};
}
// Form elements // Form elements
--input-background: #{darken($grey-900, 6%)}; --input-background: #{darken($grey-900, 6%)};
@ -38,6 +47,8 @@
// Utilities states // Utilities states
--valid: #{$green-700}; --valid: #{$green-700};
--invalid: #{$red-900}; --invalid: #{$red-900};
--mark: #{rgba($amber-200, .5)};
--mark-text: #{$white};
--muted-text: #{$grey-500)}; --muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)}; --muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)}; --muted-border: #{mix($grey-800, $grey-900)};
@ -79,19 +90,28 @@
--h4: #{$grey-300}; --h4: #{$grey-300};
--h5: #{$grey-400}; --h5: #{$grey-400};
--h6: #{$grey-500}; --h6: #{$grey-500};
--mark: #{rgba($amber-200, .25)};
// Call-to-Action // Primary Call-to-Action and links
--primary: #{$primary-600}; --primary: #{$primary-600};
--primary-hover: #{$primary-500}; --primary-hover: #{$primary-500};
--primary-focus: #{rgba($primary-600, .25)}; --primary-focus: #{rgba($primary-600, .25)};
--primary-inverse: #{$white}; --primary-inverse: #{$white};
// Secondary Call-to-Action @if $enable-classes {
--secondary: #{$grey-200};
--secondary-hover: #{$grey-50}; // Secondary Call-to-Action and links
--secondary-focus: #{rgba($grey-200, .25)}; --secondary: #{$grey-600};
--secondary-inverse: #{$grey-900}; --secondary-hover: #{$grey-500};
--secondary-focus: #{rgba($grey-600, .25)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-100};
--contrast-hover: #{$white};
--contrast-focus: #{rgba($grey-600, .25)};
--contrast-border: #{rgba($amber-200, .33)}; // For links
--contrast-inverse: #{darken($grey-900, 6%)};
}
// Form elements // Form elements
--input-background: #{darken($grey-900, 6%)}; --input-background: #{darken($grey-900, 6%)};
@ -100,6 +120,8 @@
// Utilities states // Utilities states
--valid: #{$green-700}; --valid: #{$green-700};
--invalid: #{$red-900}; --invalid: #{$red-900};
--mark: #{rgba($amber-200, .5)};
--mark-text: #{$white};
--muted-text: #{$grey-500)}; --muted-text: #{$grey-500)};
--muted-background: #{darken($grey-900, 6%)}; --muted-background: #{darken($grey-900, 6%)};
--muted-border: #{mix($grey-800, $grey-900)}; --muted-border: #{mix($grey-800, $grey-900)};

25
scss/themes/_light.scss
View file

@ -17,19 +17,28 @@
--h4: #{$grey-600}; --h4: #{$grey-600};
--h5: #{$grey-500}; --h5: #{$grey-500};
--h6: #{$grey-400}; --h6: #{$grey-400};
--mark: #{rgba($amber-200, .5)};
// Primary Call-to-Action // Primary Call-to-Action and links
--primary: #{$primary-600}; --primary: #{$primary-600};
--primary-hover: #{$primary-700}; --primary-hover: #{$primary-700};
--primary-focus: #{rgba($primary-600, .125)}; --primary-focus: #{rgba($primary-600, .125)};
--primary-inverse: #{$white}; --primary-inverse: #{$white};
// Secondary Call-to-Action @if $enable-classes {
--secondary: #{mix($grey-700, $grey-800)};
--secondary-hover: #{mix($grey-800, $grey-900)}; // Secondary Call-to-Action and links
--secondary-focus: #{rgba(mix($grey-700, $grey-800), .125)}; --secondary: #{$grey-500};
--secondary-inverse: #{$white}; --secondary-hover: #{$grey-700};
--secondary-focus: #{rgba($grey-500, .125)};
--secondary-inverse: #{$white};
// Contrast Call-to-Action and Tooltips
--contrast: #{$grey-800};
--contrast-hover: #{mix($grey-900, $black)};
--contrast-focus: #{rgba($grey-500, .125)};
--contrast-border: #{rgba($amber-200, .5)}; // For links
--contrast-inverse: #{$white};
}
// Form elements // Form elements
--input-background: #{$white}; --input-background: #{$white};
@ -38,6 +47,8 @@
// Utilities states // Utilities states
--valid: #{$green-600}; --valid: #{$green-600};
--invalid: #{$red-700}; --invalid: #{$red-700};
--mark: #{rgba($amber-200, .5)};
--mark-text: #{$grey-800};
--muted-text: #{mix($grey-400, $grey-500)}; --muted-text: #{mix($grey-400, $grey-500)};
--muted-background: #{$grey-50}; --muted-background: #{$grey-50};
--muted-border: #{$grey-50}; --muted-border: #{$grey-50};