ccchh-website/themes/ccchh/assets/pico-1.5.11/scss/utilities/_loading.scss
2024-01-27 22:47:30 +01:00

59 lines
1 KiB
SCSS

/**
* Loading ([aria-busy=true])
*/
// Cursor
[aria-busy="true"] {
cursor: progress;
}
// Everyting except form elements
[aria-busy="true"]:not(input, select, textarea, html) {
&::before {
display: inline-block;
width: 1em;
height: 1em;
border: 0.1875em solid currentColor;
border-radius: 1em;
border-right-color: transparent;
content: "";
vertical-align: text-bottom;
vertical-align: -.125em; // Visual alignment
animation: spinner 0.75s linear infinite;
opacity: var(--loading-spinner-opacity);
}
&:not(:empty) {
&::before {
margin-right: calc(var(--spacing) * 0.5);
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: calc(var(--spacing) * 0.5);
}
}
&: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);
}
}