mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 09:06: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)
- [Examples](#examples)
- [Documentation](#documentation)
- [Variations](#variations)
- [Contributing](#contributing)
- [Copyright and license](#copyright-and-license)
@ -47,7 +46,7 @@ There are 3 ways to get started with pico.css:
**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
<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)
- [Tables](https://picocss.com/docs/#tables)
**Components**
- [Accordions](https://picocss.com/docs/#accordions)
- [Cards](https://picocss.com/docs/#cards)
- [Navs](https://picocss.com/docs/#navs)
- [Progress](https://picocss.com/docs/#progress)
**Utilities**
- [Loading](https://picocss.com/docs/#loading)
- [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
- [`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests.

172
css/pico.classless.css
View file

@ -117,7 +117,7 @@ a.secondary, a.contrast {
}
small {
--font-size: 87.5%;
--font-size: 0.875em;
}
h1,
@ -169,7 +169,7 @@ table thead td {
}
table :not(thead) td {
--font-size: 0.875rem;
--font-size: 0.875em;
}
pre,
@ -225,6 +225,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
@ -257,6 +258,7 @@ kbd {
--card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -311,6 +313,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -344,6 +347,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -398,6 +402,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -431,6 +436,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -464,7 +470,6 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--background-color);
color: var(--color);
font-family: var(--font-family);
@ -565,17 +570,17 @@ strong {
sub,
sup {
position: relative;
font-size: .75rem;
font-size: .75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
bottom: -0.25em;
}
sup {
top: -0.5rem;
top: -0.5em;
}
dl dl,
@ -1118,7 +1123,7 @@ select[disabled],
textarea[disabled] {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: .375;
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
@ -1214,10 +1219,10 @@ label > textarea {
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
margin-top: -.125rem;
margin-right: .375rem;
width: 1.25em;
height: 1.25em;
margin-top: -.125em;
margin-right: .375em;
border-width: var(--border-width);
vertical-align: middle;
cursor: pointer;
@ -1237,13 +1242,13 @@ label > textarea {
background-image: var(--icon-checkbox);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
background-size: .75em auto;
}
[type="checkbox"] ~ label,
[type="radio"] ~ label {
display: inline-block;
margin-right: .375rem;
margin-right: .375em;
margin-bottom: 0;
cursor: pointer;
}
@ -1254,7 +1259,7 @@ label > textarea {
background-image: var(--icon-minus);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
background-size: .75em auto;
}
[type="radio"] {
@ -1263,7 +1268,7 @@ label > textarea {
[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
--background-color: var(--primary-inverse);
border-width: .35rem;
border-width: .35em;
background-image: none;
}
@ -1271,12 +1276,12 @@ label > textarea {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
width: 2.25rem;
height: 1.25rem;
width: 2.25em;
height: 1.25em;
border: var(--border-width) solid var(--border-color);
border-radius: 1.25rem;
border-radius: 1.25em;
background-color: var(--background-color);
line-height: 1.25rem;
line-height: 1.25em;
}
[type="checkbox"][role="switch"]:focus {
@ -1291,7 +1296,7 @@ label > textarea {
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1.25rem - (var(--border-width) * 2));
width: calc(1.25em - (var(--border-width) * 2));
height: 100%;
border-radius: 50%;
background-color: var(--color);
@ -1305,7 +1310,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
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;
}
/**
* 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
*/
@ -1893,18 +1861,18 @@ progress::-moz-progress-bar {
background-color: var(--progress-color);
}
@media (prefers-reduced-motion: no-preference) {
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;
animation: progressIndeterminate 1s linear infinite;
}
progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent;
}
progress:indeterminate::-moz-progress-bar {
background-color: transparent;
}
}
@keyframes progressIndeterminate {
0% {
@ -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])
*/
@ -1940,7 +1951,7 @@ progress:indeterminate::-moz-progress-bar {
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
color: var(--tooltip-color);
font-size: .85rem;
font-size: .875rem;
font-style: normal;
font-weight: var(--font-weight);
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
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
*:not([aria-busy="true"]),
:not([aria-busy="true"])::before,
:not([aria-busy="true"])::after {
background-attachment: initial !important;
animation-duration: 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

172
css/pico.css
View file

@ -117,7 +117,7 @@ a.secondary, a.contrast {
}
small {
--font-size: 87.5%;
--font-size: 0.875em;
}
h1,
@ -169,7 +169,7 @@ table thead td {
}
table :not(thead) td {
--font-size: 0.875rem;
--font-size: 0.875em;
}
pre,
@ -225,6 +225,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
@ -257,6 +258,7 @@ kbd {
--card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -311,6 +313,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -344,6 +347,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -398,6 +402,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -431,6 +436,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -464,7 +470,6 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--background-color);
color: var(--color);
font-family: var(--font-family);
@ -591,17 +596,17 @@ strong {
sub,
sup {
position: relative;
font-size: .75rem;
font-size: .75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
bottom: -0.25em;
}
sup {
top: -0.5rem;
top: -0.5em;
}
dl dl,
@ -1313,7 +1318,7 @@ select[disabled],
textarea[disabled] {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: .375;
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
@ -1409,10 +1414,10 @@ label > textarea {
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
margin-top: -.125rem;
margin-right: .375rem;
width: 1.25em;
height: 1.25em;
margin-top: -.125em;
margin-right: .375em;
border-width: var(--border-width);
vertical-align: middle;
cursor: pointer;
@ -1432,13 +1437,13 @@ label > textarea {
background-image: var(--icon-checkbox);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
background-size: .75em auto;
}
[type="checkbox"] ~ label,
[type="radio"] ~ label {
display: inline-block;
margin-right: .375rem;
margin-right: .375em;
margin-bottom: 0;
cursor: pointer;
}
@ -1449,7 +1454,7 @@ label > textarea {
background-image: var(--icon-minus);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
background-size: .75em auto;
}
[type="radio"] {
@ -1458,7 +1463,7 @@ label > textarea {
[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
--background-color: var(--primary-inverse);
border-width: .35rem;
border-width: .35em;
background-image: none;
}
@ -1466,12 +1471,12 @@ label > textarea {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
width: 2.25rem;
height: 1.25rem;
width: 2.25em;
height: 1.25em;
border: var(--border-width) solid var(--border-color);
border-radius: 1.25rem;
border-radius: 1.25em;
background-color: var(--background-color);
line-height: 1.25rem;
line-height: 1.25em;
}
[type="checkbox"][role="switch"]:focus {
@ -1486,7 +1491,7 @@ label > textarea {
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1.25rem - (var(--border-width) * 2));
width: calc(1.25em - (var(--border-width) * 2));
height: 100%;
border-radius: 50%;
background-color: var(--color);
@ -1500,7 +1505,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
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;
}
/**
* 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
*/
@ -2088,18 +2056,18 @@ progress::-moz-progress-bar {
background-color: var(--progress-color);
}
@media (prefers-reduced-motion: no-preference) {
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;
animation: progressIndeterminate 1s linear infinite;
}
progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent;
}
progress:indeterminate::-moz-progress-bar {
background-color: transparent;
}
}
@keyframes progressIndeterminate {
0% {
@ -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])
*/
@ -2135,7 +2146,7 @@ progress:indeterminate::-moz-progress-bar {
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
color: var(--tooltip-color);
font-size: .85rem;
font-size: .875rem;
font-style: normal;
font-weight: var(--font-weight);
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
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
*:not([aria-busy="true"]),
:not([aria-busy="true"])::before,
:not([aria-busy="true"])::after {
background-attachment: initial !important;
animation-duration: 1ms !important;
animation-delay: -1ms !important;

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

@ -117,7 +117,7 @@ a.secondary, a.contrast {
}
small {
--font-size: 87.5%;
--font-size: 0.875em;
}
h1,
@ -169,7 +169,7 @@ table thead td {
}
table :not(thead) td {
--font-size: 0.875rem;
--font-size: 0.875em;
}
pre,
@ -225,6 +225,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
@ -257,6 +258,7 @@ kbd {
--card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -311,6 +313,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -344,6 +347,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -398,6 +402,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -431,6 +436,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -464,7 +470,6 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--background-color);
color: var(--color);
font-family: var(--font-family);
@ -531,17 +536,17 @@ strong {
sub,
sup {
position: relative;
font-size: .75rem;
font-size: .75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
bottom: -0.25em;
}
sup {
top: -0.5rem;
top: -0.5em;
}
dl dl,
@ -1084,7 +1089,7 @@ select[disabled],
textarea[disabled] {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: .375;
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
@ -1180,10 +1185,10 @@ label > textarea {
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 1.25rem;
height: 1.25rem;
margin-top: -.125rem;
margin-right: .375rem;
width: 1.25em;
height: 1.25em;
margin-top: -.125em;
margin-right: .375em;
border-width: var(--border-width);
vertical-align: middle;
cursor: pointer;
@ -1203,13 +1208,13 @@ label > textarea {
background-image: var(--icon-checkbox);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
background-size: .75em auto;
}
[type="checkbox"] ~ label,
[type="radio"] ~ label {
display: inline-block;
margin-right: .375rem;
margin-right: .375em;
margin-bottom: 0;
cursor: pointer;
}
@ -1220,7 +1225,7 @@ label > textarea {
background-image: var(--icon-minus);
background-position: center;
background-repeat: no-repeat;
background-size: .75rem auto;
background-size: .75em auto;
}
[type="radio"] {
@ -1229,7 +1234,7 @@ label > textarea {
[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
--background-color: var(--primary-inverse);
border-width: .35rem;
border-width: .35em;
background-image: none;
}
@ -1237,12 +1242,12 @@ label > textarea {
--background-color: var(--switch-background-color);
--border-color: var(--switch-background-color);
--color: var(--switch-color);
width: 2.25rem;
height: 1.25rem;
width: 2.25em;
height: 1.25em;
border: var(--border-width) solid var(--border-color);
border-radius: 1.25rem;
border-radius: 1.25em;
background-color: var(--background-color);
line-height: 1.25rem;
line-height: 1.25em;
}
[type="checkbox"][role="switch"]:focus {
@ -1257,7 +1262,7 @@ label > textarea {
[type="checkbox"][role="switch"]:before {
display: block;
width: calc(1.25rem - (var(--border-width) * 2));
width: calc(1.25em - (var(--border-width) * 2));
height: 100%;
border-radius: 50%;
background-color: var(--color);
@ -1271,7 +1276,7 @@ label > textarea {
[type="checkbox"][role="switch"]:checked::before {
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;
}
/**
* 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
*/
@ -1859,18 +1827,18 @@ progress::-moz-progress-bar {
background-color: var(--progress-color);
}
@media (prefers-reduced-motion: no-preference) {
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;
animation: progressIndeterminate 1s linear infinite;
}
progress:indeterminate[value]::-webkit-progress-value {
background-color: transparent;
}
progress:indeterminate::-moz-progress-bar {
background-color: transparent;
}
}
@keyframes progressIndeterminate {
0% {
@ -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])
*/
@ -1906,7 +1917,7 @@ progress:indeterminate::-moz-progress-bar {
border-radius: var(--border-radius);
background: var(--tooltip-background-color);
color: var(--tooltip-color);
font-size: .85rem;
font-size: .875rem;
font-style: normal;
font-weight: var(--font-weight);
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
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
*:not([aria-busy="true"]),
:not([aria-busy="true"])::before,
:not([aria-busy="true"])::after {
background-attachment: initial !important;
animation-duration: 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 {
--font-size: 87.5%;
--font-size: 0.875em;
}
h1,
@ -112,7 +112,7 @@ table thead td {
}
table :not(thead) td {
--font-size: 0.875rem;
--font-size: 0.875em;
}
pre,
@ -168,6 +168,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
@ -200,6 +201,7 @@ kbd {
--card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -254,6 +256,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -287,6 +290,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -341,6 +345,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -374,6 +379,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -407,7 +413,6 @@ html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tab-size: 4;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background-color: var(--background-color);
color: var(--color);
font-family: var(--font-family);
@ -534,17 +539,17 @@ strong {
sub,
sup {
position: relative;
font-size: .75rem;
font-size: .75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
bottom: -0.25em;
}
sup {
top: -0.5rem;
top: -0.5em;
}
dl dl,
@ -1253,7 +1258,7 @@ select[disabled],
textarea[disabled] {
--background-color: var(--form-element-disabled-background-color);
--border-color: var(--form-element-disabled-border-color);
opacity: .375;
opacity: var(--form-element-disabled-opacity);
}
input[aria-invalid],
@ -1371,10 +1376,6 @@ table[role="grid"] tbody tr:nth-child(odd) {
/**
* Accessibility & User interaction
*/
[aria-busy="true"] {
cursor: progress;
}
[aria-controls] {
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 {
--font-size: 87.5%;
--font-size: 0.875em;
}
h1,
@ -165,7 +165,7 @@ table thead td {
}
table :not(thead) td {
--font-size: 0.875rem;
--font-size: 0.875em;
}
pre,
@ -221,6 +221,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #d5dce2;
--form-element-disabled-border-color: #a2afb9;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #C62828;
--form-element-invalid-active-border-color: #B71C1C;
--form-element-valid-border-color: #388E3C;
@ -253,6 +254,7 @@ kbd {
--card-sectionning-background-color: #fafbfc;
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -307,6 +309,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -340,6 +343,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
@ -394,6 +398,7 @@ kbd {
--form-element-focus-color: var(--primary-focus);
--form-element-disabled-background-color: #2c3d49;
--form-element-disabled-border-color: #415462;
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #B71C1C;
--form-element-invalid-active-border-color: #C62828;
--form-element-valid-border-color: #2E7D32;
@ -427,6 +432,7 @@ kbd {
--card-sectionning-background-color: #17232c;
--progress-background-color: #23333e;
--progress-color: var(--primary);
--loading-spinner-opacity: .5;
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

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="#navs" class="secondary">Navs</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>
</ul>
</details>
@ -103,7 +109,7 @@
</hgroup>
<p>There are 3 ways to get started with pico.css:</p>
<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>
<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>
@ -199,7 +205,6 @@
</code></pre>
</article>
<p>There are 2 ways to customize your version of Pico.css:</p>
<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>
@ -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>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
</details>
</section><!-- ./ Docs: Grid -->
<!-- Docs: Horizontal scroller -->
@ -840,7 +844,6 @@
&lt;/<b>script</b>&gt;</code></pre>
</article>
<p>Others input types:</p>
<article aria-label="File browser, range slider, date, time, color examples">
<label for="file">File browser
@ -1036,7 +1039,6 @@
&lt;/<b>details</b>&gt;</code></pre>
</article>
</section><!-- ./ Docs: Accordions -->
<!-- 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>
</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>
<article aria-label="Indeterminate progress bar example">
<progress id="indeterminate-progress"></progress>
<script>document.getElementById('indeterminate-progress').indeterminate = true;</script>
@ -1186,9 +1186,33 @@
&lt;/<b>script</b>&gt;</code></pre>
</article>
</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 -->
<section id="tooltips">
<hgroup>

3
scss/components/_progress.scss
View file

@ -52,6 +52,8 @@ progress {
background-color: var(--progress-color);
}
// Indeterminate state
@media (prefers-reduced-motion: no-preference) {
&: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;
@ -64,6 +66,7 @@ progress {
}
}
}
}
@keyframes progressIndeterminate {
0% {

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

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

2
scss/content/_form.scss
View file

@ -220,7 +220,7 @@ textarea {
&[disabled] {
--background-color: var(--form-element-disabled-background-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,
sup {
position: relative;
font-size: .75rem;
font-size: .75em;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25rem;
bottom: -0.25em;
}
sup {
top: -0.5rem;
top: -0.5em;
}
// 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/table"; // table, tr, td, ...
@import "content/code"; // pre, code, ...
@import "content/accessibility"; // -ms-touch-action, aria-*
@import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Components
@ -34,7 +33,9 @@
@import "components/card"; // article
@import "components/nav"; // nav
@import "components/progress"; // progress
@import "components/tooltip"; // data-tooltip
// Reduce motion
@import "content/reduce-motion"; // prefers-reduced-motion
// Utilities
@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
@import "content/typography"; // a, headings, p, ul, blockquote, ...
@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-checkbox-radio"; // type=checkbox, type=radio, role=switch
// @import "content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "content/table"; // table, tr, td, ...
// @import "content/code"; // pre, code, ...
@import "content/accessibility"; // -ms-touch-action, aria-*
// @import "content/miscs"; // hr, template, [hidden], dialog, canvas
// Components
@ -54,7 +53,9 @@ $enable-important: false;
// @import "components/card"; // article
// @import "components/nav"; // nav
// @import "components/progress"; // progress
// @import "components/tooltip"; // data-tooltip
// Reduce motion
// @import "content/reduce-motion"; // prefers-reduced-motion
// Utilities
// @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-disabled-background-color: #{$grey-800};
--form-element-disabled-border-color: #{$grey-700};
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #{$red-900};
--form-element-invalid-active-border-color: #{$red-800};
--form-element-valid-border-color: #{$green-800};
@ -112,6 +113,9 @@
--progress-background-color: #{mix($grey-900, $grey-800)};
--progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: .5;
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--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-disabled-background-color: #{$grey-100};
--form-element-disabled-border-color: #{$grey-300};
--form-element-disabled-opacity: .5;
--form-element-invalid-border-color: #{$red-800};
--form-element-invalid-active-border-color: #{$red-900};
--form-element-valid-border-color: #{$green-700};
@ -112,6 +113,9 @@
--progress-background-color: #{$grey-100};
--progress-color: var(--primary);
// Loading ([aria-busy=true])
--loading-spinner-opacity: .5;
// Tooltip ([data-tooltip])
--tooltip-background-color: var(--contrast);
--tooltip-color: var(--contrast-inverse);

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

@ -138,7 +138,7 @@ a {
// Small
small {
--font-size: 87.5%;
--font-size: 0.875em;
}
// Headings
@ -197,7 +197,7 @@ table {
}
: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
// 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)
[aria-controls] {
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)
// 4. Remove transitions when motion is reduced (opinionated)
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
*:not([aria-busy="true"]),
:not([aria-busy="true"])::before,
:not([aria-busy="true"])::after {
background-attachment: initial !important; // 2
animation-duration: 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);
background: var(--tooltip-background-color);
color: var(--tooltip-color);
font-size: .85rem;
font-size: .875rem;
font-style: normal;
font-weight: var(--font-weight);
text-decoration: none;