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

19
scss/components/_progress.scss
View file

@ -52,15 +52,18 @@ progress {
background-color: var(--progress-color);
}
&: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;
// 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;
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
}
}
}

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;