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

Add scripts to build and watch files

Browse source
This commit is contained in:
Lucas Larroche 2021-09-12 10:58:05 +07:00
parent 2986278b15
commit 8e028956e9
23 changed files with 13439 additions and 1660 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.browserslistrc Normal file
View file

@ -0,0 +1,3 @@
>= 0.5%
last 2 major versions
not dead

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
node_modules/
*.DS_Store
TODO.md
prepros.config

698
css/pico.classless.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because one or more lines are too long

876
css/pico.css
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

491
css/pico.slim.css
View file

@ -26,25 +26,21 @@
--form-element-spacing-horizontal: 1rem;
--transition: .2s ease-in-out;
}
@media (min-width: 576px) {
:root {
--font-size: 17px;
}
}
@media (min-width: 768px) {
:root {
--font-size: 18px;
}
}
@media (min-width: 992px) {
:root {
--font-size: 19px;
}
}
@media (min-width: 1200px) {
:root {
--font-size: 20px;
@ -54,7 +50,6 @@
a {
--text-decoration: none;
}
a.secondary, a.contrast {
--text-decoration: underline;
}
@ -97,12 +92,12 @@ h5 {
--typography-spacing-vertical: 1.6875rem;
}
[type="checkbox"],
[type="radio"] {
[type=checkbox],
[type=radio] {
--border-width: 2px;
}
[type="checkbox"][role="switch"] {
[type=checkbox][role=switch] {
--border-width: 3px;
}
@ -126,13 +121,13 @@ kbd {
--font-weight: bolder;
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
[data-theme=light],
:root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #FFF;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #23333e;
--h2-color: #24333e;
--h3-color: #2c3d49;
--h4-color: #374956;
--h5-color: #415462;
@ -152,7 +147,7 @@ kbd {
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--mark-background-color: #fff2ca;
--mark-color: #543a25;
--mark-color: #543a26;
--ins-color: #388E3C;
--del-color: #C62828;
--blockquote-border-color: var(--muted-border-color);
@ -198,33 +193,33 @@ kbd {
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fafbfc;
--card-sectionning-background-color: #fbfbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme=light]) {
color-scheme: dark;
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--h2-color: #e1e6ea;
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h6-color: #aebbc3;
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-border-color: #1f2d38;
--primary: #1095c1;
@ -239,7 +234,7 @@ kbd {
--contrast-hover: #FFF;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d0c284;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
@ -264,7 +259,7 @@ kbd {
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #23333e;
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
@ -272,7 +267,7 @@ kbd {
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #17232c;
--code-background-color: #18232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
@ -284,36 +279,35 @@ kbd {
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e25;
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
}
[data-theme="dark"] {
[data-theme=dark] {
color-scheme: dark;
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--h2-color: #e1e6ea;
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h6-color: #aebbc3;
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-border-color: #1f2d38;
--primary: #1095c1;
@ -328,7 +322,7 @@ kbd {
--contrast-hover: #FFF;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d0c284;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
@ -353,7 +347,7 @@ kbd {
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #23333e;
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
@ -361,7 +355,7 @@ kbd {
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #17232c;
--code-background-color: #18232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
@ -373,23 +367,23 @@ kbd {
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e25;
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
/**
@ -435,7 +429,6 @@ body {
width: 100%;
margin: 0;
}
body > header,
body > main,
body > footer {
@ -464,19 +457,16 @@ body > footer {
padding-left: 0;
}
}
@media (min-width: 768px) {
.container {
max-width: 700px;
}
}
@media (min-width: 992px) {
.container {
max-width: 920px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1130px;
@ -502,13 +492,11 @@ section {
grid-template-columns: 1fr;
margin: 0;
}
@media (min-width: 992px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
.grid > * {
min-width: 0;
}
@ -522,9 +510,8 @@ figure {
padding: 0;
overflow-x: auto;
}
figure figcaption {
padding: calc(var(--spacing) / 2) 0;
padding: calc(var(--spacing) * 0.5) 0;
color: var(--muted-color);
}
@ -539,7 +526,7 @@ strong {
sub,
sup {
position: relative;
font-size: .75em;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
@ -591,38 +578,31 @@ a {
outline: none;
background-color: var(--background-color);
color: var(--color);
text-decoration: var(--text-decoration);
-webkit-text-decoration: var(--text-decoration);
text-decoration: var(--text-decoration);
}
a:hover, a:active, a:focus {
--color: var(--primary-hover);
--text-decoration: underline;
}
a:focus {
--background-color: var(--primary-focus);
}
a.secondary {
--color: var(--secondary);
}
a.secondary:hover, a.secondary:active, a.secondary:focus {
--color: var(--secondary-hover);
}
a.secondary:focus {
--background-color: var(--secondary-focus);
}
a.contrast {
--color: var(--contrast);
}
a.contrast:hover, a.contrast:active, a.contrast:focus {
--color: var(--contrast-hover);
}
a.contrast:focus {
--background-color: var(--contrast-focus);
}
@ -665,12 +645,7 @@ h6 {
--color: var(--h6-color);
}
address ~ h1,
address ~ h2,
address ~ h3,
address ~ h4,
address ~ h5,
address ~ h6,
address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6,
blockquote ~ h1,
blockquote ~ h2,
blockquote ~ h3,
@ -731,11 +706,9 @@ ul ~ h6 {
hgroup {
margin-bottom: var(--typography-spacing-vertical);
}
hgroup > * {
margin-bottom: 0;
}
hgroup > *:last-child {
--color: var(--muted-color);
--font-weight: unset;
@ -755,10 +728,9 @@ ul,
ol {
padding-left: var(--spacing);
}
ul li,
ol li {
margin-bottom: calc(var(--typography-spacing-vertical) / 4);
margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}
ul li {
@ -766,7 +738,7 @@ ul li {
}
mark {
padding: .125rem .25rem;
padding: 0.125rem 0.25rem;
background-color: var(--mark-background-color);
color: var(--mark-color);
vertical-align: middle;
@ -778,9 +750,8 @@ blockquote {
padding: var(--spacing);
border-left: 0.25rem solid var(--blockquote-border-color);
}
blockquote footer {
margin-top: calc(var(--typography-spacing-vertical) / 2);
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
color: var(--blockquote-footer-color);
}
@ -799,6 +770,10 @@ del {
color: var(--del-color);
}
::-moz-selection {
background-color: var(--primary-focus);
}
::selection {
background-color: var(--primary-focus);
}
@ -854,16 +829,16 @@ button {
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
padding: 0;
border-style: none;
}
@ -874,16 +849,16 @@ button {
margin-bottom: var(--spacing);
}
a[role="button"] {
a[role=button] {
display: inline-block;
text-decoration: none;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a[role="button"] {
input[type=submit],
input[type=button],
input[type=reset],
a[role=button] {
--background-color: var(--primary);
--border-color: var(--primary);
--color: var(--primary-inverse);
@ -901,200 +876,185 @@ a[role="button"] {
text-align: center;
cursor: pointer;
}
button:hover, button:active, button:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus,
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus {
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=button]:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:focus,
a[role=button]:hover,
a[role=button]:active,
a[role=button]:focus {
--background-color: var(--primary-hover);
--border-color: var(--primary-hover);
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
}
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
a[role="button"]:focus {
input[type=submit]:focus,
input[type=button]:focus,
input[type=reset]:focus,
a[role=button]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus);
}
input[type="reset"] {
input[type=reset] {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus {
input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
input[type="reset"]:focus {
input[type=reset]:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
}
button.secondary,
input[type="submit"].secondary,
input[type="button"].secondary,
input[type="reset"].secondary,
a[role="button"].secondary {
input[type=submit].secondary,
input[type=button].secondary,
input[type=reset].secondary,
a[role=button].secondary {
--background-color: var(--secondary);
--border-color: var(--secondary);
--color: var(--secondary-inverse);
cursor: pointer;
}
button.secondary:hover, button.secondary:active, button.secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:active,
input[type="submit"].secondary:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:active,
input[type="button"].secondary:focus,
input[type="reset"].secondary:hover,
input[type="reset"].secondary:active,
input[type="reset"].secondary:focus,
a[role="button"].secondary:hover,
a[role="button"].secondary:active,
a[role="button"].secondary:focus {
input[type=submit].secondary:hover,
input[type=submit].secondary:active,
input[type=submit].secondary:focus,
input[type=button].secondary:hover,
input[type=button].secondary:active,
input[type=button].secondary:focus,
input[type=reset].secondary:hover,
input[type=reset].secondary:active,
input[type=reset].secondary:focus,
a[role=button].secondary:hover,
a[role=button].secondary:active,
a[role=button].secondary:focus {
--background-color: var(--secondary-hover);
--border-color: var(--secondary-hover);
}
button.secondary:focus,
input[type="submit"].secondary:focus,
input[type="button"].secondary:focus,
input[type="reset"].secondary:focus,
a[role="button"].secondary:focus {
input[type=submit].secondary:focus,
input[type=button].secondary:focus,
input[type=reset].secondary:focus,
a[role=button].secondary:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus);
}
button.contrast,
input[type="submit"].contrast,
input[type="button"].contrast,
input[type="reset"].contrast,
a[role="button"].contrast {
input[type=submit].contrast,
input[type=button].contrast,
input[type=reset].contrast,
a[role=button].contrast {
--background-color: var(--contrast);
--border-color: var(--contrast);
--color: var(--contrast-inverse);
}
button.contrast:hover, button.contrast:active, button.contrast:focus,
input[type="submit"].contrast:hover,
input[type="submit"].contrast:active,
input[type="submit"].contrast:focus,
input[type="button"].contrast:hover,
input[type="button"].contrast:active,
input[type="button"].contrast:focus,
input[type="reset"].contrast:hover,
input[type="reset"].contrast:active,
input[type="reset"].contrast:focus,
a[role="button"].contrast:hover,
a[role="button"].contrast:active,
a[role="button"].contrast:focus {
input[type=submit].contrast:hover,
input[type=submit].contrast:active,
input[type=submit].contrast:focus,
input[type=button].contrast:hover,
input[type=button].contrast:active,
input[type=button].contrast:focus,
input[type=reset].contrast:hover,
input[type=reset].contrast:active,
input[type=reset].contrast:focus,
a[role=button].contrast:hover,
a[role=button].contrast:active,
a[role=button].contrast:focus {
--background-color: var(--contrast-hover);
--border-color: var(--contrast-hover);
}
button.contrast:focus,
input[type="submit"].contrast:focus,
input[type="button"].contrast:focus,
input[type="reset"].contrast:focus,
a[role="button"].contrast:focus {
input[type=submit].contrast:focus,
input[type=button].contrast:focus,
input[type=reset].contrast:focus,
a[role=button].contrast:focus {
--box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus);
}
button.outline,
input[type="submit"].outline,
input[type="button"].outline,
input[type="reset"].outline,
a[role="button"].outline {
input[type=submit].outline,
input[type=button].outline,
input[type=reset].outline,
a[role=button].outline {
--background-color: transparent;
--color: var(--primary);
}
button.outline:hover, button.outline:active, button.outline:focus,
input[type="submit"].outline:hover,
input[type="submit"].outline:active,
input[type="submit"].outline:focus,
input[type="button"].outline:hover,
input[type="button"].outline:active,
input[type="button"].outline:focus,
input[type="reset"].outline:hover,
input[type="reset"].outline:active,
input[type="reset"].outline:focus,
a[role="button"].outline:hover,
a[role="button"].outline:active,
a[role="button"].outline:focus {
input[type=submit].outline:hover,
input[type=submit].outline:active,
input[type=submit].outline:focus,
input[type=button].outline:hover,
input[type=button].outline:active,
input[type=button].outline:focus,
input[type=reset].outline:hover,
input[type=reset].outline:active,
input[type=reset].outline:focus,
a[role=button].outline:hover,
a[role=button].outline:active,
a[role=button].outline:focus {
--background-color: transparent;
--color: var(--primary-hover);
}
button.outline.secondary,
input[type="submit"].outline.secondary,
input[type="button"].outline.secondary,
input[type="reset"].outline.secondary,
a[role="button"].outline.secondary {
input[type=submit].outline.secondary,
input[type=button].outline.secondary,
input[type=reset].outline.secondary,
a[role=button].outline.secondary {
--color: var(--secondary);
}
button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
input[type="submit"].outline.secondary:hover,
input[type="submit"].outline.secondary:active,
input[type="submit"].outline.secondary:focus,
input[type="button"].outline.secondary:hover,
input[type="button"].outline.secondary:active,
input[type="button"].outline.secondary:focus,
input[type="reset"].outline.secondary:hover,
input[type="reset"].outline.secondary:active,
input[type="reset"].outline.secondary:focus,
a[role="button"].outline.secondary:hover,
a[role="button"].outline.secondary:active,
a[role="button"].outline.secondary:focus {
input[type=submit].outline.secondary:hover,
input[type=submit].outline.secondary:active,
input[type=submit].outline.secondary:focus,
input[type=button].outline.secondary:hover,
input[type=button].outline.secondary:active,
input[type=button].outline.secondary:focus,
input[type=reset].outline.secondary:hover,
input[type=reset].outline.secondary:active,
input[type=reset].outline.secondary:focus,
a[role=button].outline.secondary:hover,
a[role=button].outline.secondary:active,
a[role=button].outline.secondary:focus {
--color: var(--secondary-hover);
}
button.outline.contrast,
input[type="submit"].outline.contrast,
input[type="button"].outline.contrast,
input[type="reset"].outline.contrast,
a[role="button"].outline.contrast {
input[type=submit].outline.contrast,
input[type=button].outline.contrast,
input[type=reset].outline.contrast,
a[role=button].outline.contrast {
--color: var(--contrast);
}
button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
input[type="submit"].outline.contrast:hover,
input[type="submit"].outline.contrast:active,
input[type="submit"].outline.contrast:focus,
input[type="button"].outline.contrast:hover,
input[type="button"].outline.contrast:active,
input[type="button"].outline.contrast:focus,
input[type="reset"].outline.contrast:hover,
input[type="reset"].outline.contrast:active,
input[type="reset"].outline.contrast:focus,
a[role="button"].outline.contrast:hover,
a[role="button"].outline.contrast:active,
a[role="button"].outline.contrast:focus {
input[type=submit].outline.contrast:hover,
input[type=submit].outline.contrast:active,
input[type=submit].outline.contrast:focus,
input[type=button].outline.contrast:hover,
input[type=button].outline.contrast:active,
input[type=button].outline.contrast:focus,
input[type=reset].outline.contrast:hover,
input[type=reset].outline.contrast:active,
input[type=reset].outline.contrast:focus,
a[role=button].outline.contrast:hover,
a[role=button].outline.contrast:active,
a[role=button].outline.contrast:focus {
--color: var(--contrast-hover);
}
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
a[role="button"][disabled] {
opacity: .5;
input[type=submit][disabled],
input[type=button][disabled],
input[type=reset][disabled],
a[role=button][disabled] {
opacity: 0.5;
pointer-events: none;
}
@ -1131,8 +1091,8 @@ textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
[type=checkbox],
[type=radio] {
padding: 0;
}
@ -1141,12 +1101,12 @@ textarea {
height: auto;
}
[type="search"] {
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
@ -1172,14 +1132,14 @@ textarea {
display: none;
}
[type="file"],
[type="range"] {
[type=file],
[type=range] {
padding: 0;
border-width: 0;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2));
input:not([type=checkbox]):not([type=radio]):not([type=range]) {
height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2) );
}
fieldset {
@ -1192,18 +1152,18 @@ fieldset {
label,
fieldset legend {
display: block;
margin-bottom: calc(var(--spacing) / 4);
margin-bottom: calc(var(--spacing) * 0.25);
vertical-align: middle;
}
input:not([type="checkbox"]):not([type="radio"]),
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
display: block;
width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,
textarea {
-webkit-appearance: none;
@ -1229,7 +1189,7 @@ textarea {
font-weight: var(--font-weight);
}
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus,
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,
select:active,
select:focus,
textarea:active,
@ -1237,7 +1197,7 @@ textarea:focus {
--background-color: var(--form-element-active-background-color);
}
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus,
input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,
select:active,
select:focus,
textarea:active,
@ -1245,13 +1205,13 @@ textarea:focus {
--border-color: var(--form-element-active-border-color);
}
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus,
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,
select:focus,
textarea:focus {
--box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}
input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled],
input:not([type=submit]):not([type=button]):not([type=reset])[disabled],
select[disabled],
textarea[disabled] {
--background-color: var(--form-element-disabled-background-color);
@ -1263,38 +1223,34 @@ input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
padding-right: 2rem;
background-position: center right .75rem;
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
input[aria-invalid="false"],
select[aria-invalid="false"],
textarea[aria-invalid="false"] {
input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
--border-color: var(--form-element-valid-border-color);
background-image: var(--icon-valid);
}
input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus,
select[aria-invalid="false"]:active,
select[aria-invalid="false"]:focus,
textarea[aria-invalid="false"]:active,
textarea[aria-invalid="false"]:focus {
input[aria-invalid=false]:active, input[aria-invalid=false]:focus,
select[aria-invalid=false]:active,
select[aria-invalid=false]:focus,
textarea[aria-invalid=false]:active,
textarea[aria-invalid=false]:focus {
--border-color: var(--form-element-valid-active-border-color);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
input[aria-invalid=true],
select[aria-invalid=true],
textarea[aria-invalid=true] {
--border-color: var(--form-element-invalid-border-color);
background-image: var(--icon-invalid);
}
input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:active,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:active,
textarea[aria-invalid="true"]:focus {
input[aria-invalid=true]:active, input[aria-invalid=true]:focus,
select[aria-invalid=true]:active,
select[aria-invalid=true]:focus,
textarea[aria-invalid=true]:active,
textarea[aria-invalid=true]:focus {
--border-color: var(--form-element-invalid-active-border-color);
}
@ -1307,7 +1263,7 @@ select:invalid {
opacity: 1;
}
input:not([type="checkbox"]):not([type="radio"]),
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
margin-bottom: var(--spacing);
@ -1317,11 +1273,10 @@ select::-ms-expand {
border: 0;
background-color: transparent;
}
select:not([multiple]):not([size]) {
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
background-image: var(--icon-chevron);
background-position: center right .75rem;
background-position: center right 0.75rem;
background-repeat: no-repeat;
background-size: 1rem auto;
}
@ -1336,10 +1291,8 @@ textarea + small {
color: var(--muted-color);
}
label > input,
label > select,
label > textarea {
margin-top: calc(var(--spacing) / 4);
label > input, label > select, label > textarea {
margin-top: calc(var(--spacing) * 0.25);
}
/**
@ -1367,7 +1320,7 @@ tr {
background-color: var(--background-color);
}
table[role="grid"] tbody tr:nth-child(odd) {
table[role=grid] tbody tr:nth-child(odd) {
--background-color: var(--table-row-stripped-background-color);
}
@ -1378,16 +1331,16 @@ table[role="grid"] tbody tr:nth-child(odd) {
cursor: pointer;
}
[aria-disabled="true"],
[aria-disabled=true],
[disabled] {
cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
[aria-hidden=false][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
[aria-hidden=false][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}

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

File diff suppressed because one or more lines are too long

130
css/themes/default.css
View file

@ -19,25 +19,21 @@
--form-element-spacing-horizontal: 1rem;
--transition: .2s ease-in-out;
}
@media (min-width: 576px) {
:root {
--font-size: 17px;
}
}
@media (min-width: 768px) {
:root {
--font-size: 18px;
}
}
@media (min-width: 992px) {
:root {
--font-size: 19px;
}
}
@media (min-width: 1200px) {
:root {
--font-size: 20px;
@ -46,36 +42,33 @@
@media (min-width: 576px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 768px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3);
}
}
@media (min-width: 992px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 3.5);
}
}
@media (min-width: 1200px) {
body > header,
body > main,
body > footer,
section {
body > main,
body > footer,
section {
--block-spacing-vertical: calc(var(--spacing) * 4);
}
}
@ -85,19 +78,16 @@
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@media (min-width: 768px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 992px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
}
}
@media (min-width: 1200px) {
article {
--block-spacing-horizontal: calc(var(--spacing) * 2);
@ -107,7 +97,6 @@
a {
--text-decoration: none;
}
a.secondary, a.contrast {
--text-decoration: underline;
}
@ -150,12 +139,12 @@ h5 {
--typography-spacing-vertical: 1.6875rem;
}
[type="checkbox"],
[type="radio"] {
[type=checkbox],
[type=radio] {
--border-width: 2px;
}
[type="checkbox"][role="switch"] {
[type=checkbox][role=switch] {
--border-width: 3px;
}
@ -179,13 +168,13 @@ kbd {
--font-weight: bolder;
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
[data-theme=light],
:root:not([data-theme=dark]) {
color-scheme: light;
--background-color: #FFF;
--color: #415462;
--h1-color: #1b2832;
--h2-color: #23333e;
--h2-color: #24333e;
--h3-color: #2c3d49;
--h4-color: #374956;
--h5-color: #415462;
@ -205,7 +194,7 @@ kbd {
--contrast-focus: rgba(89, 107, 120, 0.125);
--contrast-inverse: #FFF;
--mark-background-color: #fff2ca;
--mark-color: #543a25;
--mark-color: #543a26;
--ins-color: #388E3C;
--del-color: #C62828;
--blockquote-border-color: var(--muted-border-color);
@ -251,33 +240,33 @@ kbd {
--card-background-color: var(--background-color);
--card-border-color: var(--muted-border-color);
--card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fafbfc;
--card-sectionning-background-color: #fbfbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme=light]) {
color-scheme: dark;
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--h2-color: #e1e6ea;
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h6-color: #aebbc3;
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-border-color: #1f2d38;
--primary: #1095c1;
@ -292,7 +281,7 @@ kbd {
--contrast-hover: #FFF;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d0c284;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
@ -317,7 +306,7 @@ kbd {
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #23333e;
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
@ -325,7 +314,7 @@ kbd {
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #17232c;
--code-background-color: #18232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
@ -337,36 +326,35 @@ kbd {
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e25;
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
}
[data-theme="dark"] {
[data-theme=dark] {
color-scheme: dark;
--background-color: #11191f;
--color: #bbc6ce;
--h1-color: #edf0f3;
--h2-color: #e1e6ea;
--h2-color: #e1e6eb;
--h3-color: #d5dce2;
--h4-color: #c8d1d8;
--h5-color: #bbc6ce;
--h6-color: #aebbc3;
--h6-color: #afbbc4;
--muted-color: #73828c;
--muted-border-color: #1f2d38;
--primary: #1095c1;
@ -381,7 +369,7 @@ kbd {
--contrast-hover: #FFF;
--contrast-focus: rgba(115, 130, 140, 0.25);
--contrast-inverse: #000;
--mark-background-color: #d0c284;
--mark-background-color: #d1c284;
--mark-color: #11191f;
--ins-color: #388E3C;
--del-color: #C62828;
@ -406,7 +394,7 @@ kbd {
--switch-background-color: #374956;
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
--range-border-color: #23333e;
--range-border-color: #24333e;
--range-active-border-color: #2c3d49;
--range-thumb-border-color: var(--background-color);
--range-thumb-color: var(--secondary);
@ -414,7 +402,7 @@ kbd {
--range-thumb-active-color: var(--primary);
--table-border-color: var(--muted-border-color);
--table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
--code-background-color: #17232c;
--code-background-color: #18232c;
--code-color: var(--muted-color);
--code-kbd-background-color: var(--contrast);
--code-kbd-color: var(--contrast-inverse);
@ -426,21 +414,21 @@ kbd {
--accordion-active-summary-color: var(--primary);
--accordion-close-summary-color: var(--color);
--accordion-open-summary-color: var(--muted-color);
--card-background-color: #141e25;
--card-background-color: #141e26;
--card-border-color: #11191f;
--card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--card-sectionning-background-color: #18232c;
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: 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='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-checkbox: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
--icon-minus: 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='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-valid: 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='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-invalid: 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='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

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

File diff suppressed because one or more lines are too long

129
docs/css/pico.docs.css
View file

@ -5,13 +5,13 @@
* Theme: Additions for docs
*/
:root {
--icon-external: 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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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");
--icon-check: 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");
--icon-external: 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='rgba(115, 130, 140, 0.999)' opacity='0.66' 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");
--icon-check: 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");
--icon-check-dark: 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='rgba(0, 0, 0, 0.75)' 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");
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
[data-theme=light],
:root:not([data-theme=dark]) {
--invalid-color: #C62828;
--valid-color: #388E3C;
--nav-background-color: rgba(255, 255, 255, 0.7);
@ -20,21 +20,20 @@
}
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
:root:not([data-theme=light]) {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background-color: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
--nav-logo-color: #0e1419;
}
}
[data-theme="dark"] {
[data-theme=dark] {
--invalid-color: rgba(183, 28, 28, 0.5);
--valid-color: rgba(46, 125, 50, 0.5);
--nav-background: rgba(16, 24, 30, 0.8);
--nav-border-color: rgba(115, 130, 140, 0.2);
--nav-logo-color: #0d1419;
--nav-logo-color: #0e1419;
}
/**
@ -50,7 +49,6 @@ html {
body > main {
padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
}
@media (min-width: 992px) {
body > main {
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
@ -59,62 +57,56 @@ body > main {
grid-template-columns: 200px auto;
}
}
@media (min-width: 1200px) {
body > main {
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
body > main > aside,
body > main div[role="document"] {
body > main div[role=document] {
min-width: 0;
}
div[role="document"] > section::before {
div[role=document] > section::before {
display: block;
height: calc(2rem + 3.5rem - .5rem);
margin-top: calc(-2rem - 3.5rem + .5rem);
content: '';
content: "";
}
@media (min-width: 576px) {
div[role="document"] > section::before {
div[role=document] > section::before {
height: calc(2.5rem + 3.5rem - .5rem);
height: calc(-2.5rem - 3.5rem + .5rem);
}
}
@media (min-width: 768px) {
div[role="document"] > section::before {
div[role=document] > section::before {
height: calc(3rem + 3.5rem - .5rem);
margin-top: calc(-3rem - 3.5rem + .5rem);
}
}
@media (min-width: 992px) {
div[role="document"] > section::before {
div[role=document] > section::before {
height: calc(3.5rem + 3.5rem - .5rem);
margin-top: calc(-3.5rem - 3.5rem + .5rem);
}
}
@media (min-width: 1200px) {
div[role="document"] > section::before {
div[role=document] > section::before {
height: calc(4rem + 3.5rem - .5rem);
margin-top: calc(-4rem - 3.5rem + .5rem);
}
}
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
display: inline-block;
width: 1rem;
height: 1rem;
background-image: var(--icon-external);
background-position: top center;
background-repeat: no-repeat;
background-size: .66rem auto;
content: '';
background-size: 0.66rem auto;
content: "";
}
svg {
@ -128,11 +120,9 @@ main > aside nav {
width: 100%;
margin-bottom: var(--block-spacing-vertical);
}
main > aside nav h1 {
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
}
@media (min-width: 992px) {
main > aside nav {
position: fixed;
@ -146,47 +136,38 @@ main > aside nav h1 {
display: none;
}
}
main > aside li, main > aside summary {
padding-top: 0;
padding-bottom: 0;
font-size: 16px;
}
main > aside li a {
padding: 0.25rem 0.5rem;
}
main > aside li a svg {
vertical-align: middle;
}
main > aside a.secondary:focus {
background-color: transparent;
color: var(--primary-hover);
}
main > aside a.active,
main > aside a.active:hover {
color: var(--primary);
}
main > aside details {
padding-bottom: .25rem;
padding-bottom: 0.25rem;
border-bottom: none;
}
main > aside details summary {
color: var(--h1-color);
font-size: 14px;
font-weight: 300;
text-transform: uppercase;
}
main > aside details summary::after {
display: none;
}
main > aside details[open] > summary:not(:focus) {
color: var(--h1-color);
}
@ -205,7 +186,6 @@ main > aside details[open] > summary:not(:focus) {
margin-bottom: 0;
overflow: hidden;
}
@media (min-width: 576px) {
#customization figure {
grid-template-columns: repeat(18, 1fr);
@ -214,13 +194,11 @@ main > aside details[open] > summary:not(:focus) {
border-top-left-radius: var(--border-radius);
}
}
#customization figure ~ article {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#customization figure button {
margin-bottom: 0;
padding: 0;
@ -228,57 +206,48 @@ main > aside details[open] > summary:not(:focus) {
border: none;
border-radius: 0;
}
#customization figure button:focus {
box-shadow: none;
}
#customization figure button.picked {
background-image: var(--icon-check);
background-position: center;
background-repeat: no-repeat;
background-size: .66rem auto;
background-size: 0.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 {
#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked {
background-image: var(--icon-check-dark);
}
#customization h4 {
transition: color var(--transition);
}
#customization pre[data-theme="generated"] {
#customization pre[data-theme=generated] {
border-color: var(--primary);
}
#grids {
--grid-spacing-vertical: 1rem;
}
#grids button {
display: block;
width: 100%;
margin-bottom: var(--spacing);
}
@media (min-width: 576px) {
#grids button {
display: inline-block;
width: auto;
margin-right: .5rem;
margin-right: 0.5rem;
}
}
#grids button svg {
stroke: var(--secondary);
margin-right: .5rem;
margin-right: 0.5rem;
border: 2px solid currentColor;
border-radius: 1rem;
background: currentColor;
}
#grids .grid > * {
padding: calc(var(--spacing) / 2) 0;
border-radius: var(--border-radius);
@ -286,11 +255,9 @@ main > aside details[open] > summary:not(:focus) {
font-size: 87.5%;
text-align: center;
}
#grids details {
margin-top: calc(var(--typography-spacing-vertical) * 2);
}
#grids details svg {
vertical-align: bottom;
}
@ -327,46 +294,43 @@ section > pre {
box-shadow: var(--card-box-shadow);
}
[data-theme="invalid"],
[data-theme="valid"] {
[data-theme=invalid],
[data-theme=valid] {
position: relative;
margin-bottom: 0 !important;
}
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
[data-theme=invalid]:before,
[data-theme=valid]:before {
display: block;
position: absolute;
top: 0;
right: 0;
padding: .375rem .75rem;
padding: 0.375rem 0.75rem;
border-radius: 0;
color: var(--primary-inverse);
font-size: 14px;
line-height: 1;
}
@media (min-width: 992px) {
[data-theme="invalid"]:before,
[data-theme="valid"]:before {
[data-theme=invalid]:before,
[data-theme=valid]:before {
top: var(--spacing);
right: var(--spacing);
}
}
[data-theme="invalid"] code,
[data-theme="valid"] code {
[data-theme=invalid] code,
[data-theme=valid] code {
padding: calc(var(--spacing) * 1.625) 0;
}
[data-theme="invalid"]:before {
[data-theme=invalid]:before {
background: var(--invalid-color);
content: 'Not so great';
content: "Not so great";
}
[data-theme="valid"]:before {
[data-theme=valid]:before {
background: var(--valid-color);
content: 'Great';
content: "Great";
}
/**
@ -383,15 +347,12 @@ body > nav {
background-color: var(--nav-background-color);
box-shadow: 0px 1px 0 var(--nav-border-color);
}
body > nav a {
border-radius: 0;
}
body > nav svg {
vertical-align: text-bottom;
}
body > nav ul:first-of-type li:first-of-type a {
width: 3.5rem;
height: 3.5rem;
@ -400,17 +361,14 @@ body > nav ul:first-of-type li:first-of-type a {
background: var(--h1-color);
color: var(--nav-logo-color);
}
body > nav ul:first-of-type li:first-of-type a svg {
height: 3.5rem;
}
body > nav ul:first-of-type li:nth-of-type(2) {
display: none;
margin-left: var(--spacing);
color: var(--h1-color);
}
@media (min-width: 992px) {
body > nav ul:first-of-type li:nth-of-type(2) {
display: inline;
@ -426,13 +384,12 @@ body > nav ul:first-of-type li:nth-of-type(2) {
bottom: var(--spacing);
width: auto;
margin-bottom: 0;
padding: .75rem;
padding: 0.75rem;
border-radius: 2rem;
box-shadow: var(--card-box-shadow);
line-height: 1;
text-align: right;
}
.switcher::after {
display: inline-block;
width: 1rem;
@ -441,39 +398,33 @@ body > nav ul:first-of-type li:nth-of-type(2) {
border-radius: 50%;
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
vertical-align: bottom;
content: '';
content: "";
transition: transform var(--transition);
}
.switcher i {
display: inline-block;
max-width: 0;
padding: 0;
overflow: hidden;
font-size: .875rem;
font-size: 0.875rem;
font-style: normal;
white-space: nowrap;
}
.switcher:hover, .switcher:focus {
max-width: 100%;
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.switcher:hover::after {
transform: rotate(180deg);
}
.switcher:hover i {
max-width: 100%;
padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
transition: max-width var(--transition), padding var(--transition);
}
.switcher:focus {
box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
}
@media (min-width: 576px) {
.switcher {
right: var(--spacing);

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

File diff suppressed because one or more lines are too long

1
docs/index.html
View file

@ -1257,6 +1257,7 @@
</main><!-- ./ Main -->
<!-- JavaScript -->
<script src="//unpkg.com/most-visible@1.5.0/dist/most-visible.min.js"></script>
<script src="js/pico.docs.min.js"></script>
</body>

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

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

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

File diff suppressed because one or more lines are too long

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

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

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

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

0
docs/scss/themes/docs.scss → docs/scss/themes/_docs.scss
View file

12028
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

30
package.json
View file

@ -25,5 +25,35 @@
],
"bugs": {
"url": "https://github.com/picocss/pico/issues"
},
"scripts": {
"css:compile": "sass --style expanded --no-source-map --no-error-css scss/:css/",
"css:compile:docs": "sass --style expanded --no-source-map --no-error-css docs/scss/:docs/css/",
"css:prefix": "postcss css/*.css css/*/*.css docs/css/*.css !css/*.min.css !docs/css/*.min.css --use autoprefixer --no-map --replace",
"css:minify": "cleancss -O1 --batch --batch-suffix '.min' css/*.css css/*/*.css docs/css/*.css !css/*.min.css !css/*/*.min.css !docs/css/*.min.css",
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife",
"js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env",
"js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js",
"build:css": "npm-run-all css:compile css:compile:docs css:prefix css:minify",
"build:js": "npm-run-all js:bundle js:babel js:minify",
"build": "npm-run-all build:css build:js",
"watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'",
"watch:scss:docs": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:css'",
"watch:js:docs": "nodemon --watch docs/js/ --ext js --ignore 'docs/js/pico.docs.min.js' --exec 'npm run build:js'",
"watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs"
},
"devDependencies": {
"@babel/cli": "^7.15.4",
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"autoprefixer": "^10.3.4",
"clean-css-cli": "^5.3.3",
"nodemon": "^2.0.12",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"rollup": "^2.56.3",
"sass": "^1.39.0",
"uglify-js": "^3.14.1"
}
}

2
scss/components/_card.scss
View file

@ -17,7 +17,7 @@ article {
> pre {
margin-right: calc(var(--block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1);
padding: calc(math.div(var(--block-spacing-vertical), 1.5)) var(--block-spacing-horizontal);
padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
}