mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-27 11:36: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

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;
}