mirror of
https://github.com/picocss/pico.git
synced 2025-04-26 03:06:14 -04:00
Add a loading indicator for aria-busy
This commit is contained in:
Lucas Larroche
parent
0e7894c48e
commit
dc42ec62f3
25 changed files with 517 additions and 301 deletions
190
css/pico.css
190
css/pico.css
|
|
@ -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,17 +2056,17 @@ progress::-moz-progress-bar {
|
|||
background-color: var(--progress-color);
|
||||
}
|
||||
|
||||
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;
|
||||
@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 {
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue