mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 02:16:15 -04:00
Lucas Larroche
GitHub
commit
39314102d2
115 changed files with 6437 additions and 3781 deletions
|
|
@ -1,3 +0,0 @@
|
||||||
>= 0.5%
|
|
||||||
last 2 major versions
|
|
||||||
not dead
|
|
||||||
|
|
@ -168,7 +168,7 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
|
||||||
|
|
||||||
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
|
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.
|
||||||
- Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.
|
- Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.
|
||||||
- Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build:css`.
|
- Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build`.
|
||||||
|
|
||||||
## Copyright and license
|
## Copyright and license
|
||||||
|
|
||||||
|
|
@ -178,7 +178,6 @@ Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LIC
|
||||||
|
|
||||||
Website and docs:
|
Website and docs:
|
||||||
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
|
- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE))
|
||||||
- [Most Visible](https://github.com/andyexeter/most-visible): JavaScript module which returns the most visible element (Licensed [MIT](https://github.com/andyexeter/most-visible/blob/master/LICENSE))
|
|
||||||
- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
|
- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free))
|
||||||
|
|
||||||
Pico Library:
|
Pico Library:
|
||||||
|
|
|
||||||
|
|
@ -100,6 +100,23 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||||
|
--block-spacing-horizontal: var(--spacing);
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
--text-decoration: none;
|
--text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
@ -251,19 +268,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--card-sectionning-background-color: #fbfbfc;
|
||||||
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
|
@ -342,19 +361,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[data-theme=dark] {
|
[data-theme=dark] {
|
||||||
|
|
@ -432,19 +453,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -466,18 +489,18 @@ kbd {
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
-ms-text-size-adjust: 100%;
|
-ms-text-size-adjust: 100%;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-rendering: optimizeLegibility;
|
font-family: var(--font-family);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -605,9 +628,9 @@ ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -617,7 +640,7 @@ a {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
-webkit-text-decoration: var(--text-decoration);
|
-webkit-text-decoration: var(--text-decoration);
|
||||||
text-decoration: var(--text-decoration);
|
text-decoration: var(--text-decoration);
|
||||||
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
|
|
@ -639,9 +662,9 @@ h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -735,8 +758,8 @@ hgroup > * {
|
||||||
hgroup > *:last-child {
|
hgroup > *:last-child {
|
||||||
--color: var(--muted-color);
|
--color: var(--muted-color);
|
||||||
--font-weight: unset;
|
--font-weight: unset;
|
||||||
font-family: unset;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
font-family: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -751,10 +774,10 @@ ul,
|
||||||
ol {
|
ol {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-end: 0;
|
|
||||||
padding-inline-end: 0;
|
|
||||||
-webkit-padding-start: var(--spacing);
|
-webkit-padding-start: var(--spacing);
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
|
-webkit-padding-end: 0;
|
||||||
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
ul li,
|
ul li,
|
||||||
ol li {
|
ol li {
|
||||||
|
|
@ -778,10 +801,10 @@ blockquote {
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-end: none;
|
|
||||||
border-inline-end: none;
|
|
||||||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
|
-webkit-border-end: none;
|
||||||
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||||
|
|
@ -903,8 +926,8 @@ a[role=button] {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -968,10 +991,10 @@ optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
letter-spacing: inherit;
|
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
|
font-family: inherit;
|
||||||
|
letter-spacing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
@ -1067,8 +1090,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
@ -1125,13 +1148,13 @@ select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||||
|
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
|
|
@ -1172,9 +1195,13 @@ textarea[aria-invalid=true]:focus {
|
||||||
) !important;
|
) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] input[aria-invalid],
|
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
[dir=rtl] select[aria-invalid],
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
[dir=rtl] textarea[aria-invalid] {
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||||
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1200,14 +1227,14 @@ select::-ms-expand {
|
||||||
select:not([multiple]):not([size]) {
|
select:not([multiple]):not([size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
|
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] select:not([multiple]):not([size]) {
|
[dir=rtl] select:not([multiple]):not([size]) {
|
||||||
|
|
@ -1242,10 +1269,10 @@ label > input, label > select, label > textarea {
|
||||||
margin-top: -0.125em;
|
margin-top: -0.125em;
|
||||||
margin-right: 0.375em;
|
margin-right: 0.375em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: 0.375em;
|
|
||||||
margin-inline-end: 0.375em;
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: 0.375em;
|
||||||
|
margin-inline-end: 0.375em;
|
||||||
border-width: var(--border-width);
|
border-width: var(--border-width);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1262,8 +1289,8 @@ label > input, label > select, label > textarea {
|
||||||
--border-color: var(--primary);
|
--border-color: var(--primary);
|
||||||
background-image: var(--icon-checkbox);
|
background-image: var(--icon-checkbox);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
[type=checkbox] ~ label,
|
[type=checkbox] ~ label,
|
||||||
[type=radio] ~ label {
|
[type=radio] ~ label {
|
||||||
|
|
@ -1278,8 +1305,8 @@ label > input, label > select, label > textarea {
|
||||||
--border-color: var(--primary);
|
--border-color: var(--primary);
|
||||||
background-image: var(--icon-minus);
|
background-image: var(--icon-minus);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type=radio] {
|
[type=radio] {
|
||||||
|
|
@ -1325,10 +1352,10 @@ label > input, label > select, label > textarea {
|
||||||
[type=checkbox][role=switch]:checked::before {
|
[type=checkbox][role=switch]:checked::before {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: calc(1.125em - var(--border-width));
|
margin-left: calc(1.125em - var(--border-width));
|
||||||
-webkit-margin-end: 0;
|
|
||||||
margin-inline-end: 0;
|
|
||||||
-webkit-margin-start: calc(1.125em - var(--border-width));
|
-webkit-margin-start: calc(1.125em - var(--border-width));
|
||||||
margin-inline-start: calc(1.125em - var(--border-width));
|
margin-inline-start: calc(1.125em - var(--border-width));
|
||||||
|
-webkit-margin-end: 0;
|
||||||
|
margin-inline-end: 0;
|
||||||
}
|
}
|
||||||
[type=checkbox][role=switch][aria-invalid=false] {
|
[type=checkbox][role=switch][aria-invalid=false] {
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
|
|
@ -1366,24 +1393,24 @@ label > input, label > select, label > textarea {
|
||||||
border-radius: calc(var(--border-radius) * 0.5);
|
border-radius: calc(var(--border-radius) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(:dir(rtl)) [type=date],
|
:not([dir=rtl]) [type=date],
|
||||||
:not(:dir(rtl)) [type=datetime-local],
|
:not([dir=rtl]) [type=datetime-local],
|
||||||
:not(:dir(rtl)) [type=month],
|
:not([dir=rtl]) [type=month],
|
||||||
:not(:dir(rtl)) [type=time],
|
:not([dir=rtl]) [type=time],
|
||||||
:not(:dir(rtl)) [type=week] {
|
:not([dir=rtl]) [type=week] {
|
||||||
background-image: var(--icon-date);
|
background-image: var(--icon-date);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
|
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
:not(:dir(rtl)) [type=time] {
|
:not([dir=rtl]) [type=time] {
|
||||||
background-image: var(--icon-time);
|
background-image: var(--icon-time);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1404,10 +1431,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1415,8 +1442,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1429,10 +1456,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1440,8 +1467,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1461,10 +1488,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1472,8 +1499,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1490,8 +1517,8 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1499,8 +1526,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1602,8 +1629,8 @@ label > input, label > select, label > textarea {
|
||||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||||
background-image: var(--icon-search);
|
background-image: var(--icon-search);
|
||||||
background-position: center left 1.125rem;
|
background-position: center left 1.125rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
[type=search]::-webkit-search-cancel-button {
|
[type=search]::-webkit-search-cancel-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
@ -1626,8 +1653,8 @@ td {
|
||||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
@ -1647,8 +1674,8 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
|
@ -1659,11 +1686,11 @@ pre {
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
background: var(--code-background-color);
|
background: var(--code-background-color);
|
||||||
color: var(--code-color);
|
color: var(--code-color);
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
|
|
@ -1678,9 +1705,9 @@ pre {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
pre > code {
|
pre > code {
|
||||||
background: transparent;
|
|
||||||
display: block;
|
display: block;
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
|
background: transparent;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
|
|
@ -1724,35 +1751,12 @@ template {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: -webkit-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: -webkit-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
padding: 1em;
|
|
||||||
border: solid;
|
|
||||||
background-color: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog:not([open]) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Accordion (<details>)
|
* Accordion (<details>)
|
||||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
|
||||||
*/
|
*/
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1785,8 +1789,8 @@ details summary::after {
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
transition: transform var(--transition);
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
@ -1843,6 +1847,176 @@ article > footer {
|
||||||
border-top: var(--border-width) solid var(--card-border-color);
|
border-top: var(--border-width) solid var(--card-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Modal (<dialog>)
|
||||||
|
*/
|
||||||
|
dialog {
|
||||||
|
display: flex;
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: inherit;
|
||||||
|
min-width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
min-height: 100%;
|
||||||
|
padding: var(--spacing);
|
||||||
|
border: none;
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
dialog article {
|
||||||
|
max-width: 510px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
dialog article {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dialog article > header,
|
||||||
|
dialog article > footer {
|
||||||
|
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
||||||
|
}
|
||||||
|
dialog article > header .close {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: var(--spacing);
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
dialog article > footer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
dialog article > footer [role=button] {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
dialog article > footer [role=button]:not(:first-of-type) {
|
||||||
|
margin-left: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
dialog article p:last-of-type {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
dialog article .close {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: var(--icon-close);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto 1rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
dialog:not([open]), dialog[open=false] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-open {
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.modal-is-open body > *:not(dialog) {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
.modal-is-open dialog {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-opening body > *:not(dialog),
|
||||||
|
.modal-is-opening dialog,
|
||||||
|
.modal-is-opening dialog > article,
|
||||||
|
.modal-is-closing body > *:not(dialog),
|
||||||
|
.modal-is-closing dialog,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
-webkit-animation-duration: 0.2s;
|
||||||
|
animation-duration: 0.2s;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
.modal-is-opening body > *:not(dialog),
|
||||||
|
.modal-is-closing body > *:not(dialog) {
|
||||||
|
-webkit-animation-name: blurIn;
|
||||||
|
animation-name: blurIn;
|
||||||
|
}
|
||||||
|
.modal-is-opening dialog,
|
||||||
|
.modal-is-closing dialog {
|
||||||
|
-webkit-animation-name: fadeIn;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
}
|
||||||
|
.modal-is-opening dialog > article,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
-webkit-animation-name: slideInDown;
|
||||||
|
animation-name: slideInDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-closing body > *:not(dialog),
|
||||||
|
.modal-is-closing dialog,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes blurIn {
|
||||||
|
from {
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blurIn {
|
||||||
|
from {
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes slideInDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes slideInDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* Nav
|
* Nav
|
||||||
*/
|
*/
|
||||||
|
|
@ -1914,8 +2088,8 @@ progress {
|
||||||
progress {
|
progress {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.5rem;
|
height: 0.5rem;
|
||||||
margin-bottom: calc(var(--spacing) * 0.5);
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
|
@ -1939,7 +2113,7 @@ progress::-moz-progress-bar {
|
||||||
progress:indeterminate {
|
progress:indeterminate {
|
||||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
||||||
-webkit-animation: progressIndeterminate 1s linear infinite;
|
-webkit-animation: progressIndeterminate 1s linear infinite;
|
||||||
animation: progressIndeterminate 1s linear infinite;
|
animation: progressIndeterminate 1s linear infinite;
|
||||||
}
|
}
|
||||||
progress:indeterminate[value]::-webkit-progress-value {
|
progress:indeterminate[value]::-webkit-progress-value {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
@ -1980,20 +2154,20 @@ progress::-moz-progress-bar {
|
||||||
border: 0.1875em solid currentColor;
|
border: 0.1875em solid currentColor;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
border-right-color: transparent;
|
border-right-color: transparent;
|
||||||
|
content: "";
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
vertical-align: -0.125em;
|
vertical-align: -0.125em;
|
||||||
-webkit-animation: spinner 0.75s linear infinite;
|
-webkit-animation: spinner 0.75s linear infinite;
|
||||||
animation: spinner 0.75s linear infinite;
|
animation: spinner 0.75s linear infinite;
|
||||||
content: "";
|
|
||||||
opacity: var(--loading-spinner-opacity);
|
opacity: var(--loading-spinner-opacity);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
|
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
|
||||||
margin-right: calc(var(--spacing) * 0.5);
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
|
||||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
||||||
|
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input):not(select):not(textarea):empty {
|
[aria-busy=true]:not(input):not(select):not(textarea):empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -2040,14 +2214,14 @@ a[aria-busy=true] {
|
||||||
transform: translate(-50%, -0.25rem);
|
transform: translate(-50%, -0.25rem);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background: var(--tooltip-background-color);
|
background: var(--tooltip-background-color);
|
||||||
|
content: attr(data-tooltip);
|
||||||
color: var(--tooltip-color);
|
color: var(--tooltip-color);
|
||||||
font-size: 0.875rem;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 0.875rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
content: attr(data-tooltip);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -2059,19 +2233,23 @@ a[aria-busy=true] {
|
||||||
border-left: 0.3rem solid transparent;
|
border-left: 0.3rem solid transparent;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--tooltip-background-color);
|
|
||||||
content: "";
|
content: "";
|
||||||
|
color: var(--tooltip-background-color);
|
||||||
}
|
}
|
||||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-animation-name: slide;
|
|
||||||
animation-name: slide;
|
|
||||||
-webkit-animation-duration: 0.2s;
|
|
||||||
animation-duration: 0.2s;
|
|
||||||
}
|
}
|
||||||
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
@media (hover: hover) and (pointer: fine) {
|
||||||
-webkit-animation-name: slideCaret;
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
animation-name: slideCaret;
|
-webkit-animation-duration: 0.2s;
|
||||||
|
animation-duration: 0.2s;
|
||||||
|
-webkit-animation-name: slide;
|
||||||
|
animation-name: slide;
|
||||||
|
}
|
||||||
|
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||||
|
-webkit-animation-name: slideCaret;
|
||||||
|
animation-name: slideCaret;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes slide {
|
@-webkit-keyframes slide {
|
||||||
|
|
@ -2167,13 +2345,15 @@ textarea,
|
||||||
:not([aria-busy=true])::after {
|
:not([aria-busy=true])::after {
|
||||||
background-attachment: initial !important;
|
background-attachment: initial !important;
|
||||||
-webkit-animation-duration: 1ms !important;
|
-webkit-animation-duration: 1ms !important;
|
||||||
animation-duration: 1ms !important;
|
animation-duration: 1ms !important;
|
||||||
-webkit-animation-delay: -1ms !important;
|
-webkit-animation-delay: -1ms !important;
|
||||||
animation-delay: -1ms !important;
|
animation-delay: -1ms !important;
|
||||||
-webkit-animation-iteration-count: 1 !important;
|
-webkit-animation-iteration-count: 1 !important;
|
||||||
animation-iteration-count: 1 !important;
|
animation-iteration-count: 1 !important;
|
||||||
scroll-behavior: auto !important;
|
scroll-behavior: auto !important;
|
||||||
transition-delay: 0s !important;
|
transition-delay: 0s !important;
|
||||||
transition-duration: 0s !important;
|
transition-duration: 0s !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=pico.classless.css.map */
|
||||||
1
css/pico.classless.css.map
Normal file
1
css/pico.classless.css.map
Normal file
File diff suppressed because one or more lines are too long
3
css/pico.classless.min.css
vendored
3
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
1
css/pico.classless.min.css.map
Normal file
1
css/pico.classless.min.css.map
Normal file
File diff suppressed because one or more lines are too long
450
css/pico.css
450
css/pico.css
|
|
@ -100,6 +100,23 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||||
|
--block-spacing-horizontal: var(--spacing);
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
--text-decoration: none;
|
--text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
@ -251,19 +268,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--card-sectionning-background-color: #fbfbfc;
|
||||||
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
|
@ -342,19 +361,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[data-theme=dark] {
|
[data-theme=dark] {
|
||||||
|
|
@ -432,19 +453,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -466,18 +489,18 @@ kbd {
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
-ms-text-size-adjust: 100%;
|
-ms-text-size-adjust: 100%;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-rendering: optimizeLegibility;
|
font-family: var(--font-family);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -630,9 +653,9 @@ ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -642,7 +665,7 @@ a {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
-webkit-text-decoration: var(--text-decoration);
|
-webkit-text-decoration: var(--text-decoration);
|
||||||
text-decoration: var(--text-decoration);
|
text-decoration: var(--text-decoration);
|
||||||
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
|
|
@ -682,9 +705,9 @@ h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -778,8 +801,8 @@ hgroup > * {
|
||||||
hgroup > *:last-child {
|
hgroup > *:last-child {
|
||||||
--color: var(--muted-color);
|
--color: var(--muted-color);
|
||||||
--font-weight: unset;
|
--font-weight: unset;
|
||||||
font-family: unset;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
font-family: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -794,10 +817,10 @@ ul,
|
||||||
ol {
|
ol {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-end: 0;
|
|
||||||
padding-inline-end: 0;
|
|
||||||
-webkit-padding-start: var(--spacing);
|
-webkit-padding-start: var(--spacing);
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
|
-webkit-padding-end: 0;
|
||||||
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
ul li,
|
ul li,
|
||||||
ol li {
|
ol li {
|
||||||
|
|
@ -821,10 +844,10 @@ blockquote {
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-end: none;
|
|
||||||
border-inline-end: none;
|
|
||||||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
|
-webkit-border-end: none;
|
||||||
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||||
|
|
@ -946,8 +969,8 @@ a[role=button] {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1147,10 +1170,10 @@ optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
letter-spacing: inherit;
|
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
|
font-family: inherit;
|
||||||
|
letter-spacing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
@ -1246,8 +1269,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
@ -1304,13 +1327,13 @@ select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||||
|
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
|
|
@ -1351,9 +1374,13 @@ textarea[aria-invalid=true]:focus {
|
||||||
) !important;
|
) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] input[aria-invalid],
|
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
[dir=rtl] select[aria-invalid],
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
[dir=rtl] textarea[aria-invalid] {
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||||
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1379,14 +1406,14 @@ select::-ms-expand {
|
||||||
select:not([multiple]):not([size]) {
|
select:not([multiple]):not([size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
|
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] select:not([multiple]):not([size]) {
|
[dir=rtl] select:not([multiple]):not([size]) {
|
||||||
|
|
@ -1421,10 +1448,10 @@ label > input, label > select, label > textarea {
|
||||||
margin-top: -0.125em;
|
margin-top: -0.125em;
|
||||||
margin-right: 0.375em;
|
margin-right: 0.375em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: 0.375em;
|
|
||||||
margin-inline-end: 0.375em;
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: 0.375em;
|
||||||
|
margin-inline-end: 0.375em;
|
||||||
border-width: var(--border-width);
|
border-width: var(--border-width);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1441,8 +1468,8 @@ label > input, label > select, label > textarea {
|
||||||
--border-color: var(--primary);
|
--border-color: var(--primary);
|
||||||
background-image: var(--icon-checkbox);
|
background-image: var(--icon-checkbox);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
[type=checkbox] ~ label,
|
[type=checkbox] ~ label,
|
||||||
[type=radio] ~ label {
|
[type=radio] ~ label {
|
||||||
|
|
@ -1457,8 +1484,8 @@ label > input, label > select, label > textarea {
|
||||||
--border-color: var(--primary);
|
--border-color: var(--primary);
|
||||||
background-image: var(--icon-minus);
|
background-image: var(--icon-minus);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type=radio] {
|
[type=radio] {
|
||||||
|
|
@ -1504,10 +1531,10 @@ label > input, label > select, label > textarea {
|
||||||
[type=checkbox][role=switch]:checked::before {
|
[type=checkbox][role=switch]:checked::before {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: calc(1.125em - var(--border-width));
|
margin-left: calc(1.125em - var(--border-width));
|
||||||
-webkit-margin-end: 0;
|
|
||||||
margin-inline-end: 0;
|
|
||||||
-webkit-margin-start: calc(1.125em - var(--border-width));
|
-webkit-margin-start: calc(1.125em - var(--border-width));
|
||||||
margin-inline-start: calc(1.125em - var(--border-width));
|
margin-inline-start: calc(1.125em - var(--border-width));
|
||||||
|
-webkit-margin-end: 0;
|
||||||
|
margin-inline-end: 0;
|
||||||
}
|
}
|
||||||
[type=checkbox][role=switch][aria-invalid=false] {
|
[type=checkbox][role=switch][aria-invalid=false] {
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
|
|
@ -1545,24 +1572,24 @@ label > input, label > select, label > textarea {
|
||||||
border-radius: calc(var(--border-radius) * 0.5);
|
border-radius: calc(var(--border-radius) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(:dir(rtl)) [type=date],
|
:not([dir=rtl]) [type=date],
|
||||||
:not(:dir(rtl)) [type=datetime-local],
|
:not([dir=rtl]) [type=datetime-local],
|
||||||
:not(:dir(rtl)) [type=month],
|
:not([dir=rtl]) [type=month],
|
||||||
:not(:dir(rtl)) [type=time],
|
:not([dir=rtl]) [type=time],
|
||||||
:not(:dir(rtl)) [type=week] {
|
:not([dir=rtl]) [type=week] {
|
||||||
background-image: var(--icon-date);
|
background-image: var(--icon-date);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
|
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
:not(:dir(rtl)) [type=time] {
|
:not([dir=rtl]) [type=time] {
|
||||||
background-image: var(--icon-time);
|
background-image: var(--icon-time);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1583,10 +1610,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1594,8 +1621,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1608,10 +1635,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1619,8 +1646,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1640,10 +1667,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1651,8 +1678,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1669,8 +1696,8 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1678,8 +1705,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1781,8 +1808,8 @@ label > input, label > select, label > textarea {
|
||||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||||
background-image: var(--icon-search);
|
background-image: var(--icon-search);
|
||||||
background-position: center left 1.125rem;
|
background-position: center left 1.125rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
[type=search]::-webkit-search-cancel-button {
|
[type=search]::-webkit-search-cancel-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
@ -1805,8 +1832,8 @@ td {
|
||||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
@ -1826,8 +1853,8 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
|
@ -1838,11 +1865,11 @@ pre {
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
background: var(--code-background-color);
|
background: var(--code-background-color);
|
||||||
color: var(--code-color);
|
color: var(--code-color);
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
|
|
@ -1857,9 +1884,9 @@ pre {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
pre > code {
|
pre > code {
|
||||||
background: transparent;
|
|
||||||
display: block;
|
display: block;
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
|
background: transparent;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
|
|
@ -1903,35 +1930,12 @@ template {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: -webkit-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: -webkit-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
padding: 1em;
|
|
||||||
border: solid;
|
|
||||||
background-color: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog:not([open]) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Accordion (<details>)
|
* Accordion (<details>)
|
||||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
|
||||||
*/
|
*/
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1964,8 +1968,8 @@ details summary::after {
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
transition: transform var(--transition);
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
@ -2022,6 +2026,176 @@ article > footer {
|
||||||
border-top: var(--border-width) solid var(--card-border-color);
|
border-top: var(--border-width) solid var(--card-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Modal (<dialog>)
|
||||||
|
*/
|
||||||
|
dialog {
|
||||||
|
display: flex;
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: inherit;
|
||||||
|
min-width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
min-height: 100%;
|
||||||
|
padding: var(--spacing);
|
||||||
|
border: none;
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
dialog article {
|
||||||
|
max-width: 510px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
dialog article {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dialog article > header,
|
||||||
|
dialog article > footer {
|
||||||
|
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
||||||
|
}
|
||||||
|
dialog article > header .close {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: var(--spacing);
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
dialog article > footer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
dialog article > footer [role=button] {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
dialog article > footer [role=button]:not(:first-of-type) {
|
||||||
|
margin-left: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
dialog article p:last-of-type {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
dialog article .close {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: var(--icon-close);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto 1rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
dialog:not([open]), dialog[open=false] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-open {
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.modal-is-open body > *:not(dialog) {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
.modal-is-open dialog {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-opening body > *:not(dialog),
|
||||||
|
.modal-is-opening dialog,
|
||||||
|
.modal-is-opening dialog > article,
|
||||||
|
.modal-is-closing body > *:not(dialog),
|
||||||
|
.modal-is-closing dialog,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
-webkit-animation-duration: 0.2s;
|
||||||
|
animation-duration: 0.2s;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
.modal-is-opening body > *:not(dialog),
|
||||||
|
.modal-is-closing body > *:not(dialog) {
|
||||||
|
-webkit-animation-name: blurIn;
|
||||||
|
animation-name: blurIn;
|
||||||
|
}
|
||||||
|
.modal-is-opening dialog,
|
||||||
|
.modal-is-closing dialog {
|
||||||
|
-webkit-animation-name: fadeIn;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
}
|
||||||
|
.modal-is-opening dialog > article,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
-webkit-animation-name: slideInDown;
|
||||||
|
animation-name: slideInDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-closing body > *:not(dialog),
|
||||||
|
.modal-is-closing dialog,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes blurIn {
|
||||||
|
from {
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blurIn {
|
||||||
|
from {
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes slideInDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes slideInDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* Nav
|
* Nav
|
||||||
*/
|
*/
|
||||||
|
|
@ -2093,8 +2267,8 @@ progress {
|
||||||
progress {
|
progress {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.5rem;
|
height: 0.5rem;
|
||||||
margin-bottom: calc(var(--spacing) * 0.5);
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
|
@ -2118,7 +2292,7 @@ progress::-moz-progress-bar {
|
||||||
progress:indeterminate {
|
progress:indeterminate {
|
||||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
||||||
-webkit-animation: progressIndeterminate 1s linear infinite;
|
-webkit-animation: progressIndeterminate 1s linear infinite;
|
||||||
animation: progressIndeterminate 1s linear infinite;
|
animation: progressIndeterminate 1s linear infinite;
|
||||||
}
|
}
|
||||||
progress:indeterminate[value]::-webkit-progress-value {
|
progress:indeterminate[value]::-webkit-progress-value {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
@ -2159,20 +2333,20 @@ progress::-moz-progress-bar {
|
||||||
border: 0.1875em solid currentColor;
|
border: 0.1875em solid currentColor;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
border-right-color: transparent;
|
border-right-color: transparent;
|
||||||
|
content: "";
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
vertical-align: -0.125em;
|
vertical-align: -0.125em;
|
||||||
-webkit-animation: spinner 0.75s linear infinite;
|
-webkit-animation: spinner 0.75s linear infinite;
|
||||||
animation: spinner 0.75s linear infinite;
|
animation: spinner 0.75s linear infinite;
|
||||||
content: "";
|
|
||||||
opacity: var(--loading-spinner-opacity);
|
opacity: var(--loading-spinner-opacity);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
|
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
|
||||||
margin-right: calc(var(--spacing) * 0.5);
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
|
||||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
||||||
|
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input):not(select):not(textarea):empty {
|
[aria-busy=true]:not(input):not(select):not(textarea):empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -2219,14 +2393,14 @@ a[aria-busy=true] {
|
||||||
transform: translate(-50%, -0.25rem);
|
transform: translate(-50%, -0.25rem);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background: var(--tooltip-background-color);
|
background: var(--tooltip-background-color);
|
||||||
|
content: attr(data-tooltip);
|
||||||
color: var(--tooltip-color);
|
color: var(--tooltip-color);
|
||||||
font-size: 0.875rem;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 0.875rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
content: attr(data-tooltip);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -2238,19 +2412,23 @@ a[aria-busy=true] {
|
||||||
border-left: 0.3rem solid transparent;
|
border-left: 0.3rem solid transparent;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--tooltip-background-color);
|
|
||||||
content: "";
|
content: "";
|
||||||
|
color: var(--tooltip-background-color);
|
||||||
}
|
}
|
||||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-animation-name: slide;
|
|
||||||
animation-name: slide;
|
|
||||||
-webkit-animation-duration: 0.2s;
|
|
||||||
animation-duration: 0.2s;
|
|
||||||
}
|
}
|
||||||
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
@media (hover: hover) and (pointer: fine) {
|
||||||
-webkit-animation-name: slideCaret;
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
animation-name: slideCaret;
|
-webkit-animation-duration: 0.2s;
|
||||||
|
animation-duration: 0.2s;
|
||||||
|
-webkit-animation-name: slide;
|
||||||
|
animation-name: slide;
|
||||||
|
}
|
||||||
|
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||||
|
-webkit-animation-name: slideCaret;
|
||||||
|
animation-name: slideCaret;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes slide {
|
@-webkit-keyframes slide {
|
||||||
|
|
@ -2346,13 +2524,15 @@ textarea,
|
||||||
:not([aria-busy=true])::after {
|
:not([aria-busy=true])::after {
|
||||||
background-attachment: initial !important;
|
background-attachment: initial !important;
|
||||||
-webkit-animation-duration: 1ms !important;
|
-webkit-animation-duration: 1ms !important;
|
||||||
animation-duration: 1ms !important;
|
animation-duration: 1ms !important;
|
||||||
-webkit-animation-delay: -1ms !important;
|
-webkit-animation-delay: -1ms !important;
|
||||||
animation-delay: -1ms !important;
|
animation-delay: -1ms !important;
|
||||||
-webkit-animation-iteration-count: 1 !important;
|
-webkit-animation-iteration-count: 1 !important;
|
||||||
animation-iteration-count: 1 !important;
|
animation-iteration-count: 1 !important;
|
||||||
scroll-behavior: auto !important;
|
scroll-behavior: auto !important;
|
||||||
transition-delay: 0s !important;
|
transition-delay: 0s !important;
|
||||||
transition-duration: 0s !important;
|
transition-duration: 0s !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=pico.css.map */
|
||||||
1
css/pico.css.map
Normal file
1
css/pico.css.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -100,6 +100,23 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||||
|
--block-spacing-horizontal: var(--spacing);
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
--text-decoration: none;
|
--text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
@ -251,19 +268,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--card-sectionning-background-color: #fbfbfc;
|
||||||
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
|
@ -342,19 +361,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[data-theme=dark] {
|
[data-theme=dark] {
|
||||||
|
|
@ -432,19 +453,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -466,18 +489,18 @@ kbd {
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
-ms-text-size-adjust: 100%;
|
-ms-text-size-adjust: 100%;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-rendering: optimizeLegibility;
|
font-family: var(--font-family);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -575,9 +598,9 @@ ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -587,7 +610,7 @@ a {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
-webkit-text-decoration: var(--text-decoration);
|
-webkit-text-decoration: var(--text-decoration);
|
||||||
text-decoration: var(--text-decoration);
|
text-decoration: var(--text-decoration);
|
||||||
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
|
||||||
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
|
||||||
|
|
@ -609,9 +632,9 @@ h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -705,8 +728,8 @@ hgroup > * {
|
||||||
hgroup > *:last-child {
|
hgroup > *:last-child {
|
||||||
--color: var(--muted-color);
|
--color: var(--muted-color);
|
||||||
--font-weight: unset;
|
--font-weight: unset;
|
||||||
font-family: unset;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
font-family: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -721,10 +744,10 @@ ul,
|
||||||
ol {
|
ol {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-end: 0;
|
|
||||||
padding-inline-end: 0;
|
|
||||||
-webkit-padding-start: var(--spacing);
|
-webkit-padding-start: var(--spacing);
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
|
-webkit-padding-end: 0;
|
||||||
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
ul li,
|
ul li,
|
||||||
ol li {
|
ol li {
|
||||||
|
|
@ -748,10 +771,10 @@ blockquote {
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-end: none;
|
|
||||||
border-inline-end: none;
|
|
||||||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
|
-webkit-border-end: none;
|
||||||
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||||
|
|
@ -873,8 +896,8 @@ a[role=button] {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -938,10 +961,10 @@ optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
letter-spacing: inherit;
|
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
|
font-family: inherit;
|
||||||
|
letter-spacing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
@ -1037,8 +1060,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
@ -1095,13 +1118,13 @@ select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
-webkit-padding-start: var(--form-element-spacing-horizontal) !important;
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
padding-inline-start: var(--form-element-spacing-horizontal) !important;
|
||||||
|
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
|
|
@ -1142,9 +1165,13 @@ textarea[aria-invalid=true]:focus {
|
||||||
) !important;
|
) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] input[aria-invalid],
|
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
[dir=rtl] select[aria-invalid],
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
[dir=rtl] textarea[aria-invalid] {
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||||
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1170,14 +1197,14 @@ select::-ms-expand {
|
||||||
select:not([multiple]):not([size]) {
|
select:not([multiple]):not([size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
|
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] select:not([multiple]):not([size]) {
|
[dir=rtl] select:not([multiple]):not([size]) {
|
||||||
|
|
@ -1212,10 +1239,10 @@ label > input, label > select, label > textarea {
|
||||||
margin-top: -0.125em;
|
margin-top: -0.125em;
|
||||||
margin-right: 0.375em;
|
margin-right: 0.375em;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: 0.375em;
|
|
||||||
margin-inline-end: 0.375em;
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: 0.375em;
|
||||||
|
margin-inline-end: 0.375em;
|
||||||
border-width: var(--border-width);
|
border-width: var(--border-width);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1232,8 +1259,8 @@ label > input, label > select, label > textarea {
|
||||||
--border-color: var(--primary);
|
--border-color: var(--primary);
|
||||||
background-image: var(--icon-checkbox);
|
background-image: var(--icon-checkbox);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
[type=checkbox] ~ label,
|
[type=checkbox] ~ label,
|
||||||
[type=radio] ~ label {
|
[type=radio] ~ label {
|
||||||
|
|
@ -1248,8 +1275,8 @@ label > input, label > select, label > textarea {
|
||||||
--border-color: var(--primary);
|
--border-color: var(--primary);
|
||||||
background-image: var(--icon-minus);
|
background-image: var(--icon-minus);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.75em auto;
|
background-size: 0.75em auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type=radio] {
|
[type=radio] {
|
||||||
|
|
@ -1295,10 +1322,10 @@ label > input, label > select, label > textarea {
|
||||||
[type=checkbox][role=switch]:checked::before {
|
[type=checkbox][role=switch]:checked::before {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: calc(1.125em - var(--border-width));
|
margin-left: calc(1.125em - var(--border-width));
|
||||||
-webkit-margin-end: 0;
|
|
||||||
margin-inline-end: 0;
|
|
||||||
-webkit-margin-start: calc(1.125em - var(--border-width));
|
-webkit-margin-start: calc(1.125em - var(--border-width));
|
||||||
margin-inline-start: calc(1.125em - var(--border-width));
|
margin-inline-start: calc(1.125em - var(--border-width));
|
||||||
|
-webkit-margin-end: 0;
|
||||||
|
margin-inline-end: 0;
|
||||||
}
|
}
|
||||||
[type=checkbox][role=switch][aria-invalid=false] {
|
[type=checkbox][role=switch][aria-invalid=false] {
|
||||||
--border-color: var(--form-element-valid-border-color);
|
--border-color: var(--form-element-valid-border-color);
|
||||||
|
|
@ -1336,24 +1363,24 @@ label > input, label > select, label > textarea {
|
||||||
border-radius: calc(var(--border-radius) * 0.5);
|
border-radius: calc(var(--border-radius) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(:dir(rtl)) [type=date],
|
:not([dir=rtl]) [type=date],
|
||||||
:not(:dir(rtl)) [type=datetime-local],
|
:not([dir=rtl]) [type=datetime-local],
|
||||||
:not(:dir(rtl)) [type=month],
|
:not([dir=rtl]) [type=month],
|
||||||
:not(:dir(rtl)) [type=time],
|
:not([dir=rtl]) [type=time],
|
||||||
:not(:dir(rtl)) [type=week] {
|
:not([dir=rtl]) [type=week] {
|
||||||
background-image: var(--icon-date);
|
background-image: var(--icon-date);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=date]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=datetime-local]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=month]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator,
|
:not([dir=rtl]) [type=time]::-webkit-calendar-picker-indicator,
|
||||||
:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator {
|
:not([dir=rtl]) [type=week]::-webkit-calendar-picker-indicator {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
:not(:dir(rtl)) [type=time] {
|
:not([dir=rtl]) [type=time] {
|
||||||
background-image: var(--icon-time);
|
background-image: var(--icon-time);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1374,10 +1401,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1385,8 +1412,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1399,10 +1426,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1410,8 +1437,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1431,10 +1458,10 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) / 2);
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1442,8 +1469,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1460,8 +1487,8 @@ label > input, label > select, label > textarea {
|
||||||
--color: var(--secondary-inverse);
|
--color: var(--secondary-inverse);
|
||||||
margin-right: calc(var(--spacing) / 2);
|
margin-right: calc(var(--spacing) / 2);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-inline-end: calc(var(--spacing) / 2);
|
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: calc(var(--spacing) / 2);
|
||||||
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);
|
||||||
border: var(--border-width) solid var(--border-color);
|
border: var(--border-width) solid var(--border-color);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -1469,8 +1496,8 @@ label > input, label > select, label > textarea {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1572,8 +1599,8 @@ label > input, label > select, label > textarea {
|
||||||
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
|
||||||
background-image: var(--icon-search);
|
background-image: var(--icon-search);
|
||||||
background-position: center left 1.125rem;
|
background-position: center left 1.125rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
[type=search]::-webkit-search-cancel-button {
|
[type=search]::-webkit-search-cancel-button {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
@ -1596,8 +1623,8 @@ td {
|
||||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
@ -1617,8 +1644,8 @@ pre,
|
||||||
code,
|
code,
|
||||||
kbd,
|
kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
|
@ -1629,11 +1656,11 @@ pre {
|
||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
background: var(--code-background-color);
|
background: var(--code-background-color);
|
||||||
color: var(--code-color);
|
color: var(--code-color);
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
|
|
@ -1648,9 +1675,9 @@ pre {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
pre > code {
|
pre > code {
|
||||||
background: transparent;
|
|
||||||
display: block;
|
display: block;
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
|
background: transparent;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
}
|
}
|
||||||
|
|
@ -1694,35 +1721,12 @@ template {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
dialog {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: -webkit-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: -webkit-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
padding: 1em;
|
|
||||||
border: solid;
|
|
||||||
background-color: white;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog:not([open]) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Accordion (<details>)
|
* Accordion (<details>)
|
||||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
|
||||||
*/
|
*/
|
||||||
details {
|
details {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1755,8 +1759,8 @@ details summary::after {
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
transition: transform var(--transition);
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
@ -1813,6 +1817,176 @@ article > footer {
|
||||||
border-top: var(--border-width) solid var(--card-border-color);
|
border-top: var(--border-width) solid var(--card-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Modal (<dialog>)
|
||||||
|
*/
|
||||||
|
dialog {
|
||||||
|
display: flex;
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: inherit;
|
||||||
|
min-width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
min-height: 100%;
|
||||||
|
padding: var(--spacing);
|
||||||
|
border: none;
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
dialog article {
|
||||||
|
max-width: 510px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
dialog article {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dialog article > header,
|
||||||
|
dialog article > footer {
|
||||||
|
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
||||||
|
}
|
||||||
|
dialog article > header .close {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: var(--spacing);
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
dialog article > footer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
dialog article > footer [role=button] {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
dialog article > footer [role=button]:not(:first-of-type) {
|
||||||
|
margin-left: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
dialog article p:last-of-type {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
dialog article .close {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: var(--icon-close);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto 1rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: 0.5;
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
dialog article .close:hover, dialog article .close:active, dialog article .close:focus {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
dialog:not([open]), dialog[open=false] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-open {
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.modal-is-open body > *:not(dialog) {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
.modal-is-open dialog {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-opening body > *:not(dialog),
|
||||||
|
.modal-is-opening dialog,
|
||||||
|
.modal-is-opening dialog > article,
|
||||||
|
.modal-is-closing body > *:not(dialog),
|
||||||
|
.modal-is-closing dialog,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
-webkit-animation-duration: 0.2s;
|
||||||
|
animation-duration: 0.2s;
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
.modal-is-opening body > *:not(dialog),
|
||||||
|
.modal-is-closing body > *:not(dialog) {
|
||||||
|
-webkit-animation-name: blurIn;
|
||||||
|
animation-name: blurIn;
|
||||||
|
}
|
||||||
|
.modal-is-opening dialog,
|
||||||
|
.modal-is-closing dialog {
|
||||||
|
-webkit-animation-name: fadeIn;
|
||||||
|
animation-name: fadeIn;
|
||||||
|
}
|
||||||
|
.modal-is-opening dialog > article,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
-webkit-animation-name: slideInDown;
|
||||||
|
animation-name: slideInDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-closing body > *:not(dialog),
|
||||||
|
.modal-is-closing dialog,
|
||||||
|
.modal-is-closing dialog > article {
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes blurIn {
|
||||||
|
from {
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blurIn {
|
||||||
|
from {
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes slideInDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes slideInDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* Nav
|
* Nav
|
||||||
*/
|
*/
|
||||||
|
|
@ -1884,8 +2058,8 @@ progress {
|
||||||
progress {
|
progress {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.5rem;
|
height: 0.5rem;
|
||||||
margin-bottom: calc(var(--spacing) * 0.5);
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
|
@ -1909,7 +2083,7 @@ progress::-moz-progress-bar {
|
||||||
progress:indeterminate {
|
progress:indeterminate {
|
||||||
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
|
||||||
-webkit-animation: progressIndeterminate 1s linear infinite;
|
-webkit-animation: progressIndeterminate 1s linear infinite;
|
||||||
animation: progressIndeterminate 1s linear infinite;
|
animation: progressIndeterminate 1s linear infinite;
|
||||||
}
|
}
|
||||||
progress:indeterminate[value]::-webkit-progress-value {
|
progress:indeterminate[value]::-webkit-progress-value {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
@ -1950,20 +2124,20 @@ progress::-moz-progress-bar {
|
||||||
border: 0.1875em solid currentColor;
|
border: 0.1875em solid currentColor;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
border-right-color: transparent;
|
border-right-color: transparent;
|
||||||
|
content: "";
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
vertical-align: -0.125em;
|
vertical-align: -0.125em;
|
||||||
-webkit-animation: spinner 0.75s linear infinite;
|
-webkit-animation: spinner 0.75s linear infinite;
|
||||||
animation: spinner 0.75s linear infinite;
|
animation: spinner 0.75s linear infinite;
|
||||||
content: "";
|
|
||||||
opacity: var(--loading-spinner-opacity);
|
opacity: var(--loading-spinner-opacity);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
|
[aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before {
|
||||||
margin-right: calc(var(--spacing) * 0.5);
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
|
||||||
margin-inline-end: calc(var(--spacing) * 0.5);
|
|
||||||
-webkit-margin-start: 0;
|
-webkit-margin-start: 0;
|
||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
|
-webkit-margin-end: calc(var(--spacing) * 0.5);
|
||||||
|
margin-inline-end: calc(var(--spacing) * 0.5);
|
||||||
}
|
}
|
||||||
[aria-busy=true]:not(input):not(select):not(textarea):empty {
|
[aria-busy=true]:not(input):not(select):not(textarea):empty {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -2010,14 +2184,14 @@ a[aria-busy=true] {
|
||||||
transform: translate(-50%, -0.25rem);
|
transform: translate(-50%, -0.25rem);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background: var(--tooltip-background-color);
|
background: var(--tooltip-background-color);
|
||||||
|
content: attr(data-tooltip);
|
||||||
color: var(--tooltip-color);
|
color: var(--tooltip-color);
|
||||||
font-size: 0.875rem;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 0.875rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
content: attr(data-tooltip);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -2029,19 +2203,23 @@ a[aria-busy=true] {
|
||||||
border-left: 0.3rem solid transparent;
|
border-left: 0.3rem solid transparent;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--tooltip-background-color);
|
|
||||||
content: "";
|
content: "";
|
||||||
|
color: var(--tooltip-background-color);
|
||||||
}
|
}
|
||||||
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-animation-name: slide;
|
|
||||||
animation-name: slide;
|
|
||||||
-webkit-animation-duration: 0.2s;
|
|
||||||
animation-duration: 0.2s;
|
|
||||||
}
|
}
|
||||||
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
@media (hover: hover) and (pointer: fine) {
|
||||||
-webkit-animation-name: slideCaret;
|
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
|
||||||
animation-name: slideCaret;
|
-webkit-animation-duration: 0.2s;
|
||||||
|
animation-duration: 0.2s;
|
||||||
|
-webkit-animation-name: slide;
|
||||||
|
animation-name: slide;
|
||||||
|
}
|
||||||
|
[data-tooltip]:focus::after, [data-tooltip]:hover::after {
|
||||||
|
-webkit-animation-name: slideCaret;
|
||||||
|
animation-name: slideCaret;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes slide {
|
@-webkit-keyframes slide {
|
||||||
|
|
@ -2137,13 +2315,15 @@ textarea,
|
||||||
:not([aria-busy=true])::after {
|
:not([aria-busy=true])::after {
|
||||||
background-attachment: initial !important;
|
background-attachment: initial !important;
|
||||||
-webkit-animation-duration: 1ms !important;
|
-webkit-animation-duration: 1ms !important;
|
||||||
animation-duration: 1ms !important;
|
animation-duration: 1ms !important;
|
||||||
-webkit-animation-delay: -1ms !important;
|
-webkit-animation-delay: -1ms !important;
|
||||||
animation-delay: -1ms !important;
|
animation-delay: -1ms !important;
|
||||||
-webkit-animation-iteration-count: 1 !important;
|
-webkit-animation-iteration-count: 1 !important;
|
||||||
animation-iteration-count: 1 !important;
|
animation-iteration-count: 1 !important;
|
||||||
scroll-behavior: auto !important;
|
scroll-behavior: auto !important;
|
||||||
transition-delay: 0s !important;
|
transition-delay: 0s !important;
|
||||||
transition-duration: 0s !important;
|
transition-duration: 0s !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=pico.fluid.classless.css.map */
|
||||||
1
css/pico.fluid.classless.css.map
Normal file
1
css/pico.fluid.classless.css.map
Normal file
File diff suppressed because one or more lines are too long
3
css/pico.fluid.classless.min.css
vendored
3
css/pico.fluid.classless.min.css
vendored
File diff suppressed because one or more lines are too long
1
css/pico.fluid.classless.min.css.map
Normal file
1
css/pico.fluid.classless.min.css.map
Normal file
File diff suppressed because one or more lines are too long
3
css/pico.min.css
vendored
3
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
1
css/pico.min.css.map
Normal file
1
css/pico.min.css.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -200,19 +200,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--card-sectionning-background-color: #fbfbfc;
|
||||||
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
|
@ -291,19 +293,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[data-theme=dark] {
|
[data-theme=dark] {
|
||||||
|
|
@ -381,19 +385,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -415,18 +421,18 @@ kbd {
|
||||||
html {
|
html {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
-ms-text-size-adjust: 100%;
|
-ms-text-size-adjust: 100%;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-rendering: optimizeLegibility;
|
font-family: var(--font-family);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -579,9 +585,9 @@ ul {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -591,7 +597,7 @@ a {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
-webkit-text-decoration: var(--text-decoration);
|
-webkit-text-decoration: var(--text-decoration);
|
||||||
text-decoration: var(--text-decoration);
|
text-decoration: var(--text-decoration);
|
||||||
}
|
}
|
||||||
a:hover, a:active, a:focus {
|
a:hover, a:active, a:focus {
|
||||||
--color: var(--primary-hover);
|
--color: var(--primary-hover);
|
||||||
|
|
@ -628,9 +634,9 @@ h6 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: var(--typography-spacing-vertical);
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-family: var(--font-family);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
font-family: var(--font-family);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
@ -724,8 +730,8 @@ hgroup > * {
|
||||||
hgroup > *:last-child {
|
hgroup > *:last-child {
|
||||||
--color: var(--muted-color);
|
--color: var(--muted-color);
|
||||||
--font-weight: unset;
|
--font-weight: unset;
|
||||||
font-family: unset;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
font-family: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -740,10 +746,10 @@ ul,
|
||||||
ol {
|
ol {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: var(--spacing);
|
padding-left: var(--spacing);
|
||||||
-webkit-padding-end: 0;
|
|
||||||
padding-inline-end: 0;
|
|
||||||
-webkit-padding-start: var(--spacing);
|
-webkit-padding-start: var(--spacing);
|
||||||
padding-inline-start: var(--spacing);
|
padding-inline-start: var(--spacing);
|
||||||
|
-webkit-padding-end: 0;
|
||||||
|
padding-inline-end: 0;
|
||||||
}
|
}
|
||||||
ul li,
|
ul li,
|
||||||
ol li {
|
ol li {
|
||||||
|
|
@ -767,10 +773,10 @@ blockquote {
|
||||||
padding: var(--spacing);
|
padding: var(--spacing);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-left: 0.25rem solid var(--blockquote-border-color);
|
border-left: 0.25rem solid var(--blockquote-border-color);
|
||||||
-webkit-border-end: none;
|
|
||||||
border-inline-end: none;
|
|
||||||
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
-webkit-border-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
border-inline-start: 0.25rem solid var(--blockquote-border-color);
|
||||||
|
-webkit-border-end: none;
|
||||||
|
border-inline-end: none;
|
||||||
}
|
}
|
||||||
blockquote footer {
|
blockquote footer {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
margin-top: calc(var(--typography-spacing-vertical) * 0.5);
|
||||||
|
|
@ -892,8 +898,8 @@ a[role=button] {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1092,10 +1098,10 @@ optgroup,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: inherit;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
letter-spacing: inherit;
|
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
|
font-family: inherit;
|
||||||
|
letter-spacing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
@ -1191,8 +1197,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
@ -1248,13 +1254,13 @@ select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
textarea:not([type=checkbox]):not([type=radio])[aria-invalid] {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
|
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
|
|
@ -1291,9 +1297,13 @@ textarea[aria-invalid=true]:focus {
|
||||||
--border-color: var(--form-element-invalid-active-border-color);
|
--border-color: var(--form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] input[aria-invalid],
|
[dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] input:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
[dir=rtl] select[aria-invalid],
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
[dir=rtl] textarea[aria-invalid] {
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||||
|
[dir=rtl] select:not([type=checkbox]):not([type=radio])[aria-invalid=false],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true],
|
||||||
|
[dir=rtl] textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] {
|
||||||
background-position: center left 0.75rem;
|
background-position: center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1319,14 +1329,14 @@ select::-ms-expand {
|
||||||
select:not([multiple]):not([size]) {
|
select:not([multiple]):not([size]) {
|
||||||
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
padding-left: var(--form-element-spacing-horizontal);
|
padding-left: var(--form-element-spacing-horizontal);
|
||||||
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
|
||||||
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
-webkit-padding-start: var(--form-element-spacing-horizontal);
|
||||||
padding-inline-start: var(--form-element-spacing-horizontal);
|
padding-inline-start: var(--form-element-spacing-horizontal);
|
||||||
|
-webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
|
padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center right 0.75rem;
|
background-position: center right 0.75rem;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
[dir=rtl] select:not([multiple]):not([size]) {
|
[dir=rtl] select:not([multiple]):not([size]) {
|
||||||
|
|
@ -1363,8 +1373,8 @@ td {
|
||||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||||
border-bottom: var(--border-width) solid var(--table-border-color);
|
border-bottom: var(--border-width) solid var(--table-border-color);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: var(--font-size);
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: var(--font-size);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
@ -1413,3 +1423,5 @@ textarea,
|
||||||
[dir=rtl] {
|
[dir=rtl] {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=pico.slim.css.map */
|
||||||
1
css/pico.slim.css.map
Normal file
1
css/pico.slim.css.map
Normal file
File diff suppressed because one or more lines are too long
3
css/pico.slim.min.css
vendored
3
css/pico.slim.min.css
vendored
File diff suppressed because one or more lines are too long
1
css/pico.slim.min.css.map
Normal file
1
css/pico.slim.min.css.map
Normal file
File diff suppressed because one or more lines are too long
12
css/postcss.config.js
Normal file
12
css/postcss.config.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
module.exports = {
|
||||||
|
map: {
|
||||||
|
inline: false,
|
||||||
|
annotation: true,
|
||||||
|
sourcesContent: true
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
autoprefixer: {
|
||||||
|
cascade: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -96,6 +96,23 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2);
|
||||||
|
--block-spacing-horizontal: var(--spacing);
|
||||||
|
}
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 2.5);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
dialog > article {
|
||||||
|
--block-spacing-vertical: calc(var(--spacing) * 3);
|
||||||
|
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
--text-decoration: none;
|
--text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
@ -247,19 +264,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
|
||||||
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
||||||
--card-sectionning-background-color: #fbfbfc;
|
--card-sectionning-background-color: #fbfbfc;
|
||||||
|
--modal-overlay-background-color: rgba(213, 220, 226, 0.8);
|
||||||
--progress-background-color: #d5dce2;
|
--progress-background-color: #d5dce2;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (prefers-color-scheme: dark) {
|
@media only screen and (prefers-color-scheme: dark) {
|
||||||
|
|
@ -338,19 +357,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[data-theme=dark] {
|
[data-theme=dark] {
|
||||||
|
|
@ -428,17 +449,21 @@ kbd {
|
||||||
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
|
||||||
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
|
||||||
--card-sectionning-background-color: #18232c;
|
--card-sectionning-background-color: #18232c;
|
||||||
|
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
|
||||||
--progress-background-color: #24333e;
|
--progress-background-color: #24333e;
|
||||||
--progress-color: var(--primary);
|
--progress-color: var(--primary);
|
||||||
--loading-spinner-opacity: 0.5;
|
--loading-spinner-opacity: 0.5;
|
||||||
--tooltip-background-color: var(--contrast);
|
--tooltip-background-color: var(--contrast);
|
||||||
--tooltip-color: var(--contrast-inverse);
|
--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-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-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-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-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-close: 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)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%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-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-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-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-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-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");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=default.css.map */
|
||||||
1
css/themes/default.css.map
Normal file
1
css/themes/default.css.map
Normal file
File diff suppressed because one or more lines are too long
3
css/themes/default.min.css
vendored
3
css/themes/default.min.css
vendored
File diff suppressed because one or more lines are too long
1
css/themes/default.min.css.map
Normal file
1
css/themes/default.min.css.map
Normal file
File diff suppressed because one or more lines are too long
12
docs/accordions.html
Normal file
12
docs/accordions.html
Normal file
File diff suppressed because one or more lines are too long
6
docs/buttons.html
Normal file
6
docs/buttons.html
Normal file
File diff suppressed because one or more lines are too long
5
docs/cards.html
Normal file
5
docs/cards.html
Normal file
File diff suppressed because one or more lines are too long
5
docs/classless.html
Normal file
5
docs/classless.html
Normal file
File diff suppressed because one or more lines are too long
3
docs/containers.html
Normal file
3
docs/containers.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -55,7 +55,7 @@ body > main {
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
body > main {
|
body > main {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
|
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 200px auto;
|
grid-template-columns: 200px auto;
|
||||||
}
|
}
|
||||||
|
|
@ -70,45 +70,14 @@ body > main div[role=document] {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[role=document] > section::before {
|
|
||||||
display: block;
|
|
||||||
height: calc(2rem + 3.5rem - 0.5rem);
|
|
||||||
margin-top: calc(-2rem - 3.5rem + 0.5rem);
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
@media (min-width: 576px) {
|
|
||||||
div[role=document] > section::before {
|
|
||||||
height: calc(2.5rem + 3.5rem - 0.5rem);
|
|
||||||
height: calc(-2.5rem - 3.5rem + 0.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
div[role=document] > section::before {
|
|
||||||
height: calc(3rem + 3.5rem - 0.5rem);
|
|
||||||
margin-top: calc(-3rem - 3.5rem + 0.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
div[role=document] > section::before {
|
|
||||||
height: calc(3.5rem + 3.5rem - 0.5rem);
|
|
||||||
margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
div[role=document] > section::before {
|
|
||||||
height: calc(4rem + 3.5rem - 0.5rem);
|
|
||||||
margin-top: calc(-4rem - 3.5rem + 0.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;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-image: var(--icon-external);
|
background-image: var(--icon-external);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.66rem auto;
|
background-size: 0.66rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -121,10 +90,7 @@ svg {
|
||||||
*/
|
*/
|
||||||
main > aside nav {
|
main > aside nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(--block-spacing-vertical);
|
margin-bottom: calc(var(--block-spacing-vertical) * 2);
|
||||||
}
|
|
||||||
main > aside nav h1 {
|
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
|
||||||
}
|
}
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
main > aside nav {
|
main > aside nav {
|
||||||
|
|
@ -135,10 +101,43 @@ main > aside nav h1 {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
main > aside nav h1 {
|
}
|
||||||
|
main > aside nav a#toggle-docs-navigation {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
padding: 0;
|
||||||
|
padding-bottom: var(--spacing);
|
||||||
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
|
}
|
||||||
|
main > aside nav a#toggle-docs-navigation svg {
|
||||||
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
|
vertical-align: -3px;
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
main > aside nav a#toggle-docs-navigation {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
main > aside nav.closed-on-mobile {
|
||||||
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
|
}
|
||||||
|
main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
main > aside nav.closed-on-mobile details {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
main > aside nav.closed-on-mobile details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
main > aside nav.closed-on-mobile > a#toggle-docs-navigation {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
main > aside nav.open a#toggle-docs-navigation svg.expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
main > aside li,
|
main > aside li,
|
||||||
main > aside summary {
|
main > aside summary {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
|
@ -146,7 +145,7 @@ main > aside summary {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
main > aside li a {
|
main > aside li a {
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.375rem 0.5rem;
|
||||||
}
|
}
|
||||||
main > aside li a svg {
|
main > aside li a svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -160,18 +159,20 @@ main > aside a.active:hover {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
main > aside details {
|
main > aside details {
|
||||||
padding-bottom: 0.25rem;
|
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
main > aside details summary {
|
main > aside details summary {
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
main > aside details summary::after {
|
main > aside details summary::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
main > aside details[open] > summary {
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.75);
|
||||||
|
}
|
||||||
main > aside details[open] > summary:not(:focus) {
|
main > aside details[open] > summary:not(:focus) {
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
}
|
}
|
||||||
|
|
@ -179,21 +180,24 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
/**
|
/**
|
||||||
* Docs: Documentation
|
* Docs: Documentation
|
||||||
*/
|
*/
|
||||||
#themes button i {
|
#themes button.theme-switcher:first-of-type {
|
||||||
|
--font-weight: bold;
|
||||||
|
}
|
||||||
|
#themes button.theme-switcher i {
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customization figure {
|
#customization figure {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(9, 1fr);
|
|
||||||
grid-template-rows: repeat(2, 1fr);
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
#customization figure {
|
#customization figure {
|
||||||
grid-template-columns: repeat(18, 1fr);
|
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
|
grid-template-columns: repeat(18, 1fr);
|
||||||
border-top-right-radius: var(--border-radius);
|
border-top-right-radius: var(--border-radius);
|
||||||
border-top-left-radius: var(--border-radius);
|
border-top-left-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
@ -216,8 +220,8 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
#customization figure button.picked {
|
#customization figure button.picked {
|
||||||
background-image: var(--icon-check);
|
background-image: var(--icon-check);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.66rem auto;
|
background-size: 0.66rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
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 {
|
||||||
|
|
@ -230,39 +234,39 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
#grids {
|
#grid {
|
||||||
--grid-spacing-vertical: 1rem;
|
--grid-spacing-vertical: 1rem;
|
||||||
}
|
}
|
||||||
#grids button {
|
#grid button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(--spacing);
|
margin-bottom: var(--spacing);
|
||||||
}
|
}
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
#grids button {
|
#grid button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#grids button svg {
|
#grid button svg {
|
||||||
stroke: var(--secondary);
|
stroke: var(--secondary);
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
border: 2px solid currentColor;
|
border: 2px solid currentColor;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
}
|
}
|
||||||
#grids .grid > * {
|
#grid .grid > * {
|
||||||
padding: calc(var(--spacing) / 2) 0;
|
padding: calc(var(--spacing) / 2) 0;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background: var(--code-background-color);
|
background: var(--code-background-color);
|
||||||
font-size: 87.5%;
|
font-size: 87.5%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#grids details {
|
#grid details {
|
||||||
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
margin-top: calc(var(--typography-spacing-vertical) * 2);
|
||||||
}
|
}
|
||||||
#grids details svg {
|
#grid details svg {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -270,9 +274,17 @@ main > aside details[open] > summary:not(:focus) {
|
||||||
grid-row-gap: 0;
|
grid-row-gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#modal button {
|
||||||
|
--font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Docs: Typography
|
* Docs: Typography
|
||||||
*/
|
*/
|
||||||
|
h1 {
|
||||||
|
margin-top: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
section > hgroup {
|
section > hgroup {
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||||
}
|
}
|
||||||
|
|
@ -297,14 +309,14 @@ article > footer.code {
|
||||||
|
|
||||||
article pre,
|
article pre,
|
||||||
article pre code {
|
article pre code {
|
||||||
background: transparent;
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
section > pre {
|
section > pre {
|
||||||
background: var(--article-code-background-color);
|
|
||||||
margin: var(--block-spacing-vertical) 0;
|
margin: var(--block-spacing-vertical) 0;
|
||||||
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
|
||||||
|
background: var(--article-code-background-color);
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -347,6 +359,37 @@ section > pre {
|
||||||
content: "Great";
|
content: "Great";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Docs: Modal
|
||||||
|
*/
|
||||||
|
dialog.example {
|
||||||
|
display: block;
|
||||||
|
z-index: inherit;
|
||||||
|
position: relative;
|
||||||
|
top: inherit;
|
||||||
|
right: inherit;
|
||||||
|
bottom: inherit;
|
||||||
|
left: inherit;
|
||||||
|
align-items: inherit;
|
||||||
|
justify-content: inherit;
|
||||||
|
width: inherit;
|
||||||
|
min-width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
min-height: inherit;
|
||||||
|
padding: 0;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
dialog.example article {
|
||||||
|
max-width: inherit;
|
||||||
|
}
|
||||||
|
dialog.example:not([open]), dialog.example[open=false] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-is-open body > button {
|
||||||
|
filter: blur(0.125rem);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Docs: Navs
|
* Docs: Navs
|
||||||
*/
|
*/
|
||||||
|
|
@ -411,8 +454,8 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
border: 0.15rem solid currentColor;
|
border: 0.15rem solid currentColor;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);
|
||||||
vertical-align: bottom;
|
|
||||||
content: "";
|
content: "";
|
||||||
|
vertical-align: bottom;
|
||||||
transition: transform var(--transition);
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
.switcher i {
|
.switcher i {
|
||||||
|
|
@ -420,8 +463,8 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
max-width: 0;
|
max-width: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 0.875rem;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
font-size: 0.875rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.switcher:hover, .switcher:focus {
|
.switcher:hover, .switcher:focus {
|
||||||
|
|
@ -444,3 +487,5 @@ body > nav ul:first-of-type li:nth-of-type(2) {
|
||||||
right: var(--spacing);
|
right: var(--spacing);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=pico.docs.css.map */
|
||||||
1
docs/css/pico.docs.css.map
Normal file
1
docs/css/pico.docs.css.map
Normal file
File diff suppressed because one or more lines are too long
3
docs/css/pico.docs.min.css
vendored
3
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
1
docs/css/pico.docs.min.css.map
Normal file
1
docs/css/pico.docs.min.css.map
Normal file
File diff suppressed because one or more lines are too long
59
docs/customization.html
Normal file
59
docs/customization.html
Normal file
File diff suppressed because one or more lines are too long
93
docs/forms.html
Normal file
93
docs/forms.html
Normal file
File diff suppressed because one or more lines are too long
6
docs/grid.html
Normal file
6
docs/grid.html
Normal file
File diff suppressed because one or more lines are too long
1323
docs/index.html
1323
docs/index.html
File diff suppressed because one or more lines are too long
21
docs/js/commons.js
Normal file
21
docs/js/commons.js
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
/*
|
||||||
|
* Add some magic to Pico docs
|
||||||
|
*
|
||||||
|
* Pico.css - https://picocss.com
|
||||||
|
* Copyright 2019-2021 - Licensed under MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Imports
|
||||||
|
import themeSwitcher from './src/theme-switcher.js';
|
||||||
|
import toggleNavigation from './src/toggle-navigation';
|
||||||
|
|
||||||
|
// Theme switcher
|
||||||
|
themeSwitcher.addButton({
|
||||||
|
tag: 'BUTTON',
|
||||||
|
class: 'contrast switcher theme-switcher',
|
||||||
|
target: 'body',
|
||||||
|
});
|
||||||
|
themeSwitcher.init();
|
||||||
|
|
||||||
|
// Toggle navigation
|
||||||
|
toggleNavigation.init();
|
||||||
1
docs/js/commons.min.js
vendored
Normal file
1
docs/js/commons.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){var t=this;document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(){"dark"==t.scheme?t.scheme="light":t.scheme="dark"},!1)})},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var i=this;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){var t="dark"==i.scheme?i.change.dark:i.change.light;e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))})}},t={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){var t=this;this.toggleLink.addEventListener("click",function(e){e.preventDefault(),"closed-on-mobile"==t.state?t.state="open":t.state="closed-on-mobile",t.nav.removeAttribute("class"),t.nav.classList.add(t.state)},!1)},get state(){return this._state},set state(e){this._state=e}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init(),t.init()}();
|
||||||
14
docs/js/customization.js
Normal file
14
docs/js/customization.js
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
/*
|
||||||
|
* Customization
|
||||||
|
*
|
||||||
|
* Pico.css - https://picocss.com
|
||||||
|
* Copyright 2019-2021 - Licensed under MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Imports
|
||||||
|
import materialDesignColors from './src/material-design-colors.js';
|
||||||
|
import colorPicker from './src/color-picker.js';
|
||||||
|
|
||||||
|
// Color Picker
|
||||||
|
colorPicker.colors = materialDesignColors;
|
||||||
|
colorPicker.init();
|
||||||
1
docs/js/customization.min.js
vendored
Normal file
1
docs/js/customization.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,25 +1,26 @@
|
||||||
/*
|
/*
|
||||||
* Grid Interaction
|
* Grid
|
||||||
*
|
*
|
||||||
* Pico.css - https://picocss.com
|
* Pico.css - https://picocss.com
|
||||||
* Copyright 2019-2021 - Licensed under MIT
|
* Copyright 2019-2021 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const grid = {
|
const grid = {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
buttons: {
|
buttons: {
|
||||||
text: {
|
text: {
|
||||||
add: 'Add column',
|
add: 'Add column',
|
||||||
remove: 'Remove column',
|
remove: 'Remove column',
|
||||||
},
|
},
|
||||||
target: '#grids article',
|
target: '#grid article',
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
current: 4,
|
current: 4,
|
||||||
min: 1,
|
min: 1,
|
||||||
max: 12,
|
max: 12,
|
||||||
gridTarget: '#grids .grid',
|
gridTarget: '#grid .grid',
|
||||||
codeTarget: '#grids pre code',
|
codeTarget: '#grid pre code',
|
||||||
},
|
},
|
||||||
|
|
||||||
// Init
|
// Init
|
||||||
|
|
@ -50,22 +51,14 @@ export const grid = {
|
||||||
document.querySelector(this.buttons.target).before(buttons);
|
document.querySelector(this.buttons.target).before(buttons);
|
||||||
|
|
||||||
// Add button listener
|
// Add button listener
|
||||||
document.querySelector('#grids button.add').addEventListener(
|
document.querySelector('#grid button.add').addEventListener('click', () => {
|
||||||
'click',
|
this.addColumn();
|
||||||
function () {
|
}, false);
|
||||||
this.addColumn();
|
|
||||||
}.bind(this),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
// Remove button listener
|
// Remove button listener
|
||||||
document.querySelector('#grids button.remove').addEventListener(
|
document.querySelector('#grid button.remove').addEventListener('click', () => {
|
||||||
'click',
|
this.removeColumn();
|
||||||
function () {
|
}, false);
|
||||||
this.removeColumn();
|
|
||||||
}.bind(this),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// Generate grid
|
// Generate grid
|
||||||
|
|
@ -103,4 +96,5 @@ export const grid = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default grid;
|
// Init
|
||||||
|
grid.init();
|
||||||
1
docs/js/grid.min.js
vendored
Normal file
1
docs/js/grid.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
"use strict";var grid={buttons:{text:{add:"Add column",remove:"Remove column"},target:"#grid article"},grid:{current:4,min:1,max:12,gridTarget:"#grid .grid",codeTarget:"#grid pre code"},init:function(){this.addButtons(),this.generateGrid()},addButtons:function(){var t=this,e=document.createElement("P");e.innerHTML='\n <button class="secondary add">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="12" y1="5" x2="12" y2="19"></line>\n <line x1="5" y1="12" x2="19" y2="12">\'</line>\n </svg>\n '.concat(this.buttons.text.add,'\n </button>\n\n <button class="secondary remove">\n <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">\n <line x1="5" y1="12" x2="19" y2="12"></line>\n </svg>\n ').concat(this.buttons.text.remove,"\n </button>"),document.querySelector(this.buttons.target).before(e),document.querySelector("#grid button.add").addEventListener("click",function(){t.addColumn()},!1),document.querySelector("#grid button.remove").addEventListener("click",function(){t.removeColumn()},!1)},generateGrid:function(){for(var t="",e='<<b>div</b> <i>class</i>=<u>"grid"</u>>\n',n=0;n<this.grid.current;n++)t+="<div>"+(n+1)+"</div>",e+=" <<b>div</b>>"+(n+1)+"</<b>div</b>>\n";e+="</<b>div</b>>",document.querySelector(this.grid.gridTarget).innerHTML=t,document.querySelector(this.grid.codeTarget).innerHTML=e},addColumn:function(){this.grid.current<this.grid.max&&(this.grid.current++,this.generateGrid())},removeColumn:function(){this.grid.current>this.grid.min&&(this.grid.current--,this.generateGrid())}};grid.init();
|
||||||
63
docs/js/modal.js
Normal file
63
docs/js/modal.js
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
/*
|
||||||
|
* Modal
|
||||||
|
*
|
||||||
|
* Pico.css - https://picocss.com
|
||||||
|
* Copyright 2019-2021 - Licensed under MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Config
|
||||||
|
const isOpenClass = 'modal-is-open';
|
||||||
|
const openingClass = 'modal-is-opening';
|
||||||
|
const closingClass = 'modal-is-closing';
|
||||||
|
let visibleModal = null;
|
||||||
|
|
||||||
|
// Toggle modal
|
||||||
|
const toggleModal = event => {
|
||||||
|
event.preventDefault();
|
||||||
|
const modal = document.getElementById(event.target.getAttribute('data-target'));
|
||||||
|
(typeof(modal) != 'undefined' && modal != null)
|
||||||
|
&& isModalOpen(modal) ? closeModal(modal) : openModal(modal)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Is modal open
|
||||||
|
const isModalOpen = modal => {
|
||||||
|
return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Open modal
|
||||||
|
const openModal = modal => {
|
||||||
|
setTimeout(() => {
|
||||||
|
visibleModal = modal;
|
||||||
|
}, 100);
|
||||||
|
document.documentElement.classList.add(isOpenClass, openingClass);
|
||||||
|
setTimeout(() => {
|
||||||
|
document.documentElement.classList.remove(openingClass);
|
||||||
|
}, 200);
|
||||||
|
modal.setAttribute('open', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close modal
|
||||||
|
const closeModal = modal => {
|
||||||
|
visibleModal = null;
|
||||||
|
document.documentElement.classList.add(closingClass);
|
||||||
|
setTimeout(() => {
|
||||||
|
document.documentElement.classList.remove(closingClass, isOpenClass);
|
||||||
|
modal.removeAttribute('open');
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close with a click outside
|
||||||
|
document.addEventListener('click', event => {
|
||||||
|
if (visibleModal != null) {
|
||||||
|
const modalContent = visibleModal.querySelector('article');
|
||||||
|
const isClickInside = modalContent.contains(event.target);
|
||||||
|
!isClickInside && closeModal(visibleModal);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close with Esc key
|
||||||
|
document.addEventListener('keydown', event => {
|
||||||
|
if (event.key === 'Escape' && visibleModal != null) {
|
||||||
|
closeModal(visibleModal);
|
||||||
|
}
|
||||||
|
});
|
||||||
1
docs/js/modal.min.js
vendored
Normal file
1
docs/js/modal.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
"use strict";var isOpenClass="modal-is-open",openingClass="modal-is-opening",closingClass="modal-is-closing",visibleModal=null,toggleModal=function(e){e.preventDefault();e=document.getElementById(e.target.getAttribute("data-target"));(void 0!==e&&null!=e&&isModalOpen(e)?closeModal:openModal)(e)},isModalOpen=function(e){return!(!e.hasAttribute("open")||"false"==e.getAttribute("open"))},openModal=function(e){setTimeout(function(){visibleModal=e},100),document.documentElement.classList.add(isOpenClass,openingClass),setTimeout(function(){document.documentElement.classList.remove(openingClass)},200),e.setAttribute("open",!0)},closeModal=function(e){visibleModal=null,document.documentElement.classList.add(closingClass),setTimeout(function(){document.documentElement.classList.remove(closingClass,isOpenClass),e.removeAttribute("open")},200)};document.addEventListener("click",function(e){null!=visibleModal&&(visibleModal.querySelector("article").contains(e.target)||closeModal(visibleModal))}),document.addEventListener("keydown",function(e){"Escape"===e.key&&null!=visibleModal&&closeModal(visibleModal)});
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
/*
|
|
||||||
* Add some magic to Pico docs
|
|
||||||
*
|
|
||||||
* Pico.css - https://picocss.com
|
|
||||||
* Copyright 2019-2021 - Licensed under MIT
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Imports
|
|
||||||
import aside from './src/aside.js';
|
|
||||||
import themeSwitcher from './src/theme-switcher.js';
|
|
||||||
import materialDesignColors from './src/material-design-colors.js';
|
|
||||||
import colorPicker from './src/color-picker.js';
|
|
||||||
import grid from './src/grid.js';
|
|
||||||
import scrollspy from './src/scrollspy.js';
|
|
||||||
|
|
||||||
// Aside initial state
|
|
||||||
aside.init();
|
|
||||||
|
|
||||||
// Theme switcher
|
|
||||||
themeSwitcher.addButton({
|
|
||||||
tag: 'BUTTON',
|
|
||||||
class: 'contrast switcher theme-switcher',
|
|
||||||
target: 'body',
|
|
||||||
});
|
|
||||||
themeSwitcher.init();
|
|
||||||
|
|
||||||
// Color Picker
|
|
||||||
colorPicker.colors = materialDesignColors;
|
|
||||||
colorPicker.init();
|
|
||||||
|
|
||||||
// Grid Interaction
|
|
||||||
grid.init();
|
|
||||||
|
|
||||||
// Scrollspy
|
|
||||||
scrollspy.init();
|
|
||||||
1
docs/js/pico.docs.min.js
vendored
1
docs/js/pico.docs.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,30 +0,0 @@
|
||||||
/*
|
|
||||||
* Aside adjustment
|
|
||||||
*
|
|
||||||
* Pico.css - https://picocss.com
|
|
||||||
* Copyright 2019-2021 - Licensed under MIT
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const aside = {
|
|
||||||
// Config
|
|
||||||
minWidth: '992px',
|
|
||||||
targets: {
|
|
||||||
nav: 'aside nav',
|
|
||||||
details: 'aside details',
|
|
||||||
},
|
|
||||||
|
|
||||||
// Init
|
|
||||||
init() {
|
|
||||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
|
||||||
let nav = document.querySelector(this.targets.nav);
|
|
||||||
let details = document.querySelectorAll(this.targets.details);
|
|
||||||
if (nav.clientHeight < nav.scrollHeight) {
|
|
||||||
details.forEach(function (detail) {
|
|
||||||
detail.removeAttribute('open');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default aside;
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const colorPicker = {
|
export const colorPicker = {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
colors: null,
|
colors: null,
|
||||||
buttonsTarget: '#customization article[data-theme="generated"]',
|
buttonsTarget: '#customization article[data-theme="generated"]',
|
||||||
|
|
@ -30,12 +31,7 @@ export const colorPicker = {
|
||||||
// Loop colors
|
// Loop colors
|
||||||
for (const color in this.colors) {
|
for (const color in this.colors) {
|
||||||
// Buttons
|
// Buttons
|
||||||
innerButtons +=
|
innerButtons += `<button data-color="${color}" aria-label="Activate ${color} theme"></button>`;
|
||||||
'<button data-color="' +
|
|
||||||
color +
|
|
||||||
'" aria-label="Activate ' +
|
|
||||||
color +
|
|
||||||
' theme"></button>';
|
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
innerStyles += `
|
innerStyles += `
|
||||||
|
|
@ -61,19 +57,13 @@ export const colorPicker = {
|
||||||
|
|
||||||
// Buttons listeners
|
// Buttons listeners
|
||||||
this.buttons = document.querySelectorAll(this.selectorButton);
|
this.buttons = document.querySelectorAll(this.selectorButton);
|
||||||
this.buttons.forEach(
|
this.buttons.forEach( button => {
|
||||||
function (button) {
|
button.addEventListener('click', event => {
|
||||||
button.addEventListener(
|
let color = event.target.getAttribute('data-color');
|
||||||
'click',
|
this.setActiveButton(color);
|
||||||
function (event) {
|
this.generateTheme(color);
|
||||||
let color = event.target.getAttribute('data-color');
|
}, false);
|
||||||
this.setActiveButton(color);
|
});
|
||||||
this.generateTheme(color);
|
|
||||||
}.bind(this),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}.bind(this)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Insert CSS Styles
|
// Insert CSS Styles
|
||||||
let containerStyles = document.createElement('STYLE');
|
let containerStyles = document.createElement('STYLE');
|
||||||
|
|
@ -86,16 +76,12 @@ export const colorPicker = {
|
||||||
// Set active button
|
// Set active button
|
||||||
setActiveButton(color) {
|
setActiveButton(color) {
|
||||||
// Remove all active states
|
// Remove all active states
|
||||||
this.buttons.forEach(
|
this.buttons.forEach( button => {
|
||||||
function (button) {
|
button.removeAttribute('class');
|
||||||
button.removeAttribute('class');
|
});
|
||||||
}.bind(this)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Set active state
|
// Set active state
|
||||||
let buttonPicked = document.querySelector(
|
let buttonPicked = document.querySelector(this.selectorButton + '[data-color="' + color + '"]');
|
||||||
this.selectorButton + '[data-color="' + color + '"]'
|
|
||||||
);
|
|
||||||
buttonPicked.setAttribute('class', 'picked');
|
buttonPicked.setAttribute('class', 'picked');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -115,18 +101,12 @@ export const colorPicker = {
|
||||||
'.inverse': data['inverse'],
|
'.inverse': data['inverse'],
|
||||||
};
|
};
|
||||||
|
|
||||||
Object.keys(swaps).forEach(
|
Object.keys(swaps).forEach( swap => {
|
||||||
function (swap) {
|
let targets = document.querySelectorAll(this.selectorSection + ' ' + swap);
|
||||||
let targets = document.querySelectorAll(
|
targets.forEach( target => {
|
||||||
this.selectorSection + ' ' + swap
|
target.innerHTML = swaps[swap];
|
||||||
);
|
});
|
||||||
targets.forEach(
|
});
|
||||||
function (target) {
|
|
||||||
target.innerHTML = swaps[swap];
|
|
||||||
}.bind(this)
|
|
||||||
);
|
|
||||||
}.bind(this)
|
|
||||||
);
|
|
||||||
|
|
||||||
// 2. Update CSS Styles
|
// 2. Update CSS Styles
|
||||||
const innerStyles = `
|
const innerStyles = `
|
||||||
|
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
/*
|
|
||||||
* Scrollspy
|
|
||||||
* Automatically update nav targets based on scroll position
|
|
||||||
*
|
|
||||||
* Require `most-visible.js` (https://github.com/andyexeter/most-visible)
|
|
||||||
*
|
|
||||||
* Pico.css - https://picocss.com
|
|
||||||
* Copyright 2019-2021 - Licensed under MIT
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const scrollspy = {
|
|
||||||
|
|
||||||
// Config
|
|
||||||
minWidth: '992px',
|
|
||||||
interval: 75,
|
|
||||||
targets: {
|
|
||||||
sections: '[role="document"] > section',
|
|
||||||
nav: 'main aside nav',
|
|
||||||
active: 'active',
|
|
||||||
},
|
|
||||||
|
|
||||||
// Init
|
|
||||||
init() {
|
|
||||||
if (window.matchMedia('(min-width: ' + this.minWidth + ')').matches) {
|
|
||||||
this.setActiveNav();
|
|
||||||
this.scrollStop();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Set active section in nav
|
|
||||||
setActiveNav() {
|
|
||||||
// Get active section
|
|
||||||
let currentSection = mostVisible(this.targets.sections).getAttribute('id');
|
|
||||||
|
|
||||||
// Remove all active states
|
|
||||||
let links = document.querySelectorAll(
|
|
||||||
this.targets.nav + ' a.' + this.targets.active
|
|
||||||
);
|
|
||||||
links.forEach(
|
|
||||||
function (link) {
|
|
||||||
link.classList.remove(this.targets.active);
|
|
||||||
}.bind(this)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Set active state
|
|
||||||
let activeLink = document.querySelector(
|
|
||||||
this.targets.nav + ' a[href="#' + currentSection + '"]'
|
|
||||||
);
|
|
||||||
activeLink.classList.add(this.targets.active);
|
|
||||||
|
|
||||||
// Open details parent
|
|
||||||
activeLink.closest('details').setAttribute('open', '');
|
|
||||||
},
|
|
||||||
|
|
||||||
// Scroll stop
|
|
||||||
scrollStop() {
|
|
||||||
let isScrolling;
|
|
||||||
window.addEventListener(
|
|
||||||
'scroll',
|
|
||||||
function (event) {
|
|
||||||
window.clearTimeout(isScrolling);
|
|
||||||
isScrolling = setTimeout(
|
|
||||||
function () {
|
|
||||||
this.setActiveNav();
|
|
||||||
}.bind(this),
|
|
||||||
this.interval
|
|
||||||
);
|
|
||||||
}.bind(this),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default scrollspy;
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const themeSwitcher = {
|
export const themeSwitcher = {
|
||||||
|
|
||||||
// Config
|
// Config
|
||||||
_scheme: 'auto',
|
_scheme: 'auto',
|
||||||
change: {
|
change: {
|
||||||
|
|
@ -22,36 +23,21 @@ export const themeSwitcher = {
|
||||||
|
|
||||||
// Prefered color scheme
|
// Prefered color scheme
|
||||||
get preferedColorScheme() {
|
get preferedColorScheme() {
|
||||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
return 'dark';
|
|
||||||
} else {
|
|
||||||
return 'light';
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// Init switchers
|
// Init switchers
|
||||||
initSwitchers() {
|
initSwitchers() {
|
||||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||||
buttons.forEach(
|
buttons.forEach(button => {
|
||||||
function (button) {
|
button.addEventListener('click', () => {
|
||||||
button.addEventListener(
|
this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
|
||||||
'click',
|
}, false);
|
||||||
function (event) {
|
});
|
||||||
if (this.scheme == 'dark') {
|
|
||||||
this.scheme = 'light';
|
|
||||||
} else {
|
|
||||||
this.scheme = 'dark';
|
|
||||||
}
|
|
||||||
}.bind(this),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}.bind(this)
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// Add new button
|
// Add new button
|
||||||
addButton(config) {
|
addButton(config) {
|
||||||
// Insert Switcher
|
|
||||||
let button = document.createElement(config.tag);
|
let button = document.createElement(config.tag);
|
||||||
button.className = config.class;
|
button.className = config.class;
|
||||||
document.querySelector(config.target).appendChild(button);
|
document.querySelector(config.target).appendChild(button);
|
||||||
|
|
@ -60,19 +46,11 @@ export const themeSwitcher = {
|
||||||
// Set scheme
|
// Set scheme
|
||||||
set scheme(scheme) {
|
set scheme(scheme) {
|
||||||
if (scheme == 'auto') {
|
if (scheme == 'auto') {
|
||||||
if (this.preferedColorScheme == 'dark') {
|
this.preferedColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
|
||||||
this._scheme = 'dark';
|
|
||||||
} else {
|
|
||||||
this._scheme = 'light';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set to Dark
|
|
||||||
else if (scheme == 'dark' || scheme == 'light') {
|
else if (scheme == 'dark' || scheme == 'light') {
|
||||||
this._scheme = scheme;
|
this._scheme = scheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set to Apply theme
|
|
||||||
this.applyScheme();
|
this.applyScheme();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -83,22 +61,14 @@ export const themeSwitcher = {
|
||||||
|
|
||||||
// Apply scheme
|
// Apply scheme
|
||||||
applyScheme() {
|
applyScheme() {
|
||||||
// Root attribute
|
|
||||||
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
document.querySelector('html').setAttribute('data-theme', this.scheme);
|
||||||
|
|
||||||
// Buttons text
|
|
||||||
const buttons = document.querySelectorAll(this.buttonsTarget);
|
const buttons = document.querySelectorAll(this.buttonsTarget);
|
||||||
let text;
|
|
||||||
buttons.forEach(
|
buttons.forEach(
|
||||||
function (button) {
|
button => {
|
||||||
if (this.scheme == 'dark') {
|
const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
|
||||||
text = this.change.dark;
|
|
||||||
} else {
|
|
||||||
text = this.change.light;
|
|
||||||
}
|
|
||||||
button.innerHTML = text;
|
button.innerHTML = text;
|
||||||
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
|
||||||
}.bind(this)
|
}
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
42
docs/js/src/toggle-navigation.js
Normal file
42
docs/js/src/toggle-navigation.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
/*
|
||||||
|
* Toggle navigation
|
||||||
|
*
|
||||||
|
* Pico.css - https://picocss.com
|
||||||
|
* Copyright 2019-2021 - Licensed under MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
export const toggleNavigation = {
|
||||||
|
|
||||||
|
// Config
|
||||||
|
_state: 'closed-on-mobile',
|
||||||
|
toggleLink: document.getElementById('toggle-docs-navigation'),
|
||||||
|
nav: document.querySelector('main > aside > nav'),
|
||||||
|
|
||||||
|
// Init
|
||||||
|
init() {
|
||||||
|
this.onToggleClick()
|
||||||
|
},
|
||||||
|
|
||||||
|
onToggleClick() {
|
||||||
|
this.toggleLink.addEventListener('click', event => {
|
||||||
|
event.preventDefault();
|
||||||
|
this.state == 'closed-on-mobile'
|
||||||
|
? this.state = 'open'
|
||||||
|
: this.state = 'closed-on-mobile';
|
||||||
|
this.nav.removeAttribute('class');
|
||||||
|
this.nav.classList.add(this.state);
|
||||||
|
}, false);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get state
|
||||||
|
get state() {
|
||||||
|
return this._state;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Set state
|
||||||
|
set state(state) {
|
||||||
|
this._state = state;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default toggleNavigation;
|
||||||
2
docs/loading.html
Normal file
2
docs/loading.html
Normal file
File diff suppressed because one or more lines are too long
65
docs/modal.html
Normal file
65
docs/modal.html
Normal file
File diff suppressed because one or more lines are too long
28
docs/navs.html
Normal file
28
docs/navs.html
Normal file
File diff suppressed because one or more lines are too long
3
docs/progress.html
Normal file
3
docs/progress.html
Normal file
File diff suppressed because one or more lines are too long
4
docs/rtl.html
Normal file
4
docs/rtl.html
Normal file
File diff suppressed because one or more lines are too long
5
docs/scroller.html
Normal file
5
docs/scroller.html
Normal file
File diff suppressed because one or more lines are too long
34
docs/scss/components/_modal.scss
Normal file
34
docs/scss/components/_modal.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
/**
|
||||||
|
* Docs: Modal
|
||||||
|
*/
|
||||||
|
|
||||||
|
dialog.example {
|
||||||
|
display: block;
|
||||||
|
z-index: inherit;
|
||||||
|
position: relative;
|
||||||
|
top: inherit;
|
||||||
|
right: inherit;
|
||||||
|
bottom: inherit;
|
||||||
|
left: inherit;
|
||||||
|
align-items: inherit;
|
||||||
|
justify-content: inherit;
|
||||||
|
width: inherit;
|
||||||
|
min-width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
min-height: inherit;
|
||||||
|
padding: 0;
|
||||||
|
background-color:inherit;
|
||||||
|
|
||||||
|
article {
|
||||||
|
max-width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([open]),
|
||||||
|
&[open=false] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-is-open body > button {
|
||||||
|
filter: blur(0.125rem);
|
||||||
|
}
|
||||||
|
|
@ -26,8 +26,8 @@
|
||||||
currentColor 50%,
|
currentColor 50%,
|
||||||
transparent 50%
|
transparent 50%
|
||||||
);
|
);
|
||||||
vertical-align: bottom;
|
|
||||||
content: "";
|
content: "";
|
||||||
|
vertical-align: bottom;
|
||||||
transition: transform var(--transition);
|
transition: transform var(--transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -36,8 +36,8 @@
|
||||||
max-width: 0;
|
max-width: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 0.875rem;
|
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
font-size: 0.875rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,17 +8,17 @@ article > footer.code {
|
||||||
}
|
}
|
||||||
article pre,
|
article pre,
|
||||||
article pre code {
|
article pre code {
|
||||||
background: transparent;
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Code block outside article
|
// Code block outside article
|
||||||
// Horizontally aligned with <article> content
|
// Horizontally aligned with <article> content
|
||||||
section > pre {
|
section > pre {
|
||||||
background: var(--article-code-background-color);
|
|
||||||
margin: var(--block-spacing-vertical) 0;
|
margin: var(--block-spacing-vertical) 0;
|
||||||
padding: calc(var(--block-spacing-vertical) / 1.5)
|
padding: calc(var(--block-spacing-vertical) / 1.5)
|
||||||
var(--block-spacing-horizontal);
|
var(--block-spacing-horizontal);
|
||||||
|
background: var(--article-code-background-color);
|
||||||
box-shadow: var(--card-box-shadow);
|
box-shadow: var(--card-box-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,10 @@
|
||||||
* Docs: Typography
|
* Docs: Typography
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
section > hgroup {
|
section > hgroup {
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,11 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
main > aside {
|
main > aside {
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: var(--block-spacing-vertical);
|
margin-bottom: calc(var(--block-spacing-vertical) * 2);
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
@ -18,12 +15,58 @@ main > aside {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
a#toggle-docs-navigation {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
padding: 0;
|
||||||
|
padding-bottom: var(--spacing);
|
||||||
|
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
margin-right: calc(var(--spacing) * 0.5);
|
||||||
|
vertical-align: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.closed-on-mobile {
|
||||||
|
margin-bottom: var(--block-spacing-vertical);
|
||||||
|
|
||||||
|
a#toggle-docs-navigation {
|
||||||
|
svg.collapse {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
> a#toggle-docs-navigation {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
a#toggle-docs-navigation {
|
||||||
|
svg.expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
li,
|
li,
|
||||||
summary {
|
summary {
|
||||||
|
|
@ -33,7 +76,7 @@ main > aside {
|
||||||
}
|
}
|
||||||
|
|
||||||
li a {
|
li a {
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.375rem 0.5rem;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
@ -51,13 +94,12 @@ main > aside {
|
||||||
}
|
}
|
||||||
|
|
||||||
details {
|
details {
|
||||||
padding-bottom: 0.25rem;
|
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
color: var(--h1-color);
|
color: var(--h1-color);
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
font-size: 14px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|
@ -66,8 +108,12 @@ main > aside {
|
||||||
}
|
}
|
||||||
|
|
||||||
&[open] {
|
&[open] {
|
||||||
> summary:not(:focus) {
|
> summary {
|
||||||
color: var(--h1-color);
|
margin-bottom: calc(var(--spacing) * 0.75);
|
||||||
|
|
||||||
|
&:not(:focus) {
|
||||||
|
color: var(--h1-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,14 @@
|
||||||
|
|
||||||
// Docs: Themes
|
// Docs: Themes
|
||||||
#themes {
|
#themes {
|
||||||
button i {
|
button.theme-switcher {
|
||||||
font-style: normal;
|
&:first-of-type {
|
||||||
|
--font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -13,14 +19,14 @@
|
||||||
#customization {
|
#customization {
|
||||||
figure {
|
figure {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(9, 1fr);
|
|
||||||
grid-template-rows: repeat(2, 1fr);
|
grid-template-rows: repeat(2, 1fr);
|
||||||
|
grid-template-columns: repeat(9, 1fr);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
grid-template-columns: repeat(18, 1fr);
|
|
||||||
grid-template-rows: 1fr;
|
grid-template-rows: 1fr;
|
||||||
|
grid-template-columns: repeat(18, 1fr);
|
||||||
border-top-right-radius: var(--border-radius);
|
border-top-right-radius: var(--border-radius);
|
||||||
border-top-left-radius: var(--border-radius);
|
border-top-left-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
@ -45,8 +51,8 @@
|
||||||
&.picked {
|
&.picked {
|
||||||
background-image: var(--icon-check);
|
background-image: var(--icon-check);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.66rem auto;
|
background-size: 0.66rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
&[data-color="lime"],
|
&[data-color="lime"],
|
||||||
|
|
@ -68,8 +74,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Docs: Grids
|
// Docs: Grid
|
||||||
#grids {
|
#grid {
|
||||||
--grid-spacing-vertical: 1rem;
|
--grid-spacing-vertical: 1rem;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
@ -115,3 +121,10 @@
|
||||||
#forms div.grid {
|
#forms div.grid {
|
||||||
grid-row-gap: 0;
|
grid-row-gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Docs: Modal
|
||||||
|
#modal {
|
||||||
|
button {
|
||||||
|
--font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ body > main {
|
||||||
@if map-get($breakpoints, "lg") {
|
@if map-get($breakpoints, "lg") {
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
@media (min-width: map-get($breakpoints, "lg")) {
|
||||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
|
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 200px auto;
|
grid-template-columns: 200px auto;
|
||||||
}
|
}
|
||||||
|
|
@ -30,42 +30,6 @@ body > main {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Anchors hacks for internal links
|
|
||||||
div[role="document"] > section::before {
|
|
||||||
display: block;
|
|
||||||
height: calc(2rem + #{$navHeight} - 0.5rem);
|
|
||||||
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
|
|
||||||
content: "";
|
|
||||||
|
|
||||||
@if map-get($breakpoints, "sm") {
|
|
||||||
@media (min-width: map-get($breakpoints, "sm")) {
|
|
||||||
height: calc(2.5rem + #{$navHeight} - 0.5rem);
|
|
||||||
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if map-get($breakpoints, "md") {
|
|
||||||
@media (min-width: map-get($breakpoints, "md")) {
|
|
||||||
height: calc(3rem + #{$navHeight} - 0.5rem);
|
|
||||||
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if map-get($breakpoints, "lg") {
|
|
||||||
@media (min-width: map-get($breakpoints, "lg")) {
|
|
||||||
height: calc(3.5rem + #{$navHeight} - 0.5rem);
|
|
||||||
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if map-get($breakpoints, "xl") {
|
|
||||||
@media (min-width: map-get($breakpoints, "xl")) {
|
|
||||||
height: calc(4rem + #{$navHeight} - 0.5rem);
|
|
||||||
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// External links
|
// External links
|
||||||
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
|
||||||
{
|
{
|
||||||
|
|
@ -74,8 +38,8 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
background-image: var(--icon-external);
|
background-image: var(--icon-external);
|
||||||
background-position: top center;
|
background-position: top center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 0.66rem auto;
|
background-size: 0.66rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,5 +19,6 @@
|
||||||
@import "content/code";
|
@import "content/code";
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
@import "components/modal";
|
||||||
@import "components/nav";
|
@import "components/nav";
|
||||||
@import "components/theme-switcher";
|
@import "components/theme-switcher";
|
||||||
|
|
|
||||||
4
docs/src/_footer.html
Normal file
4
docs/src/_footer.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<footer>
|
||||||
|
<hr>
|
||||||
|
<p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p>
|
||||||
|
</footer>
|
||||||
8
docs/src/_head.html
Normal file
8
docs/src/_head.html
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>${props.title} • Pico.css</title>
|
||||||
|
<meta name="description" content="${props.description}">
|
||||||
|
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
|
||||||
|
<link rel="stylesheet" href="../css/pico.min.css">
|
||||||
|
<link rel="stylesheet" href="css/pico.docs.min.css">
|
||||||
|
<link rel="canonical" href="https://www.picocss.com/docs/${props.canonical}">
|
||||||
23
docs/src/_nav.html
Normal file
23
docs/src/_nav.html
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<nav class="container-fluid">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://picocss.com" aria-label="Back home">
|
||||||
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px">
|
||||||
|
<path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>Documentation</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>
|
||||||
|
<li><a href="./" class="secondary">Docs</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
|
||||||
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px">
|
||||||
|
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
73
docs/src/_sidebar.html
Normal file
73
docs/src/_sidebar.html
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
<aside>
|
||||||
|
<nav class="closed-on-mobile">
|
||||||
|
<a href="./" class="secondary" id="toggle-docs-navigation">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16" height="16px">
|
||||||
|
<title>Expand</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
|
||||||
|
</svg>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="collapse" fill="currentColor" viewBox="0 0 16 16" height="16px">
|
||||||
|
<title>Collapse</title>
|
||||||
|
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path>
|
||||||
|
</svg>
|
||||||
|
Table of content
|
||||||
|
</a>
|
||||||
|
<details>
|
||||||
|
<summary>Getting started</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./" id="start-link" class="secondary">Usage</a></li>
|
||||||
|
<li><a href="./themes.html" id="themes-link" class="secondary">Themes</a></li>
|
||||||
|
<li><a href="./customization.html" id="customization-link" class="secondary">Customization</a></li>
|
||||||
|
<li><a href="./classless.html" id="classless-link" class="secondary">Class-less version</a></li>
|
||||||
|
<li><a href="./rtl.html" id="rtl-link" class="secondary">RTL</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Layout</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li>
|
||||||
|
<li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li>
|
||||||
|
<li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Elements</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./typography.html" id="typography-link" class="secondary">Typography</a></li>
|
||||||
|
<li><a href="./buttons.html" id="buttons-link" class="secondary">Buttons</a></li>
|
||||||
|
<li><a href="./forms.html" id="forms-link" class="secondary">Forms</a></li>
|
||||||
|
<li><a href="./tables.html" id="tables-link" class="secondary">Tables</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Components</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
|
||||||
|
<li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
|
||||||
|
<li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
|
||||||
|
<li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
|
||||||
|
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Utilities</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./loading.html" id="loading-link" class="secondary">Loading</a></li>
|
||||||
|
<li><a href="./tooltips.html" id="tooltips-link" class="secondary">Tooltips</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Extend</summary>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="./we-love-classes.html" id="we-love-classes-link" class="secondary">We love .classes</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</nav>
|
||||||
|
<script>
|
||||||
|
const activeLink = document.querySelector(`aside a#${props.active}`);
|
||||||
|
const parentAccordion = activeLink.closest('details');
|
||||||
|
activeLink.classList.add('active');
|
||||||
|
parentAccordion.setAttribute('open', 'true');
|
||||||
|
</script>
|
||||||
|
</aside>
|
||||||
62
docs/src/accordions.html
Normal file
62
docs/src/accordions.html
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Accordions"
|
||||||
|
description="Toggle sections of content in pure HTML, without JavaScript."
|
||||||
|
canonical="accordions.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="accordions-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="accordions">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Accordions</h1>
|
||||||
|
<h2>Toggle sections of content in pure HTML, without JavaScript.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Accordions examples">
|
||||||
|
<details>
|
||||||
|
<summary>Collapsible elements 1</summary>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.</p>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary>Collapsible elements 2</summary>
|
||||||
|
<ul>
|
||||||
|
<li>Vestibulum id elit quis massa interdum sodales.</li>
|
||||||
|
<li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
|
||||||
|
<li>Quisque sed eros non eros ornare elementum.</li>
|
||||||
|
<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>details</b>>
|
||||||
|
<<b>summary</b>>Collapsible elements 1</<b>summary</b>>
|
||||||
|
<<b>p</b>>…</<b>p</b>>
|
||||||
|
</<b>details</b>>
|
||||||
|
|
||||||
|
<<b>details</b> <i>open</i>>
|
||||||
|
<<b>summary</b>>Collapsible elements 2</<b>summary</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>>…</<b>li</b>>
|
||||||
|
<<b>li</b>>…</<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>details</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
76
docs/src/buttons.html
Normal file
76
docs/src/buttons.html
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Buttons"
|
||||||
|
description="The essential button in pure HTML, without .classes for the default style."
|
||||||
|
canonical="buttons.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="buttons-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="buttons">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Buttons</h1>
|
||||||
|
<h2>The essential button in pure HTML, without <code>.classes</code> for the default style.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Button example">
|
||||||
|
<button aria-label="Button">Button</button>
|
||||||
|
<input type="submit">
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>button</b>>Button</<b>button</b>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"submit"</u>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><<b>a</b> <i>role</i>=<u>"button"></u></code> if you need an inline element.</p>
|
||||||
|
<article aria-label="Inline buttons examples">
|
||||||
|
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||||
|
<a href="#" onclick="event.preventDefault()" role="button">Link</a>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Link</<b>a</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Buttons come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||||
|
<article aria-label="Buttons styles examples">
|
||||||
|
<a href="#" onclick="event.preventDefault()" role="button" class="secondary">Secondary</a>
|
||||||
|
<a href="#" onclick="event.preventDefault()" role="button" class="contrast">Contrast</a>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>And a classic <code>.outline</code> variant.</p>
|
||||||
|
<article aria-label="Outline style examples">
|
||||||
|
<a href="#" onclick="event.preventDefault()" role="button" class="outline">Primary</a>
|
||||||
|
<a href="#" onclick="event.preventDefault()" role="button" class="secondary outline">Secondary</a>
|
||||||
|
<a href="#" onclick="event.preventDefault()" role="button" class="contrast outline">Contrast</a>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"outline"</u>>Primary</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary outline"</u>>Secondary</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast outline"</u>>Contrast</<b>a</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
docs/src/cards.html
Normal file
48
docs/src/cards.html
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Cards"
|
||||||
|
description="A flexible container with graceful spacings across devices and viewports."
|
||||||
|
canonical="cards.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="cards-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="cards">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Cards</h1>
|
||||||
|
<h2>A flexible container with graceful spacings across devices and viewports.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Card example">
|
||||||
|
I'm a card!
|
||||||
|
</article>
|
||||||
|
<pre><code><<b>article</b>>I'm a card!</<b>article</b>></code></pre>
|
||||||
|
<p>You can use <code><<b>header</b>></code> and footer <code><<b>footer</b>></code> inside <code><<b>article</b>></code></p>
|
||||||
|
<article aria-label="Card sectioning example">
|
||||||
|
<header>Header</header>
|
||||||
|
Body
|
||||||
|
<footer>Footer</footer>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<pre><code><<b>article</b>>
|
||||||
|
<<b>header</b>>Header</<b>header</b>>
|
||||||
|
Body
|
||||||
|
<<b>footer</b>>Footer</<b>footer</b>>
|
||||||
|
</<b>article</b>></code></pre>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
docs/src/classless.html
Normal file
48
docs/src/classless.html
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Class-less version"
|
||||||
|
description="For wild HTML purists, Pico provides a .classless version."
|
||||||
|
canonical="classless.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="classless-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="classless">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Class-less version</h1>
|
||||||
|
<h2>For wild HTML purists!</h2>
|
||||||
|
</hgroup>
|
||||||
|
<p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
|
||||||
|
<p>In this version, <code><<b>header</b>></code>, <code><<b>main</b>></code>, and <code><<b>footer</b>></code> act as <a href="./containers.html">containers</a> to define a centered or a fluid viewport.</p>
|
||||||
|
<p><strong>Usage:</strong></p>
|
||||||
|
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
|
||||||
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>></code></pre>
|
||||||
|
<p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
|
||||||
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>></code></pre>
|
||||||
|
<p>These <code>.classless</code> versions are also available on <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a>:</p>
|
||||||
|
|
||||||
|
<pre><code><em>// Centered viewport</em>
|
||||||
|
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css"</u>>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<pre><code><em>// Fluid viewport</em>
|
||||||
|
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"</u>>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
74
docs/src/containers.html
Normal file
74
docs/src/containers.html
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Containers"
|
||||||
|
description=".container enable a centered viewport, .container-fluid enable a 100% layout."
|
||||||
|
canonical="containers.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="containers-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="containers">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Containers</h1>
|
||||||
|
<h2>
|
||||||
|
<code>.container</code> enable a centered viewport.<br>
|
||||||
|
<code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
|
||||||
|
</h2>
|
||||||
|
</hgroup>
|
||||||
|
|
||||||
|
<pre><code><<b>body</b>>
|
||||||
|
<<b>main</b> <i>class</i>=<u>"container"</u>></<b>main</b>>
|
||||||
|
</<b>body</b>></code></pre>
|
||||||
|
|
||||||
|
<p>Pico uses the same breakpoints and viewports sizes as <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints">Bootstrap</a>.</p>
|
||||||
|
<figure>
|
||||||
|
<table role="grid">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Device</th>
|
||||||
|
<th>Extra small</th>
|
||||||
|
<th>Small</th>
|
||||||
|
<th>Medium</th>
|
||||||
|
<th>Large</th>
|
||||||
|
<th>Extra large</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Breakpoint</th>
|
||||||
|
<td><576<small>px</small></td>
|
||||||
|
<td>≥576<small>px</small></td>
|
||||||
|
<td>≥768<small>px</small></td>
|
||||||
|
<td>≥992<small>px</small></td>
|
||||||
|
<td>≥1200<small>px</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Viewport</th>
|
||||||
|
<td>100<small>%</small></td>
|
||||||
|
<td>540<small>px</small></td>
|
||||||
|
<td>720<small>px</small></td>
|
||||||
|
<td>960<small>px</small></td>
|
||||||
|
<td>1140<small>px</small></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<p><code><<b>header</b>></code>, <code><<b>main</b>></code> and <code><<b>footer</b>></code> as direct childs of <code><<b>body</b>></code> provide a responsive vertical <code><i>padding</i></code></p>
|
||||||
|
<p><code><<b>section</b>></code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
131
docs/src/customization.html
Normal file
131
docs/src/customization.html
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Customization"
|
||||||
|
description="You can customize themes with SCSS or, you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables)."
|
||||||
|
canonical="customization.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="customization-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="customization">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Customization</h1>
|
||||||
|
<h2>You can customize themes with SCSS or, you can edit the CSS variables.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<p>Example: <strong>pick a color!</strong></p>
|
||||||
|
|
||||||
|
<article data-theme="generated" aria-label="Generated theme example">
|
||||||
|
<h3><span class="name">Custom theme</span></h3>
|
||||||
|
<form>
|
||||||
|
<div class="grid">
|
||||||
|
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||||
|
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||||
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||||
|
</div>
|
||||||
|
<fieldset>
|
||||||
|
<label for="remember">
|
||||||
|
<input type="checkbox" role="switch" id="remember" name="remember" checked>
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><em>// Simplified example</em>
|
||||||
|
<b>:root</b> {
|
||||||
|
<i>--primary</i>: <u class="c600">…</u>;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>There are 2 ways to customize your version of Pico.css:</p>
|
||||||
|
<h3>Overriding CSS variables</h3>
|
||||||
|
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
|
||||||
|
|
||||||
|
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
|
||||||
|
/* Can be forced with data-theme="light" */</em>
|
||||||
|
<b>[data-theme=<u>"light"</u>]</b>,
|
||||||
|
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
|
||||||
|
<i>--primary</i>: <u class="c600">…</u>;
|
||||||
|
<i>--primary-hover</i>: <u class="c700">…</u>;
|
||||||
|
<i>--primary-focus</i>: <u class="c600-outline-light">…</u>;
|
||||||
|
<i>--primary-inverse</i>: <u class="inverse">…</u>;
|
||||||
|
}
|
||||||
|
|
||||||
|
<em>/* <span class="name"></span>Dark scheme (Auto) */
|
||||||
|
/* Automatically enabled if user has Dark mode enabled */</em>
|
||||||
|
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
|
||||||
|
<b>:root:not([data-theme=<u>"light"</u>])</b> {
|
||||||
|
<i>--primary</i>: <u class="c600">…</u>;
|
||||||
|
<i>--primary-hover</i>: <u class="c500">…</u>;
|
||||||
|
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
|
||||||
|
<i>--primary-inverse</i>: <u class="inverse">…</u>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
<em>/* <span class="name"></span>Dark scheme (Forced) */
|
||||||
|
/* Enabled if forced with data-theme="dark" */</em>
|
||||||
|
<b>[data-theme=<u>"dark"</u>]</b> {
|
||||||
|
<i>--primary</i>: <u class="c600">…</u>;
|
||||||
|
<i>--primary-hover</i>: <u class="c500">…</u>;
|
||||||
|
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
|
||||||
|
<i>--primary-inverse</i>: <u class="inverse">…</u>;
|
||||||
|
}
|
||||||
|
|
||||||
|
<em>/* <span class="name"></span>(Common styles) */</em>
|
||||||
|
<b>:root</b> {
|
||||||
|
<i>--form-element-active-border-color</i>: <u>var</u>(<i>--primary</i>);
|
||||||
|
<i>--form-element-focus-color</i>: <u>var</u>(<i>--primary-focus</i>);
|
||||||
|
<i>--switch-color</i>: <u>var</u>(<i>--primary-inverse</i>);
|
||||||
|
<i>--switch-checked-background-color</i>: <u>var</u>(<i>--primary</i>);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
|
||||||
|
<h3>Importing Pico SASS library</h3>
|
||||||
|
<p>We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
|
||||||
|
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
|
||||||
|
|
||||||
|
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||||
|
|
||||||
|
<em>// Override default variables</em>
|
||||||
|
<i>$primary-500</i>: <u class="c500">…</u>;
|
||||||
|
<i>$primary-600</i>: <u class="c600">…</u>;
|
||||||
|
<i>$primary-700</i>: <u class="c700">…</u>;
|
||||||
|
|
||||||
|
<em>// Import full Pico source code</em>
|
||||||
|
<b>@import</b> <u>"path/pico"</u>;</code></pre>
|
||||||
|
|
||||||
|
<p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p>
|
||||||
|
|
||||||
|
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
|
||||||
|
|
||||||
|
<em>// Custom theme</em>
|
||||||
|
<b>@import</b> <u>"path/themes/custom"</u>;
|
||||||
|
|
||||||
|
<em>// Import needed components</em>
|
||||||
|
<b>@import</b> <u>"path/layout/document"</u>;
|
||||||
|
<b>@import</b> <u>"path/layout/sectioning"</u>;
|
||||||
|
<em>…</em>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
<script src="js/customization.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
243
docs/src/forms.html
Normal file
243
docs/src/forms.html
Normal file
|
|
@ -0,0 +1,243 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Forms"
|
||||||
|
description="All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports."
|
||||||
|
canonical="forms.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="forms-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="forms">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Forms</h1>
|
||||||
|
<h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
|
||||||
|
<p>All natives form elements are fully customizable and themeable with CSS variables.</p>
|
||||||
|
<article aria-label="Form example">
|
||||||
|
<form>
|
||||||
|
<div class="grid">
|
||||||
|
<label for="firstname">
|
||||||
|
First name
|
||||||
|
<input type="text" id="firstname" name="firstname" placeholder="First name" required>
|
||||||
|
</label>
|
||||||
|
<label for="lastname">
|
||||||
|
Last name
|
||||||
|
<input type="text" id="lastname" name="lastname" placeholder="Last name" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<label for="email">Email address</label>
|
||||||
|
<input type="email" id="email" name="email" placeholder="Email address" required>
|
||||||
|
<small>We'll never share your email with anyone else.</small>
|
||||||
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
|
||||||
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>form</b>>
|
||||||
|
|
||||||
|
<em><!-- Grid --></em>
|
||||||
|
<<b>div</b> <i>class</i>=<u>"grid"</u>>
|
||||||
|
|
||||||
|
<em><!-- Markup example 1: input is inside label --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"firstname"</u>>
|
||||||
|
First name
|
||||||
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<<b>label</b> <i>for</i>=<u>"lastname"</u>>
|
||||||
|
Last name
|
||||||
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
</<b>div</b>>
|
||||||
|
|
||||||
|
<em><!-- Markup example 2: input is after label --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"email"</u>>Email address</<b>label</b>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>>
|
||||||
|
<<b>small</b>>We'll never share your email with anyone else.</<b>small</b>>
|
||||||
|
|
||||||
|
<em><!-- Button --></em>
|
||||||
|
<<b>button</b> <i>type</i>=<u>"submit"</u>>Submit</<b>button</b>>
|
||||||
|
|
||||||
|
</<b>form</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Disabled and validation states:</p>
|
||||||
|
<article aria-label="Validation states examples">
|
||||||
|
<form class="grid">
|
||||||
|
<input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false">
|
||||||
|
<input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true">
|
||||||
|
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
|
||||||
|
<input type="text" value="Readonly" aria-label="Readonly" readonly>
|
||||||
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p><code><<b>fieldset</b>></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p>
|
||||||
|
<p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p>
|
||||||
|
<article aria-label="Select, radios, checkboxes, switch examples">
|
||||||
|
<label for="fruit">Fruit</label>
|
||||||
|
<select id="fruit" required>
|
||||||
|
<option value="" selected>Select a fruit…</option>
|
||||||
|
<option>Banana</option>
|
||||||
|
<option>Watermelon</option>
|
||||||
|
<option>Apple</option>
|
||||||
|
<option>Orange</option>
|
||||||
|
<option>Mango</option>
|
||||||
|
</select>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Size</legend>
|
||||||
|
<label for="small">
|
||||||
|
<input type="radio" id="small" name="size" value="small" checked>
|
||||||
|
Small
|
||||||
|
</label>
|
||||||
|
<label for="medium">
|
||||||
|
<input type="radio" id="medium" name="size" value="medium">
|
||||||
|
Medium
|
||||||
|
</label>
|
||||||
|
<label for="large">
|
||||||
|
<input type="radio" id="large" name="size" value="large">
|
||||||
|
Large
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<label for="terms">
|
||||||
|
<input type="checkbox" id="terms" name="terms">
|
||||||
|
I agree to the Terms and Conditions
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<label for="switch">
|
||||||
|
<input type="checkbox" id="switch" name="switch" role="switch">
|
||||||
|
Publish on my profile
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><em><!-- Select --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
||||||
|
<<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>>
|
||||||
|
<<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>>Select a fruit…</<b>option</b>>
|
||||||
|
<<b>option</b>>…</<b>option</b>>
|
||||||
|
</<b>select</b>>
|
||||||
|
|
||||||
|
<em><!-- Radios --></em>
|
||||||
|
<<b>fieldset</b>>
|
||||||
|
<<b>legend</b>>Size</<b>legend</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"small"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u> <i>checked</i>>
|
||||||
|
Small
|
||||||
|
</<b>label</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"medium"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>>
|
||||||
|
Medium
|
||||||
|
</<b>label</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"large"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>>
|
||||||
|
Large
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>fieldset</b>>
|
||||||
|
|
||||||
|
<em><!-- Checkbox --></em>
|
||||||
|
<<b>fieldset</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"terms"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>>
|
||||||
|
I agree to the Terms and Conditions
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>fieldset</b>>
|
||||||
|
|
||||||
|
<em><!-- Switch --></em>
|
||||||
|
<<b>fieldset</b>>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"switch"</u>>
|
||||||
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>>
|
||||||
|
Publish on my profile
|
||||||
|
</<b>label</b>>
|
||||||
|
</<b>fieldset</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||||
|
<article aria-label="Indeterminate checkbox example">
|
||||||
|
<label for="indeterminate-checkbox">
|
||||||
|
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
|
||||||
|
Select all
|
||||||
|
</label>
|
||||||
|
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>script</b>>
|
||||||
|
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||||
|
</<b>script</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Others input types:</p>
|
||||||
|
<article aria-label="File browser, range slider, date, time, color examples">
|
||||||
|
<label for="file">File browser
|
||||||
|
<input type="file" id="file" name="file">
|
||||||
|
</label>
|
||||||
|
<label for="range">Range slider
|
||||||
|
<input type="range" min="0" max="100" value="50" id="range" name="range">
|
||||||
|
</label>
|
||||||
|
<label for="date">Date
|
||||||
|
<input type="date" id="date" name="date">
|
||||||
|
</label>
|
||||||
|
<label for="time">Time
|
||||||
|
<input type="time" id="time" name="time">
|
||||||
|
</label>
|
||||||
|
<label for="color">Color
|
||||||
|
<input type="color" id="color" name="color" value="#0eaaaa">
|
||||||
|
</label>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><em><!-- File browser --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"file"</u>>File browser
|
||||||
|
<<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<em><!-- Range slider --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"range"</u>>Range slider
|
||||||
|
<<b>input</b> <i>type</i>=<u>"range"</u> <i>min</i>=<u>"0"</u> <i>max</i>=<u>"100"</u> <i>value</i>=<u>"50"</u> <i>id</i>=<u>"range"</u> <i>name</i>=<u>"range"</u>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<em><!-- Date --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"date"</u>>Date
|
||||||
|
<<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<em><!-- Time --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"time"</u>>Time
|
||||||
|
<<b>input</b> <i>type</i>=<u>"time"</u> <i>id</i>=<u>"time"</u> <i>name</i>=<u>"time"</u>>
|
||||||
|
</<b>label</b>>
|
||||||
|
|
||||||
|
<em><!-- Color --></em>
|
||||||
|
<<b>label</b> <i>for</i>=<u>"color"</u>>Color
|
||||||
|
<<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
|
||||||
|
</<b>label</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
67
docs/src/grid.html
Normal file
67
docs/src/grid.html
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Grid"
|
||||||
|
description=".grid enable a minimal grid system with auto-layout columns."
|
||||||
|
canonical="grid.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="grid-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="grid">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Grid</h1>
|
||||||
|
<h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Grid example">
|
||||||
|
<div class="grid">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
<div>3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>div</b> <i>class</i>=<u>"grid"</u>>
|
||||||
|
<<b>div</b>>1</<b>div</b>>
|
||||||
|
<<b>div</b>>2</<b>div</b>>
|
||||||
|
<<b>div</b>>3</<b>div</b>>
|
||||||
|
<<b>div</b>>4</<b>div</b>>
|
||||||
|
</<b>div</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
|
||||||
|
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
|
||||||
|
<details>
|
||||||
|
<summary>
|
||||||
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||||
|
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||||
|
</svg>
|
||||||
|
More about grids
|
||||||
|
</summary>
|
||||||
|
<p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>
|
||||||
|
<p>A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
|
||||||
|
<p>If you need a quick way to prototyping or build a complex layout, you can look at <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="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
|
||||||
|
<p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://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>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
<script src="js/grid.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
57
docs/src/index.html
Normal file
57
docs/src/index.html
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Documentation"
|
||||||
|
description="Pico works without package manager or dependencies! There are 3 ways to get started with pico.css: manually, from a CDN, with NPM."
|
||||||
|
canonical=""
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="start-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="start">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Usage</h1>
|
||||||
|
<h2>Works without package manager or dependencies 🙂!</h2>
|
||||||
|
</hgroup>
|
||||||
|
<p>There are 3 ways to get started with pico.css:</p>
|
||||||
|
<h3>Install manually</h3>
|
||||||
|
<p><a href="https://github.com/picocss/pico/archive/refs/heads/master.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code><<b>head</b>></code> of your website.</p>
|
||||||
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||||
|
<h3>Install from CDN</h3>
|
||||||
|
<p>Alternatively, you can use <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
|
||||||
|
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>></code></pre>
|
||||||
|
<h3>Install with NPM</h3>
|
||||||
|
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
|
||||||
|
<p>Starter HTML template:</p>
|
||||||
|
|
||||||
|
<pre><code><em><!doctype html></em>
|
||||||
|
<<b>html</b> <i>lang</i>=<u>"en"</u>>
|
||||||
|
<<b>head</b>>
|
||||||
|
<<b>meta</b> <i>charset</i>=<u>"utf-8"</u>>
|
||||||
|
<<b>meta</b> <i>name</i>=<u>"viewport"</u> <i>content</i>=<u>"width=device-width, initial-scale=1"</u>>
|
||||||
|
<<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>>
|
||||||
|
<<b>title</b>>Hello, world!</<b>title</b>>
|
||||||
|
</<b>head</b>>
|
||||||
|
<<b>body</b>>
|
||||||
|
<<b>main</b> <i>class</i>=<u>"container"</u>>
|
||||||
|
<<b>h1</b>>Hello, world!</<b>h1</b>>
|
||||||
|
</<b>main</b>>
|
||||||
|
</<b>body</b>>
|
||||||
|
</<b>html</b>></code></pre>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
51
docs/src/loading.html
Normal file
51
docs/src/loading.html
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Loading"
|
||||||
|
description="aria-busy='true' enable a loading indicator."
|
||||||
|
canonical="loading.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="loading-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="loading">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Loading</h1>
|
||||||
|
<h2><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Loading buttons example">
|
||||||
|
<button aria-busy="true">Please wait…</button>
|
||||||
|
<button aria-busy="true" class="secondary"></button>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>button</b> <i>aria-busy</i>=<u>"true"</u>>Please wait…</<b>button</b>>
|
||||||
|
<<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>></<b>button</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>It can be applied to any block:</p>
|
||||||
|
<article aria-busy="true"></article>
|
||||||
|
<pre><code><<b>article</b> <i>aria-busy</i>=<u>"true"</u>></<b>article</b>></code></pre>
|
||||||
|
<p>Or any text element:</p>
|
||||||
|
<article aria-label="Loading paragraph example">
|
||||||
|
<a href="#" aria-busy="true" onclick="event.preventDefault()">Generating link, please wait…</a>
|
||||||
|
<footer class="code">
|
||||||
|
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>>Generating link, please wait…</<b>a</b>></code></pre>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
166
docs/src/modal.html
Normal file
166
docs/src/modal.html
Normal file
|
|
@ -0,0 +1,166 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Modal"
|
||||||
|
description="A flexible container with graceful spacings across devices and viewports."
|
||||||
|
canonical="modal.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="modal-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="modal">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Modal</h1>
|
||||||
|
<h2>The classic modal element with graceful spacings across devices and viewports.</h2>
|
||||||
|
</hgroup>
|
||||||
|
|
||||||
|
<p>Modals are built with <code><<b>dialog</b>></code> as a wrapper and <code><<b>article</b>></code> as a content container.</p>
|
||||||
|
<p>Inside <code><<b>header</b>></code>, <code><<b>a</b> <i>class</i>=<u>"close"</u>></code> is defined to <code><i>float</i>: <u>right</u>;</code> allowing a close icon to be top aligned with a title.</p>
|
||||||
|
|
||||||
|
<dialog class="example" open>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<a href="#close" aria-label="Close" class="close" onclick="event.preventDefault()"></a>
|
||||||
|
<p>Modal title</p>
|
||||||
|
</header>
|
||||||
|
<p>
|
||||||
|
Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
||||||
|
Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
||||||
|
Sed eleifend a dui nec ullamcorper.
|
||||||
|
Praesent vehicula lacus ac justo accumsan ullamcorper.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<pre><code><<b>dialog</b> <i>open</i>>
|
||||||
|
<<b>article</b>>
|
||||||
|
<<b>header</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#close"</u> <i>aria-label</i>=<u>"Close"</u> <i>class</i>=<u>"close"</u>></<b>a</b>>
|
||||||
|
Modal title
|
||||||
|
</<b>header</b>>
|
||||||
|
<<b>p</b>>
|
||||||
|
Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
||||||
|
Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
||||||
|
Sed eleifend a dui nec ullamcorper.
|
||||||
|
Praesent vehicula lacus ac justo accumsan ullamcorper.
|
||||||
|
</<b>p</b>>
|
||||||
|
</<b>article</b>>
|
||||||
|
</<b>dialog</b>></code></pre>
|
||||||
|
|
||||||
|
<p>Inside <code><<b>footer</b>></code>, the content is right aligned by default.</p>
|
||||||
|
|
||||||
|
<dialog class="example" open>
|
||||||
|
<article>
|
||||||
|
<h3>Confirm your action!</h3>
|
||||||
|
<p>
|
||||||
|
Mauris non nibh vel nisi sollicitudin malesuada.
|
||||||
|
Donec ut sagittis erat. Praesent eu eros felis.
|
||||||
|
Ut consectetur placerat pulvinar.
|
||||||
|
</p>
|
||||||
|
<footer>
|
||||||
|
<a href="#cancel" role="button" class="secondary" onclick="event.preventDefault()">Cancel</a><a href="#confirm" role="button" onclick="event.preventDefault()">Confirm</a>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
|
||||||
|
<pre><code><<b>dialog</b> <i>open</i>>
|
||||||
|
<<b>article</b>>
|
||||||
|
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||||
|
<<b>p</b>>
|
||||||
|
Mauris non nibh vel nisi sollicitudin malesuada.
|
||||||
|
Donec ut sagittis erat. Praesent eu eros felis.
|
||||||
|
Ut consectetur placerat pulvinar.
|
||||||
|
</<b>p</b>>
|
||||||
|
<<b>footer</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#cancel"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Cancel</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#confirm"</u> <i>role</i>=<u>"button"</u>>Confirm</<b>a</b>>
|
||||||
|
</<b>footer</b>>
|
||||||
|
</<b>article</b>>
|
||||||
|
</<b>dialog</b>></code></pre>
|
||||||
|
|
||||||
|
<hgroup>
|
||||||
|
<h2>Live demo</h2>
|
||||||
|
<h3>Toggle a modal by clicking the button below.</h3>
|
||||||
|
</hgroup>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><em><!-- Button to trigger the modal --></em>
|
||||||
|
<<b>button</b> <i>class</i>=<u>"contrast"</u>
|
||||||
|
<i>data-target</i>=<u>"modal-example"</u>
|
||||||
|
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||||
|
Launch demo modal
|
||||||
|
</<b>button</b>>
|
||||||
|
|
||||||
|
<em><!-- Modal --></em>
|
||||||
|
<<b>dialog</b> <i>id</i>=<u>"modal-example"</u>>
|
||||||
|
<<b>article</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#close"</u>
|
||||||
|
<i>aria-label</i>=<u>"Close"</u>>
|
||||||
|
<i>class</i>=<u>"close"</u>
|
||||||
|
<i>data-target</i>=<u>"modal-example"</u>
|
||||||
|
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||||
|
</<b>a</b>>
|
||||||
|
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||||
|
<<b>p</b>>
|
||||||
|
Cras sit amet maximus risus.
|
||||||
|
Pellentesque sodales odio sit amet augue finibus pellentesque.
|
||||||
|
Nullam finibus risus non semper euismod.
|
||||||
|
</<b>p</b>>
|
||||||
|
<<b>footer</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#cancel"</u>
|
||||||
|
<i>role</i>=<u>"button"</u>>
|
||||||
|
<i>class</i>=<u>"secondary"</u>
|
||||||
|
<i>data-target</i>=<u>"modal-example"</u>
|
||||||
|
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||||
|
Cancel
|
||||||
|
</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#confirm"</u>
|
||||||
|
<i>role</i>=<u>"button"</u>
|
||||||
|
<i>data-target</i>=<u>"modal-example"</u>
|
||||||
|
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||||
|
Confirm
|
||||||
|
</<b>a</b>>
|
||||||
|
</<b>footer</b>>
|
||||||
|
</<b>article</b>>
|
||||||
|
</<b>dialog</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<p>As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.</p>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<dialog id="modal-example">
|
||||||
|
<article>
|
||||||
|
<a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a>
|
||||||
|
<h3>Confirm your action!</h3>
|
||||||
|
<p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p>
|
||||||
|
<footer>
|
||||||
|
<a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
<script src="js/modal.min.js"></script>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
127
docs/src/navs.html
Normal file
127
docs/src/navs.html
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Navs"
|
||||||
|
description="The essential navbar component in pure semantic HTML."
|
||||||
|
canonical="navs.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="navs-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="navs">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Navs</h1>
|
||||||
|
<h2>The essential navbar component in pure semantic HTML.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Nav example">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Brand</strong></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||||
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||||
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>nav</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>nav</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p><code><<b>ul</b>></code> are automatically distributed horizontally.</p>
|
||||||
|
<p><code><<b>li</b>></code> are unstyled and inlined.</p>
|
||||||
|
<article aria-label="Nav example">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Menu">
|
||||||
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<line x1="3" y1="12" x2="21" y2="12">
|
||||||
|
</line><line x1="3" y1="6" x2="21" y2="6">
|
||||||
|
</line><line x1="3" y1="18" x2="21" y2="18">
|
||||||
|
</line>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Brand</strong></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#" onclick="event.preventDefault()" class="secondary" aria-label="Twitter">
|
||||||
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16px" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>nav</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>…</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>…</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>nav</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Inside <code><<b>aside</b>></code>, navs are stacked vertically.</p>
|
||||||
|
<article aria-label="Vertical nav example">
|
||||||
|
<aside>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||||
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||||
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>aside</b>>
|
||||||
|
<<b>nav</b>>
|
||||||
|
<<b>ul</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||||||
|
</<b>ul</b>>
|
||||||
|
</<b>nav</b>>
|
||||||
|
</<b>aside</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
51
docs/src/progress.html
Normal file
51
docs/src/progress.html
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Progress"
|
||||||
|
description="Progress bar element in pure HTML, without JavaScript."
|
||||||
|
canonical="progress.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="progress-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="progress">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Progress</h1>
|
||||||
|
<h2>Progress bar element in pure HTML, without JavaScript.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Progress bar example">
|
||||||
|
<progress value="25" max="100"></progress>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>></<b>progress</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>You can change a progress bar to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p>
|
||||||
|
<article aria-label="Indeterminate progress bar example">
|
||||||
|
<progress id="indeterminate-progress"></progress>
|
||||||
|
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>script</b>>
|
||||||
|
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-progress'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||||
|
</<b>script</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
39
docs/src/rtl.html
Normal file
39
docs/src/rtl.html
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="RTL (Right-To-Left)"
|
||||||
|
description="Support for right-to-left text in Pico with dir='rtl'"
|
||||||
|
canonical="rtl.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="rtl-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="rtl">
|
||||||
|
<hgroup>
|
||||||
|
<h1>RTL</h1>
|
||||||
|
<h2>Support for right-to-left text in Pico.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b>></code> element.</p>
|
||||||
|
|
||||||
|
<pre><code><em><!doctype html></em>
|
||||||
|
<<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>>
|
||||||
|
<em>...</em>
|
||||||
|
</<b>html</b>></code></pre>
|
||||||
|
|
||||||
|
<p>The RTL feature is still experimental and will probably evolve.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
95
docs/src/scroller.html
Normal file
95
docs/src/scroller.html
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Horizontal scroller"
|
||||||
|
description="<figure> acts as a container to make any content scrollable horizontally."
|
||||||
|
canonical="scroller.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="scroller-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="scroller">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Horizontal scroller</h1>
|
||||||
|
<h2><code><<b>figure</b>></code> acts as a container to make any content scrollable horizontally.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<p>Useful to have responsive <code><<b>table</b>></code></p>
|
||||||
|
<figure>
|
||||||
|
<table role="grid">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<pre><code><<b>figure</b>>
|
||||||
|
<<b>table</b>>
|
||||||
|
…
|
||||||
|
</<b>table</b>>
|
||||||
|
</<b>figure</b>></code></pre>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
157
docs/src/tables.html
Normal file
157
docs/src/tables.html
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Tables"
|
||||||
|
description="Default styles for tables without .classes"
|
||||||
|
canonical="tables.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="tables-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="tables">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Tables</h1>
|
||||||
|
<h2>Default styles for tables without <code>.classes</code></h2>
|
||||||
|
</hgroup>
|
||||||
|
<figure>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<pre><code><<b>table</b>>
|
||||||
|
<<b>thead</b>>
|
||||||
|
<<b>tr</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>#</<b>th</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"col"</u>>Heading</<b>th</b>>
|
||||||
|
</<b>tr</b>>
|
||||||
|
</<b>thead</b>>
|
||||||
|
<<b>tbody</b>>
|
||||||
|
<<b>tr</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"row"</u>>1</<b>th</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
</<b>tr</b>>
|
||||||
|
<<b>tr</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"row"</u>>1</<b>th</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
</<b>tr</b>>
|
||||||
|
<<b>tr</b>>
|
||||||
|
<<b>th</b> <i>scope</i>=<u>"row"</u>>1</<b>th</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
<<b>td</b>>Cell</<b>td</b>>
|
||||||
|
</<b>tr</b>>
|
||||||
|
</<b>tbody</b>>
|
||||||
|
</<b>table</b>></code></pre>
|
||||||
|
|
||||||
|
<p><code><i>role</i>=<u>"grid"</u></code> enable striped rows.</p>
|
||||||
|
<figure>
|
||||||
|
<table role="grid">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
<th scope="col">Heading</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">2</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">3</th>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
<td>Cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<pre><code><<b>table</b> <i>role</i>=<u>"grid"</u>>
|
||||||
|
<em>…</em>
|
||||||
|
</<b>table</b>></code></pre>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
66
docs/src/themes.html
Normal file
66
docs/src/themes.html
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Themes"
|
||||||
|
description="Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled ('prefers-color-scheme: dark')."
|
||||||
|
canonical="themes.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="themes-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="themes">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Themes</h1>
|
||||||
|
<h2>Pico is shipped with 2 consistent themes: Light & Dark.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
|
||||||
|
<article aria-label="Theme switcher">
|
||||||
|
<button class="contrast theme-switcher">…</button>
|
||||||
|
</article>
|
||||||
|
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code></p>
|
||||||
|
<article data-theme="light" aria-label="Forced light theme example">
|
||||||
|
<h3>Light theme</h3>
|
||||||
|
<form class="grid">
|
||||||
|
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||||
|
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||||
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||||
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>article</b> <i>data-theme</i>=<u>"light"</u>>
|
||||||
|
…
|
||||||
|
</<b>article</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<article data-theme="dark" aria-label="Forced dark theme example">
|
||||||
|
<h3>Dark theme</h3>
|
||||||
|
<form class="grid">
|
||||||
|
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||||
|
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||||
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
|
||||||
|
</form>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>>
|
||||||
|
…
|
||||||
|
</<b>article</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
43
docs/src/tooltips.html
Normal file
43
docs/src/tooltips.html
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Tooltips"
|
||||||
|
description="Enable tooltips everywhere in pure HTML, without JavaScript."
|
||||||
|
canonical="tooltips.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="tooltips-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="tooltips">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Tooltips</h1>
|
||||||
|
<h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<article aria-label="Tooltips examples">
|
||||||
|
<p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
|
||||||
|
<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
|
||||||
|
<p><button data-tooltip="Tooltip" aria-label="Example button">Tooltip on a button</button></p>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>p</b>>Tooltip on a <<b>a</b> <i>href</i>=<u>"#"</u> <i>data-tooltip</i>=<u>"Tooltip"</u>>link</<b>a</b>></<b>p</b>>
|
||||||
|
<<b>p</b>>Tooltip on <<b>em</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>inline element</<b>em</b>></<b>p</b>>
|
||||||
|
<<b>p</b>><<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>>Tooltip on a button</<b>button</b>></<b>p</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
200
docs/src/typography.html
Normal file
200
docs/src/typography.html
Normal file
|
|
@ -0,0 +1,200 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="Typography"
|
||||||
|
description="All typographic elements are responsive, allowing text to scale gracefully across devices and viewports."
|
||||||
|
canonical="typography.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="typography-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="typography">
|
||||||
|
<hgroup>
|
||||||
|
<h1>Typography</h1>
|
||||||
|
<h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
|
||||||
|
</hgroup>
|
||||||
|
<figure>
|
||||||
|
<table role="grid">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Device</th>
|
||||||
|
<th>Extra small</th>
|
||||||
|
<th>Small</th>
|
||||||
|
<th>Medium</th>
|
||||||
|
<th>Large</th>
|
||||||
|
<th>Extra large</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Base font</th>
|
||||||
|
<td>16<small>px</small></td>
|
||||||
|
<td>17<small>px</small></td>
|
||||||
|
<td>18<small>px</small></td>
|
||||||
|
<td>19<small>px</small></td>
|
||||||
|
<td>20<small>px</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code><<b>h1</b>></code></th>
|
||||||
|
<td>32<small>px</small></td>
|
||||||
|
<td>34<small>px</small></td>
|
||||||
|
<td>36<small>px</small></td>
|
||||||
|
<td>38<small>px</small></td>
|
||||||
|
<td>40<small>px</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code><<b>h2</b>></code></th>
|
||||||
|
<td>28<small>px</small></td>
|
||||||
|
<td>29<small>px</small></td>
|
||||||
|
<td>31<small>.5px</small></td>
|
||||||
|
<td>33<small>.25px</small></td>
|
||||||
|
<td>35<small>px</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code><<b>h3</b>></code></th>
|
||||||
|
<td>24<small>px</small></td>
|
||||||
|
<td>25<small>.5px</small></td>
|
||||||
|
<td>27<small>px</small></td>
|
||||||
|
<td>28<small>.5px</small></td>
|
||||||
|
<td>30<small>px</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code><<b>h4</b>></code></th>
|
||||||
|
<td>20<small>px</small></td>
|
||||||
|
<td>21<small>.25px</small></td>
|
||||||
|
<td>22<small>.5px</small></td>
|
||||||
|
<td>23<small>.75px</small></td>
|
||||||
|
<td>25<small>px</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code><<b>h5</b>></code></th>
|
||||||
|
<td>18<small>px</small></td>
|
||||||
|
<td>19<small>.125px</small></td>
|
||||||
|
<td>20<small>.25px</small></td>
|
||||||
|
<td>21<small>.375px</small></td>
|
||||||
|
<td>22<small>.5px</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code><<b>h6</b>></code></th>
|
||||||
|
<td>16<small>px</small></td>
|
||||||
|
<td>17<small>px</small></td>
|
||||||
|
<td>18<small>px</small></td>
|
||||||
|
<td>19<small>px</small></td>
|
||||||
|
<td>20<small>px</small></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th><code><<b>small</b>></code></th>
|
||||||
|
<td>14<small>px</small></td>
|
||||||
|
<td>14<small>.875px</small></td>
|
||||||
|
<td>15<small>.75px</small></td>
|
||||||
|
<td>16<small>.625px</small></td>
|
||||||
|
<td>27<small>.5px</small></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<p>Headings:</p>
|
||||||
|
<article aria-label="Headings examples">
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<h5>Heading 5</h5>
|
||||||
|
<h6>Heading 6</h6>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>h1</b>>Heading 1</<b>h1</b>>
|
||||||
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||||
|
<<b>h3</b>>Heading 3</<b>h3</b>>
|
||||||
|
<<b>h4</b>>Heading 4</<b>h4</b>>
|
||||||
|
<<b>h5</b>>Heading 5</<b>h5</b>>
|
||||||
|
<<b>h6</b>>Heading 6</<b>h6</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Inside a <code><<b>hgroup</b>></code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p>
|
||||||
|
<article aria-label="Hgroup example">
|
||||||
|
<hgroup>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Subtitle for heading 2</h3>
|
||||||
|
</hgroup>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>hgroup</b>>
|
||||||
|
<<b>h2</b>>Heading 2</<b>h2</b>>
|
||||||
|
<<b>h3</b>>Subtitle for heading 2</<b>h3</b>>
|
||||||
|
<<b>hgroup</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Inline text elements:</p>
|
||||||
|
<article aria-label="Inline text examples">
|
||||||
|
<div class="grid">
|
||||||
|
<div>
|
||||||
|
<p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p>
|
||||||
|
<p><strong>Bold</strong> <code>strong</code> <code>b</code></p>
|
||||||
|
<p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p>
|
||||||
|
<p><del>Deleted</del> <code>del</code></p>
|
||||||
|
<p><ins>Inserted</ins> <code>ins</code></p>
|
||||||
|
<p><kbd>Ctrl + S</kbd> <code>kbd</code></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p><mark>Highlighted</mark> <code>mark</code></p>
|
||||||
|
<p><s>Strikethrough</s> <code>s</code></p>
|
||||||
|
<p><small>Small </small> <code>small</code></p>
|
||||||
|
<p>Text <sub>Sub</sub> <code>sub</code></p>
|
||||||
|
<p>Text <sup>Sup</sup> <code>sup</code></p>
|
||||||
|
<p><u>Underline</u> <code>u</code></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p>
|
||||||
|
<article aria-label="Links examples">
|
||||||
|
<a href="#" onclick="event.preventDefault()">Primary</a><br>
|
||||||
|
<a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br>
|
||||||
|
<a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>a</b> <i>href</i>=<u>"#"</u>>Primary</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>Secondary</<b>a</b>>
|
||||||
|
<<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"contrast"</u>>Contrast</<b>a</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<p>Blockquote:</p>
|
||||||
|
<article aria-label="Blockquote example">
|
||||||
|
<blockquote>
|
||||||
|
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||||
|
Nam at dui sit amet ipsum cursus ornare."
|
||||||
|
<footer>
|
||||||
|
<cite>- Phasellus eget lacinia</cite>
|
||||||
|
</footer>
|
||||||
|
</blockquote>
|
||||||
|
<footer class="code">
|
||||||
|
|
||||||
|
<pre><code><<b>blockquote</b>>
|
||||||
|
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||||
|
Nam at dui sit amet ipsum cursus ornare."
|
||||||
|
<<b>footer</b>>
|
||||||
|
<<b>cite</b>>- Phasellus eget lacinia</<b>cite</b>>
|
||||||
|
</<b>footer</b>>
|
||||||
|
</<b>blockquote</b>></code></pre>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
docs/src/we-love-classes.html
Normal file
38
docs/src/we-love-classes.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
${require('./_head.html')
|
||||||
|
title="We love .classes"
|
||||||
|
description="As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers."
|
||||||
|
canonical="we-love-classes.html"
|
||||||
|
}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
${require('./_nav.html')}
|
||||||
|
|
||||||
|
<main class="container" id="docs">
|
||||||
|
${require('./_sidebar.html') active="we-love-classes-link"}
|
||||||
|
|
||||||
|
<div role="document">
|
||||||
|
<section id="we-love-classes">
|
||||||
|
<h1>We love <code>.classes</code></h1>
|
||||||
|
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
|
||||||
|
<p>But of course, <code>.classes</code> are not a bad practice at all.</p>
|
||||||
|
<p>Feel free to use <em>modifiers</em>.</p>
|
||||||
|
<div data-theme="valid">
|
||||||
|
<pre><code><<b>button</b> <i>class</i>=<u>"warning"</u>>Action</<b>button</b>><br></code></pre>
|
||||||
|
</div>
|
||||||
|
<p>Just try to keep your HTML clean and semantic to keep the Pico spirit.</p>
|
||||||
|
<div data-theme="invalid">
|
||||||
|
<pre><code><<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>>Action</<b>button</b>><br></code></pre>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
${require('./_footer.html')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script src="js/commons.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
docs/tables.html
Normal file
40
docs/tables.html
Normal file
File diff suppressed because one or more lines are too long
5
docs/themes.html
Normal file
5
docs/themes.html
Normal file
File diff suppressed because one or more lines are too long
3
docs/tooltips.html
Normal file
3
docs/tooltips.html
Normal file
File diff suppressed because one or more lines are too long
17
docs/typography.html
Normal file
17
docs/typography.html
Normal file
File diff suppressed because one or more lines are too long
1
docs/we-love-classes.html
Normal file
1
docs/we-love-classes.html
Normal file
File diff suppressed because one or more lines are too long
3773
package-lock.json
generated
3773
package-lock.json
generated
File diff suppressed because it is too large
Load diff
92
package.json
92
package.json
|
|
@ -27,33 +27,81 @@
|
||||||
"url": "https://github.com/picocss/pico/issues"
|
"url": "https://github.com/picocss/pico/issues"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"css:compile": "sass --style expanded --no-source-map --no-error-css scss/:css/",
|
"watch": "npm-run-all --parallel watch:pico watch:docs:scss watch:docs:html watch:docs:js --silent ",
|
||||||
"css:compile:docs": "sass --style expanded --no-source-map --no-error-css docs/scss/:docs/css/",
|
"build": "npm-run-all scss:sorter:pico build:pico scss:sorter:docs build:docs:css build:docs:js build:docs:html --silent",
|
||||||
"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",
|
"build:docs": "npm-run-all --parallel build:docs:css build:docs:js build:docs:html --silent",
|
||||||
"js:bundle": "rollup docs/js/pico.docs.js --file docs/js/pico.docs.min.js --format iife",
|
"build:docs:css": "npm-run-all css:compile:docs css:prefix:docs css:minify:docs --silent",
|
||||||
"js:babel": "babel docs/js/pico.docs.min.js --out-file docs/js/pico.docs.min.js --presets=@babel/preset-env",
|
"build:docs:html": "npm-run-all htmlincludes:docs --silent",
|
||||||
"js:minify": "uglifyjs docs/js/pico.docs.min.js --compress --mangle --output docs/js/pico.docs.min.js",
|
"build:docs:js": "npm-run-all js:bundle:docs:commons js:bundle:docs:customization js:babel:docs:commons js:babel:docs:customization js:babel:docs:grid js:babel:docs:modal js:minify:docs:commons js:minify:docs:customization js:minify:docs:grid js:minify:docs:modal --silent",
|
||||||
"build:css": "npm-run-all css:compile css:compile:docs css:prefix css:minify",
|
"build:pico": "npm-run-all css:compile:pico css:prefix:pico css:minify:pico --silent",
|
||||||
"build:js": "npm-run-all js:bundle js:babel js:minify",
|
|
||||||
"build": "npm-run-all build:css build:js",
|
"css:compile:docs": "sass --style expanded --source-map --embed-sources --no-error-css docs/scss/:docs/css/",
|
||||||
"watch:scss": "nodemon --watch scss/ --ext scss --exec 'npm run build:css'",
|
"css:compile:pico": "sass --style expanded --source-map --embed-sources --no-error-css scss/: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'",
|
"css:minify:docs": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min docs/css/*.css !docs/css/*.min.css",
|
||||||
"watch": "npm-run-all --parallel watch:scss watch:scss:docs watch:js:docs"
|
"css:minify:pico": "cleancss -O1 --with-rebase --source-map --source-map-inline-sources --batch --batch-suffix .min css/*.css css/*/*.css !css/*.min.css !css/*/*.min.css",
|
||||||
|
|
||||||
|
"css:prefix:docs": "postcss --config css --replace docs/css/*.css !docs/css/*.min.css",
|
||||||
|
"css:prefix:pico": "postcss --config css --replace css/*.css css/*/*.css !css/*.min.css",
|
||||||
|
|
||||||
|
"htmlincludes:docs": "html-includes --src docs/src --dest docs --minify minifyJS=true --quiet",
|
||||||
|
|
||||||
|
"js:babel:docs:commons": "babel docs/js/commons.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet",
|
||||||
|
"js:babel:docs:customization": "babel docs/js/customization.min.js --out-dir docs/js/ --presets=@babel/preset-env --quiet",
|
||||||
|
"js:babel:docs:grid": "babel docs/js/grid.js --out-file docs/js/grid.min.js --presets=@babel/preset-env --quiet",
|
||||||
|
"js:babel:docs:modal": "babel docs/js/modal.js --out-file docs/js/modal.min.js --presets=@babel/preset-env --quiet",
|
||||||
|
|
||||||
|
"js:bundle:docs:commons": "rollup docs/js/commons.js --file docs/js/commons.min.js --format iife --silent",
|
||||||
|
"js:bundle:docs:customization": "rollup docs/js/customization.js --file docs/js/customization.min.js --format iife --silent",
|
||||||
|
|
||||||
|
"js:minify:docs:commons": "uglifyjs docs/js/commons.min.js --compress --mangle --output docs/js/commons.min.js",
|
||||||
|
"js:minify:docs:customization": "uglifyjs docs/js/customization.min.js --compress --mangle --output docs/js/customization.min.js",
|
||||||
|
"js:minify:docs:grid": "uglifyjs docs/js/grid.min.js --compress --mangle --output docs/js/grid.min.js",
|
||||||
|
"js:minify:docs:modal": "uglifyjs docs/js/modal.min.js --compress --mangle --output docs/js/modal.min.js",
|
||||||
|
|
||||||
|
"postbuild:docs:css": "echo '\\033[32m[@picocss/pico] Documentation .css build done\\033[0m'",
|
||||||
|
"postbuild:docs:html": "echo '\\033[32m[@picocss/pico] Documentation pages done\\033[0m'",
|
||||||
|
"postbuild:docs:js": "echo '\\033[32m[@picocss/pico] Documentation .js build done\\033[0m'",
|
||||||
|
"postbuild:pico": "echo '\\033[32m[@picocss/pico] Pico library build done\\033[0m'",
|
||||||
|
|
||||||
|
"prebuild:docs:html": "echo '[@picocss/pico] Create documentation pages'",
|
||||||
|
"prebuild:docs:js": "echo '[@picocss/pico] Bundle and minify documentation .js files'",
|
||||||
|
"precss:compile:docs": "echo '[@picocss/pico] Compile documentation .css file'",
|
||||||
|
"precss:compile:pico": "echo '[@picocss/pico] Compile Pico .css files'",
|
||||||
|
"precss:minify:docs": "echo '[@picocss/pico] Minify documentation .css file'",
|
||||||
|
"precss:minify:pico": "echo '[@picocss/pico] Minify Pico .css files'",
|
||||||
|
"prescss:sorter:docs": "echo '[@picocss/pico] Order documentation .scss properties'",
|
||||||
|
"prescss:sorter:pico": "echo '[@picocss/pico] Order Pico .scss properties'",
|
||||||
|
|
||||||
|
"scss:sorter:docs": "postcss --config scss ./docs/scss/**/*.scss --replace",
|
||||||
|
"scss:sorter:pico": "postcss --config scss ./scss/**/*.scss --replace",
|
||||||
|
|
||||||
|
"watch:docs:html": "nodemon --watch docs/src/ --ext html --exec 'npm run build:docs:html'",
|
||||||
|
"watch:docs:js": "nodemon --watch docs/js/ --ext js --ignore *.min.js --exec 'npm run build:docs:js'",
|
||||||
|
"watch:docs:scss": "nodemon --watch docs/scss/ --ext scss --exec 'npm run build:docs:css'",
|
||||||
|
"watch:pico": "nodemon --watch scss/ --ext scss --exec 'npm run build:pico'"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.15.7",
|
"@babel/cli": "^7.16.0",
|
||||||
"@babel/core": "^7.15.8",
|
"@babel/core": "^7.16.0",
|
||||||
"@babel/preset-env": "^7.15.8",
|
"@babel/preset-env": "^7.16.0",
|
||||||
"autoprefixer": "^10.3.7",
|
"autoprefixer": "^10.4.0",
|
||||||
"clean-css-cli": "^5.4.2",
|
"clean-css-cli": "^5.4.2",
|
||||||
|
"css-declaration-sorter": "^6.1.3",
|
||||||
|
"html-includes": "^4.4.1",
|
||||||
"nodemon": "^2.0.14",
|
"nodemon": "^2.0.14",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"postcss": "^8.3.6",
|
"postcss": "^8.3.11",
|
||||||
"postcss-cli": "^9.0.1",
|
"postcss-cli": "^9.0.1",
|
||||||
"rollup": "^2.58.0",
|
"postcss-scss": "^4.0.2",
|
||||||
"sass": "^1.43.3",
|
"rollup": "^2.59.0",
|
||||||
|
"sass": "^1.43.4",
|
||||||
"uglify-js": "^3.14.2"
|
"uglify-js": "^3.14.2"
|
||||||
}
|
},
|
||||||
|
"browserslist": [
|
||||||
|
">= 0.5%",
|
||||||
|
"last 2 major versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* Accordion (<details>)
|
* Accordion (<details>)
|
||||||
* Inspiration: https://codepen.io/koca/pen/RyeLLV
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
details {
|
details {
|
||||||
|
|
@ -42,8 +41,8 @@ details {
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
background-image: var(--icon-chevron);
|
background-image: var(--icon-chevron);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem auto;
|
background-size: 1rem auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
content: "";
|
content: "";
|
||||||
|
|
||||||
@if $enable-transitions {
|
@if $enable-transitions {
|
||||||
|
|
|
||||||
178
scss/components/_modal.scss
Normal file
178
scss/components/_modal.scss
Normal file
|
|
@ -0,0 +1,178 @@
|
||||||
|
/**
|
||||||
|
* Modal (<dialog>)
|
||||||
|
*/
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
display: flex;
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: inherit;
|
||||||
|
min-width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
min-height: 100%;
|
||||||
|
padding: var(--spacing);
|
||||||
|
border: none;
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
|
||||||
|
// Content
|
||||||
|
article {
|
||||||
|
@if map-get($breakpoints, "sm") {
|
||||||
|
@media (min-width: map-get($breakpoints, "sm")) {
|
||||||
|
max-width: map-get($viewports, "sm");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if map-get($breakpoints, "md") {
|
||||||
|
@media (min-width: map-get($breakpoints, "md")) {
|
||||||
|
max-width: map-get($viewports, "md");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> header,
|
||||||
|
> footer {
|
||||||
|
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
> header {
|
||||||
|
.close {
|
||||||
|
margin: 0;
|
||||||
|
margin-left: var(--spacing);
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> footer {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
[role="button"] {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
&:not(:first-of-type) {
|
||||||
|
margin-left: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
&:last-of-type {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close icon
|
||||||
|
.close {
|
||||||
|
display: block;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
margin-top: calc(var(--block-spacing-vertical) * -0.5);
|
||||||
|
margin-bottom: var(--typography-spacing-vertical);
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: var(--icon-close);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto 1rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
opacity: .5;
|
||||||
|
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: opacity var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Closed state
|
||||||
|
&:not([open]),
|
||||||
|
&[open="false"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
.modal-is-open {
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
body > *:not(dialog) {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animations
|
||||||
|
@if $enable-transitions {
|
||||||
|
$animation-duration: .2s;
|
||||||
|
|
||||||
|
.modal-is-opening,
|
||||||
|
.modal-is-closing {
|
||||||
|
|
||||||
|
body > *:not(dialog),
|
||||||
|
dialog,
|
||||||
|
dialog > article {
|
||||||
|
animation-duration: $animation-duration;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > *:not(dialog) {
|
||||||
|
animation-name: blurIn;
|
||||||
|
}
|
||||||
|
|
||||||
|
dialog {
|
||||||
|
animation-name: fadeIn;
|
||||||
|
|
||||||
|
> article {
|
||||||
|
animation-name: slideInDown;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-is-closing {
|
||||||
|
body > *:not(dialog),
|
||||||
|
dialog,
|
||||||
|
dialog > article {
|
||||||
|
animation-direction: reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blurIn {
|
||||||
|
from {
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
filter: blur(0.1875rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
background-color: var(--modal-overlay-background-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -21,10 +21,10 @@ progress {
|
||||||
// Reset the default appearance
|
// Reset the default appearance
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.5rem;
|
height: 0.5rem;
|
||||||
margin-bottom: calc(var(--spacing) * 0.5);
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
|
|
||||||
|
|
@ -65,8 +65,8 @@ a[role="button"] {
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
color: var(--color);
|
color: var(--color);
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: var(--font-weight);
|
font-weight: var(--font-weight);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: var(--line-height);
|
line-height: var(--line-height);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue