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

Add a loading indicator for aria-busy

Browse source
This commit is contained in:
Lucas Larroche 2021-07-17 15:19:19 +07:00
parent 0e7894c48e
commit dc42ec62f3
25 changed files with 517 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

18
README.md
View file

@ -37,7 +37,6 @@ Shipped with two beautiful color themes, automatically enabled according to the
- [Class-less version](#class-less-version) - [Class-less version](#class-less-version)
- [Examples](#examples) - [Examples](#examples)
- [Documentation](#documentation) - [Documentation](#documentation)
- [Variations](#variations)
- [Contributing](#contributing) - [Contributing](#contributing)
- [Copyright and license](#copyright-and-license) - [Copyright and license](#copyright-and-license)
@ -47,7 +46,7 @@ There are 3 ways to get started with pico.css:
**Install manually** **Install manually**
[Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `<head>` of your website. [Download Pico](https://github.com/picocss/pico/archive/refs/heads/master.zip) and link `/css/pico.min.css` in the `<head>` of your website.
```html ```html
<link rel="stylesheet" href="css/pico.min.css"> <link rel="stylesheet" href="css/pico.min.css">
@ -152,25 +151,16 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e
- [Forms](https://picocss.com/docs/#forms) - [Forms](https://picocss.com/docs/#forms)
- [Tables](https://picocss.com/docs/#tables) - [Tables](https://picocss.com/docs/#tables)
**Components** **Components**
- [Accordions](https://picocss.com/docs/#accordions) - [Accordions](https://picocss.com/docs/#accordions)
- [Cards](https://picocss.com/docs/#cards) - [Cards](https://picocss.com/docs/#cards)
- [Navs](https://picocss.com/docs/#navs) - [Navs](https://picocss.com/docs/#navs)
- [Progress](https://picocss.com/docs/#progress) - [Progress](https://picocss.com/docs/#progress)
**Utilities**
- [Loading](https://picocss.com/docs/#loading)
- [Tooltips](https://picocss.com/docs/#tooltips) - [Tooltips](https://picocss.com/docs/#tooltips)
## Variations
| Variation | Minified CSS | Source | Example |
|:-----|:-----|:-----|:-----|
| Default | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) | [pico.scss](https://github.com/picocss/pico/blob/master/scss/pico.scss) | [Preview](https://picocss.com/examples/preview/) |
| Classless<br>(Centered viewports) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css) | [pico.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.classless.scss) | [Classless](https://picocss.com/examples/classless/) |
| Classless<br>(Fluid container) | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.fluid.classless.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css) | [pico.fluid.classless.scss](https://github.com/picocss/pico/blob/master/scss/pico.fluid.classless.scss) | - |
| Slim | [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.slim.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.slim.min.css) | [pico.slim.scss](https://github.com/picocss/pico/blob/master/scss/pico.slim.scss) | - |
| Google Amp | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/google-amp/css/pico.google-amp.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/google-amp/css/pico.google-amp.min.css) | [pico.google-amp.scss](https://github.com/picocss/examples/blob/master/google-amp/scss/pico.google-amp.scss) | [Google Amp](https://picocss.com/examples/google-amp/) |
| Pico + Bootstrap grid system | [![CSS Gzipped](https://img.badgesize.io/picocss/examples/master/bootstrap-grid/css/pico-bootstrap-grid.min.css?compression=gzip&color=1095c1&label=Gzipped)](https://github.com/picocss/examples/blob/master/bootstrap-grid/css/pico-bootstrap-grid.min.css) | [pico-bootstrap-grid.scss](https://github.com/picocss/examples/blob/master/bootstrap-grid/scss/pico-bootstrap-grid.scss) | [Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/) |
## Contributing ## Contributing
- [`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.

190
css/pico.classless.css
View file

@ -117,7 +117,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 87.5%; --font-size: 0.875em;
} }
h1, h1,
@ -169,7 +169,7 @@ table thead td {
} }
table :not(thead) td { table :not(thead) td {
--font-size: 0.875rem; --font-size: 0.875em;
} }
pre, pre,
@ -225,6 +225,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C; --form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C; --form-element-valid-border-color: #388E3C;
@ -257,6 +258,7 @@ kbd {
--card-sectionning-background-color: #fafbfc; --card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -311,6 +313,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -344,6 +347,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -398,6 +402,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -431,6 +436,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -464,7 +470,6 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4; -moz-tab-size: 4;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-family: var(--font-family); font-family: var(--font-family);
@ -565,17 +570,17 @@ strong {
sub, sub,
sup { sup {
position: relative; position: relative;
font-size: .75rem; font-size: .75em;
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25rem; bottom: -0.25em;
} }
sup { sup {
top: -0.5rem; top: -0.5em;
} }
dl dl, dl dl,
@ -1118,7 +1123,7 @@ select[disabled],
textarea[disabled] { textarea[disabled] {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: .375; opacity: var(--form-element-disabled-opacity);
} }
input[aria-invalid], input[aria-invalid],
@ -1214,10 +1219,10 @@ label > textarea {
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
display: inline-block; display: inline-block;
width: 1.25rem; width: 1.25em;
height: 1.25rem; height: 1.25em;
margin-top: -.125rem; margin-top: -.125em;
margin-right: .375rem; margin-right: .375em;
border-width: var(--border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1237,13 +1242,13 @@ label > textarea {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75em auto;
} }
[type="checkbox"] ~ label, [type="checkbox"] ~ label,
[type="radio"] ~ label { [type="radio"] ~ label {
display: inline-block; display: inline-block;
margin-right: .375rem; margin-right: .375em;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
} }
@ -1254,7 +1259,7 @@ label > textarea {
background-image: var(--icon-minus); background-image: var(--icon-minus);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75em auto;
} }
[type="radio"] { [type="radio"] {
@ -1263,7 +1268,7 @@ label > textarea {
[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
--background-color: var(--primary-inverse); --background-color: var(--primary-inverse);
border-width: .35rem; border-width: .35em;
background-image: none; background-image: none;
} }
@ -1271,12 +1276,12 @@ label > textarea {
--background-color: var(--switch-background-color); --background-color: var(--switch-background-color);
--border-color: var(--switch-background-color); --border-color: var(--switch-background-color);
--color: var(--switch-color); --color: var(--switch-color);
width: 2.25rem; width: 2.25em;
height: 1.25rem; height: 1.25em;
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: 1.25rem; border-radius: 1.25em;
background-color: var(--background-color); background-color: var(--background-color);
line-height: 1.25rem; line-height: 1.25em;
} }
[type="checkbox"][role="switch"]:focus { [type="checkbox"][role="switch"]:focus {
@ -1291,7 +1296,7 @@ label > textarea {
[type="checkbox"][role="switch"]:before { [type="checkbox"][role="switch"]:before {
display: block; display: block;
width: calc(1.25rem - (var(--border-width) * 2)); width: calc(1.25em - (var(--border-width) * 2));
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background-color: var(--color); background-color: var(--color);
@ -1305,7 +1310,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before { [type="checkbox"][role="switch"]:checked::before {
margin-right: 0; margin-right: 0;
margin-left: calc(1.125rem - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
} }
/** /**
@ -1604,43 +1609,6 @@ kbd {
vertical-align: middle; vertical-align: middle;
} }
/**
* Accessibility & User interaction
*/
[aria-busy="true"] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
}
/** /**
* Miscs * Miscs
*/ */
@ -1893,17 +1861,17 @@ progress::-moz-progress-bar {
background-color: var(--progress-color); background-color: var(--progress-color);
} }
progress:indeterminate { @media (prefers-reduced-motion: no-preference) {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; progress:indeterminate {
animation: progressIndeterminate 1s linear infinite; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
} animation: progressIndeterminate 1s linear infinite;
}
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
} }
progress:indeterminate::-moz-progress-bar {
progress:indeterminate::-moz-progress-bar { background-color: transparent;
background-color: transparent; }
} }
@keyframes progressIndeterminate { @keyframes progressIndeterminate {
@ -1915,6 +1883,49 @@ progress:indeterminate::-moz-progress-bar {
} }
} }
/**
* Loading ([aria-busy=true])
*/
[aria-busy="true"] {
cursor: progress;
}
[aria-busy="true"]:not(input):not(select):not(textarea)::before {
display: inline-block;
width: 1em;
height: 1em;
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
vertical-align: text-bottom;
vertical-align: -.125em;
animation: spinner 0.75s linear infinite;
content: '';
opacity: var(--loading-spinner-opacity);
}
[aria-busy="true"]:not(input):not(select):not(textarea):not(:empty)::before {
margin-right: calc(var(--spacing) / 2);
}
[aria-busy="true"]:not(input):not(select):not(textarea):empty {
text-align: center;
}
button[aria-busy="true"],
input[type="submit"][aria-busy="true"],
input[type="button"][aria-busy="true"],
input[type="reset"][aria-busy="true"],
a[aria-busy="true"] {
pointer-events: none;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
/** /**
* Tooltip ([data-tooltip]) * Tooltip ([data-tooltip])
*/ */
@ -1940,7 +1951,7 @@ progress:indeterminate::-moz-progress-bar {
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--tooltip-background-color); background: var(--tooltip-background-color);
color: var(--tooltip-color); color: var(--tooltip-color);
font-size: .85rem; font-size: .875rem;
font-style: normal; font-style: normal;
font-weight: var(--font-weight); font-weight: var(--font-weight);
text-decoration: none; text-decoration: none;
@ -1998,13 +2009,46 @@ progress:indeterminate::-moz-progress-bar {
} }
} }
/**
* Accessibility & User interaction
*/
[aria-controls] {
cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
}
/** /**
* Reduce Motion Features * Reduce Motion Features
*/ */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *:not([aria-busy="true"]),
::before, :not([aria-busy="true"])::before,
::after { :not([aria-busy="true"])::after {
background-attachment: initial !important; background-attachment: initial !important;
animation-duration: 1ms !important; animation-duration: 1ms !important;
animation-delay: -1ms !important; animation-delay: -1ms !important;

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

File diff suppressed because one or more lines are too long

190
css/pico.css
View file

@ -117,7 +117,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 87.5%; --font-size: 0.875em;
} }
h1, h1,
@ -169,7 +169,7 @@ table thead td {
} }
table :not(thead) td { table :not(thead) td {
--font-size: 0.875rem; --font-size: 0.875em;
} }
pre, pre,
@ -225,6 +225,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C; --form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C; --form-element-valid-border-color: #388E3C;
@ -257,6 +258,7 @@ kbd {
--card-sectionning-background-color: #fafbfc; --card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -311,6 +313,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -344,6 +347,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -398,6 +402,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -431,6 +436,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -464,7 +470,6 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4; -moz-tab-size: 4;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-family: var(--font-family); font-family: var(--font-family);
@ -591,17 +596,17 @@ strong {
sub, sub,
sup { sup {
position: relative; position: relative;
font-size: .75rem; font-size: .75em;
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25rem; bottom: -0.25em;
} }
sup { sup {
top: -0.5rem; top: -0.5em;
} }
dl dl, dl dl,
@ -1313,7 +1318,7 @@ select[disabled],
textarea[disabled] { textarea[disabled] {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: .375; opacity: var(--form-element-disabled-opacity);
} }
input[aria-invalid], input[aria-invalid],
@ -1409,10 +1414,10 @@ label > textarea {
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
display: inline-block; display: inline-block;
width: 1.25rem; width: 1.25em;
height: 1.25rem; height: 1.25em;
margin-top: -.125rem; margin-top: -.125em;
margin-right: .375rem; margin-right: .375em;
border-width: var(--border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1432,13 +1437,13 @@ label > textarea {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75em auto;
} }
[type="checkbox"] ~ label, [type="checkbox"] ~ label,
[type="radio"] ~ label { [type="radio"] ~ label {
display: inline-block; display: inline-block;
margin-right: .375rem; margin-right: .375em;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
} }
@ -1449,7 +1454,7 @@ label > textarea {
background-image: var(--icon-minus); background-image: var(--icon-minus);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75em auto;
} }
[type="radio"] { [type="radio"] {
@ -1458,7 +1463,7 @@ label > textarea {
[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
--background-color: var(--primary-inverse); --background-color: var(--primary-inverse);
border-width: .35rem; border-width: .35em;
background-image: none; background-image: none;
} }
@ -1466,12 +1471,12 @@ label > textarea {
--background-color: var(--switch-background-color); --background-color: var(--switch-background-color);
--border-color: var(--switch-background-color); --border-color: var(--switch-background-color);
--color: var(--switch-color); --color: var(--switch-color);
width: 2.25rem; width: 2.25em;
height: 1.25rem; height: 1.25em;
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: 1.25rem; border-radius: 1.25em;
background-color: var(--background-color); background-color: var(--background-color);
line-height: 1.25rem; line-height: 1.25em;
} }
[type="checkbox"][role="switch"]:focus { [type="checkbox"][role="switch"]:focus {
@ -1486,7 +1491,7 @@ label > textarea {
[type="checkbox"][role="switch"]:before { [type="checkbox"][role="switch"]:before {
display: block; display: block;
width: calc(1.25rem - (var(--border-width) * 2)); width: calc(1.25em - (var(--border-width) * 2));
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background-color: var(--color); background-color: var(--color);
@ -1500,7 +1505,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before { [type="checkbox"][role="switch"]:checked::before {
margin-right: 0; margin-right: 0;
margin-left: calc(1.125rem - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
} }
/** /**
@ -1799,43 +1804,6 @@ kbd {
vertical-align: middle; vertical-align: middle;
} }
/**
* Accessibility & User interaction
*/
[aria-busy="true"] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
}
/** /**
* Miscs * Miscs
*/ */
@ -2088,17 +2056,17 @@ progress::-moz-progress-bar {
background-color: var(--progress-color); background-color: var(--progress-color);
} }
progress:indeterminate { @media (prefers-reduced-motion: no-preference) {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; progress:indeterminate {
animation: progressIndeterminate 1s linear infinite; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
} animation: progressIndeterminate 1s linear infinite;
}
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
} }
progress:indeterminate::-moz-progress-bar {
progress:indeterminate::-moz-progress-bar { background-color: transparent;
background-color: transparent; }
} }
@keyframes progressIndeterminate { @keyframes progressIndeterminate {
@ -2110,6 +2078,49 @@ progress:indeterminate::-moz-progress-bar {
} }
} }
/**
* Loading ([aria-busy=true])
*/
[aria-busy="true"] {
cursor: progress;
}
[aria-busy="true"]:not(input):not(select):not(textarea)::before {
display: inline-block;
width: 1em;
height: 1em;
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
vertical-align: text-bottom;
vertical-align: -.125em;
animation: spinner 0.75s linear infinite;
content: '';
opacity: var(--loading-spinner-opacity);
}
[aria-busy="true"]:not(input):not(select):not(textarea):not(:empty)::before {
margin-right: calc(var(--spacing) / 2);
}
[aria-busy="true"]:not(input):not(select):not(textarea):empty {
text-align: center;
}
button[aria-busy="true"],
input[type="submit"][aria-busy="true"],
input[type="button"][aria-busy="true"],
input[type="reset"][aria-busy="true"],
a[aria-busy="true"] {
pointer-events: none;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
/** /**
* Tooltip ([data-tooltip]) * Tooltip ([data-tooltip])
*/ */
@ -2135,7 +2146,7 @@ progress:indeterminate::-moz-progress-bar {
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--tooltip-background-color); background: var(--tooltip-background-color);
color: var(--tooltip-color); color: var(--tooltip-color);
font-size: .85rem; font-size: .875rem;
font-style: normal; font-style: normal;
font-weight: var(--font-weight); font-weight: var(--font-weight);
text-decoration: none; text-decoration: none;
@ -2193,13 +2204,46 @@ progress:indeterminate::-moz-progress-bar {
} }
} }
/**
* Accessibility & User interaction
*/
[aria-controls] {
cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
}
/** /**
* Reduce Motion Features * Reduce Motion Features
*/ */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *:not([aria-busy="true"]),
::before, :not([aria-busy="true"])::before,
::after { :not([aria-busy="true"])::after {
background-attachment: initial !important; background-attachment: initial !important;
animation-duration: 1ms !important; animation-duration: 1ms !important;
animation-delay: -1ms !important; animation-delay: -1ms !important;

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

@ -117,7 +117,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 87.5%; --font-size: 0.875em;
} }
h1, h1,
@ -169,7 +169,7 @@ table thead td {
} }
table :not(thead) td { table :not(thead) td {
--font-size: 0.875rem; --font-size: 0.875em;
} }
pre, pre,
@ -225,6 +225,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C; --form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C; --form-element-valid-border-color: #388E3C;
@ -257,6 +258,7 @@ kbd {
--card-sectionning-background-color: #fafbfc; --card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -311,6 +313,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -344,6 +347,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -398,6 +402,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -431,6 +436,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -464,7 +470,6 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4; -moz-tab-size: 4;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-family: var(--font-family); font-family: var(--font-family);
@ -531,17 +536,17 @@ strong {
sub, sub,
sup { sup {
position: relative; position: relative;
font-size: .75rem; font-size: .75em;
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25rem; bottom: -0.25em;
} }
sup { sup {
top: -0.5rem; top: -0.5em;
} }
dl dl, dl dl,
@ -1084,7 +1089,7 @@ select[disabled],
textarea[disabled] { textarea[disabled] {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: .375; opacity: var(--form-element-disabled-opacity);
} }
input[aria-invalid], input[aria-invalid],
@ -1180,10 +1185,10 @@ label > textarea {
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
display: inline-block; display: inline-block;
width: 1.25rem; width: 1.25em;
height: 1.25rem; height: 1.25em;
margin-top: -.125rem; margin-top: -.125em;
margin-right: .375rem; margin-right: .375em;
border-width: var(--border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -1203,13 +1208,13 @@ label > textarea {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75em auto;
} }
[type="checkbox"] ~ label, [type="checkbox"] ~ label,
[type="radio"] ~ label { [type="radio"] ~ label {
display: inline-block; display: inline-block;
margin-right: .375rem; margin-right: .375em;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
} }
@ -1220,7 +1225,7 @@ label > textarea {
background-image: var(--icon-minus); background-image: var(--icon-minus);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75em auto;
} }
[type="radio"] { [type="radio"] {
@ -1229,7 +1234,7 @@ label > textarea {
[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
--background-color: var(--primary-inverse); --background-color: var(--primary-inverse);
border-width: .35rem; border-width: .35em;
background-image: none; background-image: none;
} }
@ -1237,12 +1242,12 @@ label > textarea {
--background-color: var(--switch-background-color); --background-color: var(--switch-background-color);
--border-color: var(--switch-background-color); --border-color: var(--switch-background-color);
--color: var(--switch-color); --color: var(--switch-color);
width: 2.25rem; width: 2.25em;
height: 1.25rem; height: 1.25em;
border: var(--border-width) solid var(--border-color); border: var(--border-width) solid var(--border-color);
border-radius: 1.25rem; border-radius: 1.25em;
background-color: var(--background-color); background-color: var(--background-color);
line-height: 1.25rem; line-height: 1.25em;
} }
[type="checkbox"][role="switch"]:focus { [type="checkbox"][role="switch"]:focus {
@ -1257,7 +1262,7 @@ label > textarea {
[type="checkbox"][role="switch"]:before { [type="checkbox"][role="switch"]:before {
display: block; display: block;
width: calc(1.25rem - (var(--border-width) * 2)); width: calc(1.25em - (var(--border-width) * 2));
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background-color: var(--color); background-color: var(--color);
@ -1271,7 +1276,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before { [type="checkbox"][role="switch"]:checked::before {
margin-right: 0; margin-right: 0;
margin-left: calc(1.125rem - var(--border-width)); margin-left: calc(1.125em - var(--border-width));
} }
/** /**
@ -1570,43 +1575,6 @@ kbd {
vertical-align: middle; vertical-align: middle;
} }
/**
* Accessibility & User interaction
*/
[aria-busy="true"] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
}
/** /**
* Miscs * Miscs
*/ */
@ -1859,17 +1827,17 @@ progress::-moz-progress-bar {
background-color: var(--progress-color); background-color: var(--progress-color);
} }
progress:indeterminate { @media (prefers-reduced-motion: no-preference) {
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; progress:indeterminate {
animation: progressIndeterminate 1s linear infinite; background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;
} animation: progressIndeterminate 1s linear infinite;
}
progress:indeterminate[value]::-webkit-progress-value { progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
} }
progress:indeterminate::-moz-progress-bar {
progress:indeterminate::-moz-progress-bar { background-color: transparent;
background-color: transparent; }
} }
@keyframes progressIndeterminate { @keyframes progressIndeterminate {
@ -1881,6 +1849,49 @@ progress:indeterminate::-moz-progress-bar {
} }
} }
/**
* Loading ([aria-busy=true])
*/
[aria-busy="true"] {
cursor: progress;
}
[aria-busy="true"]:not(input):not(select):not(textarea)::before {
display: inline-block;
width: 1em;
height: 1em;
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
vertical-align: text-bottom;
vertical-align: -.125em;
animation: spinner 0.75s linear infinite;
content: '';
opacity: var(--loading-spinner-opacity);
}
[aria-busy="true"]:not(input):not(select):not(textarea):not(:empty)::before {
margin-right: calc(var(--spacing) / 2);
}
[aria-busy="true"]:not(input):not(select):not(textarea):empty {
text-align: center;
}
button[aria-busy="true"],
input[type="submit"][aria-busy="true"],
input[type="button"][aria-busy="true"],
input[type="reset"][aria-busy="true"],
a[aria-busy="true"] {
pointer-events: none;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
/** /**
* Tooltip ([data-tooltip]) * Tooltip ([data-tooltip])
*/ */
@ -1906,7 +1917,7 @@ progress:indeterminate::-moz-progress-bar {
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--tooltip-background-color); background: var(--tooltip-background-color);
color: var(--tooltip-color); color: var(--tooltip-color);
font-size: .85rem; font-size: .875rem;
font-style: normal; font-style: normal;
font-weight: var(--font-weight); font-weight: var(--font-weight);
text-decoration: none; text-decoration: none;
@ -1964,13 +1975,46 @@ progress:indeterminate::-moz-progress-bar {
} }
} }
/**
* Accessibility & User interaction
*/
[aria-controls] {
cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
-ms-touch-action: manipulation;
}
/** /**
* Reduce Motion Features * Reduce Motion Features
*/ */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *:not([aria-busy="true"]),
::before, :not([aria-busy="true"])::before,
::after { :not([aria-busy="true"])::after {
background-attachment: initial !important; background-attachment: initial !important;
animation-duration: 1ms !important; animation-duration: 1ms !important;
animation-delay: -1ms !important; animation-delay: -1ms !important;

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

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

23
css/pico.slim.css
View file

@ -60,7 +60,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 87.5%; --font-size: 0.875em;
} }
h1, h1,
@ -112,7 +112,7 @@ table thead td {
} }
table :not(thead) td { table :not(thead) td {
--font-size: 0.875rem; --font-size: 0.875em;
} }
pre, pre,
@ -168,6 +168,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C; --form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C; --form-element-valid-border-color: #388E3C;
@ -200,6 +201,7 @@ kbd {
--card-sectionning-background-color: #fafbfc; --card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -254,6 +256,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -287,6 +290,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -341,6 +345,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -374,6 +379,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -407,7 +413,6 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4; -moz-tab-size: 4;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--color); color: var(--color);
font-family: var(--font-family); font-family: var(--font-family);
@ -534,17 +539,17 @@ strong {
sub, sub,
sup { sup {
position: relative; position: relative;
font-size: .75rem; font-size: .75em;
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25rem; bottom: -0.25em;
} }
sup { sup {
top: -0.5rem; top: -0.5em;
} }
dl dl, dl dl,
@ -1253,7 +1258,7 @@ select[disabled],
textarea[disabled] { textarea[disabled] {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: .375; opacity: var(--form-element-disabled-opacity);
} }
input[aria-invalid], input[aria-invalid],
@ -1371,10 +1376,6 @@ table[role="grid"] tbody tr:nth-child(odd) {
/** /**
* Accessibility & User interaction * Accessibility & User interaction
*/ */
[aria-busy="true"] {
cursor: progress;
}
[aria-controls] { [aria-controls] {
cursor: pointer; cursor: pointer;
} }

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

File diff suppressed because one or more lines are too long

10
css/themes/default.css
View file

@ -113,7 +113,7 @@ a.secondary, a.contrast {
} }
small { small {
--font-size: 87.5%; --font-size: 0.875em;
} }
h1, h1,
@ -165,7 +165,7 @@ table thead td {
} }
table :not(thead) td { table :not(thead) td {
--font-size: 0.875rem; --font-size: 0.875em;
} }
pre, pre,
@ -221,6 +221,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2; --form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9; --form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828; --form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C; --form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C; --form-element-valid-border-color: #388E3C;
@ -253,6 +254,7 @@ kbd {
--card-sectionning-background-color: #fafbfc; --card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2; --progress-background-color: #d5dce2;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -307,6 +309,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -340,6 +343,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");
@ -394,6 +398,7 @@ kbd {
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49; --form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462; --form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C; --form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828; --form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32; --form-element-valid-border-color: #2E7D32;
@ -427,6 +432,7 @@ kbd {
--card-sectionning-background-color: #17232c; --card-sectionning-background-color: #17232c;
--progress-background-color: #23333e; --progress-background-color: #23333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: .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-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");

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

File diff suppressed because one or more lines are too long

40
docs/index.html
View file

@ -78,6 +78,12 @@
<li><a href="#cards" class="secondary">Cards</a></li> <li><a href="#cards" class="secondary">Cards</a></li>
<li><a href="#navs" class="secondary">Navs</a></li> <li><a href="#navs" class="secondary">Navs</a></li>
<li><a href="#progress" class="secondary">Progress</a></li> <li><a href="#progress" class="secondary">Progress</a></li>
</ul>
</details>
<details open>
<summary>Utilities</summary>
<ul>
<li><a href="#loading" class="secondary">Loading</a></li>
<li><a href="#tooltips" class="secondary">Tooltips</a></li> <li><a href="#tooltips" class="secondary">Tooltips</a></li>
</ul> </ul>
</details> </details>
@ -103,7 +109,7 @@
</hgroup> </hgroup>
<p>There are 3 ways to get started with pico.css:</p> <p>There are 3 ways to get started with pico.css:</p>
<h4>Install manually</h4> <h4>Install manually</h4>
<p><a href="https://github.com/picocss/pico/releases/latest">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code>&lt;<b>head</b>&gt;</code> of your website.</p> <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>&lt;<b>head</b>&gt;</code> of your website.</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre> <pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<h4>Install from CDN</h4> <h4>Install from CDN</h4>
<p>Alternatively, you can use the <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p> <p>Alternatively, you can use the <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
@ -199,7 +205,6 @@
</code></pre> </code></pre>
</article> </article>
<p>There are 2 ways to customize your version of Pico.css:</p> <p>There are 2 ways to customize your version of Pico.css:</p>
<h4>Overriding CSS variables</h4> <h4>Overriding CSS variables</h4>
<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> <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>
@ -389,7 +394,6 @@
<p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p> <p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="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> <p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
</details> </details>
</section><!-- ./ Docs: Grid --> </section><!-- ./ Docs: Grid -->
<!-- Docs: Horizontal scroller --> <!-- Docs: Horizontal scroller -->
@ -840,7 +844,6 @@
&lt;/<b>script</b>&gt;</code></pre> &lt;/<b>script</b>&gt;</code></pre>
</article> </article>
<p>Others input types:</p> <p>Others input types:</p>
<article aria-label="File browser, range slider, date, time, color examples"> <article aria-label="File browser, range slider, date, time, color examples">
<label for="file">File browser <label for="file">File browser
@ -1036,7 +1039,6 @@
&lt;/<b>details</b>&gt;</code></pre> &lt;/<b>details</b>&gt;</code></pre>
</article> </article>
</section><!-- ./ Docs: Accordions --> </section><!-- ./ Docs: Accordions -->
<!-- Docs: Cards --> <!-- Docs: Cards -->
@ -1174,9 +1176,7 @@
<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre> <pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
</article> </article>
<p>You can change a progress bar to indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p> <p>You can change a progress bar to 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"> <article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress> <progress id="indeterminate-progress"></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script> <script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
@ -1186,9 +1186,33 @@
&lt;/<b>script</b>&gt;</code></pre> &lt;/<b>script</b>&gt;</code></pre>
</article> </article>
</section><!-- ./ Docs: Progress --> </section><!-- ./ Docs: Progress -->
<!-- Docs: Loading -->
<section id="loading">
<hgroup>
<h2>Loading</h2>
<h3><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h3>
</hgroup>
<article aria-label="Loading buttons example">
<button aria-busy="true">Please wait...</button>
<button aria-busy="true" class="secondary"></button>
<pre><code>&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u>&gt;Please wait...&lt;/<b>button</b>&gt;
&lt;<b>button</b> <i>aria-busy</i>=<u>"true"</u> <i>class</i>=<u>"secondary"</u>&gt;&lt;/<b>button</b>&gt;</code></pre>
</article>
<p>It can be applied to any block:</p>
<article aria-busy="true"></article>
<pre><code>&lt;<b>article</b> <i>aria-busy</i>=<u>"true"</u>&gt;&lt;/<b>article</b>&gt;</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>
<pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-busy</i>=<u>"true"</u>&gt;Generating link, please wait...&lt;/<b>a</b>&gt;</code></pre>
</article>
</section><!-- ./ Docs: Loading -->
<!-- Docs: Tooltips --> <!-- Docs: Tooltips -->
<section id="tooltips"> <section id="tooltips">
<hgroup> <hgroup>

19
scss/components/_progress.scss
View file

@ -52,15 +52,18 @@ progress {
background-color: var(--progress-color); background-color: var(--progress-color);
} }
&:indeterminate { // Indeterminate state
background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat; @media (prefers-reduced-motion: no-preference) {
animation: progressIndeterminate 1s linear infinite; &: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;
animation: progressIndeterminate 1s linear infinite;
&[value]::-webkit-progress-value { &[value]::-webkit-progress-value {
background-color: transparent; background-color: transparent;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background-color: transparent; background-color: transparent;
}
} }
} }
} }

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

@ -9,10 +9,10 @@
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
display: inline-block; display: inline-block;
width: 1.25rem; width: 1.25em;
height: 1.25rem; height: 1.25em;
margin-top: -.125rem; margin-top: -.125em;
margin-right: .375rem; margin-right: .375em;
border-width: var(--border-width); border-width: var(--border-width);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -29,12 +29,12 @@
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75em auto;
} }
& ~ label { & ~ label {
display: inline-block; display: inline-block;
margin-right: .375rem; margin-right: .375em;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
} }
@ -48,7 +48,7 @@
background-image: var(--icon-minus); background-image: var(--icon-minus);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: .75rem auto; background-size: .75em auto;
} }
} }
@ -60,7 +60,7 @@
&:checked:active, &:checked:active,
&:checked:focus{ &:checked:focus{
--background-color: var(--primary-inverse); --background-color: var(--primary-inverse);
border-width: .35rem; border-width: .35em;
background-image: none; background-image: none;
} }
} }
@ -72,8 +72,8 @@
--color: var(--switch-color); --color: var(--switch-color);
// Config // Config
$switch-height: 1.25rem; $switch-height: 1.25em;
$switch-width: 2.25rem; $switch-width: 2.25em;
$switch-transition: .1s ease-in-out; $switch-transition: .1s ease-in-out;
// Styles // Styles

2
scss/content/_form.scss
View file

@ -220,7 +220,7 @@ textarea {
&[disabled] { &[disabled] {
--background-color: var(--form-element-disabled-background-color); --background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color); --border-color: var(--form-element-disabled-border-color);
opacity: .375; opacity: var(--form-element-disabled-opacity);
} }
} }

6
scss/content/_typography.scss
View file

@ -18,15 +18,15 @@ strong {
sub, sub,
sup { sup {
position: relative; position: relative;
font-size: .75rem; font-size: .75em;
line-height: 0; line-height: 0;
vertical-align: baseline; vertical-align: baseline;
} }
sub { sub {
bottom: -0.25rem; bottom: -0.25em;
} }
sup { sup {
top: -0.5rem; top: -0.5em;
} }
// Remove the margin on nested lists in Chrome, Edge, IE, and Safari // Remove the margin on nested lists in Chrome, Edge, IE, and Safari

9
scss/pico.scss
View file

@ -26,7 +26,6 @@
@import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ... @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ... @import "content/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ... @import "content/code"; // pre, code, ...
@import "content/accessibility"; // -ms-touch-action, aria-*
@import "content/miscs"; // hr, template, [hidden], dialog, canvas @import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Components // Components
@ -34,7 +33,9 @@
@import "components/card"; // article @import "components/card"; // article
@import "components/nav"; // nav @import "components/nav"; // nav
@import "components/progress"; // progress @import "components/progress"; // progress
@import "components/tooltip"; // data-tooltip
// Reduce motion // Utilities
@import "content/reduce-motion"; // prefers-reduced-motion @import "utilities/loading"; // aria-busy=true
@import "utilities/tooltip"; // data-tooltip
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion

11
scss/pico.slim.scss
View file

@ -40,13 +40,12 @@ $enable-important: false;
// Content // Content
@import "content/typography"; // a, headings, p, ul, blockquote, ... @import "content/typography"; // a, headings, p, ul, blockquote, ...
@import "content/embedded"; // audio, canvas, iframe, img, svg, video @import "content/embedded"; // audio, canvas, iframe, img, svg, video
@import "content/button"; // button, a[role=button], type=button, type=submit, ... @import "content/button"; // button, a[role=button], type=button, type=submit ...
@import "content/form"; // input, select, textarea, label, fieldset, legend @import "content/form"; // input, select, textarea, label, fieldset, legend
// @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch // @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ... // @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ... @import "content/table"; // table, tr, td, ...
// @import "content/code"; // pre, code, ... // @import "content/code"; // pre, code, ...
@import "content/accessibility"; // -ms-touch-action, aria-*
// @import "content/miscs"; // hr, template, [hidden], dialog, canvas // @import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Components // Components
@ -54,7 +53,9 @@ $enable-important: false;
// @import "components/card"; // article // @import "components/card"; // article
// @import "components/nav"; // nav // @import "components/nav"; // nav
// @import "components/progress"; // progress // @import "components/progress"; // progress
// @import "components/tooltip"; // data-tooltip
// Reduce motion // Utilities
// @import "content/reduce-motion"; // prefers-reduced-motion // @import "utilities/loading"; // aria-busy=true
// @import "utilities/tooltip"; // data-tooltip
@import "utilities/accessibility"; // -ms-touch-action, aria-*
@import "utilities/reduce-motion"; // prefers-reduced-motion

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

@ -64,6 +64,7 @@
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-800}; --form-element-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700}; --form-element-disabled-border-color: #{$grey-700};
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #{$red-900}; --form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800}; --form-element-invalid-active-border-color: #{$red-800};
--form-element-valid-border-color: #{$green-800}; --form-element-valid-border-color: #{$green-800};
@ -112,6 +113,9 @@
--progress-background-color: #{mix($grey-900, $grey-800)}; --progress-background-color: #{mix($grey-900, $grey-800)};
--progress-color: var(--primary); --progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: .5;
// Tooltip ([data-tooltip]) // Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);

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

@ -65,6 +65,7 @@
--form-element-focus-color: var(--primary-focus); --form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #{$grey-100}; --form-element-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300}; --form-element-disabled-border-color: #{$grey-300};
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #{$red-800}; --form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-900}; --form-element-invalid-active-border-color: #{$red-900};
--form-element-valid-border-color: #{$green-700}; --form-element-valid-border-color: #{$green-700};
@ -112,6 +113,9 @@
--progress-background-color: #{$grey-100}; --progress-background-color: #{$grey-100};
--progress-color: var(--primary); --progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: .5;
// Tooltip ([data-tooltip]) // Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast); --tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse); --tooltip-color: var(--contrast-inverse);

4
scss/themes/default/_styles.scss
View file

@ -138,7 +138,7 @@ a {
// Small // Small
small { small {
--font-size: 87.5%; --font-size: 0.875em;
} }
// Headings // Headings
@ -197,7 +197,7 @@ table {
} }
:not(thead) td { :not(thead) td {
--font-size: 0.875rem; --font-size: 0.875em;
} }
} }

5
scss/content/_accessibility.scss → scss/utilities/_accessibility.scss
View file

@ -10,11 +10,6 @@
// Accessibility // Accessibility
// Change the cursor on busy elements in all browsers (opinionated)
[aria-busy="true"] {
cursor: progress;
}
// Change the cursor on control elements in all browsers (opinionated) // Change the cursor on control elements in all browsers (opinionated)
[aria-controls] { [aria-controls] {
cursor: pointer; cursor: pointer;

55
scss/utilities/_loading.scss Normal file
View file

@ -0,0 +1,55 @@
/**
* Loading ([aria-busy=true])
*/
// Cursor
[aria-busy="true"] {
cursor: progress;
}
// Everyting except form elements
[aria-busy="true"]:not(input):not(select):not(textarea) {
&::before {
display: inline-block;
width: 1em;
height: 1em;
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
vertical-align: text-bottom;
vertical-align: -.125em; // Visual alignment
animation: spinner 0.75s linear infinite;
content: '';
opacity: var(--loading-spinner-opacity);
}
&:not(:empty) {
&::before {
margin-right: calc(var(--spacing) / 2);
}
}
&:empty {
text-align: center;
}
}
// Buttons and links
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a {
&[aria-busy="true"] {
pointer-events: none;
}
}
// Animation: rotate
@keyframes spinner {
to {
transform: rotate(360deg);
}
}

6
scss/content/_reduce-motion.scss → scss/utilities/_reduce-motion.scss
View file

@ -14,9 +14,9 @@
// 3. Remove timed scrolling behaviors when motion is reduced (opinionated) // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
// 4. Remove transitions when motion is reduced (opinionated) // 4. Remove transitions when motion is reduced (opinionated)
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *:not([aria-busy="true"]),
::before, :not([aria-busy="true"])::before,
::after { :not([aria-busy="true"])::after {
background-attachment: initial !important; // 2 background-attachment: initial !important; // 2
animation-duration: 1ms !important; // 1 animation-duration: 1ms !important; // 1
animation-delay: -1ms !important; // 1 animation-delay: -1ms !important; // 1

2
scss/components/_tooltip.scss → scss/utilities/_tooltip.scss
View file

@ -24,7 +24,7 @@
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--tooltip-background-color); background: var(--tooltip-background-color);
color: var(--tooltip-color); color: var(--tooltip-color);
font-size: .85rem; font-size: .875rem;
font-style: normal; font-style: normal;
font-weight: var(--font-weight); font-weight: var(--font-weight);
text-decoration: none; text-decoration: none;